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?
The good news is that it’s easy to move beyond the 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).
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.
This website (www.ambitiousmanager.com) is based on a few simple universal mature standards.
First we implement a couple of strict rules:
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.
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.
Then we build using a couple of key technologies:
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.
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!
Licence and Terms of Service