Net Uncovered

Forward thinking advice on web design and development.

Reactive Web Design

These days, it seems like everyone’s talking about media queries. Whether it’s a showcase of the different sites that use this functionality, or articles that teach us about how to make best use of them, they are generating a lot of interest in the community. Perhaps this is because demonstrating how they work is as simple as resizing a browser window, eliciting an “Oooh” from people who are used to seeing their websites break in anything but a resolution of 1024×768 or higher.

More importantly is the fact that media queries allow web developers to create one site that can react to various resolutions. Why is this important? I like to think of it like this; imagine a photographer that’s shooting some photos of a wedding. He might decide to do a close up shot of the happy couple, then a shot that fits in the bridesmaids, then a shot that fits in both families, then perhaps a shot of everyone outside the church where the ceremony is taking place. The problem then comes in choosing which one to place in a photo frame; the last shot in a small frame will make it difficult for people to recognise themselves, but the first or second shot will make it easier to see exactly who is in the picture.

Instead of forcing a fixed layout, media queries let us format for a frame that can fit in that wide shot, hanging over the mantlepiece, and a smaller one placed on a chest of drawers. They enable us to design sites that are tailored to individual devices without the need for double-tapping or pinching. So I’m just going to take a look at how media queries can be used to create reactive websites.

Getting Started

Media queries can be used when linking a stylesheet:

<link rel="stylesheet" href="style.css" media="screen and (min-width:768px)">

Or, alternately, inside the CSS file itself:

@media screen and (min-width:768px)
{
	html
	{
		/* Inside style.css */
	}
}

There are a few different properties that can be used, but the most useful are those that target the window size, device size, orientation and also proprietary WebKit rules, such as this one for targeting Apple’s retina display:

@media screen and (-webkit-min-device-pixel-ratio: 2)
{
	/* iPhone 4 styles */
}

Most media query properties accept the prefixes min and max, which is useful when including styles that should only appear on a certain screen size. This example colours the background a different shade of grey if the window size is between seven and eight hundred pixels wide.

html
{
	background:#bdbdbd;
}
@media screen and (min-width:700px) and (max-width:800px)
{
	html
	{
		background:#a7a7a7;
	}
}

Media queries can also be used to test what screen size the device can be capable of rendering, even if the window is not at its maximum size already. This isn’t such a common use case for mobile users who have their browser windows span the whole screen size, but for desktop users it’s possible to gently nudge users to maximise their windows to get the most out of the page.

@media screen and (min-device-width:1024px)
{
	body
	{
		font-size:1.1em;
	}
}

What should I use them for?

One of the emerging uses of media queries is to reformat websites for mobile devices, saving time developing a separate mobile website. Designing a mobile website this way shouldn’t be considered for every project, as mobile user needs can be different to laptop users, but for content focused applications (such as a blog) they can be very effective.

I like to take a more mobile-focused approach; building a site with the intent of making it as easy to read on the go as possible, then moving page elements if the screen resolution allows it. By containing extra styles meant for desktop users in a separate stylesheet I can serve mobile users a site that is much leaner overall.

Media queries can also be used to hide certain styles from Internet Explorer without having to use conditional comments; using two stylesheets and hiding the other one from IE can ensure that browser gets colour, typography and branding without too much effort. Extra styling can then be safely shown to the rest of the browsers that support media queries. This site is a living demonstration of that in practice; go ahead, resize your window and notice how the layout reacts when there is less (or more) available space.

Reactive?

Finally, a note about reactive web design. I prefer this term to “responsive web design” because it implies a state change; that the website reacts when a user has done something, not whilst they’re doing it. Although media queries can be used for sites based on fluid width elements, fluid grids can be difficult to design with the current methods, especially when considering the additional markup needed to contain columns that use percentage widths.

So, I hope this served as a useful introduction to media queries; now go out there and build something with them!