PreviousNext…

On re-designs & media queries

So what with rebuilding servers and things the other night, I figured what the hell, and instead of replicating my old website back up to the box, I slung my new design up instead. There were a few bits that needed sorting (server re-directs, some configuration, a few HTML tweaks), but overall the new design was 95% there, so perhaps this was the kick I needed to get it out.

The re-design was originally done in HTML5, just to see if I could. Worked pretty nicely, but I didn’t have time to burp Domino through all the edge cases, so maybe that version will be reinstated in time. For now though, the site is rendered in (usually) valid XHTML thanks to Domino’s $$HtmlFrontMatter and $$HtmlTagAttributes fields. I’ve also kept some of the CSS3 doo-dads for those browsers that can cope. If you’re viewing this site in Internet Explorer, it will render OK (well, I only tested in IE7 and IE8), but you don’t get some of the extras. If you’re in a proper browser (I tested in Firefox, Safari and Chrome), you will see the eye candy like opacity, shadows, rounded corners etc.—but there’s also a bit of “responsive design” going on.

Web development graphic

Eh?

The term “responsive design” is fancy talk for an approach to web design whereby page content adapts to the device from which it is viewed. If you’re using a decent browser, you can see simple responsive design in action right now: make your browser window pretty narrow. You will now see some changes which comprise the typical use-case for so-called “media queries”: the site will render a smaller banner at the top, overall font sizes will adjust, and the side bar currently to the right of the layout will drop down beneath the main content. In addition, some post images will scale down, as will any embedded video clips from Youtube. Nifty eh?

I still have some work to do, but it’s been fun learning about this stuff. I recommend the Alistapart article, Responsive Web Design. The crux to all this is the aforementioned and new-fangled “media query malarkey”. Media queries are directives embedded in mark-up (or within CSS itself, as is the case on my site) which tweak a site’s styles, based on a variety of attributes about the user agent. Typically they are used to serve up mobile-friendly apps, vs. full-screen browser experiences, but you can tailor your rendering according to the following attributes (I’ve linked the last two for further explanation, as it’s not immediately obvious what they do):

  • width & device-width
  • height & device-height
  • orientation
  • aspect-ratio & device-aspect-ratio
  • color, monochrome & color-index (these relate to the number of bits per colour component—or not—in the viewing device)
  • resolution
  • scan
  • grid

A media query, at its simplest, contains two components: media type, and the query itself, with an attribute and value pairing. For example:

<link rel="stylesheet" 
	type="text/css" 
	media="screen and (min-device-width: 1920px)" 
	href="ivor-biggun.css" />

This is telling the user agent that it should link to the ivor-biggun stylesheet when asked to display the current page on a particularly large screen. You can also mix attributes and values in a single directive like so (something for smaller screens):

<link rel="stylesheet" 
	type="text/css" 
	media="handheld and (max-width: 480px), screen and (max-device-width: 480px), 
	screen and (max-width: 600px)" 
	href="perfectly-formed.css" />

I’m linking to specific CSS resources from with mark-up here, but you can also use @import statements in the same way, or as I do with this very site, you can use media queries within your CSS itself, like so:


/* Mobile devices / small screens */
@media handheld and (max-width: 480px), 
	screen and (max-device-width: 480px), 
	screen and (max-width: 600px)
{
	body {font-size: 110%}
	#content {float: none}
}

Simple!

BTW, if you’re looking to target iOS devices in your media queries, the Apple Developer site has some useful information, including how to render custom application icons, how to make use of the <meta name="viewport"… tag, and so forth.

Comments

  1. Neat! tried it, narrowed it, iPhone safari'd it. It works. :-)John Lindsay#
  2. :-) I did the same CSS trickery for the new-look http://londondevelopercoop.com site too.Ben Poole#
  3. Wonderful article, thanks for posting it. Its always a challenge as a web designer to design for multiple resolutions and adding mobile devices just complicated matters. Tanya Delaney#

Comments on this post are now closed.

About

I’m a developer / general IT wrangler, specialising in (often mobile-friendly) web apps using things like node.js, Java, C#, PHP, HTML5, etc.

Best described as a simpleton, but kindly. Read more…