Tuesday, 15 July 2014

16 really useful responsive design tutorials

Ensure your website has the optimal viewing experience with these helpful responsive design tutorials.

Responsive web design can be a daunting step to take if you have no idea where to start. Thankfully, we've rounded up these really useful tutorials to help you from day one. From dealing with typography and video, through imagery and layout to the technicalities of using JavaScript on your responsive sites, you'll be a pro before you know it.

01. Responsive web design: what it is and how to use it

responsive design tutorials
Get the grips with the basics of responsive web design
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, writes Kayla Knight. 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?

02. Responsive web design: a visual guide

responsive design tutorials
Accomodate your site to a number of different devices
These days, 'one size fits all' is quickly becoming a dated concept. Luckily, with CSS media queries, we can now easily build responsive web designs that accomodate everything from your mobile phone to your massive desktop, as this video tutorial demonstrates.

03. Braindump on responsive web design

responsive design tutorials
Take a look at a range of tips and tricks in this tutorial video
Chris Coyier explains the very basics of what 'responsive web design' has come to mean, with examples, related resources, relevant people, tips and tricks, and more.

04. Build a basic responsive site with CSS

responsive design tutorials
Start simple by following this step-by-step tutorial for your first site
Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website.

05. How to add responsive video to your website

Ensure that embedded video works properly on your responsive site
Responsive web design has changed the way we approach video. John Surdakowski explains what you need to do to ensure that embedded video works properly your website.

06. Build a responsive site in a week: part 1

responsive design tutorials
The first of a five-part responsive design tutorial series
Interested in responsive web design but not sure how to get started? Don't fret, help is at hand! In a five-tutorial series, Paul Robert Lloyd talks you through the responsive design process, soup to nuts.

07. Build a responsive site in a week: typography & grids: part 2

responsive design tutorials
Translate static page designs into adaptable sites
In the second part of this series, Paul Robert Lloyd tells us how to translate static page designs into adaptable, fluid websites. So let go of those pixels and learn to love proportions!

08. Build a responsive site in a week: images and video: part 3

responsive design tutorials
Get to grips with images and video in a responsive environment
In the third part of this series, Paul Robert Lloyd looks at incorporating images and video into responsive layouts, and describes some of the problems in this area that still need solving.

09. Build a responsive site in a week: media queries: part 4

responsive design tutorials
Understand breakpoints in the penultimate part of the series
In the penultimate part of this responsive design series, Paul Robert Lloyd explains how media queries work, and describes a device-agnostic approach to breakpoints.

10. Build a responsive site in a week: going further: part 5

responsive design tutorials
Once you know the basics, this tutorial lets you into even more tips and tricks
In the final part of this responsive web design series, Paul Robert Lloyd explains how there is more to a responsive design than just flexible layouts, images and media queries.

11. Advanced RWD layout techniques

Josh Broton presents tips and tricks for creating advanced layouts for responsive web design, including the CSS Flexible Box Layout Module.

12. Design sites using the Responsive Grid System

responsive design tutorials
Learn the quick and easy route with this grid system
The Responsive Grid System isn't a framework or a boilerplate. But it does make creating responsive websites quick and easy. Graham Miller, its creator, explains how to use it.

13. Responsive Navigation Menu

responsive design tutorials
Transfrom a regular menu into a dropdown offering
The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display. The technique requires no Javascript and uses clean and semantic HTML5 markup.

14. Introducing responsive web typography With FlowType.JS

responsive design tutorials
Get your widths right with this responsive tutorial
FlowType.JS allows a perfect character count per line at any screen width. This tutorial on Smashing explains how to use it.

15. Handling typography for responsive design

responsive design tutorials
Make sure you get your type just right
You've got your layout and images scaling, but you need to have your type following along as well. One size of type does not fit all line lengths or screen widths, says Val Head.

16. Expert guide to making your JavaScript responsive

Handling JavaScript across responsive sites needn't be a minefield. Here Jonathan Fielding explains how to gracefully handle the transition between different responsive states.
Did you find these tutorials useful? Let us know in the comments box below!