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” 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.

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 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?

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.

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.

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

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?

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 →

… 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