Some simple steps for better content editing

It's a web designer's job to make content management solutions as simple as possible for busy content editors. It's quite a challenge, one that I've got better at, but I'm still learning new ways to streamline editing tasks and make website maintenance easier.

Over time I've noticed a few content editing issues that crop up over and over. They're not specific to any particular content management system, and are frequently lamented in conversations with other designers, so I thought I'd take a moment to write a little post highlighting them, with solutions. These issues are easy to avoid, and will make a huge difference to the quality of any website. Inevitably when writing a post like this I will appear holier than thou, so I'll say at the outset that I - yes, even Justin Reynolds, the celebrated kappellmeister of Lucent Web Design - have committed quite a few of the errors listed here over the years when editing sites, and I continue to have to watch out for them. I thought about calling this article 'The Seven Deadly Sins of content editing' till an angel tapped on my shoulder and advised me not to be such a pompous ass.

Without further ado then, here are the crimes in question:

1. Edit and resize images before uploading to the website

Contemporary content management systems make it quite easy to upload a photo to a website direct from a digital camera. The system will resize the image automatically to ensure it is set to the correct width for the web page on which it appears.

That is good to the extent that it is solving the old problem of massively oversized images being uploaded and taking forever to download. But I think it is encouraging complacency regarding the quality of the images uploaded. Taking time to edit images in a photo editor before uploading makes it possible to prepare them properly. An image can be appropriately cropped, not the same as resizing: cropping allows the main subject of a picture to be brought into focus, and extraneous matter to be cropped out. Image editing prior to upload also allows realignment of the picture, and the application of adjustments such as sharpening, contrast and saturation. Minor adjustments can make a big difference to the quality of an image:

With no image adjustment a potentially interesting picture can look a bit dull

With a little bit of contrast applied in a graphics editor it's more interesting

Another advantage: if an image is edited before uploading it can be crunched to an appropriate format and size and posted in seconds. If it's a 5Mb image straight out of a camera it'll take several minutes to upload. There's then the further problem of the original image taking up considerable space on the web server.

These days excellent photo editors can be downloaded or used online for free. I recommended Google Picasa, Pixlr or Photoshop Express Editor. Alas Picnik, we hardly knew ye.

2. Apply consistent text formatting

It's a web designer's job to define a stylesheet to ensure that content is formatted consistently across a website. As I discussed in my Content modelling with ExpressionEngine post last month designers can shape the content entry channels used by editors, which locks down the kind of content that can be posted. But there are some formatting rules that can't be enforced by the system. Here are some common problems I see:

  • Subheadings should always be created through the subheading style defined by the designer, which can usually be applied through an 'H2' or 'Subheading' text control.
  • List items should always be styled as such, and not left as a simple list of paragraphs.
  • Punctuation should be consistent. If, for example, single quotes are used to indicate quotations then that rule should be applied across the site, without switching between single and double quotes from page to page.
  • Random capitalisation - a dear friend. Capitals should be reserved for proper nouns, with the possible exception of page headings: some news sites for example apply capitals to major words within headlines, for example 'Man Bites Dog' rather than 'Man bites dog'. Whatever, it should be consistent across the site.
  • Acronyms - the first mention should always spell out the full title.
  • Paragraphs should be as short as possible to facilitate online reading, not as long as they might be in print.

Don't use bold to style a subheading

A particularly vexatious website text formatting issue is the pasting of content direct from Word. Ideally text should always be typed direct into a text editing field. And with the increasing use of websites as an organisation's primary communication channel this issue is becoming less severe - nowadays copy is indeed often written straight into a content management field. But it is still common for text to be written in a Word document first then pasted warts and all into a website, with the expectation that all of the formatting applied in Word will be perfectly preserved. It won't be: all of that text needs to be reformatted in the website text editing field. And there is the additional problem that Word wraps encodes text with all kinds of nasties that you can't see when using the program, but which wreck havoc when the text is pasted into a text editing field.

I'm rather sympathetic to the view that Word has had it's day and should be replaced with lighter, more web friendly text editors - as most eloquently described by this article: Death to Word. That isn't going to happen for the foreseeable future though, so if text is written in and pasted from Word, there are two intermediate steps that can be taken. First, and this is the better option, text from Word can be copied to a simple notepad application, like wrttn. This will strip out the formatting Word applies and render the text safe for copying into the website text editor. Second, if step one isn't possible, most website text editing fields provide a 'Paste from Word' control. This isn't ideal, as 'Paste from Word' isn't always successful at detecting and removing all the rubbish, but it does clear most of the rubbish away.

3. Don't use 'click here' text

Oh horrible, most horrible. The use of non-descriptive text for links, such as 'click here' or 'read more' is in nearly all cases bad for website usability, search engine optimisation and accessibility: but it is still a very persistent practice. To clarify:

  • It is bad for usability because the user has to read the text that surrounds the link to discern what it is pointing to. For example, Our 2012 Annual Report is easier to scan than 'To read our 2012 Annual Report click here'.
  • It is bad for search engine optimisation because Google and other search systems pay particular attention to text wrapped in links. 'Click here' doesn't tell search engines anything about the page that a link points to.
  • It is bad for accessibility because 'click here' doesn't mean anything when heard in a screenreader. Screenreading software allows users to scan the links within a page and read them out in sequence, saving them having to listen to screeds of text before being able to access the link they want. A list of 'click here' links isn't terribly useful.

I recognise that it is sometimes practical to put a 'read more' link at the end of a paragraph of text summarising a news or a blog post. I do it on this blog. But the 'Continue reading' text merely supplements the link to the full post higher up, which is fully descriptive of the destination page.

Here's some good advice regarding link text:

4. Don't open pages in new browser windows

This used to be a truly horrendous problem before browser tabs. It was impossible to spend any time on the web without sites littering desktops with new browser window debris. Browser tabs have lessened the problem, as it's now default for windows to open in tabs rather than in new windows.

But whether it's tabs or windows, it remains bad practice, and still distressingly common. The thing to remember is that the user should make the decision as to whether to open a link in a new tab, not the website owner. There are occasions when it is appropriate: Twitter for example opens links in new tabs, because extensive user research shows that is what nearly all users would do in any case. Those are rare exceptions though. In nearly all cases opening a new tab betrays an anxiety that users will not come back to a site if given the freedom to browse the web as they wish. Jakob Nielsen's words in a column written more than 10 years ago - The Top Ten Web Design Mistakes of 1999 - are still pertinent:

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). If I want a new window, I will open it myself!

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

5. Making files available as PDF

It's best practice to make files available as PDF format, thus ensuring the file is available as designed to the widest audience possible. When saved as PDF a document retains the formatting applied to it in the original application, and is available to everyone able to view PDF files, which these days fortunately is nearly everyone.

It's still common to see files uploaded in Word format, or even Publisher. It's a safe bet that most users will have software capable of opening a Word document (very few will have Publisher), but there is no guarantee that the particular version they have will be capable of opening and rendering the document as it was designed.

6. Go easy on third party logos

This is something that isn't often mentioned, but which I see a lot: third party logos shoehorned into image slots, despite their being too small or incorrectly proportioned. It is always better to illustrate a post using a photo, if available, rather than a logo. Quite apart from the sizing issues, the visual style of a third party logo will clash with the design of the host site, creating an ugly clash of styles. If a logo is all that's available I suggest not using an image at all, or, if you have to use a logo, uploading it in black and white: monochrome logos clash somewhat less. This is the trick used by professional designers when it is essential to include third party logos in a design: see the Mobilism 2012 conference website.

7. Create a fresh news post rather than update an old one

One final thing: when something new happens it should be published as a fresh news entry. Content editors will quite often retrospectively edit an old news entry when there's a fresh development related to the subject of the entry. Unfortunately this doesn't make the update very visible. If a user has read a news entry they won't go back to it looking for updates: anything new needs a post of its own to capture the user's attention. This is a particular issue for RSS feeds: subscribers won't be able to detect anything new has been posted unless a new post appears in their stream.