Menu Search
Jump to the content X X

Responsive Web Design Guidelines and Tutorials

In this overview you will find the most useful and popular articles we have published on Smashing Magazine on Responsive Web Design.

Quick Overview

Design Process In The Responsive Age11

You cannot plan for and design a responsive12, content-focused13, mobile-first14 1 website the same way you’ve been creating websites for years—you just can’t. If your goal is to produce something that is not fixed-width and serves smaller devices just the styles they require, why would you use a dated process that contradicts those goals?

Design Process In the Responsive Age15

I’d like to walk you through some problems caused by using old processes with responsive design. Let’s look into an evolving design process we’ve16 2 been using with some promising new deliverables and tools. This should provide a starting point for you to freshen up your own process and bring it into the responsive age.


Responsive Web Design: What It Is and How To Use It18

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

Responsive Web Design19

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?


A Foot On The Bottom Rung: First Forays Into Responsive Web Development21

Responsive design is the hottest topic in front-end Web development right now. It’s going to transform the Web into an all-singing, all-dancing, all-devices party, where we can access any information located anywhere in the world. But does responsive design translate well from the text-heavy Web design blogosphere to the cold hard reality of commercial systems?

Mobile view of availability results22

Rumors came through our office grapevine that management was looking to revamp our mobile presence. There was talk of multiple apps being built externally that could be used on some of the major mobile devices. Our team had been getting familiar with responsive design and put forward a proposal of doing away with device-specific apps and developing a single responsive website that could be served to both desktop and mobile users. After a few hasty demos and prototypes, the idea was accepted and we began work.


Techniques For Gracefully Degrading Media Queries24

Media queries are the third pillar in Ethan Marcotte’s implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.


CSS3 media queries, which include the browser width variable, are supported by most modern Web browsers. Mobile and desktop browsers that lack support will present a subpar experience to the user unless we step up and take action. I’ll outline some of techniques that developers can follow to address this problem.


Responsive Web Design Techniques, Tools and Design Strategies27

Back in January, we published an article on responsive design, “Responsive Web Design: What It Is and How to Use It28.” Responsive design continues to get a lot of attention, but considering how different it is from the “traditional” way of designing websites, it can be a bit overwhelming for those designers who have yet to try it.


To that end, we’ve compiled this roundup of resources for creating responsive website designs. Included are tutorials, techniques, articles, tools and more, all geared toward giving you the specific knowledge you need to create your own responsive designs.


How To Use CSS3 Media Queries To Create a Mobile Version of Your Website31

CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support – small devices such as the iPhone, and Android devices.

dConstruct 2010 website on a desktop browser32

In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.


Device-Agnostic Approach To Responsive Web Design34

This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.


Progressive And Responsive Navigation36

Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments.



Content Prototyping In Responsive Web Design39

While the reality of client work sometimes makes it challenging to gather and produce content prior to starting the design, this is now widely accepted as being necessary. You may have heard this referred to as “content-driven design40.” I’m not the first to suggest 2 that our current approach to responsive Web design could be improved by imparting a bigger role to content41 in determining how our websites respond. However, I haven’t seen many (if not any) practical explanations on how to do this. I’d like to start this conversation by introducing a theoretical concept called a “content prototype.”

Photoshop’s new file dialog box42


Is There Ever A Justification For Responsive Text?44

Depending on who you follow and what you read, you may have noticed the concept of “responsive text” being discussed in design circles recently. It’s not what you might imagine — resizing and altering the typography to make it easier to read on a range of devices — but rather delivering varying amounts of content to devices based on screen size.

One example of this is an experiment by designer Frankie Roberto45. Another is the navigation menu on the website for Sifter App46. Roberto and Sifter are using media queries to actually hide and display text based on screen size (i.e. not rewriting or delivering different content based on context — as one would do with mobile-focused copy, for example).

Website for Sifter App47

Having looked at how this technique works, I wouldn’t endorse it yet, because its practical value is not clear. Also, describing this as “responsive” could legitimize what is possibly a less than optimal coding technique. Below are screenshots of how it works on the Sifter website:



  1. 1 #a1
  2. 2 #a2
  3. 3 #a3
  4. 4 #a4
  5. 5 #a5
  6. 6 #b1
  7. 7 #b2
  8. 8 #c1
  9. 9 #c2
  10. 10 #c3
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    this is highly informative. we are into magazine lay-outing, can you help us identify programs that that are easy to use for amateurs like us? thnx!

    • 2

      Two favs that are very well laid out AND realistic for not so techy folks:

      (1) Andy Rutledge redesigned the New York Times and Woo Themes got it so you can buy it! Great design.
      (2) If you want a responsive magazine theme check out Themify’s Responz:

      I prefer myself, but admittedly they are a bit difficult for a beginner. Responz is a great solution for a less tech online paper: relatively easy; beautiful, clean and responsive design; not too expensive.

      Best wishes!

    • 3

      Well, if you are a developer-designer, there is this awesome plugin called “Responsive elements” by Kumail Hunaid.

      Whenever your screen size changes it adds corresponding css classes to the elements you want to make responsive. All you need to do is write your css for these classes.

      We have designed a live customization system for this plugin wherein you can totally play with it. Check it out here if interested.


    • 4

      Vikrant Mahajan

      June 26, 2014 5:37 pm

      Responsive is DEAD

      Your latest UX design just got outdated

  2. 5

    Only one king of Bee? Way to start off with a bad analogy – leaving aside the Queen, there are clear distinctions between drones and soldiers in every hive.

  3. 6

    Hari Karam Singh

    December 3, 2011 7:23 am

    The whole media query responsive design thing was new to me. Thanks for the as-always high quality info. It served as a valuable briefing and reference for our latest site redesign (cheeky-but-sincere plug coming up):

    Hari Karam

  4. 7

    Good post; I’m familiar with media query. The next challenge is that new mobile devices have very high pixel density; fonts get very small, and you can’t rely on “max-width” or “min-width”.

    I’m interested in looking for comments / discussion on responsive design coding using relative font sizes (em or %) along with media query that sets font sizes based on device width and dpi.

    • 8

      “A pixel is not a pixel is not a pixel”

      DavidH, have you had issues with browsers not properly following the CSS specification? I am very new to the design world and somewhat familiar with web development, but I have never found a browser that does not properly rescale pixels on screens with unusually high pixel density to provide an abstraction of a pixel that is expected from a developer’s point of view, as described in the W3 spec and MSDN’s.

  5. 9

    Jonathon Oates

    March 5, 2012 3:54 pm

    Great article over on SEO Consult’s Web site covering responsive Web design and how it could be abused to hide content!

    Talks about how Mobile Googlebot may see responsive Web sites and mobile-specific sub domains too! Remember, responsive design isn’t just about screen-size and fluid designs, it’s about the content too!

  6. 10

    Melvin Thambi

    May 2, 2012 10:56 am

    Highly Informative!..thanks lot for sharing :)

  7. 11

    This is a great resources for responsive web design tutorials I really like the sifter case study. We created a video to highlight 4 more responsive web design tutorials as well:

  8. 12

    Ajay Maheshwari

    October 18, 2012 3:20 pm

    thanks for this tutorials

  9. 13

    Background Picture

  10. 14

    Wow!! It’s great really to take an idea to create new designs……

  11. 15

    Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

  12. 16

    Thank you, for the great source of knowledge! ;)

  13. 17

    Here is another tool I found that lets you simulate how your page look on iphone/ipad.

    The twist is that you can “scale” the page within the tool so you can see what an effect a proper viewport setting would have!

  14. 18

    Zakir Borodin

    March 8, 2013 12:23 am

    Some ideas here are very interesting . . . possibly even smashing. But the Web site–every single article on this Web site–is very difficult to read. The writing is both jargony and florid at the same time. Do you have an editor–one who can write? You should hire me. It would be a very big job, but you really need to have significantly better communication of your occasionally quite-interesting ideas.

  15. 19

    Here is a neat little tool to help you do all those calculations. Simply create your responsive stylesheet using media queries. Setup your context using @joy(context) as described by the responsive css preprocess. Then plugin the link, or copy and paste your stylesheet and you’re done. All pixels are converted to percentages and ems respectively. Check out JOY! Responsive CSS Preprocessor at:

  16. 20
  17. 21

    nice tutorial which helps me a lot, and how can i convert this site to responsive which should work properly in iphone as well as in ipad:

  18. 22

    Hello manish,

    This is really a good decision to update your website with latest tools and technology,
    now if you wish to convert your website design into responsive design, you can follow this link and contact here, you will get appropriate reply for your work. :

  19. 23

    Here is a tool to test your “Responsive Web Design”

  20. 24

    Before reading this, I didn’t know much about responsive web design, now I know a bit more, thanks!

  21. 25

    Or you can just use a responsive website builder like Saves me a ton of time.

  22. 26

    Ideavate Solutions

    February 10, 2015 8:23 am

    Nice guidelines.Responsive web design has emerged as an important consideration for any business. It’s a website design and development approach and technique used to make your website content easy to consume and interact with equally on desktops and mobile devices. Since the mobile Internet grows more popular every year, it’s a good idea to start thinking about a responsive website design when it comes time to update your website. Responsive web designing is also beneficial for owners who are trying to get better SEO rankings as the website offers a single unique URL across all platforms and devices.

  23. 27

    Thanks For this list but i found a responsive web design tutorial on which is very helpfull and a must view for every beginner

  24. 28

    I am very interested in utilizing responsive design to develop client websites, like, In order to show “respectability” to convince my clients I am wondering who in the corporate world has used this design style. Do you know of any “big” players who have pioneered this technology trend?

    Regards, Lenard.

  25. 29

    Its an awesome article, I did not have an much knowledge on website design, article create interest on mind upgrade my website.

  26. 30

    Great article… Usefull stuff. Thanks for sharing

  27. 31

    Thanks for sharing with us this informative post.


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top