Showing posts tagged with "css"

Responsive Web Design with Media Queries

April 16, 2011

It used to be easy to predict how users would view your website.  In the age of 800x600 and 1024x768 resolution monitors, you could design a site and be fairly confident that it would frame nicely in most people's browser windows.

Today most monitors have much larger resolutions, and there are so many internet-capable portable devices like iPads and smart phones, one fixed-width design doesn't seem to cut it anymore.  No matter which display you design for, only a fraction of your users will view your site in all the perfection you intended.  If your design is too small, there will be lots of wasted space on a large monitor.  If your design is too large, important content will get cut off become too cramped on smaller screens.

Last November I attended the Future of Web Design conference in New York City.  Ethan Marcotte gave a talk entitled "Responsive Web Design" which dealt with just this problem.  He talked about designing for the web in such a way that your layout will dynamically adapt to any size window.  This way your site will always be optimized whether on a large high-resolution monitor or a small mobile screen.  To begin creating a fully-responsive design, a website needs to be liquid rather than fixed, meaning that elements of the site are sized using percentages, rather than static pixels.  The design will then grow and shrink proportionally as needed.  But at certain sizes, purely proportional designs begin to break down.  Less important elements become too large, or areas of text become too narrow to read.  It's at these "stress points" that Ethan showed how to use a CSS technique call Media Queries to change the layout to fit the new viewing area.

The idea goes like this: with CSS media queries, styles are swapped in and out based on the capabilities of a device including resolution, width and height (of the screen and browser window), and orientation.

Here is an example of a media query:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="large-styles.css" />

In this code, if the browser window is wider than 1000px, the new stylesheet for large layouts will be applied.

To see what this actually can look like, take a look at Ethan's test site: http://robot-or-not.com and try resizing your window.  Pretty cool, huh?

I recently had a chance to utilize media queries in a site I was helping with.  My friend Jeffrey Chandler just refreshed his photography website, http://www.jeffreychandler.com, and switched to a full-width design.  One of the problems that comes with a full-width site is that in a large window, paragraphs of text start to become too wide to read naturally.

So I added in a Media Query to adjust the paragraphs to line up in two columns once the width exceeded a certain limit.  In this case, I used the media query right inside the existing stylesheet to adjust particular styles.

Here's the code:

@media screen and (min-width: 1000px) { 
     .content .paragraph {
          width: 45%;
          float: left;
          margin-right: 5%;
     }
}

Once the screen width is larger than 1000 pixels, the new styles for paragraphs become active, making them float into columns that take up half the width. (Notice that the width is in percentages, not pixels).



Another great use for media queries is to create a quick mobile-friendly version of your site.  I also added this code for when the screen is less than 920 pixels wide:

@media screen and (max-width: 920px) {
     #nav {
          clear: left;
     }
}

Notice how the navigation slides down below the title to create a layout that works great on a mobile browser.

This idea of Responsive Web Design definitely takes more planning - you need to consider how your design will hold up on a wide spectrum of sizes and orientations, and potentially design multiple versions of your site.  But if you're at all concerned with the experience that your users have when they visit your site, it's time well spent.  And this method won't work for all designs.  Sometimes it's still best to design a killer fixed template that you know will always look great in its static form.  Then, if necessary, create a separate mobile version that is optimized for portable devices.  But it never hurts to consider all the different ways users will interact with your website.  After all, the most important job of a Web Designer is to craft a pleasing experience for your users.

To learn more about Media Queries, visit the W3C Website.