wpcontent

Awesome tutorials to master responsive web design

Create an adaptable website layout with CSS3 media queries

Awesome tutorials to master responsive web design 1
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

Awesome tutorials to master responsive web design 2
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

Awesome tutorials to master responsive web design 3
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

Awesome tutorials to master responsive web design 4
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

Awesome tutorials to master responsive web design 5
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

Awesome tutorials to master responsive web design 6
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

Awesome tutorials to master responsive web design 7
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.

Context-Aware Image Sizing

Awesome tutorials to master responsive web design 8
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.

Elastic text with Fittext.js

Awesome tutorials to master responsive web design 9
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

Share This Post:
Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on whatsapp