When one think of responsive design as a web designer, they still think of screen sizes in the process of designing the website such as 320, 768 and 1024 pixels. However, there are certain caveats that are involved when taking this approach instead of designing a website keeping its content in mind. So, here are 3 reasons why you must not design for screen width:
#1: Other Devices with differing screen width suffer
Several sites actually follow a standard procedure which involves using breakpoints for the aforementioned widths and construct 3 layouts which center closest to the nearest width. This might work fine since you have a simplified version for the mobile and a tablet but this approach won’t help if there are other devices with differing screen sizes. Put simply, the users won’t be able to view
the website in a format that helps them experience the website best!
#2: Think in percentages, and not pixels
Always set the dimensions of your layout in terms of percentage – and not in terms of pixels. Doing so will ensure that the content being displayed will shrink and expand proportionally depending on the screen width of the device. A thumb of rule would be to ensure that your content should also fill 90% of the screen, no matter what the width is, in terms of pixels.
#3: Content is still King
Keeping this adage in mind, it is important to note that you should pick your break points based on where your content breaks and not your screen width. The reason for this is because, with a number of devices released every month with different screen
widths, it’s impossible to decide on consistent break points for all these devices. So, let your content decide!