Beginner's Guide to Responsive Web Design

Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future.

Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times.

What is responsive design?

Let’s just get right into it: Believe it or not, the Think Vitamin blog that you’re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Here are some screenshots of what the design looks like at various screen resolutions:

The first stage of Think Vitamin's responsive design.

The second stage of Think Vitamin's responsive design.

The third and fourth stages of Think Vitamin's responsive design.

It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. If you haven’t read his seminal article about responsive web design, I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form responsive web design; and that’s really what responsive design is, technically. It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. This is one of the main sources of confusion, and in a moment we’ll break things down and take a look at each part.

So, what is responsive design exactly? Actually, a better question to ask might be, what problem does responsive web design solve? Well, as you may have noticed, computers aren’t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web had changed.

The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.

It’s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.

Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we’re addressing, let’s take a look at each part of the solution.

Fluid Grids

The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:

300 / 960 = 0.3125 or 31.25%

If your values don’t work out so neatly, and you get some floating point value with many numbers after the decimal, don’t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

@media screen and (min-width: 480px) {
 
  .content {
    float: left;
  }
 
  .social_icons {
    display: none
  }
 
  // and so on...
 
}

Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.

Again, to see a responsive design in action, simply open this article up on a desktop browser and slowly resize the browser to make it thinner. You should see all the page elements adjusting themselves automagically to fit the new width, going all the way down to the size of a mobile browser.

Resources

Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it. On our high-quality video training service Think Vitamin Membership we have many videos that go in depth on the topic. Here are some links:

Hopefully this article helped, but if you’re still feeling confused about responsive design, don’t be afraid to leave a question or comment. If you’re already utilizing responsive web design in your site or web application, share the link here so we can see!

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

29 comments on “Beginner's Guide to Responsive Web Design

  1. Great post! I have to say that awesome grids like http://cssgrid.net/ really go a long way to help you out with responsive web design, but even if you’re already using one of those, it’s still good to know how the magic is happening! (law of leaky abstractions…)

    • Agreed. Every web designer should have a solid understanding of how this works, because it’s not just the technicals that are different; the aesthetics are different, too. Rather than designing with pixels, RWD makes us design using proportions.

      • I dont agree that mobile specific sites should be replaced by media query sites.  From a user perspective having a non mobile specific site just isn’t as easy to use as a site that is specifically designed for mobile.  Although using media queries can be a “solve all” solution I really don’t think you should be advocating the fact that its the future.  

        • ah, but where this becomes powerful is building the mobile site first and using media queries to scale up the mobile site to a desktop experience. Of course this isn’t horribly feasible until the support is reliable enough to trust main site output to media queries.  

        • ah, but where this becomes powerful is building the mobile site first and using media queries to scale up the mobile site to a desktop experience. Of course this isn’t horribly feasible until the support is reliable enough to trust main site output to media queries.  

  2. Great article.  I’ve been wanting to incorporate this into my sites.  I’ve considered using Less Framework, but after reading this article, I think I may decide to use the techniques mentioned to create my own responsive designs.

    • You should definitely use responsive design, but it shouldn’t be a replacement for a CSS framework. :) I would try checking out the http://cssgrid.net/ framework.

    • You should definitely use responsive design, but it shouldn’t be a replacement for a CSS framework. :) I would try checking out the http://cssgrid.net/ framework.

    • This is just an introductory article, but you can definitely smooth out the transitions between media queries. A simple way to do this is to just use the CSS3 transition property. Chris Coyier does this to great effect on his site at http://css-tricks.com/

    • I think most users will see your content on one device or another. Resizing the browser window isn’t a common task for the everyday user in my opinion. Probably the only exception is changing the device orientation, but I’m not sure if JQuery or CSS3 transitions would handle that.

  3. User expectations browsing with a cell phone are different than when they use a desktop browser; two different worlds. We should be applying media queries to a “SEPARATE” (in every sense: code, content, layout, etc.) version of the site. We should not be downloading desktop versions of HTML and images to a mobile device which is what media queries expect – they demand “everything” to be downloaded first. This is a performance #fail.

    • This is just meant to be an introductory article to the topic, but you can definitely improve the performance of responsive design on mobile devices via a number of techniques. The file sizes of HTML and CSS tend to be fairly negligible (although still worth consideration). However, some code libraries can definitely get quite large, so you should be careful there. The main concerns though, of course, are the images and media that get served to mobile devices. With some additional server-side work, you can definitely serve up more compact media that’s better suited to smaller screens and mobile connections.

      You raise a good point, but in most cases, I still think responsive web design is a net positive.

    • Good point, but creating separate sites is not always practical. Media queries are a great way to optimize the ux for a range of devices. It’s pros outweigh the cons in some cases.

  4. Nice but no one is addressing slideshow galleries and the like. There’s one script that I know of that kinda handles this very common aspect of web sites. 

      • it’s in those little $9 “a book apart” books from the “a list apart crew”

        • Ethan mentioned this briefly in the Responsive Web Design book (A Book Apart), and offered two solutions to serve different images for different devices. He also mentioned adding the whole slideshow via JavaScript rather than simply hiding it from the user, so it will only be downloaded on larger screens (potentially on desktop only). Of course, if JS is disabled in the browser, the slideshow won’t show up on desktop either.

  5. I partly agree that there is some scope for responsive design, but if you sat down and weighed up the time and costs involved of restyling everything compared to using a framework like Jquery Mobile which gets you off the ground running you could be wasting your time.

  6. “…computers aren’t the only piece of hardware with a web browser anymore.”
    Perhaps this is the main reason is the main problem responsive design is solving, but to me the most interesting aspect is that we’re now faced with a seminal shift – I’m not talking about the techniques of RD, but the design mindset it inspires – in the way digital content is displayed. 

    Up until now most websites have been placed on a digital canvas inside your browser. With or without a visible frame/background etc. the majority of websites have a fixed width (960px width has been a popular standard), and are placed either in the middle or to the left of your browser window. What RD is teaching us, or perhaps reminding us, is that there is no need for this container inside the browser window. The browser window IS the container, and finally we have the tools necessary to make the content fit it, no matter what size it is.

    Of course, catering for all media devices is very important, but in this respect, responsive design would still have been relevant even if we were only dealing with desktop computers. 

  7. Jeffery Zeldman had a good article on his blog a few weeks back where he pontificated that responsive design was more than just fluid CSS layouts and media queries but in actuality covered any design that shifts to respond to a new viewing medium. Basically he reckoned that RD wasn’t just about using certain techniques but rather an entire principle and it shouldn’t matter how you accomplish it. Personally I think he’s on to something because yeah, it shouldn’t matter if you load an entire new site if someone views it on an iPad, for instance, so long as the experience of using it is best altered to suit the new environment – how you do it is irrelevant.

    I think it’s very exciting territory as we’ll (hopefully) start to see more web sites that take advantage of things like smart phone and tablet touch screens when viewed on those devices.

  8. Hi, I’m want to learn web design but dont have the money to do a course right now. What web site can i go onto to start learning how to design web siteshttp://slimminghcg.net

  9. Almost like going back in time but into the future with all the different layout sizes to design for, the fluid grids suggestion though is a good one, I have had so many problems with fluid layouts before that I abandoned them, perhaps it’s time to try again with proportionate grids and using @media size specific css to work out which to apply… Thanks.