Skip to main content
April 5, 2013

Filling the Empty Spaces

Bee Digital WorldWhen developing a website, one of the most exciting aspect of the process is seeing the design come to life.  

Prior to that, you had to use a bit of imagination in order to see where everything fit and how things worked together.  It can be even harder to imagine if the site is responsive, with elements rearranged or hidden and exposed for different screen sizes.

Once initial coding is completed, it is often necessary to fill those empty spaces with text and images.  It doesn’t have to be content that makes sense.  It should, however, have elements that have meaning, like headers, paragraphs, bulleted lists, and graphics.  This is so that you can test to make sure your content matches the design and to review the layout as you fiddle with your browser sizes.

If you’re dealing with multiple pages, or maybe lots of different layout styles, it can be quite tedious to try to fill each page with text and images.  Luckily for us, there are some awesome people out there that have developed some interesting tools that can make the creation of random text and images quite easy for us to integrate into our blank canvas.

Blank Canvas

A layout without any content, like the example above, makes it is really hard for the clients to visualize how the final site will actually look like.  It is also hard to test for discrepancies.

However, one that is filled with content and images clearly shows you what you can expect once the site is in its production phase.  Also, at this point you can start testing and adjusting for responsive.

Responsive Canvas

As I stated above, there are many tools that can help you easily and efficiently create content for you to test.

One of my favorite method for adding images is using a site called Dynamic Dummy Image Generator.  The nice thing about this site is that you can simply add images by adding an image tag like this:

<img src="http://www.dummyimage.com/610x250">

This simply tells dummyimage.com to create an image with a size of 610px by 250px.  Your dimensions are printed right on the image.  This is very helpful as it allows the client to know what image sizes are required to fill the space.  Of course, there is also the ability to change various parameters to suit your needs, including text and color.

When it comes to getting text to fill out your empty spaces, there are many random text generators. However, those require you to go to the site, generate the text, copy the text and then paste it into your pages.   This can get pretty repetitive, depending on the number of pages you have.

To overcome this, I use a service at loripsum.net.  They have a simple API, using a GET request you are able to request random text.  The output comes in as regular HTML, so you don’t need to parse the result.

If you’re using PHP,  you can simply create a function to get the output, like this:

function getSampleText($url){
    return file_get_contents($url);
}

Name that file something like, sampletext.php.

Include the file in your header.

include ('sampletext.php');

Next, where you want the text to appear, just call your function, like so:

echo getSampleText('http://loripsum.net/api/4/medium/headers/ul');

There are paramaters that you can change that will affect the result.  In the example above,  reading after the ‘api’, you can see that I am requesting four paragraphs, each of medium size, including headers and an unordered list.  Simple as that, and you can have these in various places on your layout.

In conclusion, using these two services will allow you to efficiently visualize, present and test your final product.

If you find this useful or know of another service that might help others, please feel free to post them in the comments below.