As will be evident if you’re reading this on the web, I’ve recently changed the design of this blog. I wanted something black-on-white instead of the somewhat eye-searing white-on-black I used previously. This new theme is based on Cleanr (for WordPress, of course), and before you say it: I know the text is pretty big. I like it this way; it keeps the focus on the text itself.
I originally considered six similar themes (here’s a composite preview of all six themes), and solicited votes on Twitter; the results were heavily in favour of Cleanr. Here’s a picture of the graphed voting results, showing that Cleanr got 39% of the votes, followed by Librio in 2nd place with 23%.
I’ve made several changes to the base theme and to the content of some of the static pages, most of which were a nod towards making the blog more accessible to users with visual impairments and such. Here’s a quick list of the tweaks I made:
- Made the main content text a bit smaller than the default theme for better average readability.
- Made the content text be left-aligned instead of evilly fully justified.
- Added (visually hidden) Skip to content, Skip to navigation, and Skip to search links.
- Made links more visually obvious (in main content). I left the sidebar links subdued as a compromise; having them all underlined was distracting when reading.
- Removed needless tables in the content on my Cocoa Source Code page.
- Added a (visually hidden, for layout) LABEL tag for the sidebar’s search field. This necessitated using the “searchform” template file in the sidebar, rather than a WordPress widget. All other sidebar items are widgets.
- Made the blog tagline/description slightly larger and darker.
- Reformatted the date information in lists of post summaries.
- Reordered post metadata (in post lists) to come after the post title rather than before it, and propagated those changes to Search Results, Category pages, etc.
- Reordered post metadata (tags) to not intrude on the text.
- Added a title to the RSS link.
- Removed some JavaScript stuff.
- Added focus styles to form fields.
- Removed the negative kerning on post titles.
- Bumped up the font size in form fields.
I’m also going to make a concerted effort to add meaningful ALT text to images, and to make sure that the anchor-text for links makes sense when read out of context. This theme already enforces reasonably semantic markup and a consistent structure, and should be readily navigable via a screen-reader.
I’m making my customised version of the Cleanr theme available for download (indeed, since it was unfortunately licensed under the GPL, I have to do so anyway). I don’t intend to maintain this as an “accessible version of Cleanr”; it’s just my own blog theme and you’re more than welcome to use it, so feel free to download the customised Cleanr theme as a zip file.
No doubt there will be bugs and issues with this new theme; feel free to point them out via the comments form on this page. You can also contact me directly; here are my contact details.
I like it too. And the big text is nice, too ;)
Your “skip” links will be ignored by (at least some common) screen-readers, as they’re “display: none”, rather than sneakily hidden from view by way of positioning and indents.
That aside, it’s a great improvement!
[...] This post was mentioned on Twitter by Matt Legend Gemmell, Objective-C. Objective-C said: Gemmell: Accessible Blog Redesign: As will be evident if you’re reading this on the web, I’.. http://bit.ly/1K1mZt [...]
Hi Mo,
Good catch; fixed.
Really hear where you’re coming from; but it does have a whiff of Jakob Nielsen about it – very usable – but quite brutal at the same time…
Maybe it needs some design cues – not just design for the sake of it, but maybe a bit of iconography for the headers in the sidebar, some subtle styling on the buttons (Submit Comment) etc. and either a logotype of symbol in conjunction with the name “Matt Legend Gemmell”
Good design, as I know you appreciate (and are very good at it too) – in this sense would be enhancing the visual appeal, without compromise on the content.
Like I say – I know where you’re coming from but… it… leaves… me… wanting… more.
I like this type of design, encourages reading indeed.
For those interested in a further discussion, see Relative Readability by Wilson Miner ( http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ )
Minor remarks: There are no focus styles for form fields, and this textarea renders text in a sort of 11px serif (in Safari).
Hi Wolf,
Thanks for the feedback. I’ve now added focus styles, and bumped up the font size within text fields/areas.
You don’t have to release your theme code. The GPL does not stipulate that. The GPL stipulates that you have to produce your code to customers, not to any individual who comes along and decides that they need to see it.
That said, the GPL does encourage you to share. Thanks for doing so.
I think you should make the text black, not grey. Grey text is a pet peeve of mine, and it’s also a p**ser to try to print, or read on an older or dull monitor. Pure black is the best. Grey recedes into any background, and should be left for legalese or less important text, headlines/text so large it can’t really be missed, or lastly sites that focus more on style than actual content. Any of us with less than perfect eyes appreciate as much contrast as possible.
Hi Chris,
I’ve darkened the text to #333 (from #555, which was the colour the Cleanr theme used), and it does look noticeably crisper and easier to read. There are still some designcompromises to be made, and I think this strikes a good balance.
I’ve also increased the contrast of the sidebar links, and darkened the link underlines to make them more noticeable. Hopefully these changes will make the site even easier on the eyes.
Been using Manifest on my blog. Recently switched over to Cleanr as well after looking at your blog. I have also done some modifications myself.