And while I’m on the subject of “good” copy…

One of the most difficult things about writing web copy on a day to day basis is taking some text from a colleague and reforming it into an often brief missive.

Parody of an advert for a writing course

Where have my lovely adjectives gone? is what they’re thinking but not saying. Most people are very polite and will save their disapproval for another time (or person. But I digress).

Untrained web writers often make these mistakes:

• they assume that not having much to say about their product or service means it somehow lacks gravitas, content &c.
• they think that writing unadorned by adjectives is dull
• they think that short, simple, active sentences are dull
• they think that their adjectives enhance the description of their product or service; that they help paint a picture
• they think bullet points, bolded keywords and short, bitty paragraphs look ugly

The problem with this approach is that readers couldn’t care less whether your product is innovative and new because they haven’t come across a product that is unoriginal or dated in the last 10 years of browsing on the web. These types of adjectives have less than zero meaning.

Readers want to know how the product you’re offering will benefit them, so a quick summary of your product’s benefits will suffice. Structure this is in a way that helps them scan your text and you’re pretty much there.

On paper (or screen) it may seem boring, and a million miles from the original author’s conception of their product, but your readers will appreciate it. I’ve seen pages generate more enquiries through “dull” writing.

Meaning: Any cramped, outmoded, un–thought–out website can be saved. Well, nearly any site.

Typewriter image from janburke.com

I have tried in the past to overcome bad typography through using inline styles in the CMS, something like div style="line-height: 24px; font-size: 16px; font-family: georgia;" and it’s really one of the most stupid things I’ve ever done. Adding another set of visual cues to an already confused website creates… more confusion.

Far better to accept the current regime and work at the good copy basics:

• product/service descriptions that state how the product/service will benefit the reader
• headings to guide the reader through the text
• bullets to break up the text
• multimedia to aid explanation
• keyword emphasis to aid scanning
• clear, well placed calls to action
• clear, active voice sentences

All these can be achieved on any website, regardless of its design qualities.

On the final point: Some inline styling may be acceptable here as something like p style="background-color: #DFDFDF; padding: 12px; border: 1px solid #BF0000; float: right; margin-left: 12px;" will pull the call to action out of the main text and make it easier for the reader to find.

Good web copywriters are really worth their weight in gold.

In the good old days, the div element let us get away with all sorts of structural sloppiness. In fact, the only real reason for using a div wasn’t to create a pseudo-structure (as demonstrated in this article on preparing for HTML5), it was to provide a styling hook. Even the old naming conventions (sidebar &c.) were more suggestive of a page’s appearance than its structure. (Note: header and footer are just as “visual”).

Car design blueprint (from http://www.carbodydesign.com)

This semantic “purity” is perhaps the best thing about HTML5 (although the ability to embed media without resorting to plugins is none–too–shabby as well, as is the shorter, cleaner markup it generates). It also makes it more important than font-face, CSS3 &c. It does mean that constructing pages takes more thought. But that’s a really good thing as it should mean our pages will be easier to navigate and read, and serve our own purposes more as well.

Well, you have to try everything, non?

Here’s a picture of something happy:

Mark E Smith dressed as Santa

All about HTML:

5

We like/appreciate/want markup that is fundamentally more semantic, and that’s what HTML5 is. A more flexible document tree is also a good thing.

But some of the semantics are confusing. How do we markup a blog sidebar that contains a list of archival links? (Another tip of the hat for rel) Is it an aside or a section? Is a list of navigation links held in a long footer actually part of a footer? Or is it another section?

Is section too vague (and therefore useful as a catch all)?

On Paul Boag versus Gerry McGovern on the hoary old prettiness versus accessibility issue…

I think Gerry has a point about underlines (not just text-decoration but border-bottom as well): There’s a general feeling that they’re plain ugly. I don’t think it matters if you use an obvious link colour (mainly blue) if you don’t have an underline, but it’s a problem for colour–blind users if you use red or green (and yes, this site’s underlines are probably too faint). And an underline does provide a very quick indication that this text is a link.

The way text-decoration cuts off descenders is pretty low down on the list of legibility problems… Gerry’s print comparison is completely spurious.

Perhaps a clearer example of difficult backgrounds would be For a Beautiful Web, which, I think, is definitely made more difficult to read by the wallpaper (and until recently it sported an eye–shredding red background).

White and black set in Goudy Old Style

As for WOB and BOW, I personally reckon dark grey on white is the most readable combination, especially for longform texts, although light on black works well for me when I’m reading in  a poorly–lit room. I’m sure there’s reams of scientific research on this subject that’s easily accessible.

Finally, it depends what you’re site’s trying to do. One of the commentators cites Jason Santa Maria’s site as an example of beauty and accessibility. In my opinion, it’s not (although it’s certainly not as magnificently unreadable as For a Beautiful Web), but that doesn’t matter as it’s a showcase for JSM’s great graphical and typographical talents. Ditto Dustin Curtis. I’m sure their client work is perfectly readable and beautiful.

One of the websites I work on has an IE6 user base of 35%. Stop what you’re doing, put your pen down and read that again.

Yep. 35% of the visitors to this site are using version 6 (yes, six) of Internet Explorer.

Now, this is a pain; not so much because I can’t use exciting CSS when creating pages for it (I’m really not that bothered by text-shadow and @font-face) but because it means that page and element appearance can be unpredictable. I know a few “tricks” that will help me avoid layout problems, but there’s not much I can do about how, for example, IE6 renders Highslide navigation bars (or rather, how it renders three navigation bars instead of one).

Anger (from http://joefelso.wordpress.com/2007/10/03/the-other-me/)

Accessible web design

Accessible has quite a simple meaning in the context of web design: We should make web pages that people can access regardless of many different factors, including:

• physical impairment (visual, motor etc.)
• the type of browser they’re using (and whether they can use such things as Flash and javascript)
• the device they’re using
• technological limitations (screen size, internet connection etc.)
• to allow freedom of choice (so Firefox and Safari users aren’t penalised for choosing a particular browser)

Making things accessible is a good thing in and of itself (and there’s a fine tradition of democracy & accessibility in computing) and we’re convinced that people shouldn’t suffer simply because they have a physical impairment or don’t have access to a high–spec computer.

Except for people who have to use Microsoft’s old browser

These are all high minded ideas, but for some reason design folk lose their reason when it comes to IE6 and go all Philippe Starck hopeful. Now, I’m a big fan of Manuel Martensen, and he was kind enough to give me some good advice via Twitter today. His attitude is far from atypical:

There are only two kinds of ppl still using IE6, so why bother: Those who don’t care and those you shall not care about. Twitter status 4992456890

I agree that we should all try our darndest to rid the world of the scourge of Microsoft, but in the interests of accessibility we can’t bar IE6 users from our sites, or discount their requirements (especially when they account for 35% of our audience). All for the very reasons listed above:

• They may work in an environment where they have no choice over the browser they can use (e.g. many UK local government departments are using IE6, and even Windows 2000)
• They may be using an old computer that still has Windows 2000 on it because they can’t buy a newer computer
• They may not know how to install a different browser. They may not care about browsers.
• They may even like IE6.

In other words: We can’t lose our ideals just because it’s a Microsoft problem. That’s shooting the messenger.

I did some very informal user testing on an image gallery I’m putting together.

Further to Jonathan Christopher’s post on the problems with Lightbox, I’ve been trying to come up with as usable a solution as possible. I found that testing on three more non–technical users backed up my original findings, namely:

• I added some explanatory text above the thumbnail gallery
• I added a hover state to the thumbnail links (these two features help overcome the biggest problem I observed, namely: What do I do with these thumbnail images?)
• I used a Lightbox variation that displayed pagination links by default

It’s edifying that something as simple as adding a line of text to a page can increase its usability so much.

My only remaining problem is choosing which image viewer to use. Highslide is better in that displays links to next and previous gallery images by default; Lightbox, on the other hand, doesn’t. Users have to hover over the image before it displays next and previous links.

Unfortunately, Highslide doesn’t play nicely with IE6. For some reason, it displays three navigation toolbars.

As a depressing 35% of the site’s visitors use IE6 I’ve decided to go with Lightbox. Not ideal but the best current solution.

Oh, and here’s the site in question: NCSW 2009.

1. Don’t confuse your and you’re
2. Begin new sentences with a capital letter
3. Don’t encourage people to use new! and exciting! to make their writing seem new and exciting
4. Don’t fear (semi)colons
5. Read your article before publication
6. Get someone else to read your article before publication
7. Don’t confuse lose and loose
8. Learn that whereas is one word
9. Whereas sometime is two (see under Be Concise)
10. Learn the difference between the present and past tense
11. Ensure pronouns are paired with nouns so we know who they are, man
12. Avoid random capitalisation

Because of this oddity.