Welcome to CSS Wizardry—Web standards design and development


On HTML and CSS best practices

11th December, 2011 in Web Development

Best practices are exactly that; best. Not ‘better’, not ‘good when…’ or ‘best if…’, just best. They’re always the best, no matter what.

This is something I learned whilst undertaking the single biggest project of my career so far; the complete (and not-yet-live) rebuild of one of BSkyB’s most trafficked websites. For years I’d been working on medium-sized projects where I strove to use as few classes as possible, my CSS was so elegant and hand-crafted and everything used the cascade. I thought it was beautiful.

I found my old approach isn’t best practice when working on a big site, therefore it’s not best practice at all… You can scale down the big site mentality to smaller builds, you can’t scale up small site mentality to bigger ones. With this in mind, how you’d build bigger sites is best practice, how you tend to build smaller sites is typically (though, as ever, not always) based on fallacy and myth.

Continue reading this post →

By Harry Roberts in Web Development. Tags: , | 13 Comments »


Measuring and sizing UIs, 2011-style

7th December, 2011 in Web Development

For years we used pixels to lay out web pages. Then, not so long ago, we were dabbling with ems to make our pages elastic. Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages.

These methods seem to have all happened sequentially, with us each time dropping the last. I’ve decided, though, that the best builds use aspects of all previous methods; fixed, elastic and fluid.

Continue reading this post →

By Harry Roberts in Web Development. Tags: , , , | 26 Comments »


Create a notched current-state nav

8th November, 2011 in Web Development

Ben Everard tweeted last night asking if anyone knew how to build a notched nav, like this. I was in bed at the time, I spotted it about midnight and was on my phone. As soon as I saw this I jumped out of my bed and turned my Mac on. I love stuff like this!

Anyway, this is my solution, and this is its code.

Continue reading this post →

By Harry Roberts in Web Development. Tags: , | 4 Comments »


Build-along #1, reflection and reasoning

5th November, 2011 in Web Development

Here are, in no particular order, just a few thoughts about the build-along I did last night. These thoughts cover the thinking and reasoning behind the decisions I made. The build-along was a single, small PSD, but the following should apply to builds of any size. Get into the habit of doing the following on tiny sites and you’ll be well equipped to build that next Facebook meets YouTube with a dash of LinkedIn that that prospective client just emailed you about…

Here is the final build and its code is on GitHub.

Continue reading this post →

By Harry Roberts in Web Development. Tags: , , , , , | 14 Comments »


CSS Wizardry build-along #1

3rd November, 2011 in Web Development

Okay, so here we are, about to kick off the build-along. Make sure you are following me on Twitter at around 7pm UK time on the 4 November as I’m hoping to start the build-along around then. Thanks to Levi Flair for this PSD:

Continue reading this post →

By Harry Roberts in Web Development. Tags: , , | 7 Comments »


Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between. You should browse and search my archives and follow me on Twitter, 7,791 people do.

via Ad Packs