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 Age

You cannot plan for and design a responsive, content-focused, mobile-first 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 Age

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’ve 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.

Read more…

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

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 Design

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?

Read more…

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

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 results

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.

Read more…

Techniques For Gracefully Degrading Media Queries

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.

Read more…

Responsive Web Design Techniques, Tools and Design Strategies

Back in January, we published an article on responsive design, “Responsive Web Design: What It Is and How to Use It.” 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.

Read more…

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

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 browser

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.

Read more…

Device-Agnostic Approach To Responsive Web Design

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.

Read more…

Progressive And Responsive Navigation

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.

screenshot

Read more…

Content Prototyping In Responsive Web Design

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 design.” 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 content 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 box

Read more…

Is There Ever A Justification For Responsive Text?

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 Roberto 1. Another is the navigation menu on the website for Sifter App 2. 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 App

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:

Read more…

The Smashing Team loves high-quality content and cares about little details. Through our online articles, books and eBooks and 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!

    4
    • 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 StudioPress.com 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!

      0
    • 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.
      http://bitconfig.com/responsive-elements/bitconfig_responsive_elements.html

      -Patrick

      0
  2. 4

    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.

    -36
  3. 5

    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): nickfleming.com

    Gratefully,
    Hari Karam

    8
  4. 6

    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.

    2
    • 7

      “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
  5. 8

    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!

    2
  6. 9

    Highly Informative!..thanks lot for sharing :)

    2
  7. 10

    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: http://www.responsivewebdesignblog.com/2012/09/responsive-web-design-tutorials-video-2/

    1
  8. 11

    thanks for this tutorials

    1
  9. 12
  10. 13

    Background Picture

    0
  11. 14

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

    1
  12. 15

    Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the http://responsivetools.com. 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.

    0
  13. 16

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

    2
  14. 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!

    http://www.responsimulator.com

    0
  15. 18

    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.

    0
  16. 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: http://www.joyresponsivecss.com

    0
  17. 20
  18. 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: http://www.naanji.com.

    0
  19. 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. :http://dhrup.com

    0
  20. 23

    Here is a tool to test your “Responsive Web Design” http://www.ndottech.com/responsive-tool

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top