Make things online as simple as they need to be

An important reminder from Terence Eden - we should always assume that someone might be accessing the things we make online on devices/in conditions that aren't the latest state-of-the-art.

In the middle, a young woman sits on a hard plastic chair. She is surrounded by canvas-bags containing her worldly possessions. She doesn’t look like she is in a great emotional place right now. Clutched in her hands is a games console – a PlayStation Portable. She stares at it intensely; blocking out the world with Candy Crush.

Or, at least, that’s what I thought.

Walking behind her, I glance at her console and recognise the screen she’s on. She’s connected to the complimentary WiFi and is browsing the GOV.UK pages on Housing Benefit. She’s not slicing fruit; she’s arming herself with knowledge.

The PSP’s web browser is – charitably – pathetic. It is slow, frequently runs out of memory, and can only open 3 tabs at a time.

But the GOV.UK pages are written in simple HTML. They are designed to be lightweight and will work even on rubbish browsers. They have to. This is for everyone.

Not everyone has a big monitor, or a multi-core CPU burning through the teraflops, or a broadband connection.
Terence Eden

Web development these days has definitely headed down the single page application route as opposed to the server-side route. I'm not here to bash one or the other - both have their benefits for sure, but it's definitely worth having a think whether what you are making might be used by someone in imperfect conditions like the story above.

Google fail

Take Google Maps for instance. As a developer, I know it's a highly complex app that needs the power of JavaScript to function well for most users. But if you disable JavaScript, you see an emoji of sherlock holmes and the words "When you have eliminated the JavaScript, whatever remains must be an empty page."

Clearly, they are making a joke, but this makes me sad. ☹️

Most people would never see this, but it would be nice if they had even given the simplest of functionality like a single search box which loaded a map tile image. This is called graceful degradation.

This isn't new - the BBC were doing this 8 years ago - millennia in internet terms.

You check whether someone has something enabled, and then layer on functionality from a base level experience.

Consider context

If you are making something that's only ever going to be used in a certain context - a highly complex stock trading web app say, then you might be OK. But I suspect most people aren't making that, and most things on the web should be simpler by nature.

Some might say that everyone might have JavaScript enabled, whatever device they use, and they might be right.

However, the general principle applies: you can't tell where or in what situation someone might need to use your service - especially if its informational or public sector.

Do not assume users turn off CSS or JavaScript

You should not assume the reason for designing a service that works without CSS or JavaScript is because a user chooses to switch these off.
gov.uk

Things like flaky 3G, temporary network errors, browser extensions, ad blockers, CDN downtime, DNS lookup failures can all impact a service, so the smaller it is to download and easier to run the better.

Make it robust not fragile

I love web technology, and the advances we've made in recent years are wonderful in terms of what's possible. However, we need to try and think about building things robustly.

The woeful love of over-complication, layering more and more fragility and bandwidth … It needs to get in the sea.
Tom Kerwin

Making stuff is hard. Words matter, and think about what you write first and foremost before your technology choices. I know simplicity isn't always the answer, and sometimes complex things need to be complex, but would reviewing your technology choices potentially open up your product to more people?

Things to think about

• Server-generated content if you can: Are you serving content that could be easily server-generated - it would work on the most devices out there.
• Consider payload size: is downloading a 500KB JS framework essential for your web app? If you are making a simple form, could it be validated without JS?
• Layer on functionality: Could users possibly be accessing this from a poor connection? can you provide the simplest most useful thing first, and then layer on more if needed? Start with HTML, then progressively enhance using JavaScript, with a working fallback?
• Progressively enhance CSS: start simple. then use @supports for CSS to layer on advanced layouts.
• Keep JS simple: if you need JS, can you just use vanilla JS or do a lot with a vanilla JS framework that compiles down to the smallest possible size? HTMLDom.dev.
• Progressively use JS frameworks: if you need a JS framework, like React, try and progressively layer the experience so all benefit: see how Smashing Magazine did it.
• Do right by YOUR audience: Have a look at your analytics if you have it, and see what devices people are accessing your app from, and make an informed choice, considering the widest range of contexts what you are making could be used in.

There's nothing like hearing stories of real users using technology and struggling to make you realise we can do better.

Use the least complex technology needed to deliver the right level experience to as many people as possible.
Al Power