Skip to content

Responsive web design

November 7, 2014

Why Responsive?

Websites are no longer restricted to desktop viewing. Smartphones and tablets take the lion’s share when it comes to browsing. That means a website should look and perform well on the mobile devices just as they do on a laptop or desktop. Until a few years back, a lot of websites had a mobile version of it (some still do, unfortunately). That works unless you are not concerned about SEO and ranking. Google, for example, does not recommend a different website for mobile viewing. So how do we make a website great across devices? With a responsive design approach.

How?

There are 3 main concepts to make a website responsive:

  1.  Fluid layout
  2.  Flexible images
  3.  Media queries

However, mobile browsing is not just about the size of a div or an image. It is also about how much information is presented in a smaller screen and how it is presented without crowding the real estate. That then brings us to the next big concept:

Mobile-first approach

Mobile-first web design was formed with the evolution of progressive enhancement from graceful degradation. So instead of removing elements as the device size goes down, you start with the most basic amount of page elements that function best on the mobile screen and add fluff to it as the screen size increases. This is a much better approach than scaling down because you start with the bare minimum and create the most aesthetic design at the lowest level and make it shinier as you go. Your end products at the smallest screen and the largest one are both at their best and do not look like a patched up work that looks like a shaky house of cards.

Mobile-first + Responsive design

I saw this quote by Bruce Lee in a web design blog (which I am sorry to say, I don’t remember. I really do want to credit the author) and it made so much sense:

Bruce-Lee-Quote-Be-like-Water

This is what we need to do. Create the mobile version of the page with the basic CSS classes. Then use media queries and view port sizes to change the styles with screen size. What you end up with is a website that looks great no matter what your browser size is or what the device is.

I am not going into the details of how exactly a responsive website is created. There are tons of blogs and websites that explain these. I would like to list a few here for reference:

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

In conclusion, call it mobile-first, responsive, adaptive or whatever it may be, it all ultimately comes to providing the same great user experience across devices and browsers. Remember, sometimes less is more. Happy coding!

Advertisements
One Comment leave one →
  1. February 24, 2016 8:59 am

    Responsive web design is very important. Great post!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: