HomeBlog

Slimline web design is made of win

She might not look like much, but she's got it where it counts.


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.

Why go small?

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.

Webfonts

Web fonts can do wonders for the appearance of your site’s text (or can be a horrible jumble if overused). But we skipped them - users would have to download 100kb+ of font files, CSS and javascript to see the fonts. We just use your installed fonts, which vary per user. If you have Bembo or Cardo (free) installed you’ll see those. Otherwise, you see Palatino, or “serif”.

Javascript

No need, really. We don’t use jQuery, there’s no animation, and getting rid of analytics got rid of our last javascript dependency.

Commenting

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.

One external CSS file

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

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.

Google tracking

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.

Could we do more?

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).

Fat pages are the norm and they suck

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.

And the average fat web page is costing mobile users money to boot. If you are on a 500mB / month plan, that means you can look at about 250 average-sized web pages a month. The average American looks at 90 web pages A DAY. And on mobile, sometimes the page just fails to load at all because of number and weight of javascript dependencies.

What do we get?

There are many reasons for having a slim-line site that also translate into good sense for users and businesses.

Can you do better?

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.

Inspiration

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.