Beginner’s Guide to Responsive Web Design

responsive

Comments on this article are now closed. Check out our updated article: The 2014 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.

Free trial on Treehouse: Do you want to learn more about responsive web design? Click here to try a free 14-day trial on Treehouse.

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 Treehouse 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 Think Vitamin 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 Treehouse, 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!

Bonus

We’re starting to add free Youtube videos on responsive web design so if you’re interested in learning more, you can subscribe to our channel here: http://trhou.se/subscribe-treehouse-yt

Here’s a video to start:

Free Workshops

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

Start learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

92 comments on “Beginner’s Guide to Responsive Web Design

  1. Pingback: How do I make my website 'mobile' friendly?

  2. Pingback: Responsive Web Design using Twitter Bootstrap, Spring MVC | Spring under the hood

  3. Pingback: Responsive Website Design | TXAD Blog

  4. Pingback: Introducing PSD To Responsive HTML | The PSD To HTML/CSS Blog | Where We Blog Great Ideas

  5. Pingback: Optimizacija za mobitele - androide

  6. Pingback: What is responsive web design? | Serendipity Online Marketing Ltd

  7. Pingback: About the Webmaster - Professional, Affordable and Creative

  8. Pingback: Fully responsive unordered list with CSS only [pure CSS] | Christian Fei

  9. Pingback: Buying website design themes: is it the right choice for my business? | Freelance Marketing Blog

  10. Pingback: Responsive Web Design Tutorials Video - Responsive Web Design Blog

  11. Pingback: Responsive Web Design – The Shape of the Future « FutureWebHorsham

  12. Pingback: 8 Free Responsive Web Design Tutorials. - Responsive Web Design Blog

  13. Pingback: Responsive Web Design: CSS Grid Template | 9to5IT

  14. Pingback: 15+ Comprehensive Responsive Web Design Tutorials | gonzoblog

  15. Pingback: 响应式设计的十个基本技巧 | 博客 - 伯乐在线

  16. Pingback: Technol.gy | The Technology Marketing Blog

  17. Pingback: Responsive Design Techniques

  18. Pingback: A beginners guide to responsive design | MM&B Studio

  19. Pingback: Responsive 设计的十个基本技巧 | 5迷3道 | HTML5和CSS3的真材实料

  20. Pingback: What is a Responsive Web Design?

  21. Pingback: What you need to know, to be a UI Designer « The Mythical User

  22. Pingback: Does your content travel? | Coull Blog

  23. Pingback: Marty's WebPress | Let’s Get Responsive Up In Here!

  24. Pingback: 转载:Responsive设计的十个基本技巧 | Yuan Peng`s Tech Blog

  25. Pingback: To Web or to Native…That is the question | itechnology.am

  26. Pingback: Для Web или родной … Вот в чем вопрос | itechnology.am

  27. Pingback: more responsive web design info for designers | Misenheimer Creative

  28. Pingback: Responsive Web Design – Coming Now to Your Mobile Device | Marketsmith, Inc

  29. Pingback: Responsive Web Design. Adaptades per tots els dispositius.hipèric

  30. Pingback: Responsive Design :: Morgan Tepsic

  31. Pingback: Advent Blog Post 18/12/12 - Really Good SEO

  32. Pingback: Beginner’s Guide to Responsive Web Design | Dnyanesh Bhonde | WEB DESIGNER & FRONT-END DEVELOPER

  33. Pingback: Be More Responsive | CORALthirteen

  34. Pingback: Le Responsive Design : la grande tendance 2013

  35. Pingback: What Is Responsive Web Design, What Makes a Website Design More Responsive, and Why is it so Important? | Web Marketing Daily Post

  36. Pingback: Project: Rampture Calculator – modern rockstar | design art tech new media | joseph maddela

  37. Pingback: top 3 online fundraising tips for 2013 | living earth adventure

  38. Pingback: 4 Reasons to Go Responsive for the New Year – Jibe Talkin'

  39. Pingback: ClearEdge Marketing: Innovative Marketing Solutions

  40. Pingback: Responsive Web Design | cKegel

  41. Pingback: Responsive Web Design « I am also Zach Evans

  42. Pingback: Responsive Web Design « breezycunha

  43. Pingback: Responsive Web Design | jlbecke

  44. Thank you so much for great article. This article opened my mind for the possibilities.The concept of a responsive design really got me, I had to play around with it on my recent work.I think Responsive website design might turn out as a great way to progressively enhance even small budget projects for mobile devices.

    Tony Smith
    http://www.RiaEnjolie.com

  45. Just started to learn about web designing and this guide will help me a lot to learn more about a responsive website designing.

  46. please give me a proper solution or code to create responsive web design ????

  47. If your looking for a fast and easy way to create your own web site check out pagebin.com

  48. great article and it is something I been intrigue because some template and theme are not what I want. I realize I have to learn so I can do it myself. I think Responsive Web Design is basically Keeping it Simple once you master the fundamentals and then expand. Because I keep looking for a specific theme/style and I dont see it. So I am like errrr what to do find out what it is that I want to do and bascially it deals with sidebars inclusion. I have a specific format I Want to use for my sites. I dont like the formats. I am guessing static page are what I Want for my format because people’s attention span are short.

  49. This is great for those beginning to do responsive websites, like me. However, I would like to suggest that aside from: 320px, 480px, 600px, 768px, 900px,1200px media queries, you should also include a 0px with it. The 0px query should contain the minimum CSS.
    The responsive website I have created, http://calcunico.blogspot.com, uses 0px, 320px, 768px and 1024px media queries. I did not opt for the mobile view of blogger, but coded it manually.
    The site has no issues when it comes to desktop browsers. But there are issues when it comes to mobile browsers like Opera Mini not rendering font-face style and UC browser not hiding elements which are supposedly hidden using CSS. Responsive websites and mobile browsers still has a long way to go.

  50. Great article! Your think vitamin video training on RWD is really helpful too – clear and easy to follow (Got a sample with web designer mag or .net). Much appreciated.

  51. This really isn’t a “Beginner’s Guide”. It’s got some good information, but it seriously falls short of providing any actual information.

    Specifically, the description of fluid grids stops halfway through the discussion. What do you do with that 31.25%? How is it applied within the CSS?

    If the 31.25% is supposed to be used in combination with media queries, then how is it supposed to work when the media queries are based on min-width and not max-width?

    In other words, shouldn’t “width: 31.25%” be applied to styles with a max-width of 320px?

    This post is a really good example of why code samples are essential, even for a “Beginner’s Guide”. The reader should be able to experiment, even minimally, with this information. Otherwise, the reader hasn’t really learned anything.

    • I agree. I went to a presentation on responsive design and this was about all we got. It seriously failed to even present a simple example. The only thing that made this article somewhat more thorough is that media queries were introduced, but I still feel that I wasted my time reading this.

      • It should have been more clearly explained but the basics are here. With media queries you simply style the website within the media query brackets and test the results on the corresponding device. Since each media query is a style for a specific screen size, learning CSS is actually a newbies next step.

        Regarding “width: 31.25%” this will be replace “width: 300px;” almost every class or id should get a new “width:” to resize itself responsively to each screen size. “max-width: 320px;” does what it implies and “caps” the width at 320px the same as min-width: 320px; does.

  52. Not sure if this page is also made with responsive web design, but your social media bar on the left is too much to the left; out of view, I can only see the vertical second half of it… lol… But nice article though, I guess I need to start use this stuff now.

  53. Hi

    Great article. It made sense even for a non coder like me

    Can anyone advise whether it’s possible to give an existing app RWD?

    Or should I ask: is it impossible?

    How difficult out of 10? (10 being the most difficult)

    The app is writen in django

    Any comments welcome

    Thanks !

  54. Am I missing something, what good is an ultra high resolution on phone when it comes to viewing regular desktop grade websites. Sure you would be able to see it all on screen, but it would still look damn tiny.

    • Very true, but if you read my post fully you would see that I did say
      ‘responsive design is definitely something i see a need for’. I was
      saying that some devices can handle full scale website, that doesn’t
      mean I am not going to design responsive sites.. actually, every site I
      do now is responsive. If I didn’t do responsive design, I would be broke now.

  55. NHTE is a Web & Graphic designing company offering a wide spectrum of design capabilities & solutions with best quality and affordable rates.

  56. I used width tribute for text ,

    @media screen and (min-width: 480px){
    #container{
    width: 100%;
    }
    #left-column{
    width: 60%;
    float: left;
    background: yellow;
    }
    #right-column{
    width: 40%;
    float: right;
    background: white;
    }
    }

    but all other attributes work except width.
    My text cutoffs when i change the size of my browser.

    Why???????????

  57. Hello Nick

    and really thanks for this usefull tutorial

    if we define four box in the max-width : 1200px as example by one name and one class

    like as :

    div class=box

    div class=box

    div class=box

    div class=box

    we call them all in css just by one element :

    .box {

    }

    but how can we hidden one of them and show just three of them in the max-width: 780px ;

    does it posible or we must coll four different name for them at first ?

    I appreciate your help

    • div class=box first

      div class=box second

      div class=box third

      div class=box fourth

      .box{
      float:left;
      width:31.25%
      }

      if you want to hide the third box just:

      .box.third{
      display:none;
      }

  58. as a beginner, by reading the article and watching the introducing video on youtube, i think i have deeper understanding about RWD, thx a lot.

  59. That makes sense, fair enough.. but have you used CloudPass? There’s no need to think of all of this.. It gives you help to make sure all custom websites created are cross browsing and mobile/ tablets comparability. I guess you can contact them on http://www.cloudwebgroup.com .Great group!

  60. its about primary concept about responsive web design but have a nice video thanks author

  61. 100% agree with you.

    As a developer, I have a number of mobile devices for testing designs properly (I don’t trust the online tools, they never quite get it right), from a very small screen up to my large screen Galaxy S3. So I think I have most resolutions covered :) I will always try to cater for as many resolutions as possible, but sometimes that means a lot of extra css, but thats what im paid for, so thats what I will do ;)

  62. I am totally excited to come across this…not even sure where I found it…Wiki I think. But hey! as an interemediate web designer and novice programmer, I am all smiles. Thanks for this smooth and easy intro to something that can help me build my business. I live to code, love to design.

  63. Responsive web design existed before it was given a fancy moniker. It was called “percentages” in HTML and it was also possible in Flash 10+ years ago, you could define it in your publish settings to scale the site based on percentages. The only thing really new is the snapping to a new layout based on specific sizes.

  64. Incredible article, I appreciate this.

    I really like the resources you provided, I liked your “in a nutshell” description of what it was and how it started, and appreciate the beginning tips like which resolutions to start at.

    I’m 100% recommending this page to a group of students who are going to be doing responsive web design this semester. Very nice article

  65. hi
    thank you very much for providing such a great info with us. i need to design such type of responsive website. and i have searched some data after then i found your blog i found every thing what i need in it.
    so thank you for sharing such a great information……