benjystanton

Typography

• https://css-tricks.com/accessible-font-sizing-explained/
• https://www.smashingmagazine.com/2021/04/designing-developing-fluid-type-space-scales/
• https://css-tricks.com/accessible-font-sizing-explained/
• https://www.benjystanton.co.uk/blog/how-improving-typography-can-help-us-to-meet-user-needs/
• https://www.benjystanton.co.uk/blog/accessibility-checklist/
• https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/
• https://adrianroselli.com/2019/12/responsive-type-and-zoom.html

benjystanton

Pagination components

• https://ons-design-system.netlify.app/components/pagination/
• https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination
• https://ebay.gitbook.io/mindpatterns/navigation/pagination
• https://moj-design-system.herokuapp.com/components/pagination
• https://component.gallery/components/pagination/#description
• https://www.a11ymatters.com/pattern/pagination/
• https://bbc.github.io/gel/components/load-more/

benjystanton

SVG

• https://mailchi.mp/smashingmagazine/smashing-newsletter-294-svg-generators-and-tools
• https://boxy-svg.com/

benjystanton

Auto-generated social share images

https://twitter.com/piccalilli_/status/1336592837220175872

benjystanton

CSS reading list

I'm looking for tips on updating old codebases, writing maintainable code and testing design changes. https://twitter.com/benjystanton/status/1336640300744380417

Plan

• CSS basics
• Build tools / asset pipelines (e.g. Gulp)
• Visual regression testing

benjystanton

ARIA Landmark roles and HTML5

… there are still support gaps in browsers and screen readers for exposing some landmarks. When presented with situations like this, ignoring conformance warnings, and adding a redundant role to an element, may be preferred to not exposing the correct landmark information.

Further reading

• https://www.a11yproject.com/posts/2013-01-14-aria-landmark-roles/
• https://www.scottohara.me/blog/2018/03/03/landmarks.html

benjystanton

Testing everything (or not)

• https://twitter.com/OfficeOfWilson/status/1334774453406998528
• https://sanjaypoyzer.medium.com/how-to-find-and-prioritise-your-riskiest-assumptions-4d3729c18795
• https://www.doteveryone.org.uk/project/consequence-scanning/

benjystanton

Use this pattern instead of placeholder text

<label for="form-input">
  Example form label
</label>
<input id="form-input" name="form-input" aria-describedby="form-help">
<p id="form-help">Some help text here</p>

benjystanton

Onboarding remote team members

Articles and resources

• Citizens Advice Welcome Deck
• Dragon Age Induction Board
• Dragon Age Induction Board 2
• 10 thoughts about onboarding designers in our new remote world
• How to Unfurlough: Introducing the ‘Return to Work’ Trello board
• 5 Reasons Why Spotify's Onboarding Is Better Than Yours
• [What would a great onboarding experience look like?](https://medium.com/inspect-and-adapt/what-would-a-great-onboarding-experience-look-like-d8be856

benjystanton

API user research resources

ONS

• https://developer.beta.ons.gov.uk/
• https://digitalblog.ons.gov.uk/2018/11/14/product-people-west-south-product-for-apis-whats-the-difference/
• https://digitalblog.ons.gov.uk/2018/05/24/why-we-have-produced-a-beta-version-of-a-new-ons-api/

GDS/Gov

• https://dwpdigital.blog.gov.uk/2018/04/20/how-we-designed-for-users-without-having-a-user-interface-to-test/