It’s time for properly scalable websites – like this one

The world of websites today is a mess. Many are frustrating to use, slow to load and just don’t work properly on phones or tablets. That’s because of a fashion for fudges rather than fixing the real problems.

It’s time to move on and usher in a new era of properly scalable modern websites. Like this one.

It is 2014.

The first web page appeared in 1991. That’s 23 years ago. A lifetime in technology.

So why the heck aren’t today’s websites easy to use, scalable, consistent across all devices (from phones to desktops), fast to load and fast to use?

It’s largely because of a fashion for fudges: special “mobile” or “tablet” layouts, retina graphics, misguided use of Javascript to “enhance” navigation and the use of ads as a substitute for a proper business model (e.g. compelling content in quality over quantity).

The good news is that it’s easy to move beyond the fudges.

Why do we have these fudges?

In the past, phones made bad web browsers and so providing special dumbed-down “mobile” sites made sense. This is no longer true – modern smartphones have a powerful HTML5/CSS3 web browser and high-resolution screens. The legacy we’re still living with are crippled phone site versions that don’t provide many features (yes, BBC, I’m thinking of you).

Some magazine sites are almost unreadable with more than 50% of the screen area devoted to ads

Since the beginning of the web, bitmapped images have been problematic. They don’t scale well and become huge as the resolution and sizes increases. Modern retina graphics make the problem worse. Now sites include multiple image sizes and the average download size of web-pages has dramatically increased. This gives us a landscape of slow-loading, memory-hogging sites that are difficult to properly maintain.

Ads have steadily become a more and more popular revenue stream. This is now getting to the point that some magazine sites are almost unreadable with more than 50% of the screen area devoted to ads. There’s a tipping point here where too many people are put off by the ads, go elsewhere and the readership collapses.

If a magazine cannot monetise its content and community some other way, then what value is it really delivering to end-users?

It’s time for a change.

Implementing Scalable Websites

This website ( is based on a few simple universal mature standards.

First we implement a couple of strict rules:

No Ads

Third-party ads don’t help people in a modern world where anyone who wants something can instantly look for it from anywhere. They are a pure distraction and a form of waste. So get rid of them.

Javascript is for Interaction not Navigation

[Javascript] is absolutely not for navigation or to force an environment on the user. Navigation is the browser’s job.

The following are banned: subverting browser navigation, using scrolling Javascript overlays, creating custom tablet-like Javascript experiences (view this link on a tablet for maximum pain).

Also banned is anything else that gets in the way of ease-of-use including my personal bugbear: sites that won’t let you double-tap to zoom-in and read small text.

Javascript can provide useful interactive capabilities (e.g. pivot a data-set on user request). It is absolutely not for navigation or to force an environment on the user. Navigation is the browser’s job.

Then we build using a couple of key technologies:

SVG (Scalable Vector Graphics)

Smooth automatic scaling as used on this website with no need for conventional images at different pixel depths or special 'mobile' layouts. Everything just switches automatically. This figure, like many on this site, is itself a scalable SVG graphic.

SVG is a portable format for scalable vector graphics and text. It creates very small images that are infinitely scalable without any “blockiness”.

Small images are fast to download and fast to render, speeding site loading, speeding page drawing and significantly reducing memory usage in the browser.

CSS Media Queries + Javascript

CSS Media Queries allow us to detect the screen size of the browser. This plus CSS style rules and some judicious use of Javascript allows us to instantly and smoothly adapt the appearance of site to each device.

This requires no changes to the content itself – we only create one version of each page/post. It also uses only a single set of styles in a common stylesheet.

Figure 1 shows how these technologies are used on this website to affect its behaviour with different device widths.

We have just one consistent look and feel, a single set of styles and colours, single small-size infinitely scalable format for images (SVG) and let the browser handle rendering, scrolling, navigation and zoom. All site features are available on all devices.

NB: For photos, the use of a bitmapped format like PNG or JPG is unavoidable. But photos compress well and don’t suffer from poor scaling as much as diagrams, charts and other figures with straight lines. So a single photo file with a medium resolution is a good compromise.

One question that sometimes arises is: what about people stuck on old browsers and technologies – i.e. Internet Explorer 6 or old phones?

It’s a question of audience. Modern browsers and devices have supported all these standards well for years. The audience of incompatible devices is small and shrinking fast.

Find out about your audience and make your own decision. I’ve made mine.

Good luck making your own websites properly scalable!

Posted in Technology.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>