What is Responsive Web Design?
RWD is a design trend term coined by Ethan Marcotte in his article on A List Apart. The basic concept of RWD consists of having a flexible fluid layout that adapts to the different viewing modes of various web browsers. The end results are beautifully tailored layouts with scaled images and dynamic re-flows of web content.
There are three key technical features, that when composed together will enhance the viewing environment:
- tailored style sheets using CSS3 media queries and media query listeners
- flexible grid-based layout that uses relative sizing (percentages and ems)
- dynamic scaling of images, media, and web content
Why is there a need for responsive designs?
The ability to communicate creatively via the web has forever changed the print industry. Creative minds are no longer bounded by specific dimensions of paper. With the expanding number of web browser dimensions, static design layouts are not enough anymore to accommodate the growing users of modern electronics. From the familiar computer desktops and popular tablets to mobile devices and tv/game console browsers, there is an increasing need for a layout that is fluid and responsive for this changing web landscape.
What are media queries?
CSS2 allowed web developers to specify style sheets based on different media types of screen and/or print. CSS3 took a step forward and allowed developers to render layouts based on additional media queries using expressions to check for specific conditions. For example, a media query would check a device browser’s screen min and max width before changing the background color of the wrapper.
@media screen (min-width:320px) and (max-width:720px)
{
.wrapper { background: #ccc; }
}
Responsive Grid Layouts
There are many responsive CSS frameworks out there. These flexible grid layouts are based on a number of fluid columns with predefined style sheets and media queries that can be used for your future responsive layout needs.
The trend of Responsive Web Design is catching on in popularity. Many sites are now getting a redesign so their layouts can adapt for a better user experience.