This post signifies the launch of TSG version 4 using WordPress, HTML 5, CSS 2.1 and 3. It is also a milestone in that I no longer support Internet Explorer 6 and its poor implementation of web standards—this is my personal website after all. Depending on your choice of browser your experience may vary also as I used CSS 3 selectors that are not fully supported yet by all the browsers. Flick around between your test suite. Poor old IE7 eh?
The markup
Let’s poke around under the hood. First up, HTML 5. I have a lot to learn and the spec is still very much in draft but if you can’t play around on your personal website where can you? That means I am taking a pragmatic approach to validation. Whilst validation is an important aspect of my day-to-day approach to work, almost 10 years in this business sees me using validation as a tool, not the be all and end all of the task at hand. I use it for peer review, reinforcing knowledge of the specs and identifying problems with CMS or programmer-generated code. An unencoded ampersand isn’t going to raise an accessibility barrier but I will do my best to eradicate all errors and warnings and understand the effect that unresolved errors and warnings may have. Please don’t contact me about validation errors and warnings. I know about them already. If you can help me learn more about HTML5 though, I am all ears.
For anyone who has been following the #h1title / #h1logo debate on Twitter and elsewhere I have opted for #h1logo purely on the basis of the hardcoded headings in legacy posts. I feel consistency is of more benefit to site visitors in this matter. HTML 5 has a part to play in this too with section and header blocks but it’s early days and assistive technology vendors have yet to participate in the discussion as I understand it.
The CSS
What a refreshing change—releasing myself from any kind of outside validation constraints (purists) with regards the markup also made it easy to worry less about CSS validation. It will fail, I can tell you that now. Why? Simple—I am using CSS 3 selectors and shock, horror, proprietary CSS selectors until the browser version increments its support for the spec. Something else different, I am making one HTTP request for one style sheet and using an Internet Explorer conditional comment to set a class of “ie” on the body tag. Saving an HTTP request for six selectors just makes sense. I tried everything but one of those selectors hides a photo of me to IE users. Sorry. I couldn’t resolve a z-index issue between the photo and the border and background colour of the sidebar container. I think this is a legitimate bug so to speak and I chose to hide the image instead. Throughout the CSS there is lots of fallback / progressive enhancement even between Firefox and Safari; rounded corners, RGBa backgrounds and drop-shadows on boxes and some text to name the main actors. I also manually merged the reset, typography, layout and colour style sheets ahead of implementing a server-side solution that would also gzip the style sheet. More on my CSS management in a later post I hope. I’ve progressed away from that framework I devised for a specific problem in 2006.
The design
I’m no graphic designer, so I hope this doesn’t offend your sensibilities too much. To help me I used the dimensions offered by the 960 CSS framework and composed to a vertical rhythm with the typography. In a departure from the norm, and inspired by the 100% Easy-2-Read Standard and Wilson Miner’s post on relative readability I have adopted a 16px default text size (converted to ems of course). You won’t have to sit quite so close to the monitor to read this blog now. The differences between Firefox and Safari on Windows is noticeable with regards to font-weight though, one day we will have better browser support for font-weight to fine tune this. The colour scheme is under review because I chose them from the ColorBurn desktop widget I have open and when it finally came to check the WordPress codex for little integration pointers I saw a very similar scheme. Ho hum, oops and all that. Talking of integration into WordPress if you don’t already use Elliot Jay Stocks Starkers theme as a starting point (rather than “Kubrick”) I can highly recommend it—all the cruft has been removed and I’ve found it very quick to go from design prototype to lean theme.
To-do
- Tidy up
- Refine
- Work on the pagination plugin
- Rotating different polaroids of me (so long as you’re not using IE).
Well, I wouldn’t want IE users to know what I looked like either. That’s icky.
Nice work.
I’ve followed along with IE support/CSS validation for some time now. Perhaps it’s time to start thinking outside of what I’ve been practising for all of these years. Inspiring
Good job!
Congrats on the HTML5 re-design Karl! It’s very interesting to peer through the markup too. Personally I’m such a stickler for validity, I’d hate to see that HTML Tidy Firefox add-on displaying the invalid symbol all the time. Nice work though.
Only just noticed you’d redesigned, Karl – nice job.
One question, though – won’t the conditional comments around the BODY tag (as per Paul Hammond’s idea) mean that IE8 users don’t get an opening BODY tag at all?
Matthew, you’re right – I’ve cut IE8 from the mix twice. Hmm, it displays correctly but I could add another conditional for “forward-looking” IE versions (irony intended) or increment to lte8.
Thanks for your feedback.
I launched a site recently that went part of the way towards HTML5, but because it’s a business site, I stopped short of using the new unrecognised elements and instead opted for HTML5-like class names.
I also used text-shadow and @font-face as a fallback if js was disabled (as otherwise you’d see sIFRed text).
I’ve been using Dean Edwards’ IE8.js quite a lot lately which I’ve also found quite liberating in terms of not having to apply lots of unnecessary class names to target elements (but keeping in mind that the page doesn’t fall apart to badly in IE6 & 7 if js is off).