- “Unlimited”
- Posted on December 14, 2011 | Comments I'm talking about ISPs and data plans that are providing "Unlimited" plans. Or so they say?
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:
/* 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:
- Bye, Bye Waterfall: 5 Steps to Implement Responsive Web Design
- HTML5 - Responsive Web Design
- What The Heck Is Responsive Web Design?
Books to Read:
- A Book Apart: Responsive Web Design by Ethan Marcotte
- Responsive Web Design with HTML5 and CSS3 by Ben Frain
Cool Frameworks/Boilerplates:
comments powered by Disqus
Other Recent Blog
- Holiday iPhone Games for 2011
- Posted on November 22, 2011 | Comments Nothing like a holiday sale!
- Heroes vs Monsters for the IPhone
- Posted on November 21, 2011 | Comments This game looks just like Battle Heart, but more.
- Creating QR Codes
- Posted on November 12, 2011 | Comments QR Codes (Quick Response Codes) is matrix/2-dimensional barcode system used to store links and images and codes. I think it's a lazy way of adding links - no need to type your URL, just scan on your phone.