Line25

Responsive Web Design Articles, Tutorials & Guides

Read the full post

A couple of weeks back my showcase of responsive website designs proved pretty popular, so let’s revisit the topic and look at some super handy articles, tutorials and guides that will help you get started with @media queries in order to create your own responsive or adaptive web designs. The resources in this collection have been hand picked as the best the web currently has to offer.

Recap: What is responsive web design?

Creating a website that is responsive essentially means the design of that particular website will ‘respond’ according to the medium that is being used to view it. We’re probably all familiar with the battle of designing fluid websites for various browsers back in the days of table based design, in these modern times we also have a range of devices such as smartphones and tablets which all add different resolutions and even orientations into the mix.
A responsive web design will usually use CSS @media queries to style the page according to specific rules, such as min-width. Check out the recent showcase of responsive web designs to see how some of the best designers are styling their content for various resolutions and devices.

Responsive web design articles

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

View the article

This in-depth overview of responsive web design over on Smashing Magazine is probably the best place to go to get the basics on what responsive web design is and how it can be used. The post talks about the theory, gives plenty of handy code samples and lists a useful showcase of responsive web design.

View the article

Adaptive layouts with media queries

View the article

NET magazine offer some insightful info on the history of responsive or adaptive website designs and the introduction of the media query module along with tips on how to implement such features yourself. The post uses Simon Collison’s beautiful website as an example and focuses on design for iPhone and iPad in particular.

View the article

The practicalities of CSS Media Queries, lessons learned.

View the article

The Bloop blog takes a look at media queries from the designer/developers perspective and talks about whether the use of media queries for creating a mobile version of a website is worth the effort. The post gives some great advice and looks at the pros and cons of using media queries as opposed to creating a separate mobile specific website.

View the article

A List Apart: Responsive Web Design

View the article

If there’s one place on the web you should go to get the full ‘low-down’ on any web related topic, A List Apart is that place. Needless to say, this article on A List Apart digs deep into the theory of responsive web design and gives technical code examples from a custom build demo website.

View the article

Understanding the Elements of Responsive Web Design

View the article

Six Revisions takes a look at what responsive web design actually is and helps us understand the individual factors that makes a website truly responsive. The articles talks about flexible grids, scalable images and media queries with a conclusion asking if we’re really ready for responsive web design as a solution to our cross browser and cross device problem.

View the article

Responsive web design tutorials

CSS Media Queries & Using Available Space

View the tutorial

Chris Coyier from CSS-Tricks has this fantastic tutorial that looks into using CSS media queries to adjust the layout of a website to fill the space that’s available. Follow the guide for a hands-on introduction into the basics of responsive web design.

View the article

Working with Media Queries

View the tutorial

Nathan Staines has written a great guide to the basics of responsive web design with usable code samples. If you’re looking for a quick insight into the basics and a general overview of the syntax used for various CSS media queries, check his article out.

View the article

Experimenting with responsive design

View the tutorial

Lee Munroe gives some first hand experiences and shares what he’s learnt from building a mobile version of his own website. Follow Lee’s example and use the code he supplies to get started with responsive web design by creating your own mobile specific layout for your website.

View the article

CSS3 Media Queries & Responsive Web Design

View the tutorial

This tutorial from Tristar Web Design goes through the process of making an existing HTML template responsive. The guide takes you through each step with lengthly samples of code showing how the CSS media queries and specific CSS styling are combined to create the various versions of the website.

View the article

How to use CSS3 Orientation Media Queries

View the tutorial

1stWebDesigner has some fun with CSS3 media queries to show what kind of effects can be produced. See how the orientation media query in particular can be used to change the colour of an image based on the orientation of the device or browser.

View the article

A Crash-Course in CSS Media Queries

View the tutorial

Nettuts gives us a quick overview of CSS media queries complete with video examples and sample pieces of code. Watch the video screencast then quickly copy and paste the supplied code to add your own media specific CSS.

View the article

CSS3 Media Queries

View the tutorial

Looking for some ready made code samples that you can quickly refer to in order to build your own responsive versions of your website? Web Designer Wall has a bunch of code samples ready for your to copy and paste into your own CSS stylesheets.

View the article

Optimizing your email for mobile devices with the @media query

View the tutorial

What about responsive web design when it comes to email newsletter campaigns? Campaign Monitor is on the ball with this blog post giving an insight into how media queries can help format your email newsletters for mobile.

View the article

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

View the tutorial

Smashing Magazine provided an in-depth theory based article on responsive web design. Now check out their step by step tutorial for creating a mobile version of your website. The guide covers every step and gives handy code samples to give you a head start

View the article

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

25 Comments

  1. ABDUL JANOO says:

    Smashing mag is always having useful article in it……….spl mobile version article…….. Thanks CHRIS….

  2. Jatin says:

    Great Introduction, and nice list of tutorials to follow. This is what I like about Chris and this site, Thanks.

  3. Yashodhan says:

    just the previous post I was looking to the the same thing and just saw this post, Chris you just give what exactly we all want

  4. Another good one. Keeping up with the current buzz words/terms is always a winner.

  5. Julian Laval says:

    Building a responsive website is a brilliant idea… I might give it a go. Thanks for the resources!

  6. HTML5awesome says:

    This is what I'm looking for. Thanks for sharing this excellent post Chris :)

  7. AliHM says:

    you are one of the best in the world :x

  8. godbout says:

    using lessframework for developing my new blog, it comes with a base css for handling responsive design. really nice, worth checking out.

  9. Adam Booth says:

    Great resource material.

    With the emergence and popularity of people using other devices except the usual desktop computer of laptop to access the internet the need for responsive web-design has never been greater and is set to become even more important.

    This is a great article full of excellent articles and explanations that have great walk through guides.

  10. Most people are attached with internet through their related topics article writing is an art which guides towards the exact research

  11. Great roundup of some of the best articles out there. We really are moving towards a web where we need to stop targeting individual devices and having a more generic approach to serving content.

    Bookmarked, and I'm sure this will be a heavily used list when I am starting projects!

    Cheers!

  12. Daryl says:

    Nice roundup post Chris.

    Have you seen http://mediaqueri.es/ ? Possibly the best resource of responsive designed sites out in the wild.

    Cheers!

    Daryl

  13. Another great roundup Chris!

  14. Haris Tahić says:

    Nice resources, thanks.

  15. Luci says:

    *feels sad hers didn't make the cut* no matter! I'll write a new one better than ever! heh :)

    Thanks for the round up though, some absolutely great articles there!

  16. Tom Hermans says:

    As I'm finishing up my responsive WordPress theme, this is a nice list of articles with best practices.. (also like the list with examples)

  17. James Gordon says:

    All of the best designers strive to achieve such symmetry and balance between the needs of the client and the needs of the user. These examples and tutorials give us a look at how to make the transition on the journey that much smoother. Many thanks.

  18. Jack says:

    Cheers for the mention Chris! (that Tristar blog happens to be mine…)

    Hopefully it presents media queries in a fairly easy to understand manner!

  19. Wonderful Collection!

  20. waqas ahmed says:

    this is good site. this site has information about max tutorial and much more.

  21. waqas ahmed says:

    good site about max tutorial

Sorry, comments are now closed