So we’ve reached the end of our "Responsive Web Design week", tonight’s post will be the last of the series. We are going all out to help you hone your skills in manipulating those codes to respond at will when displayed on different devices. And to do this, we are featuring 30 Responsive Web Design Tutorials found online. This list is not meant to be an exhaustive one but it will get you started on understanding the basics of designing an adaptive website that will cater to all sorts of screen sizes.

We’ll start off with introductory tutorials in ‘Breaking the Ice’, something like an RWD: 101 class you should attend to get the hang of the concept before we move on to ‘Start Building’ exercises.

Lastly we’ll end with a ‘Do More’ section in which we’ll feature tutorials that play with horizontal layouts, ‘elastic’ videos, drop-down menus and slide-to-top accordion navigations, thumbnails and the sticky issue with tables.

But first…

Here’s a recap of the two tutorials that were featured earlier this week by our authors:

Responsive website Navigation

Here’s a tutorial to help you make your very own responsive website navigation. One of the most important aspect of a website is how easy it is to navigate through different parts of the site. Find out how to optimize this with CSS3 with this tutorial.

Responsive Resume

If you are a web professional and an online resume is already part and parcel of your career, then you should take the opportunity to turn that resume responsive as well. Make it easier for employers and clients to find you on any device. And while you’re at it, your own resume doubles as a portfolio of what you can do as a developer.

Breaking the Ice

Now, where were we? Ah yes, let’s get some ice-breaking action started!

Beginner’s Guide to Responsive Web Design

This tutorial is a great starting point for beginners as it describes what web responsive design means, how it came to light, as well as explanations about fluid grids and media queries among others. Check out the resources listed at the bottom of the tutorial as well.

Introduction to Responsive Web Design: Video

This is a tutorial that is close to 9 minutes long which skims the surface of what responsive web design is about, how it came to be, the impact it has on the design of a website and what elements are involved in producing a responsive web design. If you are looking to understand what responsive web design is about without heading into coding first, you should start with this video.

How to Turn Any Website into a Responsive Site

This is another tutorial that starts from the basics but breaks everything down bit by bit, including the OS and browsers you are turning your website responsive for as well as the elements that are affected when the website is viewed from different devices. The author also featured some useful WordPress and jQuery plugins to help make your work far easier.

Designing For A Responsive Web

Here’s an article that is not so much a tutorial as it is a guide to creating responsive web design. That said, the author literally tells you the do’s and don’ts of responsive web design. There are explanations about why certain features are not responsive enough, how to work with proportions and modules, and best of all, it is relatively short and easy to absorb.

Responsive Web Design: A Visual Guide

If text-filled tutorials are not viable options, try this video tutorial instead. It is still rather technical but if it makes you feel better, you don’t have to do much reading. It’s about 25 minutes long and the video-maker actually fast-fowarded through the parts where he codes, then goes back to explain what the codes do.

Start Building

Alright, let’s start building some responsive designs, starting with…

Fluid Grids

Say grid, and you would think ‘rigid structures’, say fluid and you’d think that it could flow from one side of the screen to the bottom or top or side when you apply pressure to the browser, but put those two together and you would probably think you need to look at this tutorial to fully appreciate how fluid grids can help make your design more responsive.

Fluid Images

By the end of this article, you should know who Ethan Marcotte is. Here’s a hint: he is the one who came up with the concept and term for web responsive designs. His name will pretty much turn up in every other tutorial in this list so why not take advice about fluid images straight from the Master himself?.

Scalable Navigation Patterns in Responsive Web Design

This tutorial talks about the lessons the author learned from a working on a large-scale responsive web design project. Read his ‘walkthrough’ about how to create templates that are easier to configure for user-friendly and responsive results. It is a great look behind the scenes in understanding how to design interfaces in the best way for desktop, tablet and mobile views.

Responsive Web Design with CSS3 Media Queries

And another excellent tutorial to make you learn how to design a cross-browser responsive website template with HTML5 and CSS3. It’s a step-by-step approach and there are demos of a web design before and after the media queries were implemented to better appreciate the impact of media queries.

Adaptive Layouts with Media Queries

Learn how to use adaptive or flexible layouts with CSS media queries. Just follow the exercise to learn to adapt your design to double-column view or single-column view as well as to prepare the design for the iPhone and iPad.

Responsive Images: Experimenting with Context-aware Image Sizing

Here’s a tutorial that used the build-from-mobile-first approach. This technique specifies a larger size for the images to use on larger screen resolutions, minus image requests as well as UA sniffing.

Hiding And Revealing Portions Of Images

The tutorial is actually taken from the author’s book, describing how to reveal or hide portions of images depending on screen resolutions. It teaches you how to dynamically crop images when the screen size changes, showing you only part of the full image when there is limited space.

Responsive Content Navigator with CSS3

Prefer a fancier way for users to navigate around your side? Then, you should read through this tutorial to learn how to code in some cool transitions: fade in, slides, rotations and scaling up. The transitions are essentially content layers that were shown or hidden with specific coding.

Responsive Horizontal Layout

This tutorial teaches you how to create a horizontal layout with several scrollable content panels. Using The Origin of Species as the sample text, each chapter of the book is separated in columns placed next to each other in full-browser mode but when shrunk down to small enough, the layout changes to a fully vertical scrolling ‘book’.

Convert a Menu to a Drop down for Small Screens

This tutorial will show you how to convert a menu to a drop-down list when the browser window is narrow, or when you are on a mobile device. The row of links in the upper right corner of the page gets converted into a drop-down menu to save space without sacrificing navigation options.

How to Use CSS3 Orientation Media Queries

Based on the simple rule that defines portrait (height larger than width) and landscape (width larger than height) modes, you can write a media query to target specific styles based on the mode you view it on. This tutorial will show us how to do just that and it comes complete with a link to a color-changing chameleon that uses color to demonstrate this change as you shrink the browser window.

Responsive Data Tables

Tables are a source of headaches when it comes to small screen sizes but that doesn’t mean that we need to completely avoid tables. Learn how to use media queries to make your table change formats completely when you switch to mobile screen sizes. View the demo to get an idea of the magic you can make based on this tutorial.

Fluid CSS3 Slideshow with Parallax Effect

Create a CSS3 slideshow where two background images are used and when the positions of the backgrounds are changed, a parallax effect is seen. Apart from that, the slideshow is flexible, resizing itself as the browser window closes in on it.

How to Build a Responsive Thumbnail Gallery

This is great for websites that feature thumbnails in a gallery. As the browser window is resized, the layout is changed to occupy between two columns (smaller screen sizes) and five (maximum) columns. For more similar slideshows and sliders, check out our Top 10 Free Responsive Image Galleries/Slideshows article.

Optimizing your Email for Mobile Devices

Even emails can be optimized for small-screen view like how websites are. Most of the time the text in an HTML email is resized to a point that is not made for comfortable reading; learn how to manage this and more from this tutorial.

using frameworks

Build a Responsive Mobile-Friendly Website with Skeleton

Skeleton is an awesome framework to build responsive websites with it. This tutorial takes you in a step-by-step guide on how to use Skeleton framework to build awesome responsive designs. You will be stunned to see how easy it is to implement.

Responsive Web Design with HTML5 & Less Framework 3

If you haven’t been properly introduced to Less, then do check out our own Less CSS tutorial first to get a taste of Less. In this tutorial, the Less framework was used to let you see clearly the effects of media queries.

Conclusion

And that concludes our Responsive Web Design series. We hope that the themes, tools and other resources featured in this series have helped exposed the concept of responsive web design to our readers. But how would we know if you don’t tell us?

Let us know your feedback on the series and if you have suggestions for more ideas you want to see at hongkiat.com. Drop us a line, or a comment below.