Responsive Web Design Techniques, Tools and Design Strategies

Advertisement

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

Responsive Design Techniques

CSS Transitions and Media Queries2
Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. The basic premise is this: you use media queries to design responsive websites that adapt in layout according to browser width, and you constantly resize your browser to see how the website performs, but every time a query kicks in, there’s a harsh jump between the first style and the second. Why not use some simple CSS transitions to smooth the jump by animating the resize? A nice case study.

CSS transitions & media queries » Blog » Elliot Jay Stocks3

Responsive Data Tables4
Chris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. By default, data tables can be quite wide, and necessarily so. You could zoom out and see the whole table, but then the text size would be too small to read. You could zoom in to make it readable, but then you’d have to scroll both vertically and horizontally (sad face) to browse the table. One solution is to reformat the table for better readability. Another is to display a pie graph from the data. Yet another is to adapt the table into a mini-graphic for narrow screens (rather than interfering much with the content when the full table is displayed).

Responsive Data Tables5

Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens6
Chris Coyier describes another technique for converting a regular row of links into a dropdown menu when the browser window is narrow. When the user is on a small screen and clicks the dropdown, they’ll get an interface to select an option that is nice and big and easy to choose. Obviously much better than displaying a tiny link.

Convert a Menu to a Dropdown for Small Screens7

CSS Media Queries and Using Available Space8
A tutorial from CSS-Tricks that discusses how to make subtle changes with media queries and how to use media queries in a single style sheet. For instance, if you have a fluid-width design in which the sidebar is 35% of the width of the page, depending on the width of the browser window, you could say, “If the browser is really narrow, do this. If it’s wider, do this. If it’s really wide, do this.” In the article, you’ll learn how to modify a list of links according to the browser’s viewport.

9

Responsive Images, Responsive Videos

Fluid Images10
Fluid images are a central aspect of a responsive design. This article by Ethan Marcotte gives a thorough overview on creating them using the classic img { max-width: 100%; } code snippet, as well as details to get you started.

11

Responsive Image: Experimenting With Context-Aware Image Sizing12
An alternative approach to fluid images by Filament Group. This technique allows designers to create responsive layouts that serve different image sizes at different resolutions. Effectively, it allows designers to create mobile-optimized images for smaller screens, and then serve higher-resolution versions to larger screens. Filament Group has developed this technique that uses .htaccess files and JavaScript to serve up different sized images based on the screen width. An alternative solution is to use tools like TinySrc13 which allows you to merely prefix all large images in your source code with a TinySrc URL, and the tool does the rest.

14

Responsive Images and Context-Aware Image Sizing15
Craig Russell has developed a technique that uses a server-side script (in PHP) to serve up images of several different resolutions. The idea is that within the PHP script, a nested array is used that lists image files and their relative percentage scales. In HTML, the image’s src attribute would be set to get the requested image’s id, but with no scale specified. A JavaScript calculates the percentage width of the image relative to the maximum width of the container, and this figure is then appended to the end of the src attribute as the scale parameter. The comments in the article contain some nice ideas and suggestions on how the technique could be improved.

» Responsive Images and Context Aware Image Sizing Craig Russell Web Developer16

Responsive Images Right Now17
Harry Roberts’ idea is to use the img element for the smaller of the two images, the image that you want mobile users to download. You would also have a containing div to which you apply the large version of the image as a background through CSS. You then hide the img from desktop users, and show them the large CSS background, and hide the background image from mobile users and just serve them the smaller inline image.

Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts18

Responsive Images Using CSS319
Nicolas Gallagher’s method relies on the use of @media queries, CSS3-generated content and the CSS3 extension to the attr() function. By combining the content property with the CSS3 extension to attr(), you are able to specify that an attribute’s value should be interpreted as the URL part of a url() expression. In this case, it means you will be able to replace an image’s content with the image found at the destination URL, stored in a custom HTML data-* attribute.

Responsive images using CSS320

Responsive Images Using Cookies21
Keith Clark suggests using cookies to serve smaller images to mobile users. Whenever a browser requests a file from a server, it automatically forwards any cookie data along with the request. If we use JavaScript to populate a cookie with the current screen’s dimensions, all subsequent requests made by the browser will pass this data to the server. In other words, the server would know the screen size of the device that is asking for the file.

Responsive images using CSS322

Responsive Images With ExpressionEngine23
John Faulds presents a technique for responsive images that is different from the techniques presented above. It involves querying the device’s user agent string to determine whether it is mobile, and then setting a global variable that can then be used in templates to modify the size of the image output. Basically, only one image gets sent to the browser, but that image is different depending on whether you’re viewing the page on a mobile or desktop device.

Responsive images with ExpressionEngine — John Faulds24

CSS: Elastic Videos25
Nick La applies the max-width: 100%; snippet to videos and presents techniques that make HTML5 videos and object- and iFrame-embedded videos responsive. For the latter, the trick is very simple. Just wrap the embedding code in a div container, and specify a 50% to 60% padding-bottom. Then, specify the child elements (iFrame, object embed) and a 100% width and 100% height, with absolute positioning. This will force the embedded elements to expand full width automatically. Initially discovered by Thierry Koblentz26.

CSS: Elastic Videos27

Resizeable Images (At Full Resolution!)28
A quick tutorial from CSS-Tricks on resizing images while maintaining resolution.

29

Responsive Email Newsletters

Optimizing Your Email for Mobile Devices With the Media Query30
Wide emails often require horizontal scrolling, especially when there’s a large image. This case study by Campaign Monitor explains how emails can be optimized for mobile devices using media queries and offers a couple of useful techniques and snippets to be used right away.

Optimizing your email for mobile devices with the @media query - Blog - Campaign Monitor31

Responsive Design for Email, the Largest Mobile Audience32
Another interesting case study that shows how the development team behind Beanstalk applied screen-size-specific media queries to target styles, and what design decisions were made to make the mobile email experience better.

Wildbit » Responsive design for email – the largest mobile audience - Thoughts on building web apps, businesses, and virtual teams33

Media Queries in HTML Emails34
This article covers using media queries to target specific mobile email clients.

35

Guide to CSS Support in Email36
Designing an HTML email that renders consistently across major email clients can be time-consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client. Campaign Monitor has put together a guide to save you the time and frustration of figuring it out for yourself. With 24 different email clients tested, it covers all of the popular applications across desktop, Web and mobile email.

Guide to CSS support in email - Articles & Tips - Campaign Monitor37

Responsive Design Tools

You can build a responsive design from scratch, or you can use some of the tools listed below to speed up and smooth out the process.

Respond.js38
Scott Jehl’s fast and lightweight polyfill for min-width and max-width CSS3 media queries (for IE 6 to 8 and more). css3-mediaqueries-js39 is another script that enables IE 5+, Safari 2 and Firefox 1+ to transparently parse, test and apply CSS3 media queries.

respond.min.js at master from scottjehl/Respond - GitHub40

WebPutty: Scientific Progress CSS Editing41
This tool is a Web-based CSS editor with auto-save feature and a real-time preview of your website. WebPutty also has CSS selector highlighting and SCSS support (for Sass and LESS), as well as Compass support. To use the tool, just embed a link tag at the end of your website’s head tag.

WebPutty: scientific progress CSS editing goes “boink” - Fog Creek Blog42

Debugging CSS Media Queries43
In responsive Web design, we’re working with different states, widths and viewport sizes. Johan Brook shares a quick tip for indicating (with pure CSS) which media query has kicked in. The article also provides a mixin for developers using Sass. A demo44 is available as well.

Debugging CSS Media Queries · Johan Brook45

Responsive Design Testing46
This tool is for everyone who needs a quick and easy way to test their website design in multiple screen widths. Change the defaultURL variable at the top of the responsive.js file to your own site and navigate your website from within the frames.

47

Responsive Containers: Selector Queries48
This JavaScript by Andy Hume allows you to add selector queries and responsive containers to your design. Essentially, you can apply different class values to an HTML element based on its width.

ahume/selector-queries - GitHub49

Resize My Browser50
If you need your browser to display content in a certain window size this is what you have been looking for. Just click on the size you need and check out what your size looks like. Does not work in Chrome and Opera due to issues with the “ResizeTo” event.

Media Query Bookmarklet51
A handy tool that shows you exactly what size the viewport has and which media query just fired. Drag it to your bookmarks bar and have it ready when needed.

Responsivepx52
Use the information this little gadget provides in your media queries to create responsive designs.

ProtoFluid53
A tool for rapid prototyping of responsive design. You can prototype CSS on a variety of popular device sizes, orientations and browsers, be they phones (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitors or televisions (720p, 1080p). You can preview designs right in the browser and use your development tools like Firebug. You might want to check an alternative tool ScreenFly54 as well.

55

Fluid Grid Calculator56
Harry Roberts has developed a calculator and generator of fluid grids for your responsive designs. Just provide the number of columns, the width of one column and the width of the gutters, and the tool will generate a fluid grid system in CSS for you. Handy!

Fluid Grids—a fluid grid calculator by Harry Roberts57

Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko58
Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

59

Scherzo, a Responsive WordPress Theme60
This WordPress theme is a fine example of responsive design, displaying nicely on almost all devices and screens.

Responsive Design Templates

320 and Up61
320 and Up works on the “tiny screen first” principle, whereby designs are created for mobile screens first, and then expanded for tablets, desktops, and large screens. It works well as an extension to HTML5 Boilerplate and as a standalone kit.

62

Media Queries for Standard Devices63
Here is a useful template for media queries for standard devices: empty placeholders for targeting devices and attributes that you might be interested in when making responsive designs.

Media Queries for Standard Devices64

Mobile Boilerplate65
Here is a customizable template for creating rich, high-performance mobile Web apps. You’ll get cross-browser consistency among A-grade smartphones, and fallback support for legacy BlackBerry, Symbian and IE Mobile. You’ll also get offline caching for free, fast button clicks, a media query polyfill and many common mobile Webkit optimizations.

New-css-112 in Powerful New CSS Techniques and Tools66

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development67
Skeleton is a small collection of CSS and JavaScript files that can help you rapidly develop websites that look beautiful at any size, be it a 17-inch laptop or an iPhone. Skeleton is a grid that is responsive right down to mobile. It is well organized and well structured and provides most basic styles as a foundation.

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development68

Responsive Design Frameworks

1140 CSS Grid69
1140 CSS Grid is optimized to work on screens ranging from the size of mobiles to 1280 pixels wide. It’s a simple flexible grid system that uses media queries for smaller screens, essentially stacking columns on top of one another.

70

inuit.css71
This CSS framework is built to provide a solid foundation for designs on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort. It also has a custom grid system builder for creating fluid grid systems.

inuit.css72

Flurid73
Flurid is a liquid grid layout with up to 16 columns.

Flurid in Responsive Web Design Techniques, Tools and Tutorials74

FluidGrids75
FluidGrids is a fluid grid framework that creates layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.

76

Less Framework 477
A CSS grid system for creating adaptive layouts. It includes four basic layouts (including tablet, mobile and wide mobile), with three sets of typography presets.

78

Fluid Grid System79
This fluid grid framework includes a typographic grid and baseline grid.

80

Tiny Fluid Grid81
Tiny Fluid Grid helps you generate your own fluid grid with 12, 16 or 24 columns, minimum and maximum widths, and percentage-based gutters.

82

Responsive Design Workflow and Strategies

The Responsive Designer’s Workflow83
Luke Wroblewski’s conference notes on Ethan Marcotte’s presentation about applying responsive Web design principles and workflows to the redesign of a major newspaper website. Among other things, Ethan explains how he approaches the responsive design methodology, what the design process looks like and how prototyping is done in the context of responsive design.

LukeW84

The Goldilocks Approach to Responsive Web Design85
The Goldilocks Approach stresses device-independent layouts that look perfect regardless of the device they’re viewed on.

86

Content Choreography87
Read up on how to properly plan your site to live up to todays standards. Begin to choreograph content proportional to size to serve the best possible experience at any width.

88

Structured Content First89
In this presentation, Stephen Hay discusses a couple of troubles you might run into when structuring your content and argues that properly structured content is portable to future platforms. Stephen suggests that we think about creating and designing structured content first that caters to the lowest common layout denominator, whether this be a small screen or a text browser. This content should be able to go anywhere.

Design for a Target Experience First90
Another interesting perspective on a responsive designer’s workflow; Nathan C. Ford focuses on experience of its users first and then derives user scenarios and media queries from it. “There are goals for sites that reach beyond simple readability, where a lack of features can actually diminish the experience. I am working on such a project now. Our approach has been to peruse the research and tailor an optimal experience for the most likely user scenarios. Working out from there, we judicially edit and hone for each media query.”

More Responsive Design, Please91
This article by Jason Things covers responsive design based on a layout/content/capability/user intent scheme, which sheds interesting new light on the challenges that responsive design can create. It’s a well thought out piece and is certainly worth a read.

92

Breaking Development93
Luke Wroblewski took notes at the Breaking Development Conference while Stephen Hay talked about the realities of designing for different device experiences.

Patterns for Multiscreen Strategies94
Have a look at this simple but effective slideshow to get an idea of which core factors play a role in multiscreen concepts.

Responsive Web Design from the Future95
According to Kyle Neath, responsive web design is about a lot more than the size of your screen. This talk is about about how GitHub handles links, the url bar, partial page updates, and explains why Kyle thinks the HTML5 history API is the most important thing to happen to front end development since Firebug. An inspiring presentation.

Developing a Progressive Mobile Strategy96
In this presentation, Dave Olsen presents a progressive mobile strategy that consists of audience strategy, content strategy and platform strategy. Dave argues that to develop a sustainable and scalable mobile strategy, you need to answer the questions, “What value will the targeted audiences get from this content?” and “How do we develop solutions to handle both mobile and native now, as well as the devices of the future?” An interesting presentation.

Developing a Progressive Mobile Strategy97

How to Use CSS3 Media Queries to Create a Mobile Version of Your Website98
In this Smashing Magazine article, Rachel Andrew explains how, with a few CSS rules, you can create an iPhone version of your website using CSS3 — one that will work now. You’ll see a very simple example and learn the process of adding a small device style sheet to a website to show how easily we can add mobile-specific style sheets to existing websites. You may want to consider reading Aaron Gustafson’s article “Adaptive Layouts With Media Queries99” and Emily Lewis’ piece “Respond to Different Devices With CSS3 Media Queries100” as well.

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

Discussions and Points of View on Responsive Design

While not tutorials per se, the articles here give you valuable insight into why you should use responsive design techniques (and when you maybe shouldn’t use them).

Responsive by Default102
Andy Hume explains what in his opinion responsiveness is all about. It’s what a website does when it’s loaded into an unknown browser on an unknown device by an unknown individual. It’s “how you deal with “the most hostile software development environment ever imagined” (via Douglas Crockford). Like progressive enhancement it’s a strategy that frees you to work with the web rather than fight against it.” An interesting point of view.

Responsive Web Design or Separate Mobile Site? Eh, It Depends103
An interesting article discussing the pros and cons of responsive designs vs. dedicated mobile websites.

104

The Case Against Responsive Web Design105
It seems only fair to include some dissenting opinions here about when responsive design is and is not appropriate. This article discusses why responsive design doesn’t always make sense from a user experience perspective. Take a look in the comments section, too. Luke Jones has a similar opinion106.

107

A Responsive Mind108
A discussion on Jeremy Keith’s blog about the necessary parts of a responsive design and how to effectively create different layouts based on different screen sizes. Examples are included.

Responsive Enhancement109
An excellent introduction to responsive design as a way of thinking rather than as a tool or technique. Jeremy Keith argues that responsive Web design can’t be tacked on to the end of an existing workflow. Instead of pixel perfection, we should be thinking of proportion perfection. An inspiring read.

Mobile-First Responsive Web Design110
Mobile First Responsive Web Design is a combination of philosophies and strategies with the aim to achieve a wider application of best practices in the area.

Where are the Mobile First Web Designs?111
In this article Jason Grigsby presents the findings from his study on responsive designs, their features and appearance as well as general remarks on the state of art of Responsive Web Design.

Further Resources

Here are some additional resources for creating responsive designs that don’t fit neatly into the categories above.

Media Queries112
A growing collection of websites that use media queries.

113

Responsive Web Design114, by Ethan Marcotte
This book, written by Ethan Marcotte and published by A Book Apart, is a fantastic resource for learning how to design responsive websites. It covers the basics of the responsive Web, flexible grid systems, flexible images and media queries, and it gives insight into how to create responsive designs.

115

The Big Web Show Episode #9: Responsive Web Design116
Jeffrey Zeldman and Dan Benjamin sit down with Ethan Marcotte for episode 9 of The Big Web Show to discuss responsive design, among other topics.

Last Click

The Latest in HTML5117
This slideshow covers some techniques and lesser-known HTML5 gems that could get implemented in browsers in the near future: among other things, server-side media queries with JavaScript and form-factor detection.

The Latest in HTML5118

Would you like to see more round-ups like this one on SM?

Would you like to see more round-ups like this one on Smashing Magazine?119

(al)

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the 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

    Russell Poulter

    July 22, 2011 3:32 am

    Wow! Thats going to keep me busy for a while!

    Thanks.

    0
  2. 4

    Another great one is inuit by Harry Roberts http://csswizardry.com/inuitcss/

    0
  3. 5

    Another great responsive/adaptive solution is Nathan Smith’s adapt.js (https://github.com/nathansmith/adapt). This <1K script detects the browser window size and serves stylesheets based on a series of window size ranges defined by the user. This prevents the browser/device from loading a bunch of styles and assets that it may not need to load.

    0
  4. 6

    The question is how do you implement some of these into a 1000$ project when the design is final? :)

    In the real world the only way to do some of them is to create a starting project that is optimized for your server(Apache for example) and add some these features as you go.

    Thanks for this great article.

    0
  5. 7

    Crazy thing is, it must take ages to write a link post.

    0
  6. 8

    FYI: I am not the creator of the mediaqueri.es gallery. The gallery was created by Eivind Uggedal (@uggedal).

    0
  7. 11

    Responsive design seems to work nicely for sites with simple structures. From what little experience I have with repsonsive layouts I have found them to not work as well on more complex site (like E-Commerce) and doing device detection is the better way to go.

    0
    • 12

      Agreed. One major issue with a responsive design is that the CSS property “display: hidden”, which does not avoid downloading images from the desktop version onto a phone over a weak signal. Forcing someone to download a huge file with no way to see it is almost criminal.

      I support having a mobile and desktop version of page templates. Let media queries fine tune styles after server detection for the mobile / desktop decision. Then make two responsive stylesheets: 1) a desktop version for ipad and larger 2) mobile version for less than 800px wide. The mobile code should omit HTML markup instead of hiding it. Allow the user to switch between desktop and mobile and retain their choice during the session. Now you have the best of all worlds.

      0
      • 13

        It’s easy enough to fix the images issue. Just run a script on dom-load to delete them from code entirely. Or use some of the techniques above to dynamically change the size of images based on what you need.

        I think this is the future of web design. Thanks for the roundup SM

        0
        • 14

          But that still does nothing to address the issue of complex layout to mobile layout. Honestly, responsive web design has a place in the future of web design, but it’s not THE future of web design. Additionally the amount of time needed to take a complex eCommerce site and make it work in all major browsers (including older browsers like IE7) AND be scalable for smart phones would be hugely overwhelming and costly. Add to that the fact that many eCommerce based web sites have numerous inputs beyond the designers and coders and it’s just not realistic to think that “one site fits all”.

          0
  8. 15

    Thank you, SM. What an incredible roundup of resources for responsive designing.

    0
  9. 16

    Thank you so much for including the Wildbit article on responsive email design!

    0
  10. 17

    Now let’s have a wordpress plugin that turns a current fixed layout wordpress site into responsive one.

    Pretty please!

    0
    • 18

      That plugin doesn’t work. I prefer to say, let’s get a responsive wireframe.

      0
  11. 19

    Thanks for this collection of resources.

    And thanks for mentioning my fluidgrids. Credit really goes to Nicole Sullivan and her Object Oriented CSS for this. I just changed some class names and extended it a little to accommodate more columns. But in the end, I suppose I came to the same conclusion that Nicole did: “Who would ever need 16 columns?”

    I love Nathan’s work on the 960 Grid System, but I’ve always preferred something more flexible, so I extended it to create the Fluid 960 Grid System. But then it wasn’t really 960, was it? I’m glad to see how Nathan Smith has adapted that even further with Adapt.js.

    FluidGrids was an attempt to find a solution somewhere between the Fluid 960 Grid System and OOCSS. Since then, I’ve landed on a combination of solutions for my work that combines media queries and options to be able to use one or more of the various approaches to fluid grids (http://markuplibrary.org/styleguide/grids/section/). For much of my work, the framework needs to integrate well with Formtastic for Ruby on Rails apps (http://markuplibrary.org/styleguide/forms/), so it helps to have a way to accommodate both very simple and very complex forms that will still scale well to smaller screens. As with everything, the process and tools are always a work in progress. But I hope I’m adding to the conversation with working code that others can extend.

    0
  12. 20

    incredible roundup, just as I was about to implement media-query, Thank You SM.

    0
  13. 21

    Amazing roundup ! Some resources are new to me, and the responsive email stuff is especially valuable !

    It’s nice to mention CloudFour’s article on what sort of care we must take when using css media query, and that it’s not the one magical solution to convert desktop to mobile layout.
    http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

    0
  14. 22

    Great tips & techniques.

    Here is the Free jQuery book for web designers & developers:

    http://creativealys.com/blog/2011/07/06/jquery-in-action-ebook/

    0
  15. 23

    What do we use for slideshows?

    0
  16. 25

    Vinicius DhomCarvalho

    July 22, 2011 5:26 pm

    this is an Article for taste vagarously…. Every tiny little bit

    0
  17. 26

    Nice, this should keep me busy for a while! Thank you.

    0
  18. 27

    Thanks Vitaly got something to learn regarding responsive website designing after a long time! I am sure Fluid Grids will be really helpful for the designers in this mobile web age! Superb.

    0
  19. 28

    This is great and all, but honestly who the hell has the time to actually implement any of this in a project? What I’m saying is that this all depends on the budget you are given.

    0
    • 29

      Taking the RWD route will fit better into the budget of smaller clients that just want to offer a more user friendly website for their users on smaller devices, then if you would develop separate optimized websites with UA sniffing/redirecting for a variety of mobile devices.

      0
  20. 30

    Awesome! Thank you! :)

    0
  21. 31

    Great post i am still finding my way to implement them in some of the website. But client didn’t care how there site will look on the mobile devices / small resolutions. Hope one day a good client will be found :P so i can experiment with the media queries.

    0
  22. 32

    Hjortur Scheving

    July 23, 2011 3:43 am

    Great post. This is such a hot topic and I think it will be for awhile until it becomes a norm for the web community. Here where I work this is something we have been focusing on for the last year or so and we have tried our best to get this into each project we have. Not always possible, because of the extra cost but in our experience this doesn’t have to cost an arm and a leg.

    Here is an example of one of our sites where we focused very much on responsive design and development, http://www.frontend2011.com, there we used the mobile html5 Boilerplate as a baseline.

    0
  23. 33

    Paul Brittain-Morby

    July 23, 2011 4:16 am

    That is a great post. Excellent resource. Thanks.

    0
  24. 34

    Always I learn something new every day… complete and useful post, thank you! :-)…

    0
  25. 35

    Thanks for the mention of my article. :) Another resource I’d like to add to your list of frameworks is Gridless Boilerplate which is the one that I used as a starting point for my site.

    0
  26. 36

    Ohhh, nice work… Could use some of these for our projects.

    Thanks.

    0
  27. 37

    Nice and informative work, we feel proud to apply these information in our daily life. This increase the knowledge.

    0
  28. 38

    Very nice. Thank you.

    Design Inspiration website:
    echolla.com/index.php?view=grid&page=1

    0
  29. 39

    I find CSS Tricks design a bit disturbing, not fan of “big big big” blocks of over-the-top bright colours. I can’t say anything about the layout because I don’t stay in there for long, but gotta asume it’s well done.

    0
  30. 40

    Thank you so much for this fine piece of quality content, you guys rock!

    0
  31. 41

    Really interesting article, I’ve got a few new blogs and sites to follow, many thanks for the great work and effort.

    0
  32. 42

    md.faruque hossain

    July 25, 2011 12:35 am

    i want to make a better wedsite,plz advice me and send me html and css code for wedsite desige.

    0
  33. 43

    Thanks! A really useful resource for planning future projects and defining the best approach – it’s just a case of convincing clients to keep up with the expanding tech landscape.

    0
  34. 44

    Wow, incredible and very long roundup smashing mag!

    0
  35. 45

    Excellent article to keep me learning for a few hours. Thanks.

    0
  36. 46

    Very useful! Thanks!

    0
  37. 47

    Thank you Smashing for being so relevant!

    0
  38. 48

    Starting a new project today that is really going to benefit from this article, thank you.

    0
  39. 49

    Heather Wood-Ravenous Raven

    July 26, 2011 7:01 pm

    I got drunk and left this message while listening to Def Leppards “Hysteria”.

    Smashing Magazine, Without you, I would be a developing all alone. I have Hysteria for you. I got that feeling and I’m believing its a miracle!!

    You always know the right things to write down for me. And I’m always listening. Your posts and newsletters are like magic to my ears and eyes every time. I can’t express my love for you enough.

    I’M IN LOVE! YOU TAKE ME TO MY KNEES!!

    0
  40. 50

    Thank you for this fascinating and helpful roundup about responsive web design. This shift in design principles excites PixInk because the focus is on the end user. The majority of women consumers use smartphones to interact with brands online. Practicing device agnosticism in design will ensure brands can reach more of them effectively.

    0
  41. 51

    Funny that CSS Tricks is featured in an article with ‘responsive’ in it’s title… That place barely scrolls for me, I have to use Readabilty to make it scroll responsive.

    0
  42. 52

    Whoaaa….. That’s a lot!! I think I need 12 months for “kill ‘em all”.

    Thanks a lot!

    0
  43. 53

    Outstanding collection, You rock!!!
    This definitely gives me a lot of things to work on.

    Keep the good work coming…

    0
  44. 54

    Whoa, amazing thank you.

    0
  45. 55

    Wonderful article! We linked to it from our blog post on responsive design (3 Reasons You Shouldn’t Build a Mobile Website). Keep up the great work.

    0
  46. 56

    Another tutorial to this list, on making WordPress images (ex: custom post type thumbnails) responsive :
    http://www.blissfulinterfaces.com/making-wordpress-images-responsive/

    0
  47. 57

    There is a free WP theme using the Zurb (Foundation framework) found at http://www.themenuts.com/projects/cleanflex-free-edition

    0
  48. 58

    Completely understandable. A very nice and informative post.
    Thanks.

    0
  49. 59

    I would marry you if I could, Smashing Magazine

    0
  50. 60

    Another resource for responsive video is FitVids: http://fitvidsjs.com/

    0
  51. 61

    Great article it is what i was looking for thanks. :)

    0
  52. 62

    Very useful!! I would like to share my responsive webdesign examples…

    0
  53. 63

    Thanks for that. I’m a huge fan of respond.js (works brilliantly!), and I was v. interested by the CSS support in e-mails. I wrote an article the other day about responsive images and future propositions ( http://wp.me/p1V1Ia-el ).

    0
  54. 64

    Another free WP theme using the custom media quries @ http://responsivedeck.com/2012/10/shutterloop/

    0
  55. 65

    I know this post is from last year, but why is nobody considering the rem development method.
    I would like to see more info regarding the use of rem design. Read alot of posts, rem is the future of
    Design. Someone please post on methodology.

    0

↑ Back to top