Responsive Web Design

When websites and apps were created a bit over 10 years ago, no one even thought of mobile web applications. Good screens were at best if they were full HD, and very rarely people would use something like 24 inches or 27 inches’ screen size.

Today, the situation is much different. There are a whole range of handheld devices and most of them have higher resolution when compared to what was there a few years ago.

Device screens have evolved, resolutions have increased, not only that but you also now have wide screens, curved screens, and diagonal sizes going well over 40 inches. This all comes with a new set of possibilities but also a new set of problems that developers and testers need to solve. The more the device fragmentation increases so does the need to create a responsive web design that will render properly on different resolutions.

In this guide, you will find top responsive web design challenges and their solutions.

Viewport

Viewport is the visible area for the user . It varies from device to device and is smaller on a mobile phone when compared to a desktop.

Earlier webpages were consumed only from the desktop. Then, people started surfing the internet using tablets and mobile phones. At this point fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit them to the screen.

With the help of the viewport tag in HTML, one can control the viewport parameters such as height, width, scale and resolution.

Using the meta tag is essential to match the page compatibility to the device screen. When designing a page, designers lay out the elements in the page based on what the viewport can handle.

What happens without this meta tag is that the device renders on the actual, much higher resolution, and then tries to fit it into the much smaller one of the mobile browser by scaling. This results in broken design and things appearing zoomed out. By adding this meta tag, you tell that you want to render it in this smaller browser viewport, which can be then targeted by media queries in CSS.

Here is an example of the meta tag.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0">

Media queries

Media queries in CSS are used to apply CSS rules to specific targets. With them, you could adjust sizes depending on screen width. But for this to work on mobile devices, you would need to use the previously stated meta tag.

You could try to target every device separately with these queries, but that would be too difficult, and sadly there is no fixed resolution size you could use for mobile or desktop versions. The only thing you could do is research, and figure out which devices most of your users use.

BrowserStack has compiled a list of devices frequently used by users across the globe. It is essential that you identify and test on the right devices.

Now with that being said, you usually want to have two or three different categories and try to target them — Desktop, mobile and tablet. Once you identify your device targets you need to identify and define a responsive design breakpoint.

Other testing tools

Once your application design is done, and you implement it. You do want to ensure everything still works as expected. And that requires a lot of testing on different browsers, operating systems and screen sizes. One way to do it is by using the browser inspector tool, which is usually opened by using the f12 key. However, they only come with a few built in screen and internet speed versions. If you want some good tool that comes with everything out of the box, you might consider BrowserStack Live. Using it, not only you could test your application behavior with different internet speed, but also in different resolutions and operating systems as old as Android v2, and as new as Windows 11.

Conclusion

If you opened this article hoping to have a silver bullet solution, I am sorry to disappoint you. There is no such thing. Today’s only kind of consensus is to design first for mobile, and adjust for desktop. But most important is, who is using your application, and how. If your application is used as a company software where 90% or more of the users access it by company laptop, it is logical to build it first for desktop. You would still need to make proper research on their screens. After that, you can use the above-mentioned methods to properly structure it and implement it.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.