HTML5 Zone is brought to you in partnership with:

My name is Jean-Baptiste Jung and I’m a 29 years old web developer and professional blogger. I was born and raised in Paris, France and I now live in Belgium with my wife and our adorable cat. I first used the internet in 1998, built my first website in 2001 and finally started to work as a professional web developer in 2005. In 2010, I left my job and created my own web development studio. jb is a DZone MVB and is not an employee of DZone and has posted 55 posts at DZone. You can read more from them at their website. View Full User Profile

Awesome tutorials to master responsive web design

12.17.2011
| 5750 views |
  • submit to reddit

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

More posts about CSS

 

Source: http://www.catswhocode.com/blog/awesome-tutorials-to-master-responsive-web-design

Published at DZone with permission of jb j, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)