This is a basic looking webpage, isn’t it? No images, simple typography, no layout to speak of, and no animations or interactivity or other stuff that you expect from a 2016 webpage. But those design features are data intensive. The modern average web page is 2.1MB (bigger than a floppy disk!). Whereas our pages are only 5 to 10kilobytes (kB) - 1/300th of the average page size. By avoiding modern design tropes, we gain other invisible benefits.
It takes power to move data. To keep to our goal of a low-carbon event, it made sense to make a low-data website. The more power you use, the more greenhouse gases from burning fossil fuels (most places, anyway). How much power exactly is for another post. And if you hop down the page, you'll see that slim-line sites come with a number of important other benefits that help the user experience and the bottom line.
Here are some of the design choices we made in pursuit of a low-data site.
Disqus commenting or other plug-in comment systems add 300kb+ to a page. No thanks. Want to make a comment? Send us an email to SustainableUX AT gmail DOT com, or a tweet.
To start the site had inline CSS. But we took it out to keep the site DRY, and so that the CSS will cache between pages and between visits. So now we have 1 extra HTTP request. Thats 196% fewer requests than the average. And our one request is 2kb - the average HTTP request is 56kb.
Images make up the bulk of the average page by kilobyte. To take leanness to its logical (and possibly ridiculous) conclusion, the few images we do have are in ascii, which seems to add negligible weight to the page.
We added Google Analytics. This added another 27kB to the page on first load, and subsequent page-loads get a 0.05kB invisible gif served from Google. Then we took it out again. We'd rather have a really fast site than vanity metrics.
Yes, we could minify the HTML and CSS. That would save about 30% file size, but make the code unreadable on view source. We decided not to bother (yet).
The average web page is over 2MB in size. All in service of common web design tropes like carousels, animation, share buttons, and web fonts. And ad trackers and sleazy 3rd party content blobs. The result is a web that is getting fatter and getting slower.
There are many reasons for having a slim-line site that also translate into good sense for users and businesses.
You (yes you) could make a much more attractive webpage out of 5kB, by using a judicious amount of CSS. This one isn’t basic-looking because it is 5kb, it looks crap because we were in a rush.
Just the Words: Justin Jackson’s elegantly written 6kB reminder that sometimes all you need are the words and nothing else.
Death to Bullshit: An all-text, low-design effort, from Brad Frost - with a surprise.