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.
HTML first
I built this HTML-first. No CSS other than the UA’s whatsoever. No images, no styles, no JS, no classes, no containers, nothing. I started with pure text-level and content semantics. No divs, no spans, nothing that would in any way aid styling. Nail your pure, raw HTML first before even thinking about CSS. This ensures you’re thinking fully about the most important aspect of any site; its content.
No IDs
The build uses no IDs for styling. This was quite an odd shift for me to make, and I made it a number of weeks back. The main drawback of using IDs is that they introduce a specificity wild card not unlike using !important (though obviously not as horrible). By not using them it means that I can’t really get tripped up by overly specific selectors as easily as I could if I was using IDs. I’ve not removed the chance completely, but really easily and quickly lessened it.
‘Ugly’ classes to do lots of heavy lifting
There are quite a few classes that some might deem ugly; the media and grid classes instantly spring to mind. The thing here is that classes aren’t semantic or insemantic, they’re merely sensible or insensible. If a div is 6 columns wide then a class of .grid-6 is totally sensible, if it needs to change then change it. If you ever redesign you’ll be touching the markup anyway; I’m convinced the pure CSS redesign (in a commercial world) is a myth.
These classes also bring performance benefits, once a class gets called once it becomes free to use again; a performance freebie. If you use grid-6 once on a page, every subsequent usage is totally free, from a performance point of view.
Portable sprite icons
The .s class is a theoretically horrible class, but as we outlined above, nothing (except micro-formats and similar) reads or even cares what you name your classes. You can name a class anything you wish and a browser has to honour it, just pick wisely!
So, the .s class is one good example. Whenever you want to use an icon background image you ideally want to sprite it, but in fluid elements this isn’t possible. Enter a spriting element.
This is just an empty element that gets the sprite applied to it in its own fixed width/height box.
Chris Coyier uses pseudo elements for this which is great as it’s really clean, but the major drawback for me here is that they’re not very portable. A pseudo element is tied explicitly to an element in the CSS, so you can’t just drop the icon wherever you wish. Using an empty element means you can drop an icon wherever you wish. It’s six-of-one and half-a-dozen of the other; cleanliness versus portability; pick which one you’d rather have.
I can imagine that 75% reading this still think it’s a horrible, but we need to remember that an empty element affects nothing. It’s empty so it has no content, if it has no content then screen readers don’t encounter anything in it.
You’re probably also thinking that it’s heavily presentational, but there’s really no difference between:
<i class="s star"></i>
And:
<img src=star.png alt="">
The first is just out-and-out better in that it allows you to sprite that image up!
I was asked why an i and not a span. I’m almost ashamed of the answer but it’s purely because i is shorter, it’s as simple as that. I know that a span is probably better suited as it’s devoid of semantics but as there’s no content in the i nothing is affected by semantics anyway. Feel free to use whatever element you prefer though, like I said, my reasoning is kind of shameful!
Mobile first, lay the foundations
I did this build mobile first, sort out the content, the type, the general feel of the site first, then used min-width media queries to build up the desktop version.
Incidentally I don’t use respond.js or similar to get media queries working in IE et al, they get the mobile version. The layout of the site is not that important because a PSD is a clue, not a contract. A PSD tells you how a site should generally appear; the type, the colours, any brand treatments, that kind of stuff.
If you spend enough time on the mobile version that should be good enough to serve as the baseline, anything on top is a bonus for browsers that support media queries.
Grid systems just make life easier
In a similar vein to the above, grid systems are typically frowned upon as being insemantic, but the joy is that, as we covered, classes are neither semantic or in semantic. Plus—even better than that—a div is devoid of any semantics, it’s a generic container element. Adding these to your markup comes free-of-charge. Using a grid system allows developers to quickly construct consistent, robust and efficient layouts in seconds.
‘Extraneous’ divs actually make builds far more robust and extensible
You should never add markup where avoidable, but that doesn’t mean you should avoid it at all costs. Sometimes adding an extra div will make components a lot less brittle, rather than relying on unpredictable style rules and overly slim markup, sometimes it’s just far better to add another div to ensure a more robust build.
Take for example the media object. You could probably build that construct using far less HTML, but then would it be as extensible? You could just assume there will only ever be an img floated left with a p to the right of it, but if you do that and a client asks for a list with that p and a caption under the img you’re in a bit of a pickle; if you just start out with a div on each side to start with then you have the ability to build whatever the client throws at you, and it will always be predictable.
So, add extra markup where it saves you headaches. I’m more impressed by powerful and extensible code than I am with lean and brittle solutions, and I can guarantee which the client will prefer…
Don’t measure stuff
Throughout this build I only measured one thing; the grid system. I honestly think that, in web design, the pixel’s days are numbered. Build everything without a care as to its dimensions. Everything in the build can be moved around and dropped anywhere else without you needing to worry if it’ll fit. All your components should always be fully fluid and only constrained by their parent, in this case the grid system.
Here’s a challenge, next time your designer sends you a PSD designed on, say, the 960GS, resize your browser to 800px wide and build it like that. That’ll really put your fluid, responsive skills to the test!
Be resourceful
During this build I copied and pasted loads of code. I used my vanilla boilerplate, I copied and pasted the media object, the nav abstraction, the carousel. If it already exists somewhere then reuse it! There are no prizes for writing more lines of code; be resourceful.
Take away?
Even on tiny sites, powerful markup is far more quick, robust, extensible and sensible than convoluted, brittle stuff. No one reads your classes except other developers. Users appreciate fast UIs, clients appreciate stable and robust sites and you, the developer, like to save time, be efficient and only solve problems once.
What may at first seem like an ugly class or bloated markup is actually a really quick, predictable and reusable construct.
Websites make us money, so let’s make them as quickly as possible and in the most predictable, future proof way we can.
Finally
There is a video of the build to go with this, but I need your opinions, do you want the full, several hour epic or do you want it sped up to, say, double speed? I’m going to get that processed as soon as possible.
Update
As promised, I recorded the whole thing warts and all. You might be interested to know a few things non-code related about the build-along.
- The whole lot was done on an 11″ MacBook Air with no external mouse or keyboard.
- My good friend Jake, who is wanting to learn a little about web development, was next to me the whole time.
- I cooked and ate my (now famous (in tiny, tiny circles)) chili during the build-along.
- Refreshment was courtesy of Matusalem and Fentimans.
- The songs you saw on my Spotify are not necessarily wholly representative of my taste in music ;)
The normal, non-sped-up recording is now on YouTube. Part 1, Part 2. The sped-up version is proving a little more troublesome; crunching over 4 hours of video on an 11″ Air is taking a while…
Sped-up video
To view the faster video right away, simply opt in to YouTube’s HTML5 Trial, open the YouTube URLs above in Chrome and then select the playback speed options that now appear on the player.
By Harry Roberts on Saturday, November 5th, 2011 in Web Development. Tags: Build-along, CSS, HTML, OOCSS, Progressive Enhancement, Responsive web design | 14 Comments »
+
Robert said on 5 November, 2011 at 4:23 pm
I vote full speed!
thewinger said on 5 November, 2011 at 4:31 pm
I would like both videos, the speed-up to take a quick look at first and then the full version to see it carefully someday.
Yesterday I couldn’t be infront of the screen to see it live but once in a while I entered and refresh the dropbox website to see more or less how far you where in the process.
great stuff!
Tom Hermans said on 5 November, 2011 at 4:39 pm
Followed the progress as best as I could, very good write-up.. still in doubts on how far you have to go with best practices / 100% semantic markup vs. ease-of-deployment . Nice to see someone else’s struggles and decisions, or a general workflow.
Also a bit comforting that the workflow of a (very) smart guy like you doesn’t differ that much with mine ;)
Stephen Greig said on 5 November, 2011 at 4:48 pm
Just a wonder… if you’re using an empty element for a sprite, why use
<i>and not<span>?Surely as has no semantic meaning it’d be the perfect tag to use for an element like this?
Great little project though and a good write-up. Think you can deem it a success :-)
Ferdinand Salis said on 5 November, 2011 at 5:31 pm
Thanks for a great write-up.
I would like the full version and the double speed version.
Randy Brito said on 5 November, 2011 at 6:01 pm
Interesting, I don’t get the IDs Classes stuff so well, but I’m now working on a HTML5 site and a look to your code reminds me the attribute “quoted” thing I’ve read a couple of years ago.
Looking forward to see this video, specially the mobile to desktop making up.
Kieran Briggs said on 5 November, 2011 at 6:10 pm
Loved dipping in and out of your build. I would like both speeds if possible.
Zathrus Writer said on 5 November, 2011 at 6:54 pm
full speed video is probably better, since any1 can skip the parts they’re not interested in
Josh Vogt said on 5 November, 2011 at 7:01 pm
Cool project. I didn’t get to catch as much as I would liked.
I’m surprised by how little you use HTML5 elements in your code. And I’m a little appalled by your use of the
<i>element! And just because it’s three letters less than a span!?!I’d love to see another build along. It’s cool to see how someone else goes about this stuff.
Keyamoon said on 5 November, 2011 at 10:17 pm
There’s one thing I really don’t like. The vertical spacing/leading is not consistent in the final build. I remember reading your article on smashing magazine about the “magic number” and how all the margins and line-heights should be this number or multiplies of it. Maybe you wanted to follow the design and its leading? Then again, like you said, PSDs are just a clue. I’d rather see a proper vertical rhythm.
Great job overall though. I enjoyed the build along. Oh and I vote for double speed.
John said on 6 November, 2011 at 2:38 am
WHY U NO QUOTE YOUR ATTRIBUTE VALUES BRO :O *misses xhtml*
Nick Solly said on 6 November, 2011 at 11:11 pm
Great stuff, and as I’m trying to learn a bit of HTML and CSS for my own project I vote for full speed to be able to see everything in full.
Stugoo said on 7 November, 2011 at 10:48 am
I see that you’re using html5, but havent accounted for cross battle conspiracies for LT IE9?
What would you normally use for this?
HTML5 shiv? Modernizr?
Daniel said on 11 November, 2011 at 4:59 pm
Is it my computer, or is there no sound on the video casts?