Mock-ups: The Issue with Placeholder Text

Collaboration between designers and developers has become more crucial ever since the web went responsive. It becomes harder when content is dynamic.

Line breaks

Ever had this perfectly polished Photoshop file with beautiful cards presenting the valued employees "Jane & John Doe" only to find out that this month's actual employee of the month is "Herbert Anthony Rudolphson-Myers" and your 2-line name suddenly ruins everything? Welcome to the club.

But how do we best test for variations in text and word-length? Isn't there this magical placeholder text called "lorem ipsum"?

The lorem ipsum problem

Well, that's the go to, isn't it? But unfortunately we tend to use it according to our needs rather than adapting to how potential users fill out what e.g. is intended to be a 3-line bio. And trying out various text-length while fighting with CSS is an inconvenience. Unless...

Filler tools

There are a couple of tools specifically targeting this issue. My personal solution is fillr. I simply include the the following tag

<script src="https://cdn.jsdelivr.net/gh/sroehrl/fillr@v0.2.0/fillr.min.js" defer></script>

and that's all the setup required.

How does it work?

Let's first investigate the markup

<!-- this generates text for what is intended to be .5-2 lines -->
<h2>{{lorem}}</h2>

<!-- this generates text for what is intended to be about 5 lines -->
<p>{{lorem.rows(5)}}</p>

<!-- this generates text for what is intended to be .5-2 lines and repeats the element 3 times -->
<ul>
   <li>{{lorem.loop(3)}}</li>
</ul>

<!-- you get the idea: -->
<p>{{lorem.rows(5).loop(3)}}</p>

NOTE: if you are using Vue, Angular or similar, you might want to use the alternative [[]] instead of double curly brackets

Try it out: codepen

Now what?

What will happen now is that on every reload you will produce a slightly different output rather than a static placeholder text. This enables you, your customer and your designer to experiment and adapt to variations.

PRO tip: depending on your backend, you might even use e.g. your CMS authoring form to play around with certain output (fillr's markup should be easy to teach)

Knowing most of us fight with this problem: what is your solution?