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
- Responsive Web Design: What It Is and How To Use It
- Techniques For Gracefully Degrading Media Queries
- Responsive Web Design Techniques, Tools and Design Strategies
- How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
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.
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?
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.
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.
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.
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.
Related Posts
You might be interested in the following “Best of” selections as well:
We love high-quality content and we care about little details. We believe that good content and design are crafts worth sharpening. Located in the lovely city of Freiburg, Germany. Mostly Vitaly (vf), Iris (il), Stephan (sp) and Sven (sl).
-
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
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 -
3
“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.
-
4
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.
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 it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
trina cruz
August 24th, 2011 1:55 amthis 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!
Dawn
November 28th, 2011 7:44 pmTwo 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!
James
August 30th, 2011 5:28 amOnly 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.
Hari Karam Singh
December 3rd, 2011 7:23 amThe 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
DavidH
December 5th, 2011 5:31 pmGood 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.
wcdolphin
December 29th, 2011 2:35 am“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.
Jonathon Oates
March 5th, 2012 3:54 pmGreat 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!
Melvin Thambi
May 2nd, 2012 10:56 amHighly Informative!..thanks lot for sharing :)