Get our posts emailed to you with our monthly newsletter, subscribe here.
In the past few years the rise of mobile devices such as iPads, iPhones and other smart phones was extremely huge and that was the reason why responsive web design started to play more and more important role in the design industry. But what is the responsive design you will ask.
The idea of responsive web design, started by Ethan Marcotte, is that our websites should respond to the device that our page is shown on by adapting their layout and design to fit any device resolution. In his book “Responsive Web Design” he outlines the three parts to a responsive website: a fluid grid, fluid images and media queries.
In this post I would like to share 15 useful responsive design tutorials to help you get started with responsive designing including fluid grids, fluid images and media queries.
Beginner’s introduction to responsive design. You will learn about the spectrum of screen sizes and resolutions that are widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.
If you have the basic CSS knowledge you can quickly get started with responsive design by following this quick tutorial by Nick La on Web Designer Wall. Nick will show you how you can learn about the basic logic of responsive design and media queries in just 3 steps.
Media queries are the third pillar in Ethan Marcotte’s implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.
In this short tutorial, Louis Simoneau will walk you through taking a fairly simple page design and making it responsive with the help of the Less Framework 3 by Joni Korpi.
In this tutorial you will learn how to use adaptive layouts with media queries which affects browser dimensions (width, height and aspect-ratio), device dimensions (device-width, device-height and device-aspect-ratio), browser orientation, colour information (color, color-index and monochrome) and much more.
Responsive web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. In this tutorial you will find how to use custom layout structure, fluid images and media queries.
In this article you will find out what actually responsive web design is and why it is the next must-have website feature. Also you will find how to make your website to adapt, respond, and overcome.
Chris Coyier will show you how to convert a menu to a dropdown for small devices. When the browser window is narrow, the horizontal menu converts from a regular row of links into a dropdown menu.
In this article by Ethan Marcotte you will find a lot of useful information on fluid grids subject. Also you will see some practical examples of fluid grids in action.
In this article Rachel Andrew will explain you how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. You’ll have a look at a very simple example and she will also discuss the process of adding a small screen device stylesheet to your own site to show how easily you can add stylesheets for mobile devices to existing websites.
In this article Max Luzuriaga talks about the design process of the responsive web design. By reading this post you will find out about grid systems, images and proportions in designing a responsive website.
CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup. The techniques in this article explain how we can leverage this powerful capability of CSS to also change imagery, alter the navigation on hand-held devices, and set up default CSS for compatibility older browsers.
In this article Ryan Seddon will focus on the orientation media query and will make a demonstration showing how to use it.
In this tutorial Chris Coyier talks about using CSS media queries to assign different stylesheets depending on browser window size and the syntax for using media queries within a single stylesheet and more examples of that.
By creating a separate set of styles to be used by devices that recognize the @mediaquery, you can optimize your emails in a similar fashion to how web pages are being optimized for the mobile today. Devices that don’t recognize @media will degrade gracefully by simply reverting to your default styles.