Architecture & DesignTop 10 Best Practices for Building Responsive Web Apps

Top 10 Best Practices for Building Responsive Web Apps

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

With so many devices on the market, a responsive UI is a mandate. It’s generally a part of the requirement for any new application being built. The UI responsiveness may also be required for different screen resolutions on different laptops, not just for phones or tablets. There are many solutions available to make a website responsive; an example would be to use a bootstrap and/or use media queries.

In this article, we will learn best practices for responsive web design and how we achieve it, with examples.

Overview

The important points to remember when designing responsive applications is that the experience should be the same, whether the user views the page on a laptop or any other mobile device. When we talk about the experience being the same, the following points are worth mentioning:

Layout of the Page

If the page on a laptop screen has three columns in a row, the same UI depicted on a tablet may have two columns in a row and a phone may have one column; this determination is based on the width of the device. The UI for tablets or phones displays one or two columns in a row and wraps the other columns to the next row, as shown in Figure 1:

BestPract
Figure 1: Sample screen layouts

This brings up the concept of grids. Grids are generally used to define the page layouts using the rows and columns within which the content is hosted. A popular option for a grid is Bootstrap, which has features that can be readily used. In combination with Bootstrap, media queries also are used to define the break points.

Image Size and Quality

The image size required on a laptop screen is of a bigger size and higher resolution; if a smaller resolution is stretched to fit on a large screen, it might look distorted. As a best practice, use the same images, or different images of different sizes for different resolutions.

Font Types and Sizes

A header with a font size of 70 pixels and font weight ‘bold’ will look good on a laptop screen, but will not look good on a tablet or a mobile. It is also important that the fonts are also scaled/skewed based on the device that we are using.

Selective Display of Contents

On a larger screen, we may display many contents as space is available, but on smaller screens, such as a tablet or phone, there will not be enough space to fit all the contents. So, selectively we also can choose to show or hide sections of data.

Navigation

On larger screens, we have a full-blown menu for navigation, but on smaller screens because the width is less, the menu is shown only as an icon and, when clicked, the menu appears vertically. This can be implemented by using the responsive navbar feature of Bootstrap, and other plugins also are available.

Let’s understand the preceding concepts with the help of examples. We have a Cascading Style Sheet (CSS) defined below; it’s dependent on the resolution of the device. These are media queries used to set break points based on screen width:

 1. /*MEDIA QUERIES
 2. ---------------------------------------------*/
 3. @media only screen and (min-width: 320px) {
 4.    .home .hero .hero-img {
 5.       background: url(../img/trans-overlay.png)
          center center repeat,
          url(../img/home-hero.png)
          50% bottom no-repeat, #bbdbf5;
 6.    }
 7.    .home .content .landing-featured .left {
 8.       font-size: 20px;
 9.       color: #ffb612;
10.       width: 10%;
11.       height: 100%;
12.       margin: 20px 0 0 0;
13.    }
14. }
15. @media only screen and (min-width: 480px) {
16.    .home .content .landing-featured .left {
17.       font-size: 34px;
18.       margin: 12px  0 0 0;
19.    }
20. }
21. @media only screen and (min-width: 768px) {
22.    .home .hero .hero-img {
23.       background: url(../img/home-hero.png)
             center bottom no-repeat, #bbdbf5;
24.       background-position-x: 275px;
25.    }
26.    .home .content .landing-featured .left {
27.       width: 7%;
28.       margin: 15px 0 0 0;
29.    }
30. }
31. @media only screen and (min-width: 992px) {
32.    .home .hero .hero-img {
33.       background: url(../img/home-hero.png)
             130% bottom no-repeat, #bbdbf5;
34.    }
35.    .home .content .landing-featured .left {
36.       font-size: 28px;
37.       width: 13%;
38.       margin: 20px 0 0 0;
39.    }
40. }
41. @media only screen and (min-width: 1200px) {
42.    .home .hero .hero-img {
43.       background: url(../img/home-hero.png)
             center bottom no-repeat, #bbdbf5;
44.       background-position-x: 100%;
45.    }
46.
47.    .home .content .landing-featured .left {
48.       font-size: 40px;
49.       width: 15%;
50.       margin: 14px 0 0 0;
51.    }
52. }
53. @media only screen and (min-width: 1400px) {
54.    .home .hero .hero-img {
55.       background: url(../img/home-hero.png)
             100% bottom no-repeat, #bbdbf5;
56.    }
57. }

Line 3 defines the minimum screen width to be 320px and Line 15 defines the CSS for the minimum screen width as 480px. These are basically the breakpoints; in other words, the CSS between Lines 3-15 is applied for a device that has the width between 320px and 480px. If the device width is greater than 480px, the CSS applied is from Lines 16-19, and so on.

An important point to note here is not all the properties are changed between the two resolutions. If you look at the sample CSS for the 320 min width (Lines 7-12) and for the 480 min width (Lines 16-19) you will see the following statements:

320px (min-width) 480px (min-width)
 7. .home .content .landing-featured .left {
       font-size: 20px;
 8.    color: #ffb612;
 9.    width: 10%;
10.    height: 100%;
11.    margin: 20px 0 0 0;
12. }
16. .home .content .landing-featured .left {
17.    font-size: 34px;
18.    margin: 12px 0 0 0;
19. }

The color, width, and height properties are not overwritten; this means that they will follow in 480 resolution also until overwritten. In the example, we are using min-width to set the breakpoint; we also can use max-width for the same.

Note that the font size has been increased from 20px to 34px as the width increases. This is done similarly for the background images also; for some resolutions it’s repeated, for some it’s 130% stretched, and for some it’s as is.

Summary

In this article, we covered the basic concepts that can help us achieve the responsive UI that is compatible with multiple devices. These are basic design principles that need to be looked into and decided upon before we start any application. These should be a part of the requirement because the clarity on the different devices supported will help design the layout accordingly and increase better UI and developer productivity.

References

http://getbootstrap.com/

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories