Alex Gibson is a talented web and mobile developer who shares my views on HTML5, mobile web development, and responsive design. In this post on his blog he gives a thorough run through of how he re-designed his web site. He went mobile first, responsive and explains, among other things, how he setup his media queries. Furthermore, he explains how he re-orders content of the page depending on the device, using CSS. The web page is pretty simple, but serves as a nice case study of a mobile first, reponsively web designed, HTML5 site.

Be sure to check out his blog at http://miniapps.co.uk/blog/.

Found this handy javascript library that I think can be extremely potent: LESS. It basically gives scripting capabilities to CSS. For instance you can define a variable @color, and use that instead of using fixed values everywhere in your CSS file. This would ease when it comes to changing color schemes, for instance. But I think what will be most handy is the way it allows nested rules:

#header {
	h1 {
		font-size: 26px;
		font-weight: bold;
	}
	p {
		font-size: 12px;
		a {
			text-decoration: none;
			&:hover { border-width: 1px }
		}
	}
}

which basically defines the css-rule for e.g. “#header p” and “#header p a:hover”. This will make cleaner css-files, and will let you write less CSS making CSS more DRY. It comes with a lot more powerful stuff as well like inline javascript. Have a look for yourself and see how you can make use of it.

Fairly technical post, but I wanted to put it down in text as I found it and reacted to it.