Tag Archives: ux

Reducing motion with the <picture> element

Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img src="animated.gif alt="brick wall" /> </picture> Yes, that actually works! Reducing motion with the <picture> element → 💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Custom …

Continue reading “Reducing motion with the <picture> element”

Read Post →

Beyond the interface – The Sameness of Apps and Websites

Friend Thomas Byttebier – Digital Director at Base Design – has written a very insightful post on the sameness of apps, websites, subway maps, and coffee shops. Why do all apps look the same nowadays? Why do all websites look the same? What can brands do to create more memorable digital experiences? And also: how …

Continue reading “Beyond the interface – The Sameness of Apps and Websites”

Read Post →

Mozilla Hacks: Designing the Flexbox Inspector

With the upcoming release of Firefox 65 (due January 29tgh), its DevTools will sport a new shiny Flexbox Inspector. The new Flexbox Inspector, created by Firefox DevTools, helps developers understand the sizing, positioning, and nesting of Flexbox elements. Victoria Wang details how they UX challenges that came with this tool were tackled. Built on the …

Continue reading “Mozilla Hacks: Designing the Flexbox Inspector”

Read Post →

How Apple can fix 3D Touch

Eliz Kılıç writes down something that’s been bothering me too: Apple introduced 3D Touch and its new related interactions Peek and Pop in 2014. It’s been almost 4 years since its first introduction, yet people don’t know/use 3D Touch. Why would they? Even tech-savvy users don’t know which buttons offer 3D touch. Let alone regular …

Continue reading “How Apple can fix 3D Touch”

Read Post →

How to reposition multiple iOS apps at the same time

TIL: You can move multiple iOS apps at the same time. Tap and hold to start wiggling one, move it a little, then tap other apps to add ‘m to the stack you’re moving. Did this help you out? Like what you see?Consider donating. I don’t run ads on my blog nor do I do …

Continue reading “How to reposition multiple iOS apps at the same time”

Read Post →

Dribble Inspired Todo Empty State Transition implemented in React Native

Ooh this is nice. Uses a simple Animated.Value which is animated from 0 to 1. Said value is only defined once – in a wrapping component – and is passed on to the various children as a prop. react-native-todo-empty-state-transition →

Read Post →

Removing that ugly :focus ring (and keeping it too)

Update 2021-01-28: Nowadays we can use :focus-visible for this; No JavaScript needed! David Gilbertson: You click a button and see a blue border telling you that you’ve clicked on something that you know perfectly well you’ve just clicked on — because you just clicked on it. So it’s clear: the outline must go. But hold on a …

Continue reading “Removing that ugly :focus ring (and keeping it too)”

Read Post →