The unreasonable effectiveness of simple HTML


I've told this story at conferences - but due to the general situation I thought I'd retell it here.

A few years ago I was doing policy research in a housing benefits office in London. They are singularly unlovely places. The walls are brightened up with posters offering helpful services for people fleeing domestic violence. The security guards on the door are cautiously indifferent to anyone walking in. The air is filled with tense conversations between partners - drowned out by the noise of screaming kids.

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

The photographer Chase Jarvis coined the phrase "the best camera is the one that’s with you". He meant that having a crappy instamatic with you at an important moment is better than having the best camera in the world locked up in your car.

The same is true of web browsers. If you have a smart TV, it probably has a crappy browser.

Twitter's guest mode displayed on a TV.

My old car had a built-in crappy web browser.

The dashboard of a BMW i3 - there is a web browser on the central display.

Both are painful to use - but they work!

If your laptop and phone both got stolen - how easily could you conduct online life through the worst browser you have? If you have to file an insurance claim online - will you get sent a simple HTML form to fill in, or a DOCX which won't render?

What vital information or services are forbidden to you due to being trapped in PDFs or horrendously complicated web sites?

Are you developing public services? Or a system that people might access when they're in desperate need of help? Plain HTML works. A small bit of simple CSS will make look decent. JavaScript is probably unnecessary - but can be used to progressively enhance stuff. Add alt text to images so people paying per MB can understand what the images are for (and, you know, accessibility).

Go sit in an uncomfortable chair, in an uncomfortable location, and stare at an uncomfortably small screen with an uncomfortably outdated web browser. How easy is it to use the websites you've created?

I chatted briefly to the young woman afterwards. She'd been kicked out by her parents and her friends had given her the bus fare to the housing benefits office. She had nothing but praise for how helpful the staff had been. I asked about the PSP - a hand-me-down from an older brother - and the web browser. Her reply was "It's shit. But it worked."

I think that's all we can strive for.


Here are some stats on games consoles visiting GOV.UK


Share this post on…

52 thoughts on “The unreasonable effectiveness of simple HTML”

    1. says:

      I think the solution is to reinstate HTTP as a first-class Web technology for informational sites.

      Reply
    2. Andie says:

      You can use Opera Mini, which is still supported even on J2ME devices.

      Reply
    3. Dan says:

      Ugh I know one of my clients is using Nokia Series 60 phones to collect data and all certs are passed their validation date for the latest version of J2ME that is running on the phone.

      Reply
  1. says:

    "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." 💯👏➕

    Reply
  2. Daniel Boone says:

    I think the shittiest browser I own is on a paperwhite Kindle. It’s pretty shitty. But I may well have worse, hidden in devices where I’ve never had reason to look.

    Reply
    1. wizzwizz4 says:

      The Swindle Paperwhite's browser is actually not that bad. It can do Cloudflare and hCaptcha… most of the time. (Sometimes it hangs.) I'd say it has approximate feature parity with IE11 (except for not being IE, of course).

      Reply
  3. says:

    @Edent This one hit close to home: I spent my teenage years slowly scouring the web using my PSP, and yeah, you can forget about anything javascript heavy...Also, nowadays the PSP is near unusable: it's got ancient TLS that isn't supported anywhere anymore

    Reply
  4. Kevin Thorpe says:

    I have poor eyesight, and it only gets worse with age. I also have some old monitors on my desk. I keep hassling the guys at work because I simply can’t use some of the stuff they’re building. No good it being pretty if it’s unusable.

    And things like angular single page apps are awful. Things simply don’t render or don’t work when you click sometimes and you have zero idea why.

    If I can’t use it on links (text mode browser) then as far as I’m concerned it’s broken. I know this is extreme but that’s what the web was for.

    Reply
  5. This is so important. Keeping things simple isn't about dogma or making it hard or boring for devs, or unwhizzy to frustrate senior folks, it's to make sure stuff works for most people in even the toughest circumstances.

    Reply
  6. What a fantastic usability test!

    "Go sit in an uncomfortable chair, in an uncomfortable location, and stare at an uncomfortably small screen with an uncomfortably outdated web browser. How easy is it to use the websites you’ve created?"

    Reply
  7. GOV.UK is so well designed and simple, relying mostly on HTML and CSS (in the best sense of the word) that it even works on my ancient Kindle 5 (no keyboard, no touchscreen, no bluetooth or backlight)


    Reply
  8. says:

    Whenever I build a new website I skate make sure it’s at least basically navigable in lynx and w3m. I should dig out my old PSP as well.

    The TLS issue many people have noted is why I also don’t force my sites to https except for logging in and anything where privacy matters. Not everything needs to be secure, especially things that need to be accessible.

    Reply
  9. @cadadr @Edent agreed. Current web trends favor those and only those who chase web trends that are themselves solving self-inflicted developer problems and the pressures of surveillance capitalism on computation

    Reply
  10. says:

    I noticed in the photo of the (2015) car browser you show HTML mobile.twitter.com. Unfortunately twitter disabled this completely in 2021. The only way to get HTML twitter content is to use a third party application which calls the twitter API and then generates the HTML itself (like nitter.com).

    Reply
    1. Brian M says:

      100% yes - Some developers really need banning from the profession - Saw a fairly large website who's developers/marketing department thought it was a great idea to have white text on a light grey background, guess they thought it looked cool. Of course such horrors can be done just as easily with good old HTML or the shiniest and newest framework/CSS!

      Reply
  11. The unreasonable effectiveness of "unreasonable effectiveness" essays 😀

    Though I quite agree with this one, and would say it's not just for public services - it's for anything that is more "document" than "application", which is actually a lot of the web.

    Reply
  12. I even heard someone say that HTML isn't a proper language a while back. We need more vocal advocates for why it was, and still is an important language. In other news, this search engine rocks for looking back at old HTML websites - https://wiby.me/

    Reply
  13. Ted says:

    My worst web browser is an old tablet running iOS 9. It's new enough that everybody tries to serve up modern pages, but old enough that they don't work.

    Reply
  14. says:

    This is an important anecdote: shkspr.mobi/blog/2021/01/t…

    It's never about building the flashiest thing, it's about making sure that your thing is usable. Accessible to everyone. If you're making user-facing services, you should basically be testing them on, like, a Wii.

    Reply
  15. says:

    Before 2016, I had no smartphone, so my only way to browse the web and share stuff on Twitter on the go was to use the Nintendo 3DS browser on Wi-Fi hotspots.

    Reply
  16. Sergei Gribovskii says:

    That is all true if only I care about people with the old tech. But if they are not even close to my potential clients I won't bother making my service ugly just because some guy with a 15 years old phone can not use it. If they can't use it but what they will have to update to a new device/OS.

    Reply
    1. So? Who said you needed to make your service ugly to make it accessible? Esthetic pleasure and usability are not inherently at odds. I personally choose to have an ugly website but it is because of my own esthetic preferences. You should find trying to get to data on it an unremarkable and inoffensive experience, on everything from lynx on a Pentium Pro with 192MB of whatever RAM they used to use back then and a slow ATA disk to Chrome on your 64-core Threadripper box with 128GB of fast DDR4 and 3-way NVM Express SSD RAID.

      Reply
  17. says:

    이걸 잘 따른 예시가 영국 정부 사이트. 간단한 HTML만으로 쓰여있어서 거의 모든 브라우저에서 작동한다. 심지어는 스마트 TV나 자동차 네비게이션의 웹 브라우저에서도 잘 확인할 수 있다고.
    gov.uk
    shkspr.mobi/blog/2021/01/t…

    Reply
  18. says:

    Thank you for writing this it brought me to tears it’s very good to remember these things

    Reply

Trackbacks and Pingbacks


  1. Inspirational Website of the Week: Aurélia Durand
    We just love how unique this design is and how much personality it has. An explosion of colors and creativity.
    Get inspired


    Our Sponsor
    Become a Software Engineer, job guaranteed.
    Ready to master software engineering or switch to a career as a software engineer? Gain the skills you need with Springboard’s Software Engineering Bootcamp.
    Learn More


    The styled-components happy path
    An article where Josh W Comeau shares his personal “best practices” when it comes to styled-components.
    Read it


    Houdini Paint Dojo
    A small project with 0 external dependencies to explore the emerging CSS Houdini Paint API. Check out the GitHub repo. By Georgi Nikolov.
    Check it out


    Luis Henrique Bizarro’s portfolio
    The repository of Luis Henrique Bizarro’s portfolio made entirely with plain JavaScript code using ECMAScript 2015+ features without any frameworks.
    Check it out


    Form Validation: You want :not(:focus):invalid, not :invalid
    Learn how you can perform validation only when a field is not being edited anymore.
    Read it


    How We Improved SmashingMag Performance
    In this article, you’ll learn about the changes made on Smashing Magazine — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics.
    Read it


    The importance of @font-face source order when used with preload
    A small change in the ordering of your font sources in the @font-face rule can have a big impact on data and web performance. An article by Matt Hobbs.
    Read it


    Snowflake Generator
    An interactive WebGL snowflake generator made by Vivian Wu.
    Check it out


    Building a sidenav component
    A foundational overview of how to build a responsive slide out sidenav. By Adam Argyle.
    Read it


    Cell fracture
    Paul Henschel plays with blender and cell fracture.
    Check it out


    The unreasonable effectiveness of simple HTML
    Terence Eden urges to ask the important question “how easy is it to use the websites you’ve created?”
    Read it


    Enabling Popups
    An idea to extend the web platform with popups by the Microsoft Edge team.
    Check it out


    The Minimum Content Size In CSS Grid
    Ahmad Shadeed walks us through an issue he faced that is related to the minimum content size in CSS grid.
    Read it


    Webcam x Dices
    A great dice effect made by Louis Hoebregts.
    Check it out


    HTML and CSS still isn’t about painting with code
    Christian Heilmann shares his experience in explaining what HTML and CSS is about.
    Read it


    Add scroll margin to all elements which can be targeted
    A quick tip on how to add an extra bit of space to targeted elements.
    Read it


    How to design highly performant animations and micro-interactions
    In this post, you can learn how to design highly performant animations and micro-interactions to improve the UX of your site.
    Read it


    Wldlght
    Follow an amazing journey in Japan with this projection mapping project, Wldlght.
    Check it out


    How to avoid layout shifts caused by web fonts
    Late-loading web fonts can be a main cause of layout shifts. Simon Hearne shows how to optimize them.
    Read it


    Building an Audio Player With React Hooks
    Discover how to build an audio player using React and the HTMLAudioElement interface.
    Read it


    Re-Creating the Porky Pig Animation from Looney Tunes in CSS
    Learn how to make Porky Pig come out of those red rings. By Kilian Valkhof.
    Read it


    Thinking outside the box model for GUI design
    From a while back: This article investigates why and how the box model in GUIs limits users, UI/UX designers, and developers – and how we can do better to improve usability.
    Read it


    Formality
    A designless, multistep, conversational, secure, all-in-one WordPress forms plugin.
    Check it out


    From Our Blog
    Awesome Demos Roundup #19
    A large collection of fantastic web experiments and demos that were made in the past couple of weeks.
    Check it out


    From Our Blog
    Recreating Frontier Development Lab’s Sun in Three.js
    Learn how to create a 3D sun with Three.js in this coding session.
    Check it out


    From Our Blog
    Twisted Colorful Spheres with Three.js
    Learn how to deform and color spheres to create an interesting animation with Three.js.
    Check it out


    From Our Blog
    Inspirational Websites Roundup #22
    A collection of fresh websites with brilliant designs to get you updated on the current trends.
    Check it out

    The post Collective #646 appeared first on Codrops.

  2. […] The unreasonable effectiveness of simple HTML — “Are you developing public services? Or a system that people might access when they’re in desperate need of help? Plain HTML works. A small bit of simple CSS will make look decent. JavaScript is probably unnecessary – but can be used to progressively enhance stuff. Add alt text to images so people paying per MB can understand what the images are for (and, you know, accessibility).” […]

  3. Great piece from Terence Eden on the importance of simple HTML.

    If your laptop and phone both got stolen – how easily could you conduct online life through the worst browser you have? If you have to file an insurance claim online – will you get sent a simple HTML form to fill in, or a DOCX which won’t render?What vital information or services are forbidden to you due to being trapped in PDFs or horrendously complicated web sites?Are you developing public services? Or a system that people might access when they’re in desperate need of help? Plain HTML works.

    You may or may not have noticed that I changed the design of this site last night after 4 years of having the old one. I used to strive for aesthetically pleasing themes until I realised just how much data they used and how slow they were (thanks Lighthouse). There are probably “cleaner” themes than this one and it’s still a work in progress but HTML and readability will always be my priority.If your site relies on JavaScript over HTML, it’ll be blank if it breaks. HTML can be “broken” and still work. Think about that before you put your faith in a million and one JavaScript libraries for a 5-page site.See also: Tatiana Mac on Hacking Digital Style Guides for AccessibilityRelated

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">