Interaction design, user experience design, user interface design; design is a fascinating subject. A full list of categories is also available.
Every idea comes from a good place, but some well-intended features are actually bad for usability; limiting form field input is one of those things.
Knowing when to use a button or link is important, and there’s some great guidance out there. Here’s another way to work out when to use which.
Links sometimes need to look like buttons, but what about the other way round? Spoiler alert: it’s a terrible idea!
When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.
‘Alt’ text is vital for people who can’t see an image, but what about those who don’t use a screen reader but still struggle with low contrast images?
Whenever we design a non-standard but seemingly helpful behaviour, keep asking yourself if it’s the right thing to do for all users.
Just as not all disabilities are visible, accessibility goes much further than the tools people use to access digital content on a practical level.
As a designer and developer I’ve made countless mistakes, but that’s part of the reason I’m good at what I do.
Every now and again I read an article that links to multiple places, and each link is a separate word in a short phrase. I’m not a fan.
Accessible animated GIFs are rubbish. Instead of compromising our animations in order to meet WCAG, we should be checking what our users prefer.
My mum and brother counted Apple Watches amongst their Chistmas presents, and the one problem they both had was the default app view.
Design is a hugely responsible role, and one responsibility is ensuring everyone can use our websites, products, services, and applications.
Language is a powerful thing; if the metaphor we use to describe actions to our users is ‘click’ we tend to forget about all those who don’t.
I like to use invalid HTML and ARIA as a design constraint; a line I can’t step across. Sounds obvious, but in practice it’s not always that simple!
The last major version of this website was a complete behind-the-scenes rebuild. This version, on the other hand, is almost entirely visual.
Satisfying the enhanced contrast AAA WCAG rule can be limiting; luckily
prefers-contrast: moreallows us more freedom with our default themes.
I’m a fan of good typography, and something I come across a fair bit is whether sentence case or title case is better for headings.
A link to an external source opening in a new tab or window is something that appears innocuous but really isn’t as straightforward it seems.
border-bottomfor making your links a bit more visually engaging, here’s how to do it properly with
A link should look like the text around it, but with a couple of differences: maybe a bit of colour and (almost) always an underline.
Safari will soon support the WebP image format, which purports some great advantages, but is it actually better than the formats we already use?
There are a lot of things to consider when using images on the web. But why is it so complex? And how can we tackle that complexity?
Semantic HTML is great. But sometimes following the rules is tricky. Grab a cuppa and let me tell you a story about links that look like buttons.
My post on portfolio redesign got me wondering how my website has evolved. I had an enjoyable look on the WayBack Machine and took some snapshots.
Article posted 24th June 2020 in Design
There’s a thing in the web design community where we re-do our websites every couple of years. Confession time: I haven’t redesigned mine since 2014.
One of only a handful of real stand outs from the WWDC 2020 Keynote was native sleep tracking on watchOS. I’ve been waiting for this for a long time!
Article posted 8th April 2020 in Design
When a friend asked for some CSS tips for a website he works on, I noticed a design issue that actually highlights a common problem in our industry.
What is a document outline? Sounds complicated, but it’s really not – it’s just headings! Find out more about them and why they’re a good idea.
As a designer, I thrive on constraints; as a minimalist, I enjoy boiling something down to its essence. Happily, my brand now allows room for pixel art.
Since my post on refining my brand I’ve encountered a tiny issue where, with a circular crop, the underscore is too close to the edge of the circle.
I was pretty pleased with watchOS 6 when it landed last autumn, but a recent article got me thinking about what watchOS 7 might have in store.
I’ve spent more than 5 years working on an icon for my brand. It has been a lot of fun and the right solution turned out to be under my nose all along!
Apple released a new MacBook Pro last week and the keyboard has been revised, fixing almost all the issues the current/outgoing models have.
Operator Mono’s fancy italics don’t work with every colour scheme, but finding one that does has lead me to my favourite Sublime Text theme.
I’m ready to start recording for my YouTube channel and I’ve been thinking about what my coding environment looks like.
Article posted 2nd November 2019 in Design
To show/hide content you’ll probably use an arrow on the toggle to indicate that content will be revealed. Sounds simple enough, doesn’t it?
Colour contrast on my site now meets WCAG AAA, in light or dark mode. There have been compromises but, if it’s more useable, I’m happy to make them.
Article posted 23rd August 2019 in Design
Disabling a submit button can indicate that a form isn’t ready to be sent; there are various ways to design this, but should we be doing it at all?
I’m already more than a dozen releases into version 5 of my website, but I’m finally ready to ‘officially’ announce it!
I never thought I’d see the day, but I’ve fallen out of love with Dropbox. Dropbox’s genius was its simplicity, which is getting buried by questionable new features and messy branding.
I’ve been enjoying reading though Adam Silver’s articles around accessibility and inclusive design, and his take on progressive enhancement really struck a chord.
I’ve been catching up on some reading and came across this nugget in ‘The “D” in the DOM’…
Accessibility is important, so I’ve taken steps to minimise animation on my site, and even removed it completely for those who ‘prefer reduce motion’.
Face ID worked perfectly every time until the sun started coming out. Seems its achilles heel is sunglasses, but I think I might be ok with that.
Moving from an iPhone 6 to an iPhone XS has been great, and I know it has been around for a while but one of my favourite things is 3D Touch.
Dark Mode on iOS looks to be right around the corner. I’m already all-in on Dark Mode on my Mac but it’s even more compelling on the iPhone.
It’s nice to dust the cobwebs off with a UI overhaul every so often, so when macOS Mojave was released last year I couldn’t wait to try Dark Mode.
I love RSS. Having used the same RSS app for years, I decided to have a look what else was out there one stood out above the rest.
The new MacBook keyboard has certainly been a talking point. From the new layout to the Touch Bar and keys sticking; I both love and loathe it.
macOS Mojave comes with a Dark Mode feature, but how do we get our websites to do the same? Turns out there’s a handy CSS media query that does the job!
I’m a fan of small and seemingly trivial changes that make a big difference, so Safari tabs getting icons in macOS Mojave was cause for celebration.
I rebranded tempertemper last summer. Text is so important on the web that it made perfect sense to make typography one of the first things to tackle.