With a rare week of beautiful spring weather, San Francisco welcomed Smashingconf back in early June for the first time since 2019. Carefully biking my way through the chaos of the Warriors NBA championship parade, I soon arrived at the beautiful Fort Mason ready for a long day of design. After catching up with some former co-workers in town from Hong Kong, I settled in for a full-day workshop with Smashing founder Vitaly Friedman. The topic?

Smart Interface Design Patterns

This taxing workshop challenged our small group to put pen to paper and come up with solutions for real, and really complex, design problems Vitaly had tackled in the past. For example, how do you redesign the navigation for the European Parliament? There’s only eight menu items and a language switcher, how hard can it be?

Very hard, it turns out. In addition to needing to support every EU language, the deceptive site actually contained dozens of sub-sites not at all well prioritized within the overall structure. Thankfully, Vitaly had already done the hard part (the research) and gave us the ‘easy’ task of actually sketching out a redesigned, responsive navigation area. After some discussion on the results of card sorting and identification of which design KPIs to focus on, we got to work.

After a few more exercises, anecdotes, and brutal reviews of our sketches, Smashingconf’s first day was over—but not quite! There was still an informal meetup at a nearby restaurant with lightning talks by attendees on topics like handling Windows high-contrast mode, React optimization, and more. After some mingling and snacking, it was soon time to head home and prepare for the rest of the conference.

The next days’ talks

One workshop down, two days of talks to go! Tuesday morning, we all gathered back at Fort Mason with ample time for breakfast, chatting, and swag collection from the conference’s sponsors (shoutout to zeroheight for their unique zines and custom pins).

Scaling up Accessibility

One of my favorite talks was Kate Kalcevich’s talk on accessibility. What’s the best way to account for accessibility in the design process? The obvious answer is of course to talk and test with disabled people early and often. Particularly poignant was a video interview Kate shared, with the participant stating, "I’m inspired! Usually, people ask me what's wrong, but now you're giving me an opportunity to build something right from the beginning!"

Some concrete tips she shared to improve your next project include:

• Standardize writing user stories for accessibility as part of your sprints.
• Consider including a public accessibility statement on your website, as can be seen at Nature.com.
• When preparing mock-ups, include accessibility annotations defining things like ARIA roles and tab order (Twitter’s Figma Library is a good starting point).

It’s always easier to discover accessibility issues in a product through an internal audit, than through a lawsuit for violating the ADA. Even better, though, is to plan for accessibility right from the start. Like curb cuts, we often find accessibility features improving life for everyone, not only those with disabilities. A recent study showed that while 5% of Canadians are deaf or hard of hearing, 80% of Netflix viewers there watch with subtitles! From needing glasses to simply being distracted, a person’s level of disability can change at any time. Let’s design our products with empathy for everyone.

Designing with words

Another vital talk for us designers was Sophie Tahran’s talk on UX writing. While I’ve only rarely had to write marketing copy, I have often had to write UX copy, despite not being something I was ever trained how to do. Sophie’s talk began with the Maslow’s hierarchy of needs of UX writing. Above all else, the copy must be useful, then make sure it’s clear, consistent, and concise. Only after checking all those boxes can you consider how to spice it up with some branding.

Just like with accessibility, language is a part of the design process to be considered early and often. You can even map out the conversation a user will have with the product as part of your lo-fi designs! Other important reminders include:

• Repetition is good—build consistency to help users onboard into a new environment.
• Avoid apologizing or blaming the user in error messages—just say what went wrong and how to fix it, if possible.

And lastly, despite my love of fonts with beautiful ampersands, punctuation should be used sparingly. It often draws attention away from the actual message being conveyed—not helpful when designing for understanding in a fraction of a second.

Developer talks

As Smashingconf was a single-stream conference, I sat in on all the developer-focused talks as well. There was a lot of focus on optimization of HTML and CSS, though Robin Marx even updated us on the backbone of the web, HTTP/3, and how making sure our sites support it can give significant speed increases. Cassie Evans, meanwhile, gave a crash course in using GreenSock to guide user actions with svg animations.

The best quote of the day? Harry Roberts telling us to, “Never tell your clients what you did for them, tell them the outcome of what you did. ‘We saved you eight million dollars!’ sounds a lot better than ‘We self-hosted these files.’”

Wrapping up

Late in the day on Wednesday, Jhey Thompkins closed out the conference with a particularly fun talk, Take Your Skills to the Moon with Creative Coding. With live coding demos from his 1,000+ CodePens that worked about as often as they didn’t, this reminded me a lot of Tim Holman’s talk at Webconf.asia 2018. Jhey’s main takeaway? Don’t worry about the why or the how. Just horde your ideas and make something fun!