#417: Inclusive Design

With gender-inclusive writing, inclusive design principles, inclusive mindset workbook and empathy prompts. Issue #417 • August 8, 2023 • [View in the browser]( [Smashing Newsletter]( Kalimera Smashing Friends, 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](. [Accessibility for Designers]( “[Accessibility For Designers]( by Stéphanie Walter, coming up soon. 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. [Smashing Meets Magical UX]( Tickets are free for everyone, so [get yours now](. 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]( 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 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? [Developing a focus style for a themeable 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. [Inclusive Mindset Workbook]( 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. [Inclusive Design Principles]( 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. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. 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. [The Gender-Inclusive Language Project]( 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 for English, French, German, Hebrew, Hindi, Italian, Japanese, Polish, Portuguese, Romanian, Russian, and Spanish. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS In Information Design And Strategy [Northwestern’s Online MS In Information Design And Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more →]( --------------------------------------------------------------- 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? [Building inclusive products for trans people]( 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 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 →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [Using Friction As A Feature In Machine Learning Algorithms]( - [Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)]( - [How We Optimized Performance To Serve A Global Audience]( - [CSS And Accessibility: Inclusion Through User Choice]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](