What is Responsive Design?

Posted on
by Craig Hall.

The term responsive design is a hot topic with anyone who’s serious about their online presence and it seems like everyone is beginning to offer it in one form or another, yet you may still be asking what IS responsive design? I hope to answer that question in the next few paragraphs and hopefully both of us will come out of this exercise better for the experience.

Mobile browsing is set to outpace desktop browsing in three to five years and shows no signs of slowing. Given we have a multitude of browsers each with their own aspect ratio and viewable area, how do we make something that works for each device? If you have noticed how many manufacturers releasing new devices multiple times a year, creating device specific site(s) hardly seems reasonable, so what do we do? Enter responsive design.

The following techniques are found in almost every responsive site:

Leveraging Media queries in your CSS:

Media queries allow you to ask a device what type of device, browser and browser window dimensions. Using this information, we can choose how to best display the content. We can also make more drastic changes to our page layout by setting “thresholds” for browser sizes at which we need to make a more drastic layout change, this is called a breakpoint.

Implementing Fluid Grids:

Fluid Grids allow your site to expand to fill or shrink to fit (within limits, we’ll get into this later) to the size of your devices browser.

Flexible media & Images:

A flexible image or media element is an image or video element which can be displayed at full size if space permits, yet it can also scale down proportionately in order to display equally well on a device with a smaller viewable area.

It works a little something like this, imagine you’re looking for news on http://www.bostonglobe.com/ from your laptop, you will most likely get a layout with full size pictures, weather, a full size masthead and all the trimmings. Whats happening in the background is first off a “Media Query in CSS, which asks your laptop, what kind of device are you, what is your os, browser and also what are the dimensions of your browser window. Once the site knows what type of device, browser and dimensions you’re viewing at, it can give you a layout which makes the most of your space, which is where a flexible grid comes in to play.

full 3 column version

fig 1. ~ This is the widest layout using a full 3 columns in its layout

A flexible grid is like an accordion, which can expand and contract to fit the available space, whether your browser window is 1200px wide or a mere 800, a flexible grid has got you covered. The grid is basically a set of columns which hold the contents of a site in a neat and orderly fashion, regardless of the width of the window its being viewed within (Laptop1168px wide fig.1). The flexible grid works well on larger browser windows, yet when things start to get small, our media query and its breakpoints have our back.

2 column version

fig.2 ~ This is the in-between layout consisting of only 2 columns

When a browser window gets small, such as a tablet or a mobile phone, the layout we were looking at on a laptop would be impossibly small and illegible on tablet or phone, so the media query says, if the browser is smaller than 768px, wide, change our grid from 3 columns to 2 (this could be a tablet fig.2), if the browser is less than 600px, stack all the content on the site in a single column (which is what happens on a mobile phone fig.3)

fig 3. ~ This is the smallest layout consisting of only 1 column

These are the basics of responsive design, the broader topic of responsive design and its implementation can become complicated quite quickly, yet for the purpose of this introductory article we’ve covered the basics. If you would like to read more about responsive design, try the articles below.

Wikipedia: Responisive design
Smashing Magazine on Responsive Design

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Built in Wordpress — Fueled by The Contrado Group