Hej Smashing Friends,

Everyone on the team is a designer. DevOps engineers, front-end developers, interface designers, marketing department and customer support. Independent of a specific role we take over in a company, we all contribute to the overall experience that our customers will have when using our products or services.

This reflects in everything — from information architecture to error messages and the shape of buttons to accessible tab order of our forms. In this newsletter, we want to highlight some of the UX considerations that are useful for anybody on the team — from interface designers to back-end engineers.

In the Smashing Family news, just last week, after 2 years in making, we’ve announced a brand new book by Addy Osmani on image optimization (get a preview and free PDF sample).

In fact, we have a few wonderful Smashing books — printed and digital — that you might find interesting, from better UX and form design to TypeScript. Thank you for your kind support, everyone. 🥁

Happy reading and UXing!
— Vitaly (@smashingmag)

---

1. Why Click/Tap Menus Are The Better Alternative

Can I click the parent element? Will the parent element be a link to the same page as the first submenu link? When it comes to hover menus, there’s no standard answer to these questions. Not to mention accessibility issues for keyboard users. To prevent all of this from happening, Mark Root-Wiley stopped building hover menus entirely and suggests using an unambiguous alternative instead: click/tap menus.

In his article on CSS Tricks, Mark dives deeper into such menus and the benefits they bring along for usability, accessibility, and content strategy. One major benefit: Contrary to hover menus, click menus don’t accidentally disappear when people bump their cursors.

Obviously, hover menus won’t work on mobile anyway, so we’ll need a click/tap menu option at least as a fallback. So we could just keep the interaction the same for mobile and desktop menus, as JavaScript also stays the same, no matter if your menu is hidden behind a hamburger icon or visible on mobile. Do we need hover menus in 2021? Unlikely. Arguments that make it worth to reconsider our approach to menus. (cm)

---

2. <input type="number"> Pitfalls And How To Do Better

On mobile, large buttons are easier to choose than typing, and typing might be still better than a <select>-dropdowns or complex birthday picker widgets. But what do we use in HTML for this kind of input? <input type="number"> can bring along quite some usability problems, as the Design System team at GOV.UK found out.

The problems concern assistive technologies and, as it turns out, there’s also a more structural issue linked to it: per definition, <input type="number> can only be used for incremental numbers, such as dates or the number of people in a household. Other numbers can cause problems with browser validation, for example when browsers attempt to round large numbers or convert them to exponential notation.

How to do better? As the GOV.UK team advises to use inputmode="numeric" pattern="[0-9]*" that allows for a degree of separation between how the user enters data, what the browser expects the user to input, and how it tries to validate it. Need more tips on forms UX? Adam Silver has got your back. Good to know! (cm)

---

From our sponsor

Build More Inclusive And Accessible Websites With Axe DevTools Pro

Front-end accessibility testing is easy with Deque’s axe DevTools browser extension. Find and fix accessibility issues with very little effort or expertise required. Plus, improve user experience and prevent regressions by fixing bugs while you code. Get started with axe DevTools Pro for free today!

---

3. Design Prompts To Improve Your UI Skills

The best way to get better at something, has always been and still is practice. It’s not any different when it comes to designing good user interfaces. Based on the idea that you’ll get a better UI designer by, well, creating lots of interfaces, UI Coach generates UI design challenges to tinker with.

A note-taking platform where everyone can take notes and share them with others, a language translation app that translates spoken words in real-time, or a graphical restaurant reservation app that allows you to choose your desired table — these are just a few of the design prompts that UI Coach generates for you. Each prompt comes with a color palette, font pairing, and illustrations library so that you can focus on what really matters: the interface. And once you’ve implemented the challenge with your preferred tools, you can post it on the anonymous feedback platform to receive feedback from the community. A great way to take your UI design skills to the next level. (cm)

---

4. Tools To Build Better Digital Experiences

The right tools at the right time, help streamline the design process. To give you a better overview of which tools could enhance your UX design projects, Jordan Bowman and Taylor Palmer curate the site UX Tools.

Their design tools database features tools for everything from UI design and prototyping, to user flow and handoff, design systems and versioning. Each tool is rated by usage and user rating (the data is taken from the 2020 Design Tools Survey which Jordan and Taylor conducted among 4,000 designers) and comes with detailed information on platform support, cost, and features. On the site, you’ll also find practical UX challenges to train yourself in crucial UX skills. A great resource to build better digital experiences. (cm)

---

5. Upcoming Smashing Online Workshops

Web performance is pretty much at the heart of the online workshops that we run — be it around accessibility, design or front-end. The interface has to load and respond quickly, and that affects all facets of users experience.

As the next workshops, we have coming up:

• The React Performance Masterclass Dev
  with Ivan Akulov. May 20 – June 4.
• Dynamic CSS Masterclass Dev
  with Lea Verou. May 25 – June 8.
• New Adventures In Front-End 2021 Dev
  with Vitaly Friedman. June 9–23.
• Successful Design Systems Dev
  with Brad Frost. June 29 – July 13.
• Level-Up With Modern CSS Dev
  with Stephanie Eckles. July 8–22.
• Designing Websites That Convert UX
  with Paul Boag. July 22–30.
• The TypeScript Masterclass Dev
  with Stefan Baumgartner. August 5–19.

---

6. Election Charts Compared

Visualizing complex data in a user-friendly and engaging way is certainly one of the most challenging aspects of UX design. But it’s also one that offers a lot of room for creative ideas and solutions that think outside the box.

Alan McConchie from the cartography and data visualization studio Stamen analyzed the data visualizations for an event that brought forth a lot of different variations: the 2020 US elections. But what actually worked and what didn’t? In his article, Alan dissects his team’s favorite charts and maps, pointing out trends, things that went well, and what could be improved. Inspiring! (cm)

---

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

---

7. Food UX

What do food and UX have in common? Quite a lot actually! If you’re open for a different kind of approach to UX, we came across a project that already has a few years on its back but offers a perspective on user experience design that you probably haven’t taken on before.

For a talk he gave in 2010, Peter J. Bogaards collected thoughts, ideas, and resources, simply everything that creates a link between the disciplines food/gastronomy and user experience design on his blog Food UX. What might seem a bit strange at first will start to make sense the deeper you start to dive into his way of thinking.

As it turns out, in the end both gastronomy and UX are really about the same thing: engaging the senses to allow experiences to emerge, setting the stage for something good to happen and serving something delightful. (cm)

---

8. New On Smashing Job Board

• UX/UI Web Designer
  at SLAC National Accelerator Laboratory
  (Menlo Park, CA)
• Senior Frontend Engineer (Vue.js)
  at Kasa (Hungary/EU, Remote)
• User Experience Designer
  at Azavea (Philadelphia, PA, United States)

---

9. Recent Smashing Articles

• The Evolution Of Jamstack
• May 2021 Desktop Wallpapers
• The Humble <img> Element And Core Web Vitals
• Understanding Easing Functions for CSS Animations and Transitions
• Smashing Podcast Episode 36 With Miriam Suzanne: What Is The Future Of CSS?
• Jump to all articles

---

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. And if you have a moment, please recommend the newsletter to your friends and colleagues. Thanks, and 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