google linked-in facebook office phone mail facebook_r twitter_r google_r instaram_r github_r linkedin_r downloads notifications star sign

Why do you need to care about Responsive Web Design?

by Serhiy Valchuk
Serhiy Valchuk avatar

These days your site visitors have wide range of options to choose from when it comes to screen size:

  • desktop computer monitors with huge screen sizes
  • laptop with their usually middle-sized monitors
  • pads of different sizes
  • mobile phones with tiny to almost pad-sized big displays

And to be sure all these different users have great experience visiting and using your website you need to make your website pages look equally good on different screen sizes.

This is where Responsive Web Design comes into the game! Keep reading to get an idea what is Responsive Design, why do you need to care about it at all and how to make your site look great on most popular screen sizes.

What is Responsive web design?

Kayla Knight gave a good definition for Responsive web design in his article Responsive Web Design: What It Is and How To Use It:

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

If put simply, website is responsive when it dynamically adopts to visitor’s screen width. It looks equally well for wide and narrow displays.

Why responsive?

Mobile phones aren’t only for calls today. Modern mobile phones are true computers. They have access to the Internet and they can display websites and applications.

Websites development is progressing. While developing websites, we may hear the expression Responsive web design very often.

So the reason number one you need to make your site Responsive: provide equally good experience to all your website visitors, regardless of their device screen size. This will increase your users happiness and decrease pages bounce rate 😉

How to implement Responsive web design?

There are a few different approaches, but so call method mobile first becomes most popular these days.

Mobile first method means that the original layout of the site is designed for small screens. Because the visible region is small, it is necessary to focus on the main parts of the layout, place them in a visible area of ​​the screen. And forget about everything else.

Next step is to design layout for larger screens, adding other bells and whistles for larger (desktop) screens only. It is implemented with so called media queries.

So if you’re just starting out with your new website from the scratch, best option is to consider responsive layout from the very beginning. Implement mobile layout first, then improve it and complicate for larger screens.

How To Optimize Old Theme?

What to do with old sites with layout that is not designed to be adopted for mobile smaller screens?

The ideal approach would be to update the design, but if not possible, still using media queries can help a lot.

A few starting points when optimizing existing layouts:

  1. Remove fixed width. Make page stretched the entire width of the screen.

  2. Remove columns. Show column with content first.

  3. Increase touched elements.

  4. Make other changes to improve usability: up

These changes are very dependent on the structure of the layout, its flexibility and consistency of html elements. Sometimes you’ll also have to update HTML code a lot.

Further Reading:

We hope this short article will help you check if your current website is Responsive for your key visitors and define the next steps to fix any related issues.

 

2 Comments

  1. Rohit pareek

    Hello ,

    First I would like to say thank you to about your blog post I had to much confusion about Response web design but your detail elaboration on Responsive I like it Really but you did not tell about how to apply this on site like person do not me type willing to apply on site or blog there should be little bit about technical terms which I need to follow to easily put it ons site content is good but there must be graphic to make understand it if you use like two graphic of same site one is without Response and one is with response like resolution set which width and height then blog can be get maximum response

    I am not advising you but I Felt when I came to your blog I hope you will understand me

    Reply
    • Vitaliy Podoba

      Hi Rohit,

      You’re right. This article is rather short intro to What is Responsive Web Design. Shortly we plan to post more on this topic, specifically about technical details, with step by step instructions.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *