The smartphone users are increasing that have made it, even more, imperative to design for a wide range of screen sizes. Some consider creating a separate mobile-only websites, which is useless unless you have time, money and technical skills to manage both the websites. Luckily, there’s a simpler approach that lets you build a single site that adapts to different screen widths, thanks to the topic of this article, the responsive website design.

 

Why do we need responsive website design?

If you are reading this article from your smartphone, you must be appreciating the website’s responsive design which doesn’t let you scroll the page vertically to read long lines. The responsive web design is becoming an industry standard, and indeed, it’s important from the aspect of user experience. Before the CSS media queries, the designers have no other option than to have a dedicated mobile site for it’s mobile users. This not only doubles the maintenance costs but you’ll also need to update the sites individually. But thankfully, the RWD is there, so no worries.

Without RWD, it would be tough to read four columns web page on a phone whose screen is just 320 pixels wide or to read a line that spreads across a column of a text that’s spread across the 2560 pixels of a large desktop monitor. So to get out of this predicament, Web designer pioneer, Ethan Marcotte coined the term, “Responsive Web Design”. RWD lets to change the entire layout of the site depending upon the device’s screen size, to create the most readable presentation for each device.

 

Being Responsive

You won’t call a website responsive with just one column that has always the same width on any screen. It may look great on a small screen but it would look really weird on the large screens. Users would have to zoom in to read the text. A fully responsive website is a one in which each element on the page adjusts itself with the width no more than the device width. You have to provide the meta tag in your HTML file, which goes between the head tags like this.

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

 

Although you can make each and every element on the page responsive, it doesn’t mean that you can provide the original experience of the website on mobile. Here are some the strategies that you can use to make your responsive design better.

 

1. Adjust columns and flexible widths. Multiple side by side columns looks great on a website that is viewed on a large screen monitor, but not so much on a phone or a tablet. Bringing the page down to 2 or fewer columns would make it more readable. You can make your content widths flexible, by changing the values of width to 100% or auto. This would automatically spread your content to the end of the screen, leaving no space.

2. Tighten up the white space. Ample space between the page elements adds a breathing room to a design on a 23-inch monitor, but it creates a scattered design and wasted space on a phone’s screen, forcing visitors to scroll excessively. Shrinking margins and padding would help you to fit content inside phone screen as well.

3. Adjust the font sizes. Unlike monitors, you won’t find large and bold headings pleasing on a handheld devices. Though the headings should be distinguished, there shouldn’t be huge variations in the sizes. Apart from it, you should keep your font-size a bit larger so users don’t have to zoom.

4. Changing navigation menus. As the browser window gets shorter, the buttons on your navigation menu span across multiple lines. Unfortunately, you can’t just create a responsive navigation menu with CSS. Like most of the web designers do, you can use Javascript to create an off canvas menu to fit all of your buttons there in a list format.

5. Resize images and backgrounds. If you put a 960-pixel banner on the page, no phone would display it without zooming out. Either you can use a smaller, resized image or use the CSS background image property to set the image, and change the widths to 100%. Now, if you open up the image, it would fit in there perfectly.

 

Do RWD matters?

Mobile web usage stats shows 72percent of users accessed the web from smartphone. This is why Responsive website design matters

Mobile usage usage stats for 2013 – Statista.com

Of course, yes! Almost 73% of Internet users browsed through mobiles in 2013. That’s a surprisingly amazing percentage if you take into account the other means of browsing the web, which includes personal computers as well. So you have to make a website that enhances the user experience on the site who use smartphones to access web. And as said, you can go either with creating a personal dedicated mobile site or just making the primary one responsive, up to you!

If you choose to create two separate sites, then it’s just the matter of new site’s maintenance costs and synchronising your site with the server. But, unlike few, if you choose the responsive design for your website, you have to start with the default design. You have to decide between the Desktop first design or Mobile first design.

 

Desktop First. If you prefer the desktop first design, then you can polish your website so that it looks great on any large screen monitor. This is your base design and after that, you can add the additional media queries for subsequent small screen devices that adjust the content to fit on the screen. This approach is generally preferred by most of the web designers.

 

Mobile First. Unless your website is targeted to receive audience from mobile users, you shouldn’t prefer this. It is just the flip of the Desktop first design approach. Just put the small-screen media queries in your main stylesheet and then refine the design as the screen size increases.

 

Conclusion

Responsive website design makes it easy for the visitors to extract the content from the site, and they could concentrate more on reading than just scrolling. Though making your website responsive adds large chunks of code and makes the design complex, but ultimately RWD makes the site more readable and cut costs of the specific screen dedicated websites. After all, that’s why it was born for!

Do share your thoughts in the comments. 

Share on Facebook Tweet on Twitter Post on Google+ Buffer