Hello
YeldosHello
Facebook content placeholder deconstruction
by George Phillips
Blog | Deconstructions | Facebook content placeholder deconstructionNovember 15, 2014
This is the first post of my new blog series called Deconstructions. Showcasing cool things people are doing in web development and breaking them down step by step. My first target is a cool content placeholder from the most recent Facebook overhaul. Before your friend’s latest selfie or dog picture loads you may have noticed this nice bit of polish.
What is it?
Straight to the point here it is. Below you can see my clone and my HTML (I changed a few things to make it easier to see):
As you can see the demo only contains three types on elements:
A Wrapper
This is the easiest bit, it’s just a centered div to wrap the content. I chose to use the same colours as Facebook.
A Fancy Animated Background
This is where the magic happens. It’s a box that is has a animated background and that background happens to be a CSS gradient.
Plenty of Tiny Masking Blocks
Without these the previous step just looks like a stupidly large progress bar. This gives the shape to the placeholder. It’s just lots of little white divs that sit on top so you can’t see the animation. This part gets messy fast. I have added some borders to this version to illustrate where the masks are placed (Try hovering on each block).
Why would I ever use this?
We can’t always remove having to wait for information but we can make the wait feel shorter. By giving some indication of what is going on and giving visual stimulus the user feels immediately more comfortable and less likely to leave. This is exactly like putting a progress bar on a long action. Apart from the fact it’s some fancy polish, it’s great usability. I think this feature is better than your average loading symbol because it actually feels like the content is almost there. After a quick search I found this articlewhich explains it quite well.
That’s it
I have been looking for a situation I can use a loader like this but sadly one has not come up yet. I may use it for the upcoming GitHub integration while I am loading the list of repositories. If you found this useful or have any questions feel free to comment below. I am going to try to do one of these a week so if you see something you want deconstructed let me know.
Note: I used unprefixed CSS in the code examples to keep it clean. You can use Our CSS Prefixer to get cross a cross browser version.
Keep up to date with CloudCannon articles, tutorials, templates and other Jekyll news
George Phillips is the CTO of CloudCannon. He is a passionate, self-taught designer with a BSc in Computer Science. He blogs about HTML/CSS, JavaScript and anything even remotely connected with Web Design.
CloudCannon
Resources
Social
App
© 2017 CloudCannon Ltd • Terms & Privacy