It’s time to throw away lorem ipsum

Use proto-content and highlight unfinished content.

Whilst a lot of web designers advocate a content-first approach (myself included), it is not always possible to get content from clients to fit with the project schedule. If the client is providing their own copy rather than hiring a copywriter, then delays in the process can be common. So what can the web design team do to keep the project on schedule and ensure that the design of the site will work with the final content?

I recently heard Robert Mills, Content Strategist at GatherContent, recommend using proto-content in the wireframing/prototyping stage of a project. The simplest form of proto-content would be content from the existing website, especially if you’re working on a redesign. But what happens when new content areas are identified? Until recently, I would prototype a website using existing content and then use lorem ipsum for new sections. Admittedly, this has caused confusion with users at the prototype testing stage where they have been puzzled as to why “the page is in Italian”.

Obviously lorem wasn’t helping this person understand the message of the webpage and also distracted them from the feedback that we were looking for on the functionality of the design. (One could also argue that the prototype was not fully functional because it didn’t have relevant content, and I feel bad about that now.) Having better understood the case for proto-content, I will no longer be using lorem ipsum.

So what should the designer do to replace the customary lorem ipsum? This is where Robert suggests the designer should be writing their own proto-content. Having identified gaps in content within a redesign, the designer could write a basic version of the new section copy. It doesn’t need to be perfect as it will be replaced by finalised copy at a later date but it means that we can user test the prototype with content that actually makes sense to the user.

Another advantage of working with proto-content is that the visual design takes realistic content into account. There is a GatherContent post about this by Liam King, Designing content-first for a better UX where he demonstrates that when the designer designs with lorem, they make everything fit as they want it to. Once the design is developed and the content added, things move and don’t line up, text no longer fits neatly into allocated spaces, and content is then either cut to fit the design, or the design needs to be edited to work with the content. If the designer has only been brought into the first part of the process, they don’t necessarily have the control to make changes to the design at this stage so visual changes are made by others whose skills lie in different areas. This is not a great way of working, so proto-content solves this problem.

After we’ve told lorem to sling its hook (by replacing it with proto-content) user testing, wireframing and visual stages won’t be delayed by missing content. But how do we identify whether the content included in a prototype is final text or placeholder (i.e. proto) content? We should have a content plan document where this can tracked, but I think there is a case for making it obvious in a visual way on the development site too. Not only to ensure that the website doesn’t go live with placeholder text but also to highlight content areas that are incomplete. Before I designed for web, I worked in print and we had a little trick we did to highlight placeholder text so it wouldn’t accidentally get printed: make it magenta. If there was any magenta text, the copy was not final and the design wouldn’t get printed.

This is an easy idea to translate to website design. Where there is placeholder copy, I use a css style, applied by a WordPress shortcode, to highlight it as such. To further develop this, I’ve also applied the same theory to highlight images as placeholders. There are many ways this could be done but perhaps the simplest is to reduce the opacity of the image and add a border to highlight that it is not finalised. Highlighting proto-content and images gives a quick visual representation of which content areas on the website are finalised and which are outstanding.

Highlighting proto-content on the development website

To make sure that all of the content gets replaced before the site goes live, I’ve also added a warning that the page contains placeholder content at the top of the screen so it is obvious to anyone viewing the development site that there is outstanding content, as this could easily be missed if it is below the fold.

A warning at the top of the page indicates that there is proto-content on the page

I’m now a convert to proto-content and will no longer be using lorem ipsum but I think that styling the placeholders in the developing website is also important to give clients (and the web team) an instant glimpse on what is final and what they need to focus on.