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.
1. 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.
2. Responsive web design articles
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.
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.
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.
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.
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.
3. Responsive web design tutorials
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.
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.
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.
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.
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.
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.
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.
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.
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