August 8, 2023 Smashing Newsletter: Issue #417
This newsletter issue was sent out to 209,504 subscribers on Tuesday, August 8, 2023.
Editorial
Accessibility is not just ticking off checkboxes. It’s a part of respectful, inclusive design — and in this newsletter, we look into some useful guidelines and pointers around just that. With more gender-inclusive writing and inclusive products for trans folks, along with the inclusive mindset principles and workbook. We hope you’ll find them useful.
In the Smashing department, we are taking a bit of rest these weeks while getting ready for new adventures later this year:
- Smashing Hour with Asim Hussain on sustainable UX,
- SmashingConf Design & UX (October 9–12 in Antwerp, Belgium 🍫), our shiny new conference all around design and UX,
- Our friend Marc Thiele’s wonderful conference in Berlin beyond tellerrand on design and creativity (Sep 11–12)
- ...and many more friendly and practical online workshops.
Also, do join us next month, September 14, from 8–11am PT / 5–8pm CET 🌍, where we’ll be talking to three amazing speakers about Magical UX and how that impacts your work — now and in the future.
Until then, let’s make the web more inclusive, everyone!
— Vitaly
1. Empathy Prompts
Unplug your mouse and navigate your computer using only the keyboard. Throttle your network connection. Run your documents through a translator. Prompts like these can help build empathy with users who experience the web — and your product — differently than you might. The prompts are part of Empathy Prompts, a project by Eric W. Bailey, created to help us overcome bias when creating digital products.
Empathy Prompts is a collection of prompts that give you a better idea of how different your users’ needs are. As Eric points out, the prompts aren’t intended to describe any one person’s experience or tokenize their experience but rather to help build empathy. Aimed at everyone involved in a project — from designers and developers to project managers and stakeholders — the prompts offer a simple yet effective way to raise awareness for accessibility and inclusive design. (cm)
2. Accessible Focus Styles
Usually used on links or form elements, focus styles help users identify interactive elements. Relying on default browser focus styles isn’t the best option for every project, though. Depending on your brand’s color palette, you might run the risk of the default styles blending in with your design, causing contrast and accessibility issues. So how to create a set of focus styles tailored to your design system?
In his case study “Developing a focus style for a themeable design system,” Scott Weber shares insights into how the team at Ad Hoc created a better focus experience. He takes you through the process step by step, from comparing various techniques for applying a focus style to selecting a color approach and setting up theming. After exploring 18 different techniques and 19 different color options, the result is a set of focus styles that can easily be customized and meets current and potential WCAG guidelines. (cm)
3. Inclusive Mindset Workbook
How might we create an inclusive mindset to be mindful in our design decisions and consider inclusion? That’s the question that the Inclusive Mindset Workbook by Project Lima attempts to answer. In three steps, it helps you make inclusive design your practice.
To set the base, the workbook takes a closer look at the power that designers have when it comes to inclusive design and why inclusive design matters in the first place. It then explores how to build an inclusive mindset. You’ll learn to recognize exclusion, reflect upon it, and create inclusive solutions. The practical tips, activities, and exercises for reflection included in the workbook stretch your imagination of what’s possible and help you make inclusive design a natural part of your design workflow. (cm)
4. Inclusive Design Principles
Let’s be honest, designing with everyone’s needs in mind can seem daunting at first. But it doesn’t have to be. The Inclusive Design Principles, an initiative by Henny Swan, Ian Pouncey, Heydon Pickering, and Léonie Watson, has got your back, whether you’re taking your first steps in inclusive design or want to brush up your skills.
The Inclusive Design Principles is a set of seven principles for designing for the needs of people with permanent, temporary, situational, or changing disabilities. Each principle is presented with a short description and includes examples of how it can be applied to an actual design to create a more inclusive experience and benefit everyone. A great overview, not only for designers, UX professionals, and developers but everyone involved in creating websites and applications. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Advanced JavaScript Masterclass Dev
with Christophe Porteneuve. Aug 16–30 - Interface Design Patterns UX Training UX
with Vitaly Friedman. Sep 8 – Oct 6 - Accessible Components from Design to Development Dev
with Carie Fisher. Sep 14–22 - Typography Masterclass UX
with Elliot Jay Stocks. Oct 16–30 - Strategizing Products and Customer Experiences (SPACE) UX
with Debbie Levitt. Oct 18–26 - Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
6. Gender-Inclusive Language Project
Language shapes reality. That’s the credo of The Gender-Inclusive Language Project, an international group of content designers on a mission to better represent all people in the apps, products, and experiences we design.
To help you ensure that all people feel welcome and acknowledged in your products and experiences, the project published an international guide to gender-inclusive writing with tips, do’s, and don’ts. Also, part of the project is a series of twelve videos. In each of them, a speaker talks about the complexity of gendered language for their primary language, showing content design solutions that can be used in style guides, forms, messaging, and other types of digital communication. The videos are available in English, French, German, Hebrew, Hindi, Italian, Japanese, Polish, Portuguese, Romanian, Russian, and Spanish. (cm)
7. Inclusive Products For Trans People
Representation matters. As Chiara Angori points out in her post “Building inclusive products for trans people,” constantly underrepresenting or misinterpreting certain groups or ideas can lead to a limited understanding of them, which, in effect, can lead to discrimination, prejudice, and even violence. Design is an effective means to shape inclusion and create a safer environment for trans people. So how can we achieve that?
In her post, Chiara shares examples of design decisions that make a difference. It might be the questions asked in a form (and how they are asked), the choice of colors and graphics, or little tweaks such as making push notifications more discrete. Lots of eye-opening insights are guaranteed to build trust and help the LGBTQI+ community feel safer online while also promoting a more diverse workforce in tech. (cm)
8. News From The Smashing Library 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Image Optimization by Addy Osmani
- Check out all books →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁
You can always unsubscribe with just one click.
Previous Issues
- UX Kits, Tools & Methods
- How To Measure UX
- New In Front-End
- Web Accessibility
- Motion And Animation
- Enterprise UX
- Design Systems
- New In Front End
- Useful Inspiration For Designers
- It’s Figma time!
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.