While we may want to view websites on a wide-screen while we’re sitting, we can’t lug those things around in our pocket or purse when we mobilize. The result: extremes — a screen as big as our desk while at work; and one that fits on the head of a pin when we’re not. Oh, and let’s not forget all the gadgets with screen sizes somewhere in between. What’s a web developer and designer to do?
Here are a few options:
- Simply create a site optimized for a high-resolution, large screen and then expect that when viewed on a smart phone or similar-sized device, there will be a lot moving and zooming around to actually read the site.
- Design a site using a common smaller screen dimension and, while it may not be optimum on a large screen, it will “fit†on most devices with minimal scrolling.
- Program your large site so that it scales to fit smaller screens… and hope it doesn’t “break†in the process.
- Create a site with custom design “rules†that respond to screen size, making the site work on a large screen down to an iPad or smart phone without having to reload the page.
While option #2 is the easiest and therefore most cost-efficient, it is not going to deliver the most satisfying user experience across all devices. That option is most likely #4. Option #4 offers us a way to create a single design where we can modify parts of the layout and adjust for different screen widths.
The technique requires the user to be on one of the most current browsers, and is implemented using CSS3 media queries. Media queries add a layer which allows you to change existing rules if a condition is met, usually a different screen width.
Here are a handful of sites that serve to illustrate this technique. You can see how the site maintains its look and feel as it displays on a large format on the right and a mobile format on the left. When comparing the two layouts you can see how the sites have often been edited down in content and always re-arranged.
The Modern Gentleman
Arrrrcamp Conference
Pelicanfly
Sasquatch! Music Festival!
Images from the great responsive web design gallery Media Queries
