You’ve probably seen by now applications and websites that use content placeholders before the actual content loads. These are simple mockups of the content that’s going to be displayed. Implementing this technique lets a user know what to expect, it makes your page appear more ‘reliable’ because it removes sizing glitches that happen when the content doesn’t load instantly, and, also, it replaces the boring loading screens. Some people refer to this as “Skeleton CSS.”

Why Should We Care?

This practice will take up some design and development time, so, naturally, most of us would ask ourselves if this is really important. Sure, it looks cool and the user might be a little bit happier, but is it really necessary?

Well, we need to understand first that the Internet is a different¬†place today than it was in the early 2000’s. We’ve come a long way from the first pages of the Internet. People aren’t as grateful for entering a website, they’re simply not as willing to wait for your content to load as they once were. Simply because there are sites out there that might load faster. So, whatever we can do to decrease load time, or at least make the waiting process a little bit friendlier, we should definitely do.

How Others Do It

Let’s see how this looks first before we create one ourselves.

Slack

Slack is probably the best example for this¬†because they’ve been doing it for quite a while now.

As we can see, they simply mock the actual content with blocks of empty divs. Styled appropriately to match the style of the texts that they hold the place of. There’s nothing much to this design, but you can tell that it’s better than an empty loading screen that doesn’t display anything.

Facebook

This is what Facebook uses for its posts. They render the initial content via the server side, but when they load more posts to create the infinite scrolling effect, they use that design to showcase new posts.

LinkedIn

How To Do It

Now that we’ve got an idea of what this is, let’s see what options do we have to achieve the effect.

SVGs

One way to achieve this would be to use SVG images. They look great in any pixel density and they can be embedded into the page to be loaded first. However, they’re not so great with responsive design. If you’re going to need a placeholder, this option will not work so great.

HTML & CSS

This is the second option and probably your best bet that everything would load fast enough and work well with responsive design.

At the beginning of the article, I mentioned that this would take up some design and dev time. That’s because you’ll need to write additional components to act like the content that’s going to eventually populate the area. Obviously, it’s not going to take a lot of time, but if you want to do it well, it can add up.

Ideas for What to Mock

You can mock anything like text, images, buttons, links, but the main idea is to mock the important information and the elements that take up the most space.

Try not to overdo it. If you have blocks of content that feature large paragraphs, don’t draw 10+ lines to represent the entire content. The idea of a content placeholder is to represent the actual content, not to replace it. You don’t need the placeholder to be as convincing as the content.

Try not to mock text with other text. Don’t use Lorem Ipsum or similar text to represent the actual content. That will create confusion.

When mocking fixed size elements, try to match the sizes of the placeholder with the actual elements.

Use simple shapes like circles and rectangles instead of icons or symbols. Don’t replace content icons with placeholding icons. That falls in the same category as the text placeholders.

Match the colors of the placeholders with the colors of the elements. This doesn’t work for text, but it does for the other elements, like images or buttons. For text, the easiest thing to do is match the color, but reduce the opacity to 10% or 20%.

Use CSS animations. By now users have learned to associate animations with loading states, so if you manage to add animations to your placeholders, do it!

Demo Mock

Let’s see how we may go about creating a content placeholder for a page that also features responsive design.

I’ve created this simple example to disect.

We have a .box class that is applied to the real element with the actual content, and a .box-placeholder class applied to the placeholder.

The lines that hold the place of the text have a simple fading animation applied to them to indicate that something is happening. Remember, people are used to animation to represent loading states. Use them whenever you can. Also, try to use CSS animations instead of JS animations, as they tend to be faster, especially on the mobile.

Notice that the image is represented by a solid color inside a 16 by 9 responsive div. We don’t have to go crazy to represent an image. Not even Google does that on its Google Images site. They use solid colors too.