🔥 Design tip: put labels above the input

✅ Works well for long and short labels
✅ Causes fewer eye fixations
✅ Works consistently across screen sizes
✅ Easily accommodates hint text and errors t.co/DwhK2x8wZ3

Sites like Netflix put movies into rows of categories which can be horizontally scrolled into view.

This pattern is accessible, responsive and consistent across screen sizes.

That’s a lot of pros for a pattern that in reality has some critical downsides.

Let’s break it down 👇 t.co/eVUJyyIdvm

So peeps are going a bit mad for @stripe’s redesign.

It *looks* nice but that’s pretty much where it ends.

Thread 👇 t.co/Qdczqu2xJK

Spreadsheets are awesome because they’re infinitely flexible.

Spreadsheets are shit because they’re infinitely flexible.

Should you use one input or multiple inputs for one field?

✅The problem with multiple inputs

✅When multiple inputs are the way to go anyway

✅Why automatically focussing the next field with JS isn’t great

✅Why input masks aren’t great

adamsilver.io/articles/form-desi…

Build better products faster through by making decisions. No need for stand ups…

andyjohns.co/why-standups-are-us…

In 10+ years I’ve not seen 1 SPA that loads faster than server rendered UIs.

It’s because loading up a whole bunch of JavaScript to make AJAX calls—which aren’t chunked—is slower than just letting browsers do what they do best—i.e. navigating, parsing, rendering HTML. twitter.com/ryanflorence/status/…

When designing a thing I usually think how can I make this work:

– with semantic html without JS
– responsively (small screen first)
– for screen readers users
– for keyboard users

If I manage to do this, I’m usually onto a winner.

🆕 I just published “Form design: handling optional fields”

Big thanks to @mrstevenproctor and @Amy_Hupe for their help. 👈

adamsilver.io/articles/form-desi…