Smartphones and tablets have over taken the market. With high speed internet available, fast processors and sharp screens, everyone is using their portable device to browse the web. While about seven years ago we’d be discussing for which monitor resolution to design, now we have to design for everything, no ifs or buts.
From personal experience I know I want and use my iPhone for all my web browsing needs when away from my desktop. I expect that websites are coded for mobile devices. To achieve that you have to use media queries to serve your website in each resolution flavor, e.g. iPhone, iPad, Galaxy Tab, landscape and portrait.
Media queries is an extension of print and screen used in CSS2.
Example:
[css]
[/css]
Code by Andy Clarke
Unfortunately or not, depending on your point of view, media queries has become the new “fixed vs fluid” argument. There are people who approach media queries as responsive web design, while others approach it as adaptive web design. I was never one to mull over these thing, as long as the code I use gets the job done. But web designers and coders are passionate people, so difference of opinion is inevitable.
I collected a couple of code examples, tutorials, weblog posts on the matter of adaptive or responsive and two books about each one. Whether you are on the adaptive or responsive side, we all need to know how to implement media queries. It’s so year 2004 to only serve your website for large screens only.
Tutorials and Examples
Getting Started With (and Gotchas of) CSS Media Queries
Quick Tip: A Crash-Course in CSS Media Queries
Effective Example of CSS Media Queries
Using Media Query to Declare CSS for iPhone
CSS Media Queries & Using Available Space
Hardboiled CSS3 Media Queries * Hat Tip!
Responsive Web Design Articles, Tutorials & Guides
Opinions on Responsive or Adaptive
I much prefer the name adaptive web design. A website should not respond to changing surroundings, it should adapt to them once they’ve changed.
Adaptive or Responsive Design?
Likewise, a gas or liquid doesn’t exactly “respond” to being put in a jar by taking up the free space, it “adapts” to the space it has been placed in.
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.
Books
Responsive Web Design by Ethan Marcotte
From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. — A Book Apart
Adaptive Web Design by Aaron Gustafson
The web is an ever-changing medium whose scope, application, audience and platform continue to grow on a daily basis. If you’ve worked on the web for any amount of time, you’ve likely heard or even used the term “progressive enhancement.” Since the term’s inception, it has been considered a best practice for approaching web design. But what is it really?
