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-width: 900px) {
/* CSS for browser screen with 900px and below goes here */
}

@media only screen and (max-width: 600px) {
/* 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

Cutting the Cable Cord: Ways to Save
Posted on March 20, 2015  |  Comments Cable is great - lots of channels, DVR, movies! Do I really need all that? I cut the chord to save money and see all the possible options to save.
Echo Dot - 2nd Generation
Posted on February 5, 2015  |  Comments Amazon's Echo Dot is a hands-free, voice-controlled device that uses Alexa to play music, control smart home devices, make calls, send and receive messages, provide information, read the news, set alarms, read audiobooks from Audible, and more.
A Conversation about Conservation
Posted on November 16, 2014  |  Comments It's always good to save money and save the environment at the same time. There are so many ways, lifehacks, and things we can do. Please share.