Links // html

A painfully obsessive cheat sheet to favicon sizes/types.

Jason Pamental proposes letting an editor choose from a prescribed number of layouts, to best represent the article content. The markup remains unchanged, with a parent class dictating stylistic changes — all very CSS Zen Garden.

Not willy-nilly-all-over-the-place different, but clear, purposeful variation that’s built into our design systems so they fit within the whole. This, coupled with a bit of per-page design flexibility afforded us by technologies like CSS Custom Properties and variable fonts, gives us the kind of layout and design flexibility that make publications like Vanity Fair so good.

A thorough dive into the implementation of accessible icon buttons.

Ah, the ol' hamburger icon:

Putting aside the UX side of the coin and whether or not an icon alone is enough to convey meaning and functionality to users, many implementations of these buttons today lack the proper accessibility that makes them meaningful to users of assistive technologies.

An empassioned plea that we take aim at favicon madness:

The ideal situation, my wish, is that we, our field, define and push for a simple standard: a favicon.svg (with browsers falling back to favicon.png and then favicon.ico) that sits at respective site root and is not required to be referenced from the markup.

An impressively thorough browser extension for analysing webpage accessibility. Wish it was available for Firefox, but worth opening Chrome for.