Saturday, July 13, 2013

30 Useful Responsive Web Design Tutorials

30 Useful Responsive Web Design Tutorials

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...

Responsive Website Navigation

By Thoriq Firdaus – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Resume

By Jake Rocheleau – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Breaking The Ice

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

Beginner's Guide To Responsive Web Design

By Nick Petit – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Introduction To Responsive Web Design: Video

By Nick Petit – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

How To Turn Any Website Into A Responsive Site

By Rochester Oliveira – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Design In 3 Steps

By Nick La – [View tutorial]

This tutorial, will explain how you can produce a responsive web design with meta tags, HTML structure and the all-important media queries. You need some knowledge of CSS to understand it...

30 Useful Responsive Web Design Tutorials

Designing For A Responsive Web

By Max Luzuriaga – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Web Design: A Visual Guide

By Andrew Gormley – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Start Building

Alright, let's start building some responsive designs, starting with...

Fluid Grids

By Ethan Marcotte – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Fluid Images

By Ethan Marcotte – [View tutorial]

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?.

30 Useful Responsive Web Design Tutorials

Scalable Navigation Patterns In Responsive Web Design

By Michael Mesker – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Web Design With CSS3 Media Queries

By Nick La – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

CSS Effects: Space Images Out To Match Text Height

By Zoe Mickley Gillenwater – [View tutorial]

This tutorial makes you learn the trick of making fixed-width images change their size and spacing in order to line up with the accompanying text, no matter how the browser window is resized.

30 Useful Responsive Web Design Tutorials

Adaptive Layouts With Media Queries

By Aaron Gustafson – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Images: Experimenting With Context-Aware Image Sizing

By Scott Jehl – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Do More

Elastic Videos

By Nick La – [View tutorial]

This tutorial deals with the scaling of videos as your browser window is resized. It’s essentially a CSS trick and there's a demo to see the trick at work in the tutorial itself.

30 Useful Responsive Web Design Tutorials

Hiding And Revealing Portions Of Images

By Zoe Mickley Gillenwater – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Content Navigator With CSS3

By Mary Lou – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Create A Responsive Web Design Template

By Harry Atkins – [View tutorial]

This is a short tutorial to produce a responsive web template that works both on the desktop as well as on the iPhone.

30 Useful Responsive Web Design Tutorials

Responsive Horizontal Layout

By Mary Lou – [View tutorial]

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".

30 Useful Responsive Web Design Tutorials

Convert A Menu To A Drop Down For Small Screens

By Chris Coyier – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Flexible Slide-To-Top Accordion

By Mary Lou – [View tutorial]

Learn how to create a simple and flexible accordion layout, with fade-in transitions and adjustable widths based on screen size and resolutions.

30 Useful Responsive Web Design Tutorials

How To Use CSS3 Orientation Media Queries

By Ryan Seddon – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Data Tables

By Chris Coyier – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Fluid CSS3 Slideshow With Parallax Effect

By Ring Wing – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

How To Build A Responsive Thumbnail Gallery

By Joshua Johnson – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Optimizing Your Email For Mobile Devices

By Ros Hodgekiss – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Using Frameworks

Build A Responsive Mobile-Friendly Website With Skeleton

By Joshua Johnson – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials

Responsive Web Design With HTML5 & Less Framework 3

By Louis Simoneau – [View tutorial]

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.

30 Useful Responsive Web Design Tutorials