Be Responsive

I’ve been think a lot about the ideas in Ethan Marcotte’s article Responsive Web Design. I love the idea of tweaking and transforming the presentation of information based on the available space. Note that I didn’t say the type of browser or device, it’s the amount of space that we care about.

Responsive design adjusts the layout or display of a page while you drag that little window resize handle around. This is accomplished through magic CSS3 Media Queries and various other voodoo techniques. Multiple different layouts can be applied to a single page and, if you’re lucky enough to use a handheld device such as an iPhone or an iPad, layouts can differ for orientation too. There are several great examples already in play.

A Short Case Study

As a quick example let’s look at Devour.com, a popular site that “scours the web for awesome videos. You know, the ones actually worth watching.” It’s a great place to go when you have a few minutes to waste. I often browse from my iPhone and see this:

Devour.com screenshot in Mobile Safari
Tiny thumbnails being tiny.

What I see on my iPhone is exactly what I see on my MacBook, only mush smaller (unless I zoom in of course). Instead, If we added a media query such as this:

/* Adjust layout to 1 columns */
@media screen and (max-width: 640px) {
#universe { width: 300px; }
#avion {
	border-bottom: 1px solid #ff0000;
	position: static; width: 300px; height: 160px;
}
#avion .search { margin: 10px 0; position: static; width: 300px; }	
#avion .nav { margin-top: 5px; float: left; }
#eternia { width: 300px; margin:0; }
#eternos { width: 300px; }
.aquatica { width: 300px; }
}

to the bottom of the stylesheet we could have a little nicer experience when the browser window is small, like it is on an iPhone:

alternative layout with @media
Look at that lovely header.

Likewise we can alter the layout to two columns if the available space is just a little too small for a 3 column layout:

/* Adjust layout to 2 columns */
@media screen and (max-width: 940px) {

#universe { width: 620px; }
#avion {
	width: 620px; height: 78px;
	position: relative; border-bottom: 0; }
#avion .search {
	margin: 0; position: absolute;
	left: 0; bottom:0px; width: 620px; }
#eternia { width: 640px; margin:0; }
#eternos { width: 640px; }
.aquatica { width: 640px; }
	
}

or keep the three column layout if there’s lots of space:

Bigger search box in the middle!

Now, I only spent about 10 minutes on this and basically all I did was re-arrange the header elements to fit the different grid sizes. I’m sure there’s much more that could be done given time. Ideally, we could also adjust the size of the thumbnails themselves and scale them as the window changes size but I’ll leave that for you to play with.

The post ‘Be Responsive’ was first published by Jeffrey Sambells on