Most modern (web)apps use content placeholders, it's a trend that has spread across platforms in the last half a decade. But what exactly are they, and why are they used? I'm going to tell you in this short article.
At the end of this article I will also provide a code example, for anyone interested in building content placeholders using HTML and CSS.
What are content placeholders?
Content placeholders are elements that provide the user with visual information of what to expect after content has loaded. See an example below!
Content placeholders in the Twitter app
In this example you can clearly see how Twitter is trying to give the user the most accurate representation of the expected content.
Why are content placeholders used?
The main reason for content placeholders to be used instead of traditional loading spinners is to improve the user-experience, doing so by amongst others:
- Preparing the user for the content that will be displayed
- Preventing content jumping and minimising Cumulative Layout Shift
- Retaining user attention with an animation (ripple effect)
How to build content placeholders
Good content placeholders have a few simple requirements:
- Represent the (to be loaded) content accurately by using the same shape & size, if possible 1:1.
- Use one neutral colour across the whole placeholder to make it uniform
- Make use of an animation like the ripple effect to indicate that content is being loaded
Check code example on Codepen.io
Thank you for your read!
I hope you enjoyed reading my post and have learned something, feel free to give a like, and comment below to give some feedback.
Top comments (0)