the Blog

What is Responsive Web Design?

Posted on May 23, 2012 by Michael Rosario  |  Comments

Responsive web design is a new approach in which a site would appear flexible aka "responsive" as it automatically adjusts to your screen size, browser platform, and/or screen resolution. Before responsive design/development, we had something close — the ability to serve targeted CSS stylesheets for mobile, screen, and print - three separate stylesheets!

Remember these?

<link rel="stylesheet" type="text/css" href="reset.css" media="all" />
link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />
link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
link rel="stylesheet" type="text/css" href="print.css" media="print" /> 

Responsive websites show the same content - but rearranged to maximize the use of the space allowed by your browser or screen using media queries. See example below, let's say – iphone screen, ipad screen, and LCD screen:

Responsive Web Development and Design
This is more like it:
/* CSS for all browser goes here */
@media only screen and (max-width900px{
/* CSS for browser screen with 900px and below goes here */

@media only screen and (max-width600px{
/* CSS for browser screen with 600px and below goes here */

For more information here are a few helpful resources:

Books to Read:

Cool Frameworks/Boilerplates:

comments powered by Disqus

Other Recent Blog

Getting Your Next iPhone for FREE
Posted on May 15, 2011  |  Comments I'm just sharing my experience in selling my previous iphone to get the most recent iphone. I love my iphone and i'm sure you love yours too.
Show Some Web Typography Love Using Typekit
Posted on May 12, 2011  |  Comments Typekit is a simple add-on to your site that allows the use of custom fonts. They have hundreds in their library. It's simple, light-weight, and compatible to most browsers.