A quick Google search shows the “Death to Lorem Ipsum” meme is a reoccurring one that is once again hitting the twittersphere this week while An Event Apart is in Boston. Their points about understanding the content during the design phase are completely essential when creating websites, but their rallying cry is completely off base.
Crying “death to lorem ipsum” because real content keeps breaking our design is like crying “death to hammers” because we keep hitting our thumb.
Imagine if Vera Wang was asked to design outfits for a team of people.
Let’s say her client doesn’t initially tell her anything about the people she needs to design clothing for. So, Vera uses Elle McPherson as the model. And the client approves of the design because, of course, it looks fantastic on Elle.
But when Lebron James and the Miami Heat show up for their outfits and look completely ridiculous in misshapen clothing, let me be clear…
Do not blame Elle McPherson!
Lorem ipsum is just a model of real content. If the designer uses the wrong model, its not the model’s fault.
How did we get here?
“Death to
Hammers!”
Lorem ipsum has been a tool we’ve been using for decades. Because real clients never hand their homework in on time. And designers almost never get the content before they are required to start the design.
If we use realistic-looking, but fake content, the client often freaks out saying “That text doesn’t reflect our brand message. You can’t use that!” And even though we assure them its just dummy text, the unease they feel sets the tone for the rest of the design review. Its a losing formula for designers. And Karen McGrane elegantly describes why using real draft content in designs is a never-ending battle.
So we invented Lorem Ipsum. Completely fake content that is so far off message that the client can’t even attempt to improve the content or disapprove of it. At worst, it creates initial confusion about what’s going on. But after some reassurances and eduction, the client can settle down and get down to the business we want them to focus on: our designs.
So where did we go wrong? We repeated the phrase “just ignore the lorem ipsum” one too many times. It’s a mantra that we used to get clients to ignore the fake content. But unfortunately, we now ignore the fake content too.
We’ve forgotten the fake content is supposed to be a model of the real content. By ignoring Lorem Ipsum we’ve ignored the living, breathing content that it is supposed represent.
Getting out of the trap we built for ourselves
We’ve been doing web design for nearly 20 years and we still fall into the trap of wanting perfectly sized content. There is no such thing on real websites. If your designs have features that require the content to be limited to a certain number of characters, I highly recommend you re-think that approach. Why?- The people signing off on your design are often not the people writing the content. This is a reality of large organizations. The people with the authority to approve representations of the company’s brand are not the same ones in charge of writing the copy. It’s likely the copy writers will never hear your recommendations about content length.
- The content that fits in your design today will not be the same content that is put into the website tomorrow. Organizations change. Whether its their writing style, the people, or their goals, you shouldn’t rely on what you “know” about the content today. Because it will change over time. And your designs have to be able to cope with those new parameters.
I know. I know. Design loves constraints. (I do listen to Mark Boulton.) And, yes, your design may not be as pretty when the client puts a “too long” piece of content into your designs. But it shouldn’t break! Create a design that looks great for the 80%, but also looks fine for the other 20%. Your design must be flexible.
The perfect solution to the problem of not knowing what the real content looks like is to use Lorem Ipsum. But you have to learn how to use it properly. Stop editing it to fit perfectly in your design.
Learning to use “Real Lorem Ipsum”
I’m not a designer (as you can see from my blog’s design); I’m a professional site implementer. And I know where the pain points are when putting real content into carefully crafted designs. Here’s a short checklist for you to double check your designs against Real Lorem Ipsum™:
- Headlines. If you have a list of content and they all have titles with roughly the same length, then you’ve only designed for the 80%. You’ve forgotten about the odd-ball 20% that every site has. Make some really long titles. Make some really short ones.
- Tables. Those grids of text next to images where the bottom of the text perfectly aligns with the bottom of the image? That never happens with real content. Make some of your Lorem Ipsum text be longer than the image for some examples.
- Names. If you’ve designed any name tags, you’ll already know what I’m talking about. Al Grey and Dikembe Wamutombo both have to fit.
- Small boxes/labels. Those tiny boxes of text better be able to handle a concept longer than 4 words if you know what I mean.
There’s lots more examples, but that should get your left brain thinking in the right direction. ;-)
Finally, a compromise
I hate ending on this note, but I’m radical centrist by nature. Sometimes, not often, but sometimes, you really do need to constrain the content. In those rare cases, I cannot stress enough that you need to:
- Get the client’s buy-in now. If there is a limitation to the length of content, make sure the client agrees to every single limitation.
- Educate the client. Provide documentation so that everyone can understand why the constraints are necessary.
- Re-educate the client. You’re building the site in a CMS, right? Make the CMS notify the user about the constraints as they enter the content. I’m a big fan of (and contributor to) Drupal. In Drupal, you would add a description for the field with the constraint. Make the inline help short and to the point so the user will actually read it.
- Optionally, force the client to listen. Again, using a CMS, you should be able to validate the content as they submit it. I’d recommend against cutting off the extra characters. Instead prevent the form from submitting, display all the content and display a helpful error message so the user can edit the content to match the required limitations. In Drupal, you’d just write a custom validation function for that form field.
A summary slightly too long for twitter
Instead of just dumping fake Lorem Ipsum into your design and editing it to fit your design, create “Real Lorem Ipsum” where the content challenges the design to think about real world problems.
Update: Oooh. Rachel Lehman has a great idea in the comments below. “You can even ask for the draft content, then place the Lorem Ipsum in the length of the draft content! Then you get the best of both worlds - no distractions from unfinished content, but realistic length representation.” Fantastic!
Comments12
Upfront and in detail (with disclaimer)
Agree, I think “death to lorem ipsum” needs to be more about getting content delivered up front, even if it's in a draft state.
For example, it's helpful to know that a paragraph introducing the speaker's on a pane on the homepage is or is not the same exact text introducing the speakers page itself, because it changes how that site is built. Even if the client's answer is “I don't know” at least it can be flagged as something that can be dealt with later on (but not in the 11th hour)!
It also means need to go beyond the headlines and paragraphs. We need to understand fields and displays. We recently had a content type where it was pretty unclear whether video clips would be linked to a vendor page to be viewed, embedded as in media field in the node or both (it turns out the answer was "this content type needs to handle both".
Or whether an image field will always contain multiple images, or may sometimes contain a single image.
Of course, content can come with a disclaimer that it's not final.
Asking, no, insisting the client think about their contents to a detailed level up front makes a huge difference in the efficiency of the site implementation (and design!). I am introducing content checklists and content templates to upcoming projects.
I agree with the essence
I completely agree with the essence of the idea. Content strategy means understanding the purpose of the content and how the user interacts with it. That’s extremely important for both the client and the designer to understand. Otherwise, the design, the IA, the UX, and the backend build-out can all literally be at cross purposes with the content.
But taking a purity pledge to get rid of Lorem Ipsum is just silly. If you understand the problem better, you can use the Lorem Ipsum tool to help solve the “unknown content” problem.
Agree. Lorem ipsum has it's
Agree. Lorem ipsum has it's place. I almost wept with joy when I was new to Drupal and learned about Devel Generate. In the past, I had to create Selenium tests that would repeat to create enough content to see how pagers would look, and how multiple comments would sit once they flowed off the initial container.
It's a very tricky thing to
It's a very tricky thing to design for unknown content, and the chances of having a successful design increase dramatically once someone puts some real effort into deciding what they want the design to say. Clients and site owners almost can't go wrong by treating good content as first-class citizen in the design process and a prerequisite for good design.
However on any project that's large enough as to require a CMS it's almost impossible to have ALL the content written and done. By nature the site needs to grow with more content that we don't have during design and development. Using Lorem wisely as you've outlined helps reduce the "unknown unknowns" of a site's future content. (my favorite Rumsfeld line).
The other thing I really like about Lorem is that it's just as easy to find as it is to ignore. Once it's served it's purpose, remove it. We don't have to let our clients see it if they don't have to.
I'm positive that professionals get this. Rallying cries are fun to yell but completely miss the nuance, and good design, content, and implementation are all defined by how much attention we give to the smallest details. Remember "Death to IE!"? Fun to retweet, but not helpful at all.
The extra value of dummy
The extra value of dummy content is that it very clearly needs to be replaced with real content. Dummy text is so obviously wrong that it's picked up quickly by editors and replaced, and if it does end up being displayed to the end user then the harm is minimised (not negligible, just minimised).
Compare this with draft text that can easily find its way into production: this can be inaccurate or misleading, can easily be missed by editors, and - much worse - end users won't notice the error.
If we're talking about photoshop mockups, then this isn't a problem. But in small projects where development and editing takes place in the CMS itself, then you have the very real possibility of draft and unapproved content being displayed to the user as finished and approved text. Which would be bad.
You know, it'd be cool to
You know, it'd be cool to have a Drupal install profile complete with test content for themers, using basic rules just as you've laid out here. The line is becoming grey between designers and those who actually create Drupal themes, but it still exists.. it'd be nice to show a designer what their designs look like in Drupal with a battery of random content prior to the client breaking it. It'd definitely beat Lorem.
Content importance
Well written post. I especially liked your note on quality content. These points have once again underlined the significance of good content.
Designers need to use Lorem
Designers need to use Lorem Ipsum properly and responsibly.
I agree wholeheartedly - while I can get behind the idea that real content is preferable to Lorem Ipsum, it's also the responsibility of the designers, when Lorem Ipsum is called for, to use it more like a real world scenario. Such as... when you have repeating areas of text, don't just copy and paste the same snippet over and over so that each one is uniform in length - show variations, minimums and maximums. When you place the Lorem Ipsum, keep the "word count" consistent with what is to be expected of the real content. Make it realistic.
You can even ask for the draft content, then place the Lorem Ipsum in the length of the draft content! Then you get the best of both worlds - no distractions from unfinished content, but realistic length representation. This can also be useful to highlight to writers just how absurdly long their content is ;)
Lorem Ipsum is NOT an excuse for designers to be lazy!
I see where you're coming
I see where you're coming from and I guess we're on the same page, but I don't think a designer should be deciding on headline length etc. Even if you don't have complete content, a copy platform for each page should at least have been created before design starts so that you know what type of content is going on a page, roughly how much, and what its purpose is.
It's wrong to just say to a writer - you've got space for 200 words here (as shown by the Lorem Ipsum) when maybe 400 words are needed. The content requirements should always drive the design and page layout.
Equally the writer should create a style in advance - including some sample headlines and whether or not there will also be a standfirst/deck. And whether pullquotes need to be used, etc.
It's unrealistic to expect "final" content that can just be dropped in at the last minute as copy can read very differently when in the context of the site as a whole (compared with just reading it in a flat copy deck). As a content writer and editor, I always ask for a stage to be built in where I can edit the copy in situ (to continue the Latin theme!) and recommend that the client only delivers final approval after they've seen the copy in the site.
This sometimes annoys designers or developers if copy needs to be changed in the files, but it always leads to a better site.
Further to my post above, I
Further to my post above, I meant to add I am in favour of getting rid of Lorem Ipsum completely, as without it clients (and designers) would be forced to think about content earlier in the development process. Lorem Ipsum simply makes it easy for everyone to ignore content for a while.
I would rather see notes in the space for content instead of LI, such as "headline and 200 words of about us content here?" or "This page needs to sell the benefits" or "Lots of short paragraphs here explaining features", etc. Doing that forces everyone involved to see that each page has a purpose and needs the appropriate content for that purpose.
Sorry. This article is still
Sorry. This article is still better:
http://www.lukew.com/ff/entry.asp?927
I agree 100% with Luke’s
I agree 100% with Luke’s reasoning. Mindless lorem ipsum is harmful. But mindful lorem ipsum is modeled after the real content. And it prevents clients from the desire to copy-edit the content when they should be reviewing the design.