Pixels of the Week – June 23, 2019 by Stéphanie Walter

This content is 5 years old. Remember that the following content might be outdated.

Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…

This week’s selection: accessibility and typography, signs of low UX maturity, some inspirational UX cards, responsive menus, form required fields, mobile prototyping tool, CSS tables, a satire of the <toast> new HTML element, UI frameworks and user experience, the state of CSS 2019, mobile UX and illustrations, cognitive biases, conducting usability testing, etc.

You can follow me on twitter to get a dose of links every days.

I gave some talks

#UX #UI #Frameworks

Pretty, but not Usable – the slides and video of my talk at @cssdayconf I share my experience and process, some design/dev relations tips to help people build a user centric product while working with a UI framework.

#UX #Journeymap

The slides of our UX in Lux workshop on User Journey Maps are also online.

TL;DNR the one you should not miss

#Accessibility

5 Keys to Accessible Web Typography:

base font size in relative units
colour & contrast
legible fonts with “Milimeter” test (I also use the a1iIlL0o test)
paragraphs shapes, line length and line height
semantics & heading levels for hierarchy

Interesting article

#UX

Envisioning future user journeys: Tarot Cards as a design tool Interesting tool and quite lovely cards
5 Signs of Low UX Maturity: 1. you need to explain visual vs interaction design, 2. usability testing is done late and on only working designs, 3.no field studies, 4. UX Designer are not invited to product meetings and 5. just 1 or 2 people are responsible for UXD
Conducting a usability test is not something easy, here are 5 principles for more accurate user testing
Should you mark the required fields in a form? If most fields in the form are required, should we still mark them? According to Nielsen, the short answer is yes.
A list of 84 cognitive biases explained and how sites and app are using them in their design. I’m not saying you should use them, but it’s interesting to be aware of those.

#Responsive #Menu

“Using Hamburger Menus? Try Sausage Links (scrolling navigation).” Interesting concept, one of the issues for me is the uncontrolled “overflow cutting”. A French newspaper implemented this and on my mobile, Culture got cut into “Cul” (French for “Ass”)

#HTML #Specs

“Introducing the new HTML element – welcome <clippy>!” a satirical look at the current state of web “standards” development and Google introducing the <toast> element.

#Illustration

6 Ways Digital Illustration Improves User Experience for Web and Mobile

#Design #Collaboration

Brad Frost and Dan Mall: Rethinking designer-developer collaboration: an interesting 50+ min podcast on design systems, agile, etc.

Inspiration, fun demos and Great ideas

#HTML #Brutalism

This page is a truly naked, brutalist html quine, a fun idea to bring back the world weird web

News in the industry

#Layout #API

The Layout Instability API – Detect unexpected layout shifts in JavaScript. We that for instagram, you open it, want to like a picture, the layout shifts and you end up liking a complete other picture. NEIN.

#CSS

State of CSS, 2019 edition, the results!! (Also, I LOVE this shirt )

Useful tools and plugins that will make your life easy

#Accessibility

A11Y with Lindsey: this is a cool blog with a lot of ressources and articles on accessibility

#Prototype

Origami Studio, a tool to create interactive prototypes for mobile apps without the need to code. You can test them directly on Android and iOS

#Tables

34 CSS Tables, An interesting list of HTML and CSS tables with code and examples, from responsive tables to pricing, periodic tables, etc.

#Viewport

Tornis is a minimal JavaScript library that watches the state of your browser’s viewport, allowing you to respond whenever something changes.

Pixels of the Week – June 23, 2019