Awesome tutorials to master responsive web design

In a few month, responsive web design has become a very important part of designing and developping a website. Due to the rise of mobile devices such as iPads, iPhones and other smart phones, your website must be easy to read and use in multiple resolution. In this post, I have compiled those awesome tutorials that will help you to master responsive web design.

Create an adaptable website layout with CSS3 media queries

With the rise of both very large screens and mobile devices, web developers have to be able to create websites that display correctly and look good whatever the device is. Sure, you can use good old techniques like fluid layouts, but I’ve got something better to show you today. This tutorial will teach you how you can create an adaptable website layout using CSS3.
→ Read tutorial: Create an adaptable website layout with CSS3 media queries

Fluid images

This tutorial will shown you how to make your image scales down when the browser is resized or when your website is viewed through a smaller screen.
→ Read tutorial: Fluid images

Elastic videos

Nowadays, videos are widely used on the web. This useful tutorial written by Nick La (I’ve always be a fan of his work!) will show you how to make your videos scales down according to the window size.
→ Read tutorial: CSS3: Elastic videos

Optimizing your emails for mobile devices

As mobile devices are more and more used, more people are receiving their emails on their phones instead of their computer. For this reason, it is important that newsletter emails can be easily read on a small screen. This tutorial is going to show you how to create html emails than can adapt to mobile devices. A must read for everyone sending newsletters!
→ Read tutorial: Optimizing your emails for mobile devices with the @media query

Images that match text height

This tutorial descibres a very clever way to fill up the entire available space with images. Images are scaled, they are spaced more or less according to the text height.
→ Read tutorial: CSS effect: space images out to match text height

Hiding and revealing portions of images

Here is another great tutorial from zomigi.com. This useful article describes how to be able to reveal or hide portions of images depending of the screen size.
→ Read tutorial: Hiding and revealing portions of images

Responsive Data Tables

Wanna be able to create awesome tables that fits the display size? Chris Coyier from css-tricks.com have a very good post about the topic.
→ Read tutorial: Responsive Data Tables

Context-Aware Image Sizing

The technique described on this article is pretty interesting and consist in loading an image depending of the screen size. For example, if someone is viewing your website on an iPhone, he’ll see a low-resolution image, because it is useless to display 2000px wide images on small devices. On the other hand, people viewing your site on a computer will get a hi-resolution image.
→ Read tutorial: Responsive Images: Experimenting with Context-Aware Image Sizing

Elastic text with Fittext.js

Well, this is more a tool than a tutorial, but Fittext is so useful than it totally deserve its place on this article. FitText is a small JavaScript tool that allows the automatic resizing of a text regarding the size of its parent element. For a demo, just have a look to the website and resize your browser: The text will fit.
→ Read tutorial: Fittext