An Introduction to Responsive Web Design

— Tagged: responsive web-development HTML5 CSS3

Responsive web design is all the rage these days, and rightfully so! Let's take a look at what is it, what is required, and why it's so great.

What is Responsive Web Design?

Back in May of 2010, Ethan Marcotte wrote an article for A List Apart outlining the principles of Responsive Design. The three technical ingredients for responsive web design are fluid grids, flexible images, and media queries.

Responsive Web design suggests that a design should respond to the user’s environment based on their device’s screen size, platform, and orientation. A user should have an experience that responds to their environment whether they are on a mobile phone, a tablet, or a desktop computer… and let’s not forget gaming consoles or even a screen on a refrigerator. The design should effectively fill the space of the device that the user is using. Your site should create an experience that is “universal,” so a user who first visits your site on a mobile device, and then hours later returns home to their desktop computer, can continue their journey as seamlessly as possible. This helps eliminate the need for a different design for every web-enabled device on the market.

Fluid Grids

You may be familiar with these already. Sometimes called “flexible,” “liquid,” or “elastic,” a fluid design uses relative units (percentages and/or ems) rather than absolute units (pixels).

Flexible Images

Images are not naturally fluid or flexible. They remain the same size and orientation at all sizes of the browser’s viewport and will be cropped if they become too large for their container. In a mobile browser, images may be cut off or displayed out-of-scale compared to the surrounding text content.

The most common solution is to set the max-width of the image to 100%.

img {max-width: 100%;}

Images with this CSS will display at their native dimension so long as there is enough room in the HTML container to do so. If an image is larger than its container, it will be scaled back to be the same size as the container. If the image is smaller than the container, the image will be its default size.

NOTE: Internet Explorer 6 does not support max-width, so if you’re still supporting that browser, then you will need to set the width to 100% in an IE6-specific stylesheet.

Media Queries

In CSS2, we could specify stylesheets for specific media types such as screen or print. Now in CSS3, if a device supports media queries, we are able to look at the capabilities of a device and check for the following items:

  • Width and height of the browser window/viewport
  • Device width and height
  • Orientation (e.g. a phone or tablet in landscape or portrait mode)
  • Device resolution
  • Color

We have two ways of calling media queries: in the call to our CSS file in the head of our document or within the CSS file itself. There is a nice list of the available media types and expressions at cssmediaqueries.com.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 30em)" href="small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 48em)" href="medium.css">

Or within our CSS file:

@media only screen and (max-width: 30em){
    /* All of our styles for this size go here */
}

@media only screen and (min-width: 48em){
    /* All of our styles for this size go here */
}

When the font size of your body is set to 100%, then 1em is equal to 16px. Why you should use ems in media queries.

When using media queries, we also need to include a meta viewport tag in the <head> of our document. This line of code will set the width of the viewport to the device width:

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

The viewport tag above tells the browser to use the device width as the viewport width and disable the initial scale.

NOTE: Media queries are not supported by every browser. Internet Explorer 8 and below do not support them. Respond.js and css3-mediaqueries.js can be served conditionally to add media query support in versions of Internet Explorer lower than 9.

<!--[if lt IE 9]>
    <script src="respond.js"></script>
<![endif]-->

Why is Responsive Design so Great?

  • Your site looks great everywhere on every type and size of device
  • Users do not need to zoom and pinch on smaller devices to read your content
  • A consistent and tailored user experience
  • All pages are available on every device, as opposed to using a mobile-specific site (m.website.com)
  • You’ll save money and time by not maintaining a separate mobile-specific site
  • Content focused
  • SEO friendly and recommended by Google
  • Future proof

Building a responsive site requires a new way of thinking in many respects. You need to look carefully at your content, consider what the goal of the page is, and remove the clutter. Content strategy, or content audit, is extremely important when developing a responsive site. Before you even begin the design phase, you should pare down your content and take inventory of the items you want to appear on a page. Then look again and figure out what you really need on your page.

Want to have your say? Send me a tweet »
Share