Awesome tutorials to master responsive web design

by Jean. 11 Comments -

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

  • http://wpcoder.com Michael Castilla

    This is a solid post of resources. I would also like to share that the TwentyEleven default WordPress theme is a great example that utilizes a lot of these responsive web techniques.

  • http://www.kennyrosenberg.com kenny rosenberg

    Jean-Baptiste this is a great article. May I also suggest using Fitvids http://fitvidsjs.com/ by Chris Coyier and Paravel. FitVids allows you to embed videos/iframes within an adaptable container and this is the best resource Ive used so far for responsive video.

    Thanks

  • http://www.100webhosting.com Jasmine

    Wow, all these are awesome tutorials. I love fluid images and elastic videos the most… too many techniques to learn!

  • http://designmodo.com Adrian

    This is one of the most amazing blogs which will provide you a lot of information of how to design webs. Many blogs do that, but the special thing about this blog is that it does so in a very comprehensively way which provides the reader an extremely thorough idea about the concept of web designing. I love the blog for its simplicity of presentation.

  • http://www.ariona.net Rian Ariona

    Thanks Jean, for this great collection of responsive web design tutorial :)

  • http://www.cardiff-website-design.com Pauly

    Very interesting article, although most of the designs seem very plain in structure.

    P.S. Thanks for making me aware of fittext!

  • http://www.ajacreative.co.uk/ Anthony Ankers

    Some great techniques here, i haven’t come across this so thanks.

  • http://www.xhtmlpress.com Fredrik Rovert

    Responsive Designing is a great concept in the web designing but a bit complicated for the people like me those who are not much familiar with it. Thanks for such a great tutorial and will be really helpful , thanks for sharing.

  • Prodyot

    Great post.
    I can now try my hands in crafting responsive templates.
    Thanks.

  • http://thebc.co Matt

    Good info as always. Keep up the great work.

  • http://www.marketingthechange.com Josh Morley

    Great Post
    It has given me some ideas when working with responsive sites.
    Thank you