Sunday, February 07, 2010

Redesign and HTML5

A few weeks back, I did an Accessibility report on the Labour Party website (it failed, massively). During that post, I pointed out that this blog was not Accessible and that I would, to paraphrase Captain Picard, make it so.

This is still my intention, but I am going to go a little further—having found that I can support all browsers through various techniques, I am going to restructure the blog in HTML5 (and checking it all in this HTML5 Outliner!).

HTML5 is logical and neat—especially for a blog format website. Replacing endless divs with the new block-level elements—such as header, hgroup, footer, nav, aside, section and article all make reading the site structure so much easier.

Plus, of course, these elements allow for assistive software to recognise the page structure in a meaningful way, thereby increasing Accessibility—a subject that my recent article in Ability magazine expands on.

By the same token, I shall also be making extensive use of CSS3 and, as I intimated in my post about the iPad, deploying some effects—such as CSS animations—that will only work in the latest versions of Safari (and other Webkit-based browsers, e.g. Chrome).

All of this is as much to ensure that I continue to develop my coding skills, and learn the new syntax, as anything else. Naturally, however, The Kitchen will still be useable by every browser—but I do not intend to deliver the same experience to every browser.

For those who are interested, the rough browser breakdown for those visiting The Kitchen is as follows:
  • Firefox: 40.97% (Rendering Engine: Gecko (Open Source))

  • Internet Explorer: 34.22% (Rendering Engine: Trident (proprietary))

  • Safari: 12.63% (Rendering Engine: WebKit (Open Source))

  • Chrome: 7.11% (Rendering Engine: WebKit (Open Source))

  • Opera: 2.90% (Rendering Engine: Presto (proprietary))

However, whilst all of this technical stuff might be interesting to your humble Devil—and sundry other geeks out there—it is, ultimately, you people who read this blog. As such, if you have any suggestions for the design—e.g. perhaps I should be using light text on a dark background—please feel free to sound off in the comments...


fuckgrapefruit said...

Whatever you do, please do NOT use light text on a dark background. It kills my eyes and probably makes baby Jesus cry. Any other changes I will happily leave to your best judgment.

Dominic Allkins said...

Agree with fuckgrapefruit - definitely not light text on a dark background.

marksany said...

I mostly read via RSS on Reeder on iPhone. what in would like to see is a comment link in the reader, inspector gadget manages it. When I do visit I agree with the other two, keep it black on White or light grey, anything else is harder to read. Keep it very simple and spend your time on content.
If you haven't already done so, go and Have a look at Tufte.

Anonymous said...

That was a joke wasn't it? About light text on dark background? Wasn't it?

It wasn't funny.


RantinRab said...

It's all Greek to me.

Lola said...

RantinRab - Erm, don't you mean it's all 'geek' to you?

Anonymous said...

Why not go all the way and use Comic Sans, marquees and blinks? lol!!1one

Or maybe just increase the font sizes slightly.

MatGB said...

Um, yeah. For those that say "it hurts my eyes" for light text/dark background?

For me, and many others, bright white backgrounds are headache inducing--known to cause migraines in some.

At the very least, a less bright background, I currently mostly read on my nice dark aggregator anyway. With the dark background colour DK recommended me ages back that I still love.

Also? We miss the DK favicon. Haven't actually done much in HTML5 yet, not really been doing enough coding, really ought to fix that. Are you actually using the new Blogger templating system now?

Anonymous said...

Bugger - i'd just about got a grip on the previous version.

Anonymous said...

I agree with MatGB as well as the others. Not white background but not a dark background either. You already have a red theme but by making a red background you would look too much like a labour site. Then blue = Bluelabour, yellow = libdumb, green = green, what about lpuk?

John R said...

Please, no changes just for the sake of making them.

I like the current clean, bright simple layout. Screens filled with boxes for this, that and the other just look messy. They distract from the content....which is why I visit you.

I find white text on a dark background nuch harder to read, and colour on black is an immediate "click away" I'm afraid.

The Disgruntled CC said...

after your redesign, try testing the pages in a screen reader such as Jaws (For the visually impaired). I used to demo web products to Govt, where accessibility was one of their mandates

Anonymous said...

Say the word "cunt" a lot more.

Cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt, cunt.

Feels good, that.

James Higham said...

Best of luck on that one.

Shug Niggurath said...

What about white text on a black background with the links all in Times New Roman in bright red, greens and blue?

It'll be fashionably retro one day you mark my words.

Shug Niggurath said...

I'm quite keen on doing this on my dayjob sites (30+ of the buggers), I've managed to produce them all to XHTML strict and don't allow anyone to add content that is div heavy, they have to justify anything that is a container for an existing block level element. The biggest proof of it being useful was a decent report from the RNIB.

Jock Coats said...

As a Mac user, what tools are you using for HTML5 and CSS, if any, or are you hand coding in TextMate or Coda or something?

Devil's Kitchen said...


I handcode in Coda (although its support for WYSIWYG CSS is pretty good, I don't really use it).

I have recently installed the Zen Coding plugin, which is unbelievably cool—see a demo here:

This has speeded up my coding by a factor of two—at least—and I am getting faster every day. It also recognises HTML5 entities.


Westerlyman said...

I must disagree with most of your commenters. I find your site very difficult to read as I am quite short-sighted. The bright white background and small font make reading your longer articles a real torture which is a shame as I like your approach and really enjoy the content. Contrast this with Samizdata where there is a dark blue background and white text. I can read that without problem.

Shug Niggurath said...

Westerlyman (and others with access issues), can I recommend you use Firefox with the Accessibility toolbar extension installed? The options allow you to view any given page in light bg/dark text or dark bg/light text option. (and automated text sizes)

Seriously, I've spent over 10 years developing with the accessible site version having as much importance as the standard version (bear in mind the accessible version is probably less than 3% of pages viewed, my current audience is 180,000 users with 1.9 million pages).

Westerlyman said...

I use Firefox but was not aware of the extension. O will give it a try. Thanks.

Shug Niggurath said...

Hopefully you'll post here if it's any good. I'd be pretty interested in it's real world worth as opposed to my silmulated one.

Boy on a bike said...

Continue using this font. Don't fuck around with one that is impossible to read - some come up blurry in Firefox and Chrome.

More flames would be good.