As a designer with some background in front-end markup, there were a few early concepts that helped me get my head around the gaps between the designs I was making and what ended up in the browser.

• Design and developer handoff: We spend a good deal of our time prepping designs for engineering delivery, and without considering the output we might be making our partner's lives more difficult.

• User constraints: The more we understand our user’s experience the more intentional we can be with our solutions and this includes what’s happening in their browsers.

• Accessibility: Many accessibility criteria demand that we understand how products get built and think about how to solve more technical requirements like forms, focus order, and HTML landmarks.

When I think about meeting users “in the browser”, there are a couple of concepts that stand out:

Source order and reflow

Underneath the fanciest designs we turnout in Figma is regular ‘ol HTML markup. Single-column mobile design reminds us that our content needs to be designed to read vertically and it's our job as designers to consider sequence and content hierarchy.

Tip - An excellent example of how to utilize reflow to inform design is this simple tool from Erik Kennedy, that lets you visualize typography choices.

Semantic markup

How we name our markup elements directly affects the legibility and accessibility of our products. Most folks are familiar with basic heading elements. To be better partners with engineering it's helpful to dig deeper into semantic markup elements to support accessibility including, landmark regions, form elements, focus order, and aria.

Tip - Stéphanie Walter produced an amazing guide that our team uses to add details like more robust form elements to our design files.

CSS Grid and flexbox

As screens change size, we have the benefit of modern layout techniques to create a more engaging experience for our users at various screen sizes. Many of our mental models for layout options depend on how Auto-Layout “abstracts” how browsers create grid systems. Until there is better native support for Grid and flexbox in tools like Figma, I would encourage designers to read up and experiment with basic techniques.

Tip - Christine Vallaure 🟦 🟠 🔺 creates amazing resources for designers and I would encourage anyone looking to learn to check out moonlearning.io.

Thanks to all of the amazing resources out there that are providing designers more and more ways to collaborate with engineers and get closer to creating more accessible experiences that meet people where they are.