Pixels of the Week – October 23, 2022

Every day, I share on Twitter and LinkedIn a list of curated articles I read, resources and tools about UX Design, User Research, UI and mobile design, HTML, CSS, the web industry, some process, some inspiration, etc. This is an archive of everything I shared this week.

#Now – what I’m up to

Wednesday, I had an amazing time teaching Information Architecture and how to build re-usable components and responsive pages. Awesome group, awesome feedback. I might offer that workshop again next year, so stay tuned!

Then, I spent the end of the week at DevFest Nantes and I spoke, in French, about how and why designers can document accessibility. French version of the talk here, English here. I took some time to visit and stumbled upon this beautiful letter press post card. When I came back the Steve Seagull stickers were waiting for me. I love them!

TL;DNR the one you should not miss


A lot of interesting information to help you design better accessible toast message

Interesting article

#Form UX

 Inclusive name inputs – because not everyone is called Chad Pancreas. Imagine how angry you boss will be when you tell them that Cher or Madonna (or Beyoncé for the é) could not subscribe because you poorly coded your form?

#UX Method

The CUE framework (culture, unspoken, environment) is a method to help researcher gather feedback when doing field studies that often provide a lot of data. It helps account for interactions & inter-dependencies among space, people & artifacts



#Dark Mode

Dark mode UI design best practices. All the yes to point 7, finally someone talking about how people with astigmatism could have issues with Dark mode. Best practice: let user chose, do not force dark mode, thanks

#Research Methods

When not to use surveys as a primary research tool: a lot of beginners use surveys because they look easy and are cheap. Be careful about that, often, surveys are not the right research tool. When used poorly, they will bring false data.


None of Your Business: “if you did your best when you created a piece of work, but your perfectionism or fear of judgement or lack of confidence makes you not like it, ask yourself: who is this piece for and will it work? ”


You’re going back to the office. Your boss isn’t: Bosses are ordering people back to the office from the comfort of their own homes.

#Enterprise UX #Patterns

5 Flexible Enterprise UX Patterns: custom views, adding notes, tagging, custom fields: enterprise software and tools sometimes needs specific UI patterns to help users to their daily job

#Tech #Diversity

Big Tech employees are TikToking on the job — and their bosses don’t always like it. I like how the article highlights how important those TikTok videos can be for marginalized people in tech, to show younger girls that not only white men work in tech, to reach out and build a supportive community that shares advice


Did you know you could do that: Templating in HTML

#PWA #Mobile Web

Advanced apps patterns, a collection of common patterns for building advanced apps. (careful some of those APIs only work in Chrome for now, double check support)

Inspiration, fun experiments and great ideas


Emily Painter drew some awesome spooky Halloween accessibility illustrations

#Craft #3DPrinted

Hi, it’s Sunday, let’s build a Giant Rubber-Band Plane


Fun and strange project: everyone can draw on a giant online canvas. Pixel art lovers, it’s your time to shine

Useful tools and resources that will make your life easy


Pairing fonts together can be tricky. In case you need inspiration, here’s a place with examples of font pairing, from different sites all over the internet


A site that generates examples of accessible color combination for your inspiration. I would be careful though, even if some pass the contrast ratio test, they are still a nightmare if combined (blue/ green on red for example)

#Front End

For my VS code geek friend: TOP 30 VS Code Extensions for Frontend Developers in 2022


CSS shapes examples. You do fun things with CSS, including some pretty advances shapes. Here’s a place where you can find and copy paste some.


I gave the HTML to design figma plugin a try. I’m honestly impressed, apart from a few issues with CSS backgrounds, the rest is quite accurate. It’s a little bit scary though, making it even easier to steal other people’s designs?


A tool to create your very own custom maps from different places of the world (and imaginary worlds like Game of Thrones)


#Accessibility #Podcast

Short discussions with disabled people about the barriers they encounter on the web. Hear about web accessibility in our own words!

#Behavioral Science

Better Customer Experiences Through Behavior Science with Jen Clinehens“, a really interesting podcast, and I love the cat example



Some really nice things you can do when animating UI using Shared Element Transition API (also kudos for the prefers-reduced-motion example for accessibility)

Conferences & training

#Diversity In Tech

Shout out to DEITECH Conference, 3 days of free online Diversity, Equity, and Inclusion in Tech Conference and Career Fair, focused on increasing Black representation in Tech!