An Event Apart: Full-Featured Art Direction for the Web
At An Event Apart Chicago 2018, Mina Markham, Senior Engineer at Slack, showed us how we can take advantage of semantic HTML and modern CSS for better localisation. Here are my notes and to-dos.
- This is about building pages that are progressively enhanced, localised, and accessible/inclusive.
- Start with an MVP version that will work for everyone. Semantic HTML, a simple CSS layout using flex (for vertical centring) and floats, plus some basic typography.
- Wraps enhancements in feature queries, i.e.
@supports. (good browser support except IE 11)
- Used CSS variables (actually called custom properties) for defining colours and setting up “modular scale” typography.
- Remove float layout and introduce grid layout.
- Localisation: set lang attribute appropriately on
html element and this will not only automatically cause various layout and typographical elements to follow language conventions but also allow you to use the
:lang pseudo class as a styling hook for locale-specific styles.
- Remember that not just text strings but photos of people, typefaces and decorative elements may benefit from localisation (ref Japan).
- Accessibility: use tota11y accessibility tester.
- Don’t remove default behaviour such as the
:focus outline; since this could have accessibility implications. Instead, modify and fit better with your design.
- Slack: on some pages there’s no logical main title, just same-hierarchy-level
h2s, in which case they make the logo an
My next actions
- Try out CSS variables. These may resolve some of my current Sass bugbears in that you can reuse a variable, so I could have just one
$base-font-size rather than one for each breakpoint.
- Try out the
writing-mode CSS property
- Consider using the selector
:root in place of
html; they’re equivalent except the former has greater specificity.
- Install Feature Queries Manager which aids testing fallbacks by toggling
- Try tota11y accessibility tester.
- Mina uses opacity (e.g. .75) nicely in rgba background colours – give it a go.
- Try out
filter: grayscale(100%) and
mix-blend-mode: darken on images.
- Try the “conditionally make the logo an
- Check Mina’s website, http://mina.codes
training, roadtrips, CSS, HTML, writing-mode, feature-queries