Have you ever heard the phrase fake it ’till you make it? Before I read a recent entry from Kenan Yusuf about the best ways to make it more pleasant for the user to wait for the page to load, I would not be able to assocaite it with CSS. But now I can.

This is a great article to read for any front end developer and designer.

Some websites can be really beautiful. But as far as websites are concerned, beauty really is only skin deep. Take away the CSS, and all you have is just a bunch of black ad white text and random images. This is the CSS and JavaScript that give websites their distinct look and features. Unfortunately, the very same technologies are also the last to load and often we force our users to look at an ugly black and white website for hours.

Lazy loading – the ABC of web design

Is there a way to prevent websites from taking on that ugly skeletor like look before they are loaded completely? One of the most important and influential techniques that does just that is called lazy loading.

What lazy loading does is  that it prevents unnecessary elements of a website to load until they actually become necessary. One of the most popular applications of the technique is the addictive news feed we all scroll so often on Twitter or Facebook, when more articles only load when we scroll down more and more.

More loading enhancing techniques

You must have all heard about lazy loading. But have you heard about those techniques below?

Progress indicators – this is another classis. When a website loads, you put an animation such as a loading bar to indicate that a page is loading. It may be nothing for the animation itself, but for the user that progress indicator shows that their action of making a click really made an impact. And it’s very important for the user experience.

Placeholder layouts – but what if you simply can’t use the loading bar. Sometimes the website download, but some fragment of it takes some more time. One of the prettiest ways to go about it is to use the placeholder layout (especially for text widgets). All you have to do is fill the space of the text widget with an image that “pretends” to be a text, but really is just a piece of square-shaped blocks.

Dominant colour lazy loading – a particularly pretty way to do the loading. When your image loads, you fill its space with the color that dominates it. That way, if you have many pictures, your palceholders still look unique, because, unless all your images are the same or very similar, they are all bound to have a diffent color or a shade of the color to take the dominant spot.

Fallback font – you can also set up various fallback fonts to make sure that your website doesn’t use the standard (Times) font before your actual font loads. FFFFallback is a particularly interesting tool to make that happen.

Reserving space – or you can just reseve some  spot (for an app for example) by creating a div of the size of the loading content and then give it a fix widht. Simple and effective and the website doesn’t “jump” that much while it’s loading.

There are even more amazing techniques and example in Kenan’s article and I welcome you to read it as it’s almost obligatory for any front end developer and web designer to learn it.

And what are you opinions? Do you know some special techniques that may make loading more pleasant? Share it in the comment section below. Let’s make this particular url a go to page for loading techniques. I’ll also make sure to update it with new techniques that I practice and stumbple upon here and there. That’s all for now.

By the way, speaking of fonts, do you know this article. It has one hundred free fonts you can play with! A true treasure throve. You can very easily use them also as your fallback fonts. Your colleagues work on startups or non profit projects? Give them the link and help them make their perfect project without spending too much money. I would be of course very thankful if you talked to them about the loading techniques.

Advertisements