Responsive web design best practices

Make the web design of your solution fully responsive, and it will look flawless for any user.

The secret lies in the modern tendency to utilize various devices with different screen sizes for entering the Web. The times when you could enjoy the Internet only at home sitting in front of your PC display passed long ago. Now everybody can put the World Wide Web in a small pocket and take it almost anywhere his or her heart desires.

So, if the design of a web app plays well with a laptop, but can’t successfully adjust to a smartphone screen, software developers are likely to be criticized. To avoid such a nuisance, software engineers should spare no effort to make web design as responsive as possible.

What can facilitate the process of creating responsive web pages?

Actually, there are many factors to keep in mind to make web design responsive. But luckily, there are certain ways of alleviating and speeding up the process. UI libraries and frameworks provide developers with a number of ready-made UI elements that help create outstanding responsive web apps.  Such canned solutions save app and website creators from the number of mistakes and accelerate projects. All you need is to choose a JavaScript UI framework that suits your tasks perfectly. It's also important to pay attention that your framework should be built in accordance with material design guidelines.

The key pieces of advice for making web design responsive:

• Set the viewport

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

Apply a viewport meta tag to your web app to make it look good on various screens. This will enable the scaling of the page and its contents.

<meta name="viewport" content="width=device-width">

The width=device-width adapts the page width to screen-width of a device. To put it in a nutshell, because of this tag a browser knows that you need a viewport fitting the width of a mobile phone screen. You can set the max width manually and make it, say, 320 px like this:

content="width=320px"

The initial-scale=1.0 part sets the initial zoom level when a user loads a page for the first time. One viewport pixel is equal to one CSS pixel. User-scalable, maximum-scale and minimum-scale properties control how a user is able to zoom the page in or out. Pay attention that "1.0" does not zoom. If the variable is set to "2.0", then a user will be able to zoom in a page by a factor of 2, etc.

• Scale the contents to fit a viewport

The main problem of unresponsive websites and web apps is that a user has to scroll the contents horizontally on a smartphone, the screen size of which requires vertical scrolling. Zoom in and out is also far from being convenient. And even if you managed to create a sufficiently responsive web page, it still might be hard to get rid of horizontal scrolling. What is the reason for this?

It usually happens because of using massive elements with a fixed width. The source of this problem lies in the variety of devices. There are many smartphones and tablets with different screen widths these days. When you fix the minimal size, you are likely to go wrong with it, because in this case, the image may turn out to be bigger than the smartphone width. A user will still have to scroll or, what is worse, won't be able to see the whole image.  

The situation is the same with setting the max image width. If you set the CSS width property to 100%, the image becomes responsive and can scale up and down. But it may cause a problem: the image or text can be scaled up to be larger than its original size. And surely, it won't look beautiful.

An ideal solution is to use the max-width property for images instead. If the property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

img src="img_girl.jpg" style="max-width:100%; height:auto;"

• Employ media queries

With media queries assistance you can apply CSS styles suitable to almost any device. A media query is a CSS technique introduced in CSS3. It allows changing CSS styles the choice of which depends on characteristics of the device such as screen resolution, its height, and width. A media query uses the @media rule to include a block of CSS properties only if a certain condition is true for a particular device.

@media (query) {
 /* CSS Rules used when query matches */
}

It's also recommended to use min-width instead of min-device-width. Some developers think that these terms mean the same. And it's a common mistake because min-width is primarily related to a viewport that is narrower than a min-device-width. This lack of understanding leads to unpleasant consequences. The contents risks to appear beyond the viewport. No user would enjoy this.

You've probably already noticed that using relative values can save you from unexpected mistakes. For example, fixing the width at 320px isn't a good idea. But if you make it 100% like in the example below, you won't be wrong. The page won't be able to get wider or narrower than the screen of the device.

div.fullWidth {
 width: 100%;
}

• Choose the most appropriate breakpoints

A breakpoint is usually required when you have to change the number of columns (the main sidebar primary sidebar, secondary sidebar) at a web page to make it responsive. For example, the typical breakpoint happens when the sidebar is dropped below the main content to make everything look fine on smaller devices.

Some developers prefer relying on the most popular resolutions to set the breakpoints. And it's a reasonable choice. But one should keep in mind that the best tactic to follow is a 'mobile first' approach. It means that the development should always start from creating the version for a smartphone, and what is more, for the smallest one. It helps to find out the most important information on a web page. And later it will be easier to come up with the breakpoints for bigger screens.

Example for a smaller screen:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

Example for a bigger screen:

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Conclusion

Creating a digital solution that can perfectly adjust to any kind of screens is a demanding task. Web developers should know a bevy of tricks to make a web page responsive.  They can either follow the recommendations from this article or save themselves from a lot of trouble and turn to the ready-made elements from UI libraries.

Photo by Tranmautritam