Responsive Web Design Resources For Absolute Beginners

22/05/2012 | Author: ciara@mediastreet.ie

Responsive Web Design Resources For Absolute Beginners

By Janna Hagan.

I just started getting into responsive web design recently. I know I’m behind the ball on this, as it’s been a highly discussed topic over the past few months, but I have a feeling I’m not the only one who hasn’t started dabbling in responsive web design yet. The list of resources, articles, frameworks and fancy (mainly unnecessary) CSS3 tricks I’ve seen for responsive design is overwhelming, so I’ve curated a list of all the essential things you need to get started in responsive web design.

My advice for anyone starting out fresh with responsive web design is to keep it simple! If you are patient with the learning curve of mastering responsive web design, you will be implementing many of these new techniques into your project workflow in no time.

Reading Material

1. A Beginner’s Guide to Responsive Web Design by Think Vitamin

This is a great article about the basics of responsive web design, what it is and how it is changing the future of web design. Learn about the basics of fluid grids, media queries and how responsive web design isn’t really a technology in itself, but rather a series of techniques and ideas that form a whole.

2. Responsive Web Design by Ethan Marcotte

The creator of responsive web design discusses the key ideas that form responsive design and how you can become more adaptable to the ever changing mediums that we need to design sites for.

3. How to Design a Mobile Responsive Website by UX Booth

A straight-forward article about the process of designing, planning and executing a responsive website. Goes in depth about researching, wire framing, style and development.

Putting it into Practice

1. Create a Responsive Web Design Template by One Extra Pixel

A simple tutorial on creating a responsive website from desktop down to mobile.

2. Responsive Web Design with HTML5 and the Less Framework by Site Point

A good tutorial using the Less framework (which you can download below) on how to use a responsive technique to create a simple website.

3. Responsive Design in 3 Steps by Web Designer Wall

Nick La breaks down responsive design into three easy steps that you can implement into your websites.

4. Create an Adaptable Website Layout with CSS3 Media Queries by Cats Who Code

A nice tutorial on how to use CSS3 to develop an adaptable layout. Gives you a demo and the ability to download all the source files for future reference.

Grids

1. 1140px CSS Grid System

A responsive framework that fits perfectly to a 1280 monitor and scales and adapts to others as they become smaller.

2. Less Framework

A framework that you can use with the tutorial posted above. It contains 4 layouts and 3 sets of typography presets on a single grid.

Free Responsive WordPress Themes

If you use WordPress as your main CMS, I highly recommend you download some of these free themes and play around with the code.

1. WordPress Theme with Responsive Layout: Yoko by Smashing Magazine

2. Responsive Twenty Ten

3. Origin Responsive WordPress Theme

Tools

1. Responsive Web Design Sketch Sheets

A great download for the sketching part of the creative process. These responsive sketch sheets makes it easier for you to envision how your website will appear on smaller resolutions.