You can add wide images to this theme

As one of the best uses of the original 133 theme was Daustrala’s photoblog, I’ve implemented wide images in this theme. Like:

William Blake's Abel

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

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).

The 133 theme for WordPress: Version 2

The 133 theme has been redesigned. Now with even less.

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. 3 columns, first is empty, content off centre to the right. Uses serifs for body copy, headings in an old looking font.

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.

Junior was a defender

I’m an Ipswich Town fan. And like most proper football supporters I’m not an England fan as well.

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.

Noble housing benefit

Amazingly, the British press and political classes appear to have forgotten something called The Expenses Scandal. Certain politicians positioned themselves as the antidote to corruption and the old way of doing things. Here’s a reminder why claiming £40,000 rent for your partner is a bad thing to do.

Why I don’t like Tumblr & Posterous

Actually, I don’t mind Posterous and Tumblr at all (rubbish markup aside). But there are very few Tumblogs I’d bother following.

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).

Typewriter on a desk and some screwed up paper; implying writer's block

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.

Screenshot of a page from Cameron Moll's website: a list of people who liked a post

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.

How to lose a general election

Geoff Hoon is officially a fuckwit. Although I doubt this ever needed any confirmation.

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

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.

On Photoshop, documents & posters

This article provides an excellent summary of how the web design process should run (and rounds off a superb 24 Ways series).

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)

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.

@font-facing up to new fonts

OK, so I’m redoing my site. I’m using three new/trendy things:

  • 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. Works afoot on an open, free version. (Image from Wikipedia)

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!)

Reading press releases

How to convert a document submitted by a staff member to a traditional press release to an online news story?

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.