William Blake's Abel

Simply add the class wide to any image and it’ll be pulled into the empty left column, like so:

Screenshot showing where to add the wide class

Note that these wide images should be 855 pixels wide in order to stretch across the whole page (although no harm done if they’re not).

Download the 133 theme for WordPress (version 2, ZIP, 16K)

Flicking and reading

The thinking behind 133 was to provide a theme that gave the reader nothing to do apart from read posts and flick to the next one. It was built on Sandbox and took a grand total of 133 minutes to write (geddit?)

It was actually my second most popular theme (surprising, considering it wasn’t listed by Smashing Magazine), perhaps providing evidence that there’s a demand for design that promotes reading and little else (see Readability and Today’s Guardian).

Screenshot of the 133 theme.

To get an idea of what it does it’s best to list what it doesn’t:

1. no search
2. no archives
3. no tags or categories
4. no navbar
5. no menu
6. no comments
7. no Twitter integration (there was in version one, but it was pointless)

Usage

Excerpts

The theme makes use of excerpts by displaying them on the front page and above posts on single pages. If a post doesn’t have an excerpt, the front page will display the whole post instead, and the single page won’t display an excerpt (obviously), nor an abbreviated version of the full post. In short, feel free to use excerpts but don’t worry if you don’t.

Images

The content column is 560 pixels wide. If you add the class pull to an image it’ll place it in the empty left hand column. Pulled images must be 265 pixels wide; if they’re not, they’ll be resized. (Note: you can apply the pull class to any element). Centring images and floating left and right work in the normal way.

Asides

I’m a fan of (proper) conversational asides in blog posts. Wrap anything in aside tags and 133 will pull it into the left hand column. (Warning: WordPress can be somewhat moody with asides; check your HTML after making any amendments).

Additional information

The theme will attempt to display the following info from behind the scenes:

• Users → Your profile → About yourself → Biographical information is displayed in the footer
• Settings → General → Description serves as a tagline and is displayed in the header, aligned right

Behind the scenes

The theme has been re–written from the ground up. It’s now marked up in shiny HTML5 and I’ve used the Google Font API to sprinkle some IM Fell DW Pixa around.

(A by–product of all this is to reduce the size of the zipped theme to 15.7K, including a screenshot. The stylesheet weighs in at 291 lines, including comments.)

It looks different

The structure is essentially the same: three columns, the first left mainly empty, the content placed off centre to the right. Titles are now set in IM Fell DW Pixa and body copy remains 100% (16 pixels). If you’re on Windows you’ll get Georgia. If you’re on a Mac or Linux you’ll get Palatino. Everyone’s happy.

The content column has been widened from 500 pixels to 560 pixels.

To do list

1. style post headings
2. style center, left and right images
3. style lists
4. style visited and active links
5. abbr, code stylings
6. add pagination to the bottom of index.php
7. add a pull class that, erm, pulls content into the left hand column
8. menu in footer
9. add about text to footer
10. some logic around if post has an excerpt display x on home page
11. trackbacks (very unsure)
12. site footer

Done

1. asides are pulled into the left column
2. uses Google font API for main headings
3. margins
4. index displays post excerpts

Sure, I’ll support them — especially if, for the first time in 44 years, they start playing some vaguely attractive, purposeful football at a tournament — but I won’t get into the state that most part-time football fans do over the national team. That’s just playing at being a fan.

The World Cup is a great story, though. And like most proper football fans, it’s a story I just love. The random internationality of it all (Slovakia versus New Zealand anyone?) Teams giving up. Great come backs. And old Brazil teams:

It’s a shame that England’s contribution to the World Cup story is normally so dull. So when England bore their way out of the tournament (or a second round loss on penalties to Germany), lighten up and enjoy the madness.

In 1995 a neighbour claimed that I was living with my partner while claiming housing benefit (I’d sustained a spinal injury so I couldn’t work; one always feel the need to justify these things). An example of taking advantage of the housing benefit scheme. My partner actually lived some 30 miles away; the neighbour’s motive was (I think) spite. He’d recently divorced and was living in a small, grubby flat which he was paying through the nose for, while I had my rent paid by the council.

Nonetheless, Ipswich Borough Council felt it necessary to investigate the claim in some detail. First I was interviewed about my partner and our sleeping arrangements. Then my partner was interviewed about our sleeping arrangements, her job, our relationship and even her car. You may or may not think this is reasonable.

Parliament takes a similarly dim view of paying rent to a partner. It’s been against the rules since 2006. David Laws claimed £40,000 from the taxpayer to pay his partner rent for a room in a Kennington flat between 2004 and 2007. He admits to claiming from 2001, so the overall figure will exceed £40,000.

I’d suggest the reasons for these rules are quite obvious: It’d be easy to set up a system whereby the state pays A £900 per month for rent which is passed on to B. B, who is A’s partner, returns the money to A. Furthermore, B is able to set a high rent (£900 for a room?) because it’ll come straight back to A.

In case you’ve forgotten, we saw the most serious, damaging expenses scandal in parliamentary history last year. Both David Cameron and — especially — Nick Clegg positioned themselves as guardians of the political system’s probity. David Laws last week announced the first of £6 billion of public spending cuts. I suspect those claiming benefits will be shown very little sympathy should any of their claims be open to any interpretation.

So what Laws did is wrong and against the rules. Surely Laws resigns and Cameron and Clegg make it clear that this behaviour is completely unaccepatble. Simple, non? How else do they continue to restore the public’s trust in the political system™?

A “thoroughly decent person”

That’s Ian Duncan Smith’s assessment of Laws. Laws is a popular guy. Martyr, even:

Mr Laws would be able to “rejoin the government” eventually, “because… he has so much to contribute to national life”. Nick Clegg

You are a good and honourable man. I am sure that, throughout, you have been motivated by wanting to protect your privacy rather than anything else. Your decision to resign from the government demonstrates the importance you attach to your integrity. David Cameron

He is not only exceptionally abled, but a principled man. Vince Cable

We’ve spent a weekend arguing about whether David Laws should go when we should have been trying desperately to persuade him to stay. Matthew Parris

(Incidentally, Parris neglects to make the obvious point that if Laws had simply wanted to hide his partner he could have not claimed anything at all. Laws was not short of money.)

Odd that, now the election has passed and we have a coalition government, the pre–election righteousness over expenses appears to have abated. How to explain this largesse of spirit, these fine sentiments? Is it because Laws is a good egg or one of us? Does his city background somewhow exempt him from the sordid side of fiddling your expenses? Does the fact that he gave up a well paid job to enter politics somehow make his actions more understandable, more respectable?

Just bear that in mind the next time you’re interviewed about your housing benefit.

According to Tumblr, a tumblog

…lets you effortlessly share anything. Post text, photos, quotes, links, music, and videos, from your browser, phone, desktop, email, or wherever you happen to be. You can customize everything, from colors, to your theme’s HTML. Tumblr about page

Which is all well and good. It’s pretty handy being able to publish stuff quickly with a minimum of fuss. Reading or looking at other people’s stuff is a more patchy affair. Your mileage may vary, as they say, but I’d rather read a blog post about a video, image or story — 100 words is just fine — than just be pointed to it (indeed, these sorts of posts can often spark interesting ideas).

Image from http://iwersenimages.files.wordpress.com/2008/09/writers-block.jpg

It’s a shame when bloggers switch from standard blog software like WordPress to Tumblr (Cameron Moll, for example). Before, we benefited from an expert’s opinion and/or good writing, now we just get a stream of links and disconnected commentary. It’s a more passive experience: writer points to x and reader dutifully follows.

And although comments can be a pain in the backside, they have far more character (and interest, sometimes) than a list of trackbacks or, worse still, a list of x liked this-s. So what? These sorts of lists often indicate how well regarded the author is, rather than the value of what is posted.

Cameron Moll has moved from a traditional blog to Tumblr. And lots of people liked this.

I can understand why authors want to break free from the tyranny of writing several hundred words to a schedule. It’s hard work. And long blog post after long blog post gets monotonous for the reader. Perhaps a lot of what are now popular blogs started at a time when there was plenty to rail against (tables, websites built for one browser, unreadable typography etc.) and the didactic post was necessary to get the message about standards, readability etc. across.

After a while, the posts dry up and the author who still likes publishing stuff begins to consider the tumblog.

If you were to design a blog from scratch it’s maybe unlikely you’d base it on a series of discursive posts, and you no doubt would incorporate links to stuff. Perhaps the form needs a rethink.

Labour will lose the next general election. This was 90% certain on Tuesday, today it’s 100%.

What makes this whole thing so annoying is that recently Labour had at least been making a decent fist of it. As the election approaches, the Tories’ policies were, naturally enough, being placed under the spotlight. Under The Dark Lord‘s guidance, Labour had a simple plan: Let’s make the policy differences between ourselves and the Tories clear. As we come out of the recession let’s give voters a choice: Either vote for a divisive policy of Thatcherite cuts, or vote for a programme of investment and social care.

One can at least see the logic in this, even if you totally disagree. Like I say, Labour’s chances of victory were at best 10%, but at least there was some hope of riding on the anti–banker why should low–paid workers pay for the city’s mistakes ticket. Hell, Gordon even began landing a few on Cameron during PMQs.

Insipid, useless fuckwit Geoff Hoon

But then a couple of the normal malcontents (somehow Britain’s most bitter man failed to get in on the act) decided to try and unseat Brown. And then The Weasel failed (yet again) to give the PM his backing. Jack Straw—surely a man who understands the value of maintaining a united front—similarly put the knife in half way. The plot—stupid in the extreme anyway—failed. What could be more pathetic.

This during a week  when David Cameron has had to backtrack over his spending plans and could state—with a completely straight face—that class really doesn’t matter in today’s Britain. (Remember that statement in May when the PM, the Chancellor and the Mayor of London are all old Etonians).

Instead, Cameron had probably the easiest interview of his life and, more depressingly, I had to agree with him that the government is so weak that they should call an election now.

I agree with it 100% (after all, why work backwards or waste time showing clients what are essentially photographs of real web pages?)

Red rum = murder backwards. Geddit? (From gonemovies.com)

My only issue with the article is that it argues that CSS3 acts as a sort of replacement for all those fancy photoshop effects (rounded corners, shadows, transparency etc.). It does, but it was quite possible to design web pages without Photoshop before CSS3.

Web design is over populated by graphic designers. But web pages are not posters. They are (and always will be) documents.

So it doesn’t matter if CSS doesn’t have a ragged–edge property. Web pages shouldn’t be taking their design cues from graphic design, they should be influenced by document styling. To be plain: typography. As it’s found in books and magazines.

White space, grids, leading, measure, emphasis et al make documents attractive and easy to read. They’ve been around since font-size, float, margin and padding. Good designers can make web pages attractive in IE6 without CSS3 and a million image hacks.

• HTML5
• CSS3 effects
• @font-face

Believe it or not, I’m not doing this just to be trendy. I believe all of them will help create websites that are more usable and easier to build. I’m going to record my experience of all these new web design techniques, starting with @font-face.

Why use @font-face

For us graphically challenged types (at school I got an E for effort and a 5 for attainment in art), @font-face is a good thing:

• Instead of adding a logo to a site, we can create a fancy wordmark. For clients on a budget, this is a good thing.
• It provides some texture if we’re text–based designers using the standard web fonts

Baskerville. Work's afoot on an open, free version. (Image from Wikipedia)

Problems with @font-face

• Windows and IE render many fonts poorly
• It’s a bit like a kid in a sweet shop: It’s easy to make some poor choices
• FOUT and slow download times

The first two problems will have to be resolved by designers using their judgement properly… as ever, Mac–based designers will have to step away from their beautifully–rendered text and face up to their designs in the real world (unless they’re designing sites for other Mac-based designers).

Font designers offering freely embeddable fonts will do well in this brave new world. I don’t see type subscription services taking off beyond the typophile community. In turn, we’ll soon get familiar (or bored) with certain fonts (Museo and its variants and League Gothic spring to mind.)

Thanks to some sterling work by Snook and Font Squirrel, we can now begin to tackle the FOUT problem. Here’s how I’m currently implementing @font-face:

1. Build lightweight font files by removing all unnecessary glyphs (using Font Squirrel’s generator)
2. Use the data method for Firefox, Safari, Chrome and Opera
3. Use a conditional statement to get IE to download the EOT file

Which means we get virtually instant display in all browsers except IE. Acceptable at this moment in time, although it’s a fast–moving area (and exciting!)

The truth is that we, as readers, have come to expect something different from online material. There’s something more personal about reading an online article, even when it’s for work purposes (and maybe we’ve blurred our job and personal life?) We drop our corporate persona just that little bit, or maybe adopt an uneasy halfway role between job title and our leisure self.

The traditional press release involves a suspension of disbelief: The reader politely accepts the corporate angle. The publisher takes what s/he wants from the article (or even just copy and pastes) and disseminates the corporate word that way.

Try reading a press release online. It just doesn’t work. The reader isn’t so polite (perhaps that’s the essential difference between on and offline reading?) The tone of press releases online is laughable.

When we publish a story online we can’t spin the same line. We have to make it focused, worthy of discussion and more plain truthful than the traditional press release.

Which can often mean the author of the original document is left wondering why certain aspects are left out.