Media Quieries
(1) Introduction
(2) Media Queries
(3) Viewpoint
Example and Descriptions
Example with Columns
Responsive Web Design
Introduction - Part One
Responsive Web Design (the term was coined by Ethan Marcotte in an article for A List Apart) allows you to create web pages that respond to the environment/conditions in which they are viewed. This is achieved by creating Media Queries that are placed in your CSS.
Media Queries (w3c)
Media Queries allow you to specify specific criteria (size, orientation, color and aspect-ratio) that match the viewing device, a desktop/laptop, ipad, cell phone etc.
In order to accommodate the variety of sizes you need to create a site using percentages for most of the page elements. You will probably need to reposition some elements at some stage in size change. Page created with Media Queries which also explains the CSS for different devices and sizes.
The Norm
Some are predicting that Responsive Design will become the norm for all web design. At the moment quite a few organizations are creating two different sites, one for desktop and another for mobile and many of theses could be replaced by one siite that is responding to the criteria of the computer/device.
For Media Queries you need to create a series of CSS Styles based on the main design for your site. You need at least three sets of CSS styles which contain your page elements at different wides.. These designs created by the CSS Styles need to work visually when transitioning from one size to the next. in order to do this you need to work with percentages for the widths of your page elements. You can choose to whether or not to display certain elements at different sizes.
JUNE 2011 ALERT
W3C is in the process of considering and testing whether or not you will be able to use different images at different stages within the Media Queries. This would eliminate the necessity the need to to download a large image when only a smaller one would be required for a particular device.
You can initially test your page by just resizing the browser window but you will need to test on a varity of devices before you go live. There are also emulators that you can use. Most of the sites with emulators charge a fee. Opera has a simulator for a cell phone. None of the emulators/simulators that I have tried seem to work as well as actually testing on the device.
When testing for the iphone and ipad this web page created by Mark Boulton works very well.
Monitor
The first size used in your CSS is the starting point, and at the moment the standard is to design for a monitor that is set to over 1024px wide (your design 980px wide). But as you are using Media Queries you could always start at a larger size.
Reader
The second is for a digital reader (ipad etc) . These readers come in a varity of screen sizes and most information can be viewed at a portrait or landscape orientation. The ipad is 768px, the Kindle is 600px and others have various screen sizes.
Cell Phones
Cell phones can be anywhere from 480px (iphone, landscape) all the way down to 280px wide.
The Case for Two Sites
Even though there will probably be more Responsive Design there are times when having two sites will still make more sense. One of the arguments against Responsive Design for a mobile is the mobile's lower band-width. Even though via Media Queries many images and other media are no longer displayed they are still downloaded creating a longer load time than would be required if a different site was used. The argument for having two sites also depends upon the purpose of the site, the intended user and even the situation.
At the User Focus Conference last fall in Washington DC, Cory Lebson discussed Mobile Web design and used
a case study from a government client, and how issues were resolved when the client decided to go mobile with an alternative version of their existing web site.
The site was for FEMA, the Federal Emergency Management Agency. Lebson went on to discuss that the client went with a different site for a mobile device because in many emergency and/or disaster situations the user probably has a limited battery and no access to electricity and needs to be able to access emergency information immediately, whereas the desktop user may only want general information about the agency and will be able to navigate through the site at their leisure.
Showcase: Responsive Design Websites
share / bookmark