Advertisement
HTML/CSS

Filler Content: Tools, Tips and a Dynamic Example

by

As designing in the browser becomes more popular (and convenient), the need for helpful design tools is increasing. One set of tools that is becoming quite helpful revolves around filler content. Currently, a variety of resources exist to aid designers who need filler content, whether it be text or images.

Because a lot of website design used to take place in Photoshop, manually copying/pasting text from the web was the best method for 'filling in' a design with dummy content. However, now that a lot of website design takes place in the browser, why not have the computer do all 'filling in' work for you?

We'll cover your options for filler content in this tutorial. Everything from copying/pasting static text and images to dynamically generating them.


A Word on Filler Content

There are purists who recommend avoiding filler content at all costs. One argument is that filler content abstracts you from the 'real' experience of the website you're building:

The goal here is to get as close to the real customer experience as possible. Don't abstract yourself from the real experience. Every layer removed pushes you further and further away from the actual customer experience.

The fact is, sometimes you can't imitate the real customer experience. If you have simple marketing websites with static content crafted by a content strategist, then by all means, use that content to build out the website's design. The content should inform the design. But if you are designing a web application filled with user generated content, it's often impossible to design around real content because you yourself cannot generate it; that's done by your users. In addition, from a privacy perspective, it is likely that you aren't allowed to use actual customer data to populate mockups. So you're prevented from getting as close to the user experience as possible because of legal or privacy issues.

There are, however, steps you can take to stay close to the real customer experience:

If your site or application requires data input, enter real and relevant words and type the text, don't just paste it in from another source. If it's a name, type a real name. If it's a city, type a real city.

If you use the right type of filler content, it's possible to closely resemble the final user experience. Say, for example, your design calls for a list of names. Instead of using:

  • Lorem Ipsum
  • Sit Amet
  • Faucibus Eros
  • Carin Pulvinar

You can use real names:

  • John Stalewood
  • Jessica Alley
  • Stan Norwood
  • Trevor Singley

Once again, the goal here is to get as close to the real customer experience as possible. And if you can do that using filler content, go for it!

Because we care about our craft, our discussions about tools and techniques are often based on best practices and perfect solutions. Because we care, our workflow and expertise are improved with each project. However, perfect solutions do not often exist in the real world. This is why pragmatic alternatives (such as filler content) help finish projects in a timely manner. I believe this is perfectly fine, as long as we don't compromise our principles.

Mockups

A preliminary mockup, as we all know, is no where close to the final, real customer experience. Your design will likely change drastically between the first and final iterations. Filler content can still be a valuable tool in seeing how text flows down the page, around images, and through breakpoints. It can help you get a feel for the placement of design elements, the balance of the page, and the use of negative space.

Doing away with it completely makes no sense. Filler content can be a critical tool in the initial design phase for rapid prototyping and iteration of design concepts. Once you move past the early stages of design, it would be very helpful to be using content which more closely resembles what the user will eventually see.

Conclusion

Where you draw the line on using filler content is up to you. There is no definite "yes, use it!" or "no, it's a disgrace!". The answer to "should I use filler content?" is, as it always seems to be, "it depends". Sometimes talk of not using filler content is more about an ideal world and not the real world. You're a professional, you decide. In the end, you'll learn whether or not you made the right decision and the next time you face the question "should I use filler content?", you'll better know how to answer that question.


Filler Images

There are a number of hosted solutions for inserting images in your HTML document, allowing you to specify various image attributes through a URL. For example, to use placekitten simply put the image size you need after their URL. Then, use that URL as the src of your <img> element:

<img src="http://placekitten.com/200/300" />

If you don't like Kittens (why are you on the internet?), here are some similar services which offer different customizations (see this roundup for more options):


Filler Text

There are a number of reasons why you would need to generate filler text. Perhaps you need to generate entire paragraphs for conceptualizing a blog design. Or, perhaps you need to generate categories of text, such as emails and names for styling a table design. Whatever your need, there are a variety of solutions for generating text in your designs.

Copy/paste text

There are numerous filler text generators on the web. As web design often deals with lists, tables and other data structures, many generators offer more than Lorem Ipsum paragraph filler. Below is a (small) list of filler text generators. Each one offers a variety of text configurations such as generating different languages, enclosing text in HTML tags, lacing text with headings/subheadings, adjusting text length and bolding or italicizing words.

For more comprehensive lists of text generating websites, here are a few roundups:

Dynamically generate text

You can dynamically generate filler content in your HTML documents using a JavaScript library such as:

As designing in the browser becomes more popular, the old copy/paste technique for filler content can become inefficient. Why not let the computer handle that job? Let's cover this technique more in depth.


Putting it all Together, Dynamically

Let's try putting some of what we've covered so far into practice by creating a design mockup. For simplicity's sake, let's imagine we are tasked with creating a basic website design which showcases excerpts of someone's favorite articles from all over the web. We'll call this person Franky and we'll call the design "Franky's Fav Five".

This little example should help showcase the usefullness of dynamically generated content when designing a mockup in the browser.


Step 1: Basic HTML and CSS

First, let's outline our basic HTML.

<html>
<head>
    <title>Franky's Fav Five</title>
    <link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

As you can see, we're including three additional resources into our page: a CSS reset, a custom CSS stylesheet (which we'll write later) and a link to Google's hosted version of jQuery. Now, in our styles.css file, let's include some basic styling rules for our mockup:

/* General
============================== */
body {
    font: 1em/1.45 Georgia, serif;
    background: #e9e9e9 repeat;
    color: #222;
}
img {
    max-width: 100%;
    height: auto;
}
strong {
    font-weight: bold;
}
.wrapper {
    width: 95%;
    margin: 0 auto;
}
.content {
    padding: 0 2em;
}
a {
    color: #9c0001;
}

Step 2: Create and Style the Header

Now let's create a simple header for our page. Again, nothing too sophisticated as this is just an example mockup.

<header class="header">
    <h1 class="header-title">Franky's Fav Five</h1>
</header>

Now we'll add some simple styling to our header

/* Header
============================== */
.header {
    padding: .5em 0;
    background: #333;
    color: white;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.header-title {
    font-size: 1.25em;
    font-family: helvetica;
    font-weight: bold;
    text-shadow: 0 1px 0 #000;
}

Now we have a simple page with a header, like this:


Step 3: Main Article

Now let's create the markup for our article excerpt. The point of this article is not to show CSS and HTML coding techniques, but rather how to work with filler content. Therefore, we will cover these steps very quickly with simple copying and pasting. First we'll setup a wrapper and main article.

<section class="wrapper">
    <article class="article">
    </article>
</section>

Note: I appreciate a class name of "article" on an article element may seem a little absurd - remember this is purely a demo..

Article Image

We'll use the lorempixel image placeholder service for placing images in our markup. As our article containers are set at a max-width of 600px, that's the image size we'll grab from lorempixel.

<img src="http://lorempixel.com/600/200/" />

Article Text

Now we'll place all of our article text in a div. Our simple mockup will use the following repeatable pieces of content:

  • Article title
  • Meta information about the article
    • Author's name
    • Source of the article
  • Article excerpt
  • Read more link
<div class="content">
    <h2><a href="#" class="article-title">Article Title Here</a></h2>
    <ul class="article-meta">
        <li><strong>author</strong>: Author Name</li>
        <li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
    </ul>
    <p class="article-paragraph">This is where all the paragraph text will go&hellip; <a href="#">read more &raquo;</a></p>

</div>

Essentially, this is our template for showcasing excerpts of Franky's favorite reads. Now let's style it!

Style the Article

We have our basic markup, so we'll begin by styling the content.

    /* Article
============================== */
.article {
    max-width: 600px;
    padding: 0 0 2em;
    background: #fff;
    margin: 3em auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.article a {
    text-decoration: none;
}
.article a:hover {
    text-decoration: underline;
}
.article img {
    border-radius: 5px 5px 0 0;
}
.article-title {
    display: block;
    font-size: 1.125em;
    line-height: 1.2;
    color: #222;
    margin: 1em 0 0;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: capitalize; /* faker won't output the right capitlization, but CSS can handle it! */
}
.article-paragraph {
    color: #555;
    font-size: .875em;
    line-height: 1.5em;
}
.article-paragraph:first-letter {
    text-transform: uppercase;
}

/* Article Meta */
.article-meta {
    color: #777;
    font-size: .75em;
    font-family: arial;
    margin: .25em 0 1em;
    overflow: hidden;
}
.article-meta li {
    float: left;
    margin-right: 1em;
}
.article-meta li:after {
    content: '\00B7';
    margin-left: 1em;
    color: #ccc;
}
.article-meta li:last-child:after {
    display: none;
}
.article-author span {
    font-style: italic;
}

Now you'll have a rather simple template for showing article excerpts which looks something like this:


Step 4: Introducing a Little PHP

So far we have one article excerpt (out of five, as this is "Franky's Fav Five"). Rather than copy/pasting the markup four more times we'll use a for loop in PHP. Doing so will will maintain a single template of our article excerpt while editing, but multiple article excerpts when viewing in the browser. This makes for easy maintenance; if we ever want to tweak our article excerpt template, we won't have to do it multiple times.

Let's wrap our article element in the following code:

<?php for($i=1;$i<6;$i++) { ?>
    // <article> element here
<?php } ?>

Notice our for loop starts with the variable $i being equal to one and will run until it's less than 6 (so it runs 5 times).

NOTE: Be sure to rename your file to with the extension .php if you haven't yet.

Now you should have something like this:

Notice how our image from lorempixel is the same in every article? To achieve a more realistic mockup, we'll slightly modify the image's src so we get a different image for each article excerpt.

Getting Different Images Using LoremPixel

LoremPixel allows you to slightly customize the type of image you're retrieving. Here's the customizations they allow in their URL structure:

  • http://lorempixel.com/400/200
    • Requests a random picture of 400 x 200 pixels
  • http://lorempixel.com/400/200/sports
    • Requests a random picture of the sports category
  • http://lorempixel.com/400/200/sports/1
    • Requests picture no. 1/10 from the sports category

Currently we are using the URL http://lorempixel.com/600/200. What we'll do is choose a category, such as sports, then use our PHP count variable $i to modify the URL so each article excerpt requests a separate image from the sports category.

To do this, find the <img> element and modify its source like so:

<img src="http://lorempixel.com/600/200/sports/<?php echo $i ?>" />

Now, as the php count variable $i increases with each for loop, our image URLs will request a different image each time. The HTML markup output by PHP will now look something like this:

    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/1" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/2" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/3" />
        .
        .
        .
    </article>

Now we should have something that looks like this:


Step 4: Dynamically Inserting Filler Content

Now that we have our basic template in place with a different image for each excerpt, we want to have different filler content for each article. This will help us better visualize the end product.

This is where a filler content library like faker.js comes in handy. Using the API of faker.js along with a little bit of jQuery we can dynamically fill up our HTML template on page load. Using the faker.js API is rather simple. You can find the whole API on the faker.js github page. Here's the usage example:

<script src = "Faker.js" type = "text/javascript"></script>
<script>
    var randomName = Faker.Name.findName(); // Caitlyn Kerluke
    var randomEmail = Faker.Internet.email(); // Rusty@arne.info
</script>

As you can see, by including faker.js in our page we then have access to its API which can generate filler names, emails, addresses, content and more. Simply invoke the Faker object with one of its corresponding methods.

Implementing Faker.js in Our Own Page

First, let's add faker.js to our page. We'll add the <script> for it at the bottom of the page, after our call for jQuery. Here's the link again: faker.js.

<script src="faker.js"></script>

Now, let's try generating fake content titles using faker.js and jQuery. If you look through the API of faker.js, you'll notice there are methods for generating sentences, paragraphs, and words of Lorem Ipsum content. Since we want something similar to an article title, we'll want a sentence of Lorem Ipsum: Faker.Lorem.sentence(). This will spit out a single sentence such as "praesentium est alias dolor omnis sequi voluptatibus", which will be good filler content for an article title.

Note: faker.js won't output a capitalized sentence. By using the CSS rule text-transform: capitalize we can force the sentence to be capitalized; thus bringing us closer to proper formatting.

We'll start by adding a class of faker-sentence to our article title template. This will act as a hook allowing jQuery to find all elements that should have their content replaced with sentences of lorem ipsum.

<h2><a href="#" class="article-title faker-sentence">Article Title Here</a></h2>

Then, using jQuery, we'll cycle through each of the faker-sentence elements output by PHP and replace our static filler content "Article Title Here" with a randomly generated sentence of Lorem Ipsum.

$('.faker-sentence').each(function(){
    $(this).html(Faker.Lorem.sentence());
});

Now we should have something where each of our article titles vary in content and length and more closely resemble the dynamic content of our site.


Step 5: Filling the Entire Page

Now that we've replaced all of our article titles. Let's think about the other content on the page we want to replace. We still want to fill in the following template pieces:

  • Author name - such as John Williamson
  • Online source - such as domainname.com
  • Paragraph text - such as a lorem ipsum paragraph

Rather than write out jQuery for each and every template piece we want to replace, we'll abstract out the generating and replacing of content and then simply pass in what we want replaced as arguments.

Determine What faker.js Will Generate

First, let's figure out what parts of faker.js we will use to generate the filler content we need. As mentioned, we need a person's name, a domain name and paragraph filler content. Faker.js has the following methods we can use:

  • Faker.Name.findName() - gives us a name, such as John Williamson
  • Faker.Internet.domainName() - gives us a domain name, such as eldridge.co.uk
  • Faker.Lorem.paragraph() - gives us a paragraph of Lorem ipsum content

Add HTML Classes Where We're Putting Filler Content

Now that we know what content we're generating, we need to add an element and class where we'll be putting our filler content. As we did above, we'll prefix each class with "faker-", that way when we move beyond creating a mock and stop using faker.js we can easily find and remove the filler classes we don't need.

Note: make sure the filler content classes match the faker.js method names. So Faker.Name.findName() will need the HTML class faker-findName and Faker.Internet.domainName() will need the class faker-domainName etc. This will be helpful when we automate the finding and replacing of filler content in jQuery.

First, let's handle the author by adding a span element with the appropriate class:

<li><strong>author</strong>: Author Name</li>
<!-- should become -->
<li><strong>author</strong>: <span class="faker-findName"></span></li>

Now we'll handle the source by adding a the appropriate class to the source link:

<li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
<!-- should become -->
<li><strong>source</strong>: <a href="#" class="faker-domainName">onlinesource.com</a></li>

Lastly, let's handle the article excerpt by adding a span element where our filler lorem ipsum will go:

<p class="article-paragraph">This is where all the paragraph text will go &amp;hellip; <a href="#">read more &amp;raquo;</a>

<!-- should become -->
<p class="article-paragraph"><span class="faker-paragraphs"></span>&amp;hellip; <a href="#">read more &amp;raquo;</a>

Now we just write a little jQuery that will find all our filler content elements and fill them with filler content generated by faker.js.

Let's create a variable called args. This will be where we define the faker.js API methods we'll be using. Remember, our HTML classes map to the faker.js methods and are simply prefixed with faker-.

Note: we're adding Faker.Lorem.sentence() to our arguments, so you can remove the JavaScript we created earlier in step 4 to find/replace the article titles.

var args = {
    'Lorem'         :   ['paragraphs', 'sentence'], // maps to Faker.Lorem.paragraphs() and Faker.Lorem.sentence()
    'Name'          :   ['findName'],               // maps to Faker.Name.findName()
    'Internet'      :   ['domainName']              // maps to Faker.Internet.domainName()
}

Now we just loop over each of our arguments. The key in the array becomes the faker.js object while the value in the array becomes faker.js method. The value in the array maps to the HTML class so jQuery knows which element to look for.

// loop over args
for (var key in args) {
   var obj = args[key];

   for (var prop in obj) {
        // jQuery finds the appropriate elements and fills them
        $('.faker-'+obj[prop]).each(function(){
            // Faker.Lorem.paragraphs()
            // Faker.Internet.domainName()
            $(this).html( Faker[key][obj[prop]]() );
        });
   }
}

That's it! Now you should have something like this:

Abstracting out our filler content process in this way makes adding/removing new types of filler content really easy. Now in the future, if you want to add a new filler content type from faker.js, such as an email Faker.Internet.email() all you have to do is add it to the args variable and then create an HTML element with a class of faker-email wherever you want a fake email generated.


Conclusion

We've built a simple mockup in the browser, showcasing a design example of five article excerpts.

Our template for each article excerpt is only 13 lines of PHP/HTML, while the resulting HTML would be much more than that. This makes for fast and easy prototyping. At this point, we could easily test the responsive nature of the design and see how content and text reflows. We could tweak any CSS that requires it, or we could very easily add more design elements with corresponding filler content. Dynamic filler content makes for quick prototyping of designs. Perhaps you'll find a need for it in a future project!

Other Uses

As you might possibly see, this type of prototyping could be useful for many other web design tasks - especially data-driven ones. For example, if you needed to design a table of contacts with names, addresses, emails, phone numbers, and more, you could use faker.js to easily generate any filler content you need. This allows you to more easily focus on the design of the table rather than having to copy/paste tons of data into your HTML just get a feel for how it looks and responds.

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…