1 Thing A Week 1 Thing
A Week

Web Interface Guidelines

Week 279.0 — 27th February '23

I'm always on the lookout for some advice on how I can make iterative improvements to my various projects and this week I stumbled across the Web Interface Guidelines by Rauno Freiberg. A solid list of details that all add up to make good interfaces for the web.

Broken down into neat sections, you can find advice on the following aspects of front-end interfaces:

  1. Interactivity
  2. Typography
  3. Motion
  4. Touch
  5. Optimizations
  6. Accessbility
  7. Design

There's a lot of common sense sprinkled throughout, but HTML started off without a lot of the elements and attributes we have now. Right now, Can I Use... shows fantastic support for something like the "required" attribute (> 98%) and yet I wasn't sure until I checked that it was the case. I'm just so conditioned to the "IE6 doesn't support it" state of mind.

It's a small thing, but being able to offload this type of interaction to the browser makes so much sense on the web today. It breeds consistency and predictability for when mistakes are made.

One that stuck out to me, that isn't already handled by the browser was around form submissions:

  • Buttons should be disabled after submission to avoid duplicate network requests

I know the mechanics are unlikely to be simple and maybe it's too reliant on client-side code (it can be achieved already through JavaScript), but I do wish something like this was supported by browsers. I don't think I've written any code to work this way in over a decade because the internet is generally so fast that it's not an issue but as I generally try to make things fast and lightweight, I shouldn't put usability and accessibility aside for situations where a form submission might not complete instantly.

Good Gear Club will probably be improved first thanks to these tips. Sitejoy is overdue some content and a bit of attention so will be second in line.

If I'm honest with myself, I know that 1 Thing A Week has been neglected a little over the past few years from a HTML and CSS point of view. I have some non-radical ideas, but nothing I've had the time to get stuck into. I hope to get to them by the end of the year and get them all implemented.

More from 1 Thing A Week
« Update 4 for SkeletonCSS 4 Comedies worth watching twice Getting started with Apple's Freeform app »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 279.1 – Monday
    1. Curb lighting toxel.com
    2. Relief from ultra-bright headlights is coming — but slowly axios.com
  2. 279.2 – Tuesday
    1. Woo Toys gessato.com
  3. 279.4 – Thursday
    1. New Ukrainian Postage Stamp Features Banksy Art and Says “FCK PTN” kottke.org

Jump to notable items for Week #278, Week #280 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit