Better Bridges

I couldn’t agree more to what Dave wrote in his recent blog post about the increasing demands of the front-end web: the job of a front-end developer is getting ever more complex. From writing well-structured, semantic HTML to the latest (fantastic) new CSS features, to accessibility, performance, animation, data handling, components, frameworks, and so many more things – it almost seems impossible to become an expert at everything a developer is expected to know today. Therefore, we need to find ways to split the responsibilities. We need new roles at the intersections.

At the same time, I see more and more designers struggling to get an idea of what is possible even with the most basic materials we all build with: HTML, CSS, and JavaScript. Just take all the new CSS layout features as an example: CSS Grid, Flexbox, multi-column layout, fluid layouts with clamp(), min(), and max(), and so on. Browsers are more capable today than ever before and layout on the Web isn’t a hack anymore. Yet in my experience, and from asking designers in my workshops, I know that most designers (unless they write CSS themselves) have no idea that the very fundamentals of how we do layout on the web have changed unlike ever before. How are they going to make the best use of what’s possible and design materially honest solutions when they don’t even know those features exist let alone have an idea how they work?

So yes, our jobs as builders for the front-end web have become mind-bogglingly complex and inventing new roles will help to release some of the pressure we all feel. But there is still the need to learn from each other across disciplines, as well. Designers need to know what is possible in the front end. Front-end developers have to get a better understanding of design basics to fill the gaps in a design, for example, between breakpoints.

Adding roles at the intersections could provide the knowledge needed to close those gaps. Because instead of fiddling around with something you don’t fully understand or don’t feel comfortable with yet, especially when working under a tight deadline, imagine having someone who can actually show you the most important bits and provide the necessary context. What would that leave you with? The knowledge and understanding of why and how to do it on your own next time. And: more time to do what you are best at doing.

At the same time, it is important to not shift all the responsibility upon the person filling a new role like “Design Engineer”, “CSS Engineer“, or “Front-end Designer”. Building for the Web is a team sport and it is crucial that we never stop to talk to each other and learn from each other frequently, openly, and with a beginner’s mind, regardless of each other’s roles and responsibilities. Learning from each other happens gradually and sometimes slowly, but it is one of the superpowers of cross-functional teams. And yet again, roles at the intersections can help with this, because they increase the surface area for collaboration.

Just like Dave, “I don’t have answers, only questions”. Adding bridge roles is a good thing and something that does happen already. In fact, I am working in a design engineering role in many of my projects these days. But what else can we do about the growing complexity of the Web? Do we need to eliminate 80 % of the work? Do we need to improve education? Do we need to become more open and supportive as a community? Do we need to talk more, write more, teach more, prototype more, and share more best practices? Or, do we maybe need less? Do we need to focus on the essentials?

A while ago, I wrote about Dieter Rams’ principle of “less but better”. What could “less but better” look like for the front-end web?

~

41 Webmentions

Photo of Mike-麥;-Mai/index.html
Mike-麥;-Mai/index.html
Less but better is a grid that is not column based but one that adapts to content size. It’s literally 1 line of CSS. grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr)); This is a concept that is extremely hard for designers to grasp just cuz they can’t do it in Figma.
Photo of Dave Rupert
Dave Rupert
Thoughtful rebound post from @m_ott. > Or, do we maybe need less? I think this is the perspective I’m leaning towards.
Photo of Florian Geierstanger
Florian Geierstanger
As one „bridge between frontend dev and design“ we established a weekly jour fixe. To teach in both directions, explore the web medium, throw ideas around. That’s how we came up with a layout grid florian.geierstanger.org/blog/css-layou…
Photo of Max Böck
Max Böck
"Building for the Web is a team sport and it is crucial that we never stop to talk to each other and learn from each other [...]" 🙌; via @m_ott matthiasott.com/notes/better-b…
Photo of Jim Meyer
Jim Meyer
Separate source of truth for design tools and dev tools are delaying the necessary learning you're talking about. We're doing our part to fix the disconnect with a design tool that reads and writes code for designers while they design. Teams should be working in the same medium.
Photo of Matthias Ott
Matthias Ott
Interesting approach! It’s basically a visual design tool that sits on top of a team’s design system? Does it also allow me to build a system from scratch or does it “only” consume and manipulate components that already exist?
Photo of Jim Meyer
Jim Meyer
It reads/writes to a code base, e.g. your own design system code library or product code base which is stored on GitHub or another git service. We've started with open source design systems (MUI/Chakra), but yes we're planning to support from scratch eg. via headless components.
Photo of Carlos Espada
Carlos Espada
Another person who agrees, and a great thought from @m_ott on something I've been interested in for a long time: how to fill in the gaps in a whole team matthiasott.com/notes/better-b…
Photo of Manuel Matuzović;
Manuel Matuzović;
“Building for the Web is a team sport and it is crucial that we never stop to talk to each other and learn from each other frequently, openly, and with a beginner’s mind, regardless of each other’s roles and responsibilities.”
Photo of Pablo Lara H
Pablo Lara H
🌉; Better Bridges by Matthias Ott @m_ott #complexity #design #designengineering #development #webdev matthiasott.com/notes/better-b…
Photo of Sara Soueidan
Sara Soueidan
"Building for the Web is a team sport and it is crucial that we never stop to talk to each other and learn from each other frequently, openly, and with a beginner’s mind, regardless of each other’s roles and responsibilities. " ⁦;@m_ott⁩; 👏;👏;👏; matthiasott.com/notes/better-b…

Likes

Reposts