Why fast websites are kings of the digital hill

The way we access the internet is shifting fast. This change is good: It has dragged me and many other designers back to desktops creaking under the weight of conservative ideas that need cleaning out.

Still, despite good intents and considerable efforts, many websites end up overloaded with graphics.

This post must start with a confession: My sins are many, embarrassing, and colourful. They also, in this case, weigh in at several gigabytes.

Early in my web design career, in the mid-1990s, the wow-factor guided the industry. Nothing was forbidden, and all gloves were off. Extravagance overruled usability at every turn. Among my offenses count full-screen slide shows, decorative pictures occupying every pixel, and menus so small and complex one could get forever lost in them.

A few of my efforts were good, but in hindsight I must have left many users confused. Some were probably left in tears. My only relief is that in the 1990s, there were almost no mobile Internet users. While many web design standards back then were a tad batty, today they are practically and financially useless.

Old maps, new territory

The way we access the internet is shifting fast. This change is good: It has dragged me and many other designers back to desktops creaking under the weight of conservative ideas that need cleaning out. Still, despite good intents and considerable efforts, many websites end up overloaded with graphics.

This approach is fine for print. In magazines and on billboards, snaring people’s attention has been crucial since the dawn of commercial visual graphics. But many traditional design ideas filtered into web design during the 1990s and stayed there.

Over time websites have grown larger in terms of both dimensions and bytes. Big, striking images have become the norm as connection speeds have improved. Videos, animations and other applications now crowd every corner of the net.

Up until now, this has been perhaps not ideal but at least acceptable. Browsers have adapted, screens have grown larger, and more people are on broadband.

Enter the mobile user, and suddenly some design trends are awkward or outright unworkable. Weight, especially, is a serious problem.

Mobile “broadband”

In a sense, we face a throwback to the mid-nineties: Resolutions are lower, connections slower, and screens a lot smaller. What have not changed are two important things: Mobile browsers, while tiny, are still advanced – and the mobile user is still used to rapid websites.

The sluggishness of full-blown websites loading over poor connections is a familiar problem. Still, given the introduction of faster mobile networks, this might look like a small hiccup soon to be smoothed over by blazingly fast data transfer speeds.

Not quite yet.

In many places, the majority of users still rely on non-broadband connections, and estimates from 2011 suggest there is a long way to go:

• In Europe, about 43% of mobile phone users subscribe to mobile broadband.
• In the Americas, subscription is just over 24%.
• Worldwide, the number drops to under 13%. 
• Japan has the world's highest 3G penetration - about 95%.
• The UK’s 3G penetration last year was about 53%.

Online, time really is money

The above numbers are important for any business interested in online visibility, but it is more than a matter of convenience. Mobile users, it turns out, are not content to stare at blank screens while their bandwidth is clogged by acre-sized JPEGs.

On the contrary: If they are kept waiting, most of them leave.

For conversions speed is even more crucial, and every second counts:

• An extra loading time of a mere second can turn away enough users to result in a 7% conversion loss.
• Put another way, for an e-commerce website that makes $100,000 per day, this extra second can lead to a loss of $2.5 million per year.
• Crucially, as websites adapt, expectations will rise on websites – what is slow today might be seen as unusable tomorrow.

Ideas 

There is no one-size-fits-all design recipe that applies to all aspects of every website, but there are a few guidelines that make many both faster and more efficient. Better still, many of these recommendations apply regardless of what kind of device a visitor uses.

1. Content first

As a general rule, don’t overdesign navigation. Hold back on the interface and give room to words and images. Visitors come for a reason – guide them to it without fuss.

2. Mobile first

Typical approaches in mobile versions of websites, whether responsive or separate, give clues to good practices. For example, consistent use of clear titles and a minimum of excess graphics make for speedy websites and pleased users.

Luke Wroblewski summed it up nicely already in 2009.

3. Customer first

Always size up your design decisions by thinking like a visitor. Are the images helpful, selling or (at least) not obstructive or baffling? If not, could the space be used for content or stay empty?

Remember: whitespace is important and underrated.

4. Think big (buttons)

Contrary to myth, large buttons do not look cheap if done right – and users appreciate them. Style them with CSS and put them where the users expect them to be. (There’s even science behind it.)

5. Crash-test your design at wireframe stage

Do you reach key content as quickly as possible? Find friction, hunt down ambiguities, and erase them.

6. CSS!

CSS gives you the tools for neat typography, great CTA buttons, background gradients, and more. Use it to make stunning websites that load like the wind. When you feel the need to introduce an image, consider styles first – is there any solution that might do the job?

Early days

It is too early to predict the landscape six months from now, and today’s average mobile user may not expect a full experience. Still, aiming to offer everything for everyone is a solid long-term strategy.

Good design in general benefits both users and website owners – but if a page takes too long to load, the user will never see the brilliant layout.

If you pour effort and resources into offering your visitors a great web experience, make sure they don’t leave before they see it. Mobile users grow more numerous by the hour. Businesses either step up and streamline their web presences, or risk becoming invisible.

Image credit: 500memes.com