Useful Email Newsletters For Designers

Struggling to keep our inboxes under control and aim for that magical state of inbox zero, the notification announcing an incoming email isn’t the most appreciated sound for many of us. However, there are some emails to actually look forward to: A newsletter, curated and written with love and care, can be a nice break in your daily routine, providing new insights and sparking ideas and inspiration for your work.

With so many wonderful design newsletters out there, we know it can be a challenge to decide which newsletter (or newsletters) to subscribe to. That’s why we want to shine a light on some newsletter gems today to make your decision at least a bit easier β€” and help you discover newsletters you might not have heard of yet. Ranging from design systems to UX writing, motion design, and user research, there sure is something in it for you.

A huge thank you to everyone who writes, edits, and publishes these newsletters to help us all get better at our craft. You are truly smashing! πŸ‘πŸΌπŸ‘πŸ½πŸ‘πŸΎ

Table of Contents

Below you’ll find quick jumps to newsletters on specific topics you might be interested in. Scroll down to browse the complete list or skip the table of contents.

Design & Front-End

HeyDesigner

πŸ—“ Delivered every Monday
πŸ–‹ Written by Tamas Sari

Aimed at product people, UXers, PMs, and design engineers, the HeyDesigner newsletter is packed with a carefully curated selection of the latest design and front-end articles, tools, and resources.

Pixels of the Week

πŸ—“ Delivered weekly
πŸ–‹ Written by StΓ©phanie Walter

StΓ©phanie Walter’s Pixels of the Week newsletter keeps you informed about the latest UX research, design, tech (HTML, CSS, SVG) news, tools, methods, and other resources that caught StΓ©phanie’s interest.

TLDR Design

πŸ—“ Delivered daily
πŸ–‹ Written by Dan Ni

You’re looking for some bite-sized design inspiration? TLDR Design is a daily newsletter highlighting news, tools, tutorials, trends, and inspiration for design professionals.

DesignOps

πŸ—“ Delivered every two weeks
πŸ–‹ Written by Ch'an Armstrong

The DesignOps newsletter provides the DesignOps community with the best hand-picked articles all around design, code, AI, design tools, no-code tools, developer tools, and, of course, design ops.

Adam Silver’s Newsletter

πŸ—“ Delivered weekly
πŸ–‹ Written by Adam Silver

Every week, Adam Silver sends out a newsletter aimed at designers, content designers, and front-end developers. It includes short and sweet, evidence-based design tips, mostly about forms UX, but not always.

Smashing Newsletter

πŸ—“ Delivered every Tuesday
πŸ–‹ Written by the Smashing Editorial team

Every Tuesday, we publish the Smashing Newsletter with useful tips and techniques on front-end and UX, covering everything from design systems and UX research to CSS and JavaScript. Each issue is curated, written, and edited with love and care, no third-party mailings or hidden advertising.

UX

UX Design Weekly

πŸ—“ Delivered every Monday
πŸ–‹ Written by Kenny Chen

UX Design Weekly provides you with a weekly dose of hand-picked user experience design links. Every issue features articles, tools and resources, a UX portfolio, and a quote to spark ideas and get you thinking.

UX Collective

πŸ—“ Delivered weekly
πŸ–‹ Written by Fabricio Teixeira and Caio Braga

β€œDesigners are thinkers as much as they are makers.” Following this credo, the UX Collective newsletter helps designers think more critically about their work. Every issue highlights thought-provoking reads, little gems, tools, and resources.

Built For Mars

πŸ—“ Delivered every few weeks
πŸ–‹ Written by Peter Ramsey

The Built for Mars newsletter brings Peter Ramsey’s UX research straight to your inbox. It includes in-depth UX case studies and bite-sized UX ideas and experiments.

NN Group

πŸ—“ Delivered weekly
πŸ–‹ Written by the Nielsen Norman Group

Studying users around the world, the Nielsen Norman Group provides research-based UX guidance. If you don’t want to miss their latest articles and videos about usability, design, and UX research, you can subscribe to the NN/g newsletter to stay up-to-date.

UX Notebook

πŸ—“ Delivered weekly
πŸ–‹ Written by Sarah Doody

The UX Notebook Newsletter is aimed at UX and product professionals who want to learn how to apply UX and design principles to design and grow their teams, products, and careers.

Smart Interface Design Patterns

πŸ—“ Delivered weekly
πŸ–‹ Written by Vitaly Friedman

Every issue of the Smart Interface Design Patterns newsletter is dedicated to a common interface challenge and how to solve it to avoid issues down the line. A treasure chest of design patterns and UX techniques.

UX Weekly

πŸ—“ Delivered weekly
πŸ–‹ Written by the Interaction Design Foundation

The Interaction Design Foundation is known for their UX courses and webinars for both aspiring designers and advanced professionals. Their UX Weekly newsletter delivers design tips and educational material to help you leverage the power of design.

Design With Care

πŸ—“ Delivered every first Tuesday of a month
πŸ–‹ Written by Alex Bilstein

Healthcare systems desparately need UX designers to improve the status quo for both healthcare professionals and patients. The Design With Care newsletter empowers UX designers to create better healthcare experiences and make an impact that matters.

UX Writing & Content Strategy

The UX Gal

πŸ—“ Delivered every Monday
πŸ–‹ Written by Slater Katz

Whether you’re about to start your UX content education or want to get better at UX writing, The UX Gal newsletter is for you. Every Monday, Slater Katz sends out a new newsletter with prompts, thoughts, and exercises to build your UX writing and content design skills.

UX Content Collective

πŸ—“ Delivered weekly
πŸ–‹ Written by the UX Content Collective

The newsletter by the UX Content Collective is perfect for anyone interested in content design. In it, you’ll find curated UX writing resources, new job openings, and exclusive discounts.

GatherContent

πŸ—“ Delivered weekly
πŸ–‹ Written by the GatherContent team

The GatherContent newsletter is a weekly email full of content strategy goodies. It features articles, webinars and masterclasses, new books, free templates, and industry news.

User Research

User Research Academy

πŸ—“ Delivered weekly
πŸ–‹ Written by Nikki Anderson

If you want to get more creative and confident when conducting user research, the User Research Academy might be for you. With carefully curated articles, podcasts, events, books, and academic resources all around user research, the newsletter is perfect for beginners and senior UX researchers alike.

User Weekly

πŸ—“ Delivered weekly
πŸ–‹ Written by Jan Ahrend

What mattered in UX research this week? To keep you up-to-date on trends, methods, and insights across the UX research industry, Jan Ahrend captures the pulse of the UX research community in his User Weekly newsletter.

User Interviews

πŸ—“ Delivered weekly
πŸ–‹ Written by the User Interviews team

The UX Research Newsletter by the folks at User Interviews delivers the latest UX research articles, reports, podcast episodes, and special features. For professional user researchers just like teams who need to conduct user research without a dedicated research team.

Baymard Institute

πŸ—“ Delivered weekly
πŸ–‹ Written by the Baymard Institute

User experience, web design, and e-commerce are the topics which the Baymard Institute newsletter covers. It features ad-free full-length research articles to give you precious insights into the field.

Interaction Design

Design Spells

πŸ—“ Delivered every other Sunday
πŸ–‹ Written by Chester How, Duncan Leo, and Rick Lee

Whether it’s micro-interactions or easter eggs, Design Spells celebrates the design details that feel like magic and add a spark of delight to a design.

Justin Volz’s Newsletter

πŸ–‹ Written by Justin Volz

Getting you ready for the future of motion design is the goal of Justin Volz’s newsletter. It features UX motion design trends, new UX motion design articles, and more to β€œmake your UI tap dance.”

Design Systems & Figma

Design System Guide

πŸ—“ Delivered weekly
πŸ–‹ Written by Romina Kavcic

Accompanying her interactive step-by-step guide to design systems, Romina Kavcic sends out the weekly Design System Guide newsletter on all things design systems, design process, and design strategy.

Figmalion

πŸ—“ Delivered weekly
πŸ–‹ Written by Eugene Fedorenko

The Figmalion newsletter keeps you up-to-date on what is happening in the Figma community, with curated design resources and a weekly roundup of Figma and design tool news.

Information Architecture

Informa(c)tion

πŸ—“ Delivered every other Sunday
πŸ–‹ Written by Jorge Arango

The Informa(c)tion newsletter explores the intersection of information, cognition, and design. Each issue includes an essay about information architecture and/or personal knowledge management and a list of interesting links.

Product Design

Product Design Challenges

πŸ—“ Delivered weekly
πŸ–‹ Written by Artiom Dashinsky

How about a weekly design challenge to work on your core design skills, improve your portfolio, or prepare for your next job interview? The Weekly Product Design Challenges newsletter has got you covered. Every week, Artiom Dashinsky shares a new exercise inspired and used by companies like Facebook, Google, and WeWork to interview UX design candidates.

Fundament

πŸ—“ Delivered every other Thursday
πŸ–‹ Written by Arkadiusz Radek and Mateusz Litarowicz

With Fundament, Arkadiusz Radek and Mateusz Litarowicz created a place to share what they’ve learned in their ten-year UX and Product Design careers. The newsletter is about the things that matter in design, the practicalities of the job, the lesser-known bits, and content that will help you grow as a UX or Product Designer.

Case Study Club

πŸ—“ Delivered weekly
πŸ–‹ Written by Jan Haaland

How do people design digital products? With curated UX case studies, the Case Study Club newsletter grants insights into other designers’ processes.

Ethical Design & Sustainability

Ethical Design Network

πŸ—“ Delivered monthly
πŸ–‹ Written by Trine Falbe

The Ethical Design Network is a space for digital professionals to share, discuss, and self-educate about ethical design. You can sign up to the newsletter to receive monthly news, resources, and event updates all around ethical design.

Sustainable UX

πŸ—“ Delivered monthly
πŸ–‹ Written by Thorsten Jonas

As designers, we have to take responsibility for more than our users. Shining a light on how to design and build more sustainable digital products, the SUX Newsletter by the Sustainable UX Network helps you stand up to that responsibility.

AI

AI Goodies

πŸ—“ Delivered weekly
πŸ–‹ Written by Ioana Teleanu

A brand-new newsletter on AI, design, and UX goodies comes from Ioana Teleanu: AI Goodies. Every week, it covers the latest resources, trends, news, and tools from the world of AI.

Business

d.MBA

πŸ—“ Delivered weekly
πŸ–‹ Written by Alen Faljic

Learning business can help you become a better designer. The d.MBA newsletter is your weekly source of briefings from the business world, hand-picked for the design community by Alen Faljic and the d.MBA team.

Career & Leadership

Dan Mall Teaches

πŸ—“ Delivered weekly
πŸ–‹ Written by Dan Mall

Tips, tricks, and tools about design systems, process, and leadership, delivered to your inbox every week. That’s the Dan Mall Teaches newsletter.

Stratatics

πŸ—“ Delivered weekly
πŸ–‹ Written by Ryan Rumsey

To do things differently, you must look at your work in a new light. That’s the idea behind the Stratatics newsletter. Each week, Ryan Rumsey provides design leaders and executives (and those who work alongside them) with a new idea to reimagine and deliver their best work.

Spread The Word

Do you have a favorite newsletter that isn’t featured in the post? Or maybe you’re writing and publishing a newsletter yourself? We’d love to hear about it in the comments below!

Smashing Podcast Episode 63 With Chris Ferdinandi: What Is The Transitional Web?

In this episode of The Smashing Podcast, we’re talking about The Transitional Web. What is it, and how does it describe the technologies we’re using? Drew McLellan talks to Chris Ferdinandi to find out.

Show Notes

Weekly Update

Transcript

Drew: He’s the author of the Vanilla JS Pocket Guide series, creator of the Vanilla JS Academy Training Program and host of the Vanilla JS Podcast. We last talked to him in late 2021 where we asked if the web is dead, and I know that because I looked it up on the web. So, we know he is still an expert in Vanilla JS but did you know he invented fish and chips? My smashing friends, please welcome back Chris Ferdinandi. Hi, Chris, how are you?

Chris: I'm smashing, thank you so much. How are you today, Drew?

Drew: I'm also smashing, thank you for asking. It’s always great to have you back on the podcast, the two of us like to chat about maybe some of the bigger picture issues surrounding the web. I think it’s easy to spend time thinking about the minutiae of techniques or day-to-day implementation or what type of CSS we should be using or these things but sometimes it is nice to take a bit of a step back and look at the wider landscape. Late last year, you wrote an article on your Go Make Things website called The Transitional Web. What you were talking about there is the idea that the web is always changing and always in flux. After, I don’t know how long I’ve been doing this, 25 years or so working on the web, I guess change is pretty much the only constant, isn’t it?

Chris: It sure is. Although, to be fair, it feels like a lot of what we do is cyclical and so we’ll learn something and then we’ll unlearn it to learn something new and then we’ll relearn it again just in maybe a slightly different package which is, in many ways, I think the core thesis of the article that you just mentioned.

Drew: And is that just human nature? Is that particular to the web? I always think of, when I was a kid in the '80s, the 1980s, okay, so we’re talking a long while back-

Chris: It was a wild time.

Drew: One of the pinnacles that, if you had a bit of spending power, one of the things you’d have in your living room was a hi-fi separates. So, you’d have a tape deck, maybe a CD deck, an amplifier and I always remember as a kid, they’d all be silver starting off and those were the really cool ones. And then after a while, a manufacturer would come out with one that wasn’t silver, it was black and suddenly black looked really cool and all the silver stuff looked really old. And so, then you’d have five years of everything being in black and then somebody would say, "Oh, black’s so boring. Here’s our new model, it’s silver," and everyone would get really excited about that again. I feel like somehow the web is slightly and, as I say, maybe it’s a human nature thing, perhaps we’re all just magpies and want to go to something that looks a bit different and a bit exciting and claim that’s the latest, greatest thing. Do you think there’s an element of that?

Chris: Yeah, I think that’s actually probably a really good analogy for what it’s like on what our industry has a tendency to do. I think it’s probably bigger than just that. I had a really, I don’t want to say a really good thought, that sounds arrogant. I had a thought, I don’t know if it was good or not, I forgot what it was.

Drew: Oh, it’ll come back.

Chris: So, I can’t tell you but it was related as you were talking.

Drew: I bamboozled you with talk of hi-fi separates.

Chris: Yeah, no, that’s great. It’s great.

Drew: We last talked about this concept of the lean web where we were seeing a bit of a swing back away from these big frameworks where everything is JavaScript and even our CSS was in JavaScript. And we were beginning to see at that time a launch of things like Petite Vue, Alpine.js, Preact, these smaller, more focused libraries that try and reduce the weight of JavaScript and be a little bit more targeted. Is that a trend that has continued?

Chris: Yeah, and it’s continued in a good way. So, you still see projects like that pop up, I’ve seen since then a few more tiny libraries. But I think one of the other big trends that I'm particularly both excited about and then maybe also a little bit disheartened about is the shift beyond smaller client side libraries into backend compiler tools. So, you have things like Svelte and SvelteKit and Astro which are designed to let people continue to author things with a state-based UI, JavaScripty approach but then compile all of that code that would normally have to exist in the browser and run at runtime into mostly HTML with just the sprinklings of JavaScript that you need to do the specific things you’re trying to do.

Chris: And so, the output looks a lot more traditional DOM manipulation but the input looks a lot more like something you might write in Reactor view. So, I think that’s pretty cool. It’s not without, in my opinion, maybe some holes that people can fall into and I'm starting to see some of those tools do the, hey, we solved this cool thing in an innovative way so let’s go and repeat some of the mistakes of our past but differently traps and we can talk about that, that didn’t make it into the article that you referenced. I recently wrote an update looking back on how things are changing that talks about where they’re headed.

Chris: But I think one of the big things in my article, The Transitional Web, was this musing about whether these tools are the future or just a transitional thing that gets us from where we are to where we’re headed. So, for example, if you’ve been on the web for a while, you may remember that there was a time where jQuery was the client side library.

Drew: It absolutely was, yeah.

Chris: If you were going to do JavaScript in the web, you were going to use jQuery.

Drew: jQuery was everywhere.

Chris: Yeah. And not that you couldn’t get by without it but doing something like getting all of the elements that have a class was incredibly difficult back in the, i.e., six through eight era. And jQuery made it a lot easier, it smoothed things out across browsers, it was great. But eventually browsers caught up, we got things like querySelector and querySelectorAll, the classList API, cool methods for moving elements around like a pen and before and after and removed. And suddenly, a lot of the stuff that was jQuery’s bread and butter, you could just do across any browser with minimal effort. But not everything, there were still some gaps or some areas where you might need polyfills.

Chris: And so, you started to see these smaller tools that were ... jQuery, they did some of the things but they didn’t do everything so the ones that immediately come to mind for me are tools like Umbrella JS or Shoestring from the folks over at Filament Labs. And the thing with those tools is they were really popular for a hot minute, everyone’s like, "You don’t need jQuery, use these," and then the browsers really caught up and they went away entirely. And actually, even before that fully happened, you started to see tools like React and Vue and Angular start to dominate and just, really, people either use jQuery or these other tools, they don’t touch Umbrella or Shoestring at all.

Chris: So, I think the thing I often wonder is are tools like Preact and Solid and Svelte and Astro, are those more like what reacted for the industry or more like Umbrella and Shoestring where they’re just getting us to whatever’s next. At the time that I wrote the article, I suspected that they were transitional. Now, I think my thoughts have shifted a little bit and I feel like tools like Preact and Solid are probably a little bit more and Petite Vue who are ... You called it something weird because you’re British, I forget, Petty Vue or something but-

Drew: Petite Vue, yeah.

Chris: No, I'm just teasing, I'm sorry. I love you, Drew.

Drew: I was attempting to go for the French so ...

Chris: Right? Sorry, I have the way you guys say herb stuck in my head now instead of herb and I just can't. So, yeah, I feel like those tools are potentially transitional and the what’s next just as an industry is, in my opinion, and a lot could change in the next year or three, the way I'm feeling now, it seems like tools like Astro and Svelte are going to be that next big wave at least until browsers catch up a lot. So, in my opinion, the things that browsers really need to have to make a lot of these tools not particularly necessary is some native DOM diffing method that works as easily as inner HTML does for replacing the DOM but in a way that doesn’t just destroy everything.

Chris: I want to be able to pass in an HTML string and say make the stuff in this element look like this with as little messing up of things as possible. And so, until we have that, I think there’s always going to be some tooling. There’s a lot of other things that these tools do like you can animate transitions between pages like you would in SPA. We’ve got a new API that will hopefully be hitting the browser in the near future, it works in Chrome Canary now but nowhere else, your transitions API. There’s an API in the works for sanitizing HTML strings so that you don’t do terrible cross-site scripting stuff, hasn’t really shipped anywhere yet but it’s in the works.

Chris: So, there’s a lot of library-like things in the works but DOM diffing, I think, is really the big thing. So much of how we build for the web now is grab some data from an API or a database and then dynamically update the UI based on things the user does. And you can do that with DOM manipulation, I absolutely have but, man, it is so much harder to do. So, really, I get the appeal of state-based UI. The flip side is we also use state-based UI for a lot of stuff where it’s not appropriate and it ends up being harder to manage and maintain in the long run. So, I'm rambling, I'm sorry. Drew, stop me, ask [inaudible 00:09:57].

Drew: Yeah, I don’t want to gloss over the importance of jQuery as an example for this overall trend because, as you say, at the time, it was really difficult to just find things in the DOM to target something. You could give things an ID and then you had get element by ID and you could target it that way. But say you wanted to get everything with a certain class, that was incredibly difficult to do because there was no way of accessing the class list, you could just get the attribute value and then you would have to dissect that yourself. It’s incredibly inefficient to try and get something by class and what jQuery did was it took an API that we were already familiar with, the CSS selector API essentially, and implemented that in JavaScript.

Drew: And, all of a sudden, it was trivially easy to target things on the page which then made it ... It very quickly just became the defacto way that any JavaScript library was allowing you to address elements in the DOM. And because of that trend, because that’s how everybody was wanting to do it with quite a heavy JavaScript implementation, let’s not forget this was not a cheap thing to do, that the web platform adapted and we got querySelector which does the same thing on querySelectorAll. And of course, then what jQuery did or I think its selector engine was called Sizzle, I think, under the hood. Sizzle then adopted querySelectorAll as part of its implementation.

Drew: So, if a selector could be resolved using the native one, it would. So, actually, the web platform was inspired by jQuery and then improved jQuery in this whole cycle. So, I think the way the web has always progressed is observing what people are doing, looking at the problems that they’re trying to solve and the messes of JavaScript that we’re using to try and do it and then to provide a native way to do that which just makes everything so much easier. Is that the ultimate trend? Is that what we’re looking at here?

Chris: Yeah, for sure. I often describe jQuery as paving the cow paths. So many of the methods that I love and use in the browser, I owe entirely to jQuery and I think recognizing that helped me get less angry at some of the damage that modern frameworks do or modern libraries because the reality is they are ... I think the thing is a lot of them are experiments that show alternate ways to do things and then we have a tendency as an industry to be like, "If it’s good for this, it’s good for everything." And so, React is very good at doing a specific set of things in a specific use case and, through some really good marketing from Facebook, it became the defacto library of the web.

Chris: I think tools like Astro and Svelte are similarly showing a different way we can approach things that involves authoring and adding a compiled step. And they are, by no means, original there, static site generators have existed for a while, they just layer in this. And we’ll also spit out some reactive interacting bits and you don’t have to figure out how to do that or write your own JavaScript for it, just write the stuff, we’ll figure out the rest. So, yeah, I do think that’s the nature of the web platform is libraries are experiments that extend what the platform can already do or abstract away some of the tough stuff so that people can focus on building and then, eventually, hopefully, the best stuff gets absorbed back into the platform.

Chris: The potential problem with that model is that, usually, by the time that happens, the tooling has both gotten incredibly heavy to the detriment of end users and has become really entrenched. So, even though the idea ... Think of jQuery, we talk about it in the past tense but it’s still all over the web because these sites that were built with it aren’t just going to rip it out, it’s a lot of work to do that. And there’s a lot of developers even today who, when they start a new project, they reach for jQuery because that’s what they learned on and that’s what they know and it’s easiest for them.

Chris: So, these tools just really have persistence for better or for worse. It’s great if you invested a lot of time in learning them, it’s great job security, you’re not wasted time. But a lot of these tools are very heavy, very labor-intensive for the browser and ultimately result in a more fragile end user experience which is not always the best thing.

Drew: I remember, at one point, there was a movement calling for React to actually be shipped with the browser as a way of offsetting the penalty of downloading and pausing all that script. It is frustrating because it’s like, okay, you’re on the right path here, this functionality should be native to the browser but then, crucially, at the last moment, you swerve and miss and it’s like, no, we don’t want to embed React, what we want to do is look at the problems that React is helping people solve, look at the functionality that it’s providing and say, okay, how can we take the best version of that and work that into the web platform. Would you agree?

Chris: Yeah. Yeah, exactly. React will eventually be in the browser, just not the way everybody ... I think a lot of people talk about it as in literally, the same way jQuery is in the browser now, too. We absorb the best bits, put some different names on them, arguably more verbose, clunky, difficult to use names in many cases and so I think that’s how it’ll eventually play out. The other thing that libraries do that I wish the web platform was better at, since we’re on this path, is just API consistency.

Chris: So, it’s one thing that jQuery got, really, is the API is very consistent in terms of how methods are authored and how they work. And just, as a counterpoint, in JavaScript proper, just native JavaScript, you could make a strong argument that querySelector and querySelectorAll shouldn’t be separate methods, it should just be one method that has a much shorter name that always returns ... Hell, I’d even argue an array, not a node list because there are so many more methods that you can use to loop over arrays and manipulate them to nodes or node lists.

Chris: Why is the classList API a set of methods on a property instead of just a set of methods you call directly on the element? So, why is it classList add, classList remove instead of add class, remove class, toggle class, et cetera. It’s just lots of little things like that, this death by a thousand cuts, I think, exacerbates this problem that, even when native methods do the thing, you still get a lot of developers who reach for tooling just because it smooths over those rough edges, it often has good documentation. MDN fills the gap but it’s not perfect and, yeah.

Drew: Yes, using a well-designed framework, the methods tend to be guessable. If you’ve seen documentation that includes a remove method, you could probably guess that an add method is the opposite of that because that’s how anybody would logically name it. But it’s not always that way with native code, I guess, because of reasons, I don’t know, designed by committee, historical problems. I know that, at one point, there were, was it MooTools or prototype or some of these old frameworks that would add their own methods and basically meant that those names couldn’t be reused for compatibility reasons.

Chris: Yeah, I remember there was that whole SmooshGate thing that happened where they were trying to figure out how to ... I think it was the flat method or whatever that originally was supposed to be called. MooTools had an array method of the same name attached to the array prototype. If the web standards committee implemented it the way they wanted to, it would break any website using MooTools, a whole thing.

Drew: In some ways, it seems laughable, any website using MooTools. If your website’s using MooTools, good luck at this point. But it is a fundamental attribute of the web that we try not to break things that, once it’s deployed, it should keep running and a browser update isn’t going to make your use of HTML or CSS or whatever invalid, we’re going to keep supporting it for as long as possible. Even if it’s been deprecated, the browsers will keep supporting it.

Chris: Yeah. I was just going to say, the marquee element was deprecated ages ago and it still works in every major browser just for legacy reasons. It’s that core ethos of the web which is the thing I love. I think it’s a good thing, yeah.

Drew: It is but, yes, it is not without its problems as we’ve seen. It's, yeah, yeah, very difficult. You mentioned the View Transitions API which I think now may be more broadly supported. I don’t know if I saw from one of the web.dev posts that’s now, as of this month, has better support, which is transitional state but like an SPA style transition between one state and another but you can do it with multipage apps.

Chris: Yeah. A discord I'm in, just quick shout out to the Frontend Horse Discord, Adam Argyle was in there today talking about how, because he built this slide demo thing where every slide is its own HTML file and it uses U transitions to make it look like it’s just one single page app. He was saying that it still does require Chrome Canary with a flag turned on but things change quickly, very slowly and then all at once, that’s the-

Drew: Well, that’s pretty up to date and an authoritative statement there, yeah. But we saw, it was Google IO recently, we saw loads of announcements from them back to things they’re working on. Things like the popover API, which is really interesting, which make use of this top layer concept where you don’t have to futz around with Z index to make sure, if something needs to be on the top, it can be on the top. It’s these sorts of solutions that you get from the web platform that are always going to be a bit of a hack if they’re implemented by a library in JavaScript.

Drew: It’s the fact that you can have a popover that you can always guarantee is going to be on top of everything else and has baked into its behavior so that it can be accessibly dismissed to all those really important subtleties that it’s so easy to get wrong with a JavaScript implementation that the web platform just gets right. And I guess that means that the web platform is always going to move more slowly than a big framework like React or what have you but it does it for a reason because every change is considered for, I don’t know, robustness and performance and accessibility and backward compatibility. So, you end up with, ultimately, a better solution even if it has weird method names.

Chris: For sure. Yeah, no, that’s totally fair.

Drew: I think-

Chris: Yeah.

Drew: ... we had-

Chris: Oh, sorry. Go ahead, Rich. Drew rather.

Drew: I was about to mention Rachel, we had Rachel Andrew on the show a few episodes ago talking about Google Baseline which is their initiative to say which features are supported to replace a browser support matrix idea. And if you look at the posts that Rachel writes what’s new on the web on web.dev every month, she does a roundup of what’s now stable, what you can use and there’s just a vast amount being added to the web platform all the time. It could be a change log from a major framework because it is a major framework, it’s the native web platform but there’s just things being added all the time. Is there anything in particular that you’ve seen that you think would make a big difference or are you just hanging out for that DOM diffing after all those things that are yet to come?

Chris: Yeah. So, things like transitions between pages and stuff, I'm going to be honest, those don’t excite me as much as I think they excite a lot of other people. I know that’s a big part of the reason why a lot of developers that I know really like SPAs and, I don’t know, markers, get really excited about that thing, I’ve just never really understood that. I am really holding out for a DOM diff method. I think the API I'm honestly most excited for is the Temporal API which is still in, I think, stage three so it’s not coming anytime soon. But working with dates in JavaScript sucks and the Temporal API is hopefully going to fix a lot of those issues, probably introduce some new ones but fix most of them.

Drew: This is new to me. Give us a top level explanation of what’s going on with that one.

Chris: Oh, yeah, sure. So, one of the big things that’s tough to do with the date object in JavaScript ... For me, there’s two big things that are really particularly painful. One of them is time zones. So, trying to specify a time in a particular time zone or get a time zone from a date object. So, based on when it was created or how it was created, no, this is the time zone. Figuring out the time zone the person is in is really difficult. And then the other aspect that’s difficult is relative time. So, if you’ve got two different dates and you want to just quickly figure out how much time is between them, you can do it but it involves doing a bunch of math and then making some assumptions especially once you get past days or, I guess, weeks.

Chris: So, I could easily look at two date objects, grab timestamps from them and be like, "Okay, this was two weeks ago or several days." But then, once you start getting into months, the amount of days in a month varies. So, if I don’t want to say 37 weeks, I want to say, however many months that ends up being, it’s going to vary based on how long the months were. And so, the Temporal API addresses a lot of those issues. It’s going to have first class support for time zones, it’s going to have specific methods for getting relative time between two temporal objects and, in particular, one where you hopefully won’t have to ...

Chris: It’s been a while since I’ve read the spec but I'm pretty sure it allows you to not have to worry about, if it’s more than seven days, show in weeks, if it’s more than four weeks, use months. You can just get a time string that says this was X amount of time ago or is happening N amount of time in the future or whatever. So, there’s certain things the Date API can do relatively or the date object can do relatively well but then there’s a couple of you’re trying to do appy stuff with it.

Chris: For example, I once tried to build a time zone calculator so I could quickly figure out when some of my colleagues in other parts of the world, when it was for them. And it was just really hard to account for things like, oh, most of Australia shifted daylight savings time this month but this one state there doesn't, they actually do it a different month or not at all and so it was a huge pain.

Drew: Yeah, anything involving time zones is difficult.

Chris: Yeah. It’s one of the biggest problems in computer science. That and, obviously, naming things. But yeah, it will smooth over a lot of those issues with a nicer, more modern API. If you go over to tc39.es/proposaltemporal, they have the docs of the work in progress or the spec in progress. It’s authored a lot more nicely than what you might normally see on, say, the W3C website in terms of just human readability but you can tell they borrowed a lot of the way the API works from libraries like Moment.js and date-fns and things like that. Which again gets back to this idea that libraries really pave those cow paths and show what a good API might look like and then the best ones usually win out and eventually become part of the browser.

Drew: And again, back to my point about the web platform getting the important details right, if you’ve got native data objects, you’re going to be able to represent those as localized strings which is a whole other headache. I’ve used libraries that will tell you, "Oh, this blog post was posted two weeks ago," but it’ll give you the string two weeks ago and there’s no way to translate that or, yeah. So, all those details, having it baked into the platform, that’s going to be super good [inaudible 00:27:24].

Chris: Smashing, one might even say.

Drew: Smashing, yeah. It raises a question because the standards process takes time and paving the cow paths, there has to be a cow path before you pave it. So, does that approach always leave us a step behind what can be done in big frameworks?

Chris: Yeah, theoretically. I think we can look at an example where this didn’t work with the Toast API that Google tried to make happen a few years back. That was done relatively quickly, it was done without consensus across browsers, I don’t think it really leaned heavily on ... I think it was just doing what you described, the paving before the cow paths were there and so it was just met with a lot of resistance. But yeah, I think the platform will always be a bit behind, I think libraries are always going to be a part of the web. Even as the Vanilla JS guy, I use libraries all the time for certain things that are particularly difficult.

Chris: For me, that tends to be media stuff. So, if I need to display really nice photo galleries that expand and shrink back down and you can slide through them, I always grab a library for that, I'm not coding that myself. I probably could, I just don’t want to, it’s a lot of little details to manage.

Drew: It’s a lot of work, yeah.

Chris: Yeah. So, I do, I think the platform will always be behind, I don’t think that’s necessarily a bad thing. I think, for me, the big thing I’ve wished for years is that we run through this cycle as an industry where a little tool comes out, does a thing well, throws in more and more features, gets bigger and bigger, becomes a black hole and just sucks up the whole industry. I keep picking on React but React is the library right now. And then eventually people are like, "Oh, this is big, maybe we should not use something as big," and then you start to see little alternatives pop up. And I really wish that we stopped doing that whole bigger black hole thing and the tools just stayed little and people got okay with the idea that you would pull together a bunch of little tools instead of just always grabbing the behemoth that does all the things. I often liken it to people always go for the Swiss Army knife when they really just need a toothpick or a spoon or a pair of scissors. Just grab the tool you need, not the giant multi-tool that has all this stuff you don't.

Drew: It almost comes back to the classic Unix philosophy of lots of small tools that do specific things that have a common interface between them so that you can change stuff together.

Chris: And that’s probably where ... Now that you’re saying it, I hadn’t really considered this but that’s probably where the behavior or the tendency arises is, if you have a bunch of small libraries from the same author, they often play together very nicely. If you don't, they don’t always, yeah, it’s tougher to chain them together or connect those dots. And I really wish there was some mechanism in place that incentivized that a little bit more, I don’t know. I got nothing but I hadn’t really considered that until you just said it.

Drew: Maybe it needs to be a web platform feature to be able to plug in functionality.

Chris: Yeah. Remember the jQuery, I think it was called the extend method or they had some hook that, if you were writing a plugin, basically you would attach to the jQuery prototype and add your own things in a non-destructive way. I wish there was some really lightweight core that we could bolt a bunch of stuff into, that would be nice.

Drew: Yes, and I think that would need to come from the platform rather than from any third party because done the interface would never be agreed upon.

Chris: Very true.

Drew: You talk a lot about Vanilla JavaScript as a concept, I think it helps to give things names. I feel like this approach that we’re talking about here is being web platform native. Do you think that describes it accurately?

Chris: Yes. Yeah, definitely.

Drew: Yeah. So, you’ve talked about still reaching for libraries and things where necessary. Would you say that, if it is our approach to pave the cow paths that, really, the ecosystem needs these frameworks to be innovating and pushing the boundaries and finding the requirements that are going to stick, are they just an essential part of the ecosystem and maybe not so [inaudible 00:32:08]-

Chris: Yeah, probably more than I-

Drew: ... to paint.

Chris: Yeah. I think, more than I’d like to admit, they are an essential part of the ecosystem. And I think what it comes back to for me is I wish that they did the one thing well and stayed a relatively manageable size. Preact, for example, has done a really great job of adding more features and still keeping themselves around three kilobytes or so, minified [inaudible 00:32:33] which is pretty impressive considering how much like React the API is and they have fewer abstractions internally so a lot of the dynamic updates, you, user Drew, interact with the page, some state changes and a render happened, that ended up happening orders of magnitude faster than it does in React as well. Now, to be fair, a lot of the reason why is Preact is newer and it benefits from a lot of modern JavaScript methods that didn’t exist when React was created. So, under the hood, there’s a lot more abstraction happening but it’d probably require a relatively big rewrite of React to fix that.

Drew: And we know those are always popular.

Chris: Yeah. They are dangerous, I understand why people don’t like to do them. I’ve done it multiple times, I always end up shooting myself on the foot, it’s not great.

Drew: So, say that I'm a React developer and I'm currently, day-to-day, building client side SPAs but I really like the sound of this more platform native approach and I want to give it a try for my next project. Where should I start? How do I dip a toe into this world?

Chris: Oh, it depends. So, the easiest way, and I hate myself for saying this, but the easiest way, honestly, you got a few options. One of them, you rip out React, you drop in Preact, there’s a second smaller thing you need to smooth over some compatibility between the two but that’s going to give you just an instant performance boost, a reduce in file size and you can keep doing what you were doing. The way that I think is a little bit more future-proof and interesting, you grab a tool like Astro, which allows you to literally use React to author your code and then it’s going to compile that out ... Excuse me, into mostly HTML, some JavaScript, it’s going to strip out React proper and just add the little interactivy bits that you need.

Chris: I saw a tweet a year or two ago from Jason Lengstorf from the Netlify developer relations team about how he took a next app that he had built, kept 90% of the code, he just made a few changes to make it fit into the way Astro hooks into things, ran the Astro compiler and he ended up having the same exact site with almost all of the same code but the shipped JavaScript was 90% smaller than what he had put in. And you get all the performance and resilience wins that come with that just automatically, just by slapping a compiler on top of what you already have.

Chris: So, I'm really excited about a tool like Astro for that reason. I'm also a little bit worried that a tool like Astro becomes a band-aid that stops us from addressing some of the real systemic issues of always reaching for these tools. Because you can just keep doing what you’re doing and not really make any meaningful changes and temporarily reduce the impact of them, I don’t know that it really puts us in a better place as an industry in the long run. Especially since tools like Svelte and Astro are now working towards this idea that, rather than shipping multi-page apps, they’re going to ship multi-page apps that just progressively enhance themselves into single page apps with hydration and now we’re right back to we’ve got an SPA.

Chris: So, I mentioned some stuff has changed, I recently saw a talk from Rich Harris, who’s the creator of Svelte and SvelteKit, about this very thing and he’s very strongly of the belief that SPAs are better for users because you’re not fetching and rerunning all of the JavaScript every time the page loads. And I get that argument and SvelteKit does it in a really cool way where, rather than having a link element like you might get in Next.js or something like that, a React router or whatever, they just intercept traditional hyperlinks and do some checking to see if they point to your current page or an external site and behave accordingly.

Chris: The thing that nobody ever talks about when they talk about SPAs are better is all of the accessibility stuff that they tend to break that you then need to bolt back in. So, even if you’re like, "Okay, this library is going to handle intercepting the links and finding the page and doing all the rendering and figuring out what needs to change and what stays the same," there’s this often missed piece around how do you let someone who’s using a screen reader know that the UI has changed and how do you do it in a way that’s not absolutely obnoxious. You don’t want to read the entire contents of the page so you can’t just slap an ARIA live attribute on there.

Chris: Do you shift focus to the H1 element on the page? What happens if the user didn’t put an H1 element on the page? Do you have some visually hidden element that you drop some text in saying page loaded so that they know? Do you make sure you shift focus back to the top so they’re not stranded halfway down the page if they’re a keyboard user? It’s one of those things where how you handle is very it depends, contextual. And I think it’s really tough for a library to implement a solution that works for all use cases. I think it’s optimistic to assume the developers will always do the right thing.

Chris: I mentioned at the very start that I'm excited about these tools but I also see them doing that let’s repeat the same mistakes all over again and this feels like that to me. I absolutely understand why, on certain very heavy sites, you might want to shift to an SPA model but there are also just so many places you can really do real harm to yourself or your users when going down that path. And so, I worry that these tools came up to solve a bunch of UI or UX and performance related issues with state-based UI just to then re-implement them in a different way eventually. That’s my soapbox on that. If you have any questions or comments, I'm happy to hear them.

Drew: So, as often happens when we talk, we get all the way to the end and conclude that we’re doomed.

Chris: We’re not. I think it’s mostly we’re headed in a right direction, Drew. I'm a little less doom and gloom than I was a few years ago. And as much as I just ragged on tools like Astro and Svelte, I think they’re going to do a lot of good for the industry. I just love the move to mostly HTML, sprinkle in some JavaScript, progressively enhance some things, that’s a beautiful thing. And even though I was just ragging on the whole SPA thing that these tools are doing, one of the things they also do that’s great is, if that JavaScript to enhance it into an SPA doesn’t load or fails for some reason, Astro and SvelteKit fall back to a multi-page app with server side HTML. So, I think that promise of, what was it, isomorphic apps they used to call them a while ago, it may be closer to that vision being realized than we’ve ever gotten before. I still personally think that just building multi-page apps is often better but I'm probably in the minority here, I often feel like I'm the old man shouting at the cloud.

Drew: And yes, as often happens, it all comes round to progressive enhancement being a really great solution to all of our problems. Maybe not all of our problems but some of them around the web.

Chris: It’s going to cure global hunger, you watch.

Drew: So, I’ve been learning all about being web platform native. What have you been learning about lately, Chris?

Chris: I’ve been trying to finally dig into ESBuild, the build tool/compiler I’ve been using, Rollup, and a separate NPM SaaS compiler thing and my own cobbled together build tool for years. And then Rollup V3 came out and broke a lot of my old stuff if I upgrade to it so I'm still on Rollup two and this was the motivation for me to finally start looking at ESBuild which also has the ability, I learned, to not just compile JavaScript but also CSS and will take nasty CSS imports and concatenate them all into one file for you just like ES modules would.

Chris: So, now I'm over here thinking like, "Oh, is it finally time to drop SaaS for native CSS?" and, "Oh, all these old SaaS variables I have, I should probably convert those over to CSS variables." And so, it’s created this whole daisy chain of rabbit hole for me in a very good way because this is the kind of thing that keeps what we do professionally interesting is learning new things.

Drew: You’ll be the Vanilla CSS guy before we know it.

Chris: That’s Steph Eckles. She is much better at that than I am. I reach for her stuff all the time but, yeah, maybe a little bit.

Drew: If you, dear Listener, would like to hear more from Chris, you can find his social links, blog posts, developer tips newsletter and more at gomakethings.com. And you can check out his podcast at vanillajspodcast.com or wherever you’re listening to this. Thanks for joining us today, Chris. Did you have any parting words?

Chris: No, Drew, just thank you so much for having me. I always enjoy our chat so it was great to be here.

Smashing Podcast Episode 61 With Rachel Andrew: What Is Web Platform Baseline?

In this episode of the Smashing Podcast, we’re talking about Web Platform Baseline. What is it, and how can it help determine your browser support policy? Drew McLellan talks to expert Rachel Andrew to find out.

Show Notes

Weekly Update

Transcript

Drew: She’s a web developer and technical writer and editor. She’s currently working for Google on the Chrome team where she’s a staff technical writer and content lead for web.dev and developer.chrome.com. Prior to Google, she spent 20 years as a freelancer and business owner and she’s written almost countless books and articles where she excels at taking complex technical subjects and making them more readily understandable. She’s also an experienced conference speaker, able to deliver a technical talk to teach an audience about CSS layouts or a keynote to inspire them drawing from her wealth of experience developing for the web. So we know she’s an experienced technical writer, teacher and developer, but did you know she once taught a Canada goose to make a bourbon cocktail? My smashing friends, please welcome back Rachel Andrew. Hi Rachel, how are you?

Rachel: I’m smashing.

Drew: Welcome back to the podcast. It’s been a couple of years and theres been a change of day-to-day role for you.

Rachel: Yes, yes. I guess last time I was here it was mid pandemic and I was still editor-in-chief of Smashing Magazine and yes, these days I’m over at Google on the DevRel team with my content team sort of helping to get good docs and information out to our developers about things on the web platform.

Drew: So still in the realms of helping people learn about the web platform and assisting their busy lives, trying to keep a pace of all the new technologies and developments?

Rachel: Yes. Yeah, it’s kind of a perfect role for someone who spent most of their life sort of explaining things to web developers. So yeah, it’s great and within a really great team of people who were very dedicated to talking about all this new stuff.

Drew: So speaking of new developments and also Google, last week was Google I/O 2023, which is always an exciting time for us tech nerds because there are all sorts of announcements and updates from Google. With Google being such a large contributor to the web platform, it then becomes an exciting time to see whats been worked on for the web in particular and see what might be coming out next. I feel like we’re in a place with a web platform where it’s continuing to develop a fantastic pace at the moment.

Rachel: Yeah.

Drew: Those of us who have been working in the industry for a while remember the years when nothing was added in terms of browser capabilities, I mean sometimes years at a time. You were working on the web back then. Was it frustrating that things weren’t getting added or did it just make it easier to keep up?

Rachel: I think it was frustrating. You know, when we had, we had five years between IE6 and IE7 so that was kind of five years that the web platform just basically stopped because so many people were using IE6, although there were new other browsers around you couldn’t really use all the new stuff that they were putting into the browser because the majority of people coming to your website were in a browser that didn’t support it. So I think it was very frustrating because that’s a very, very long time, especially when IE6 had all sorts of bugs and issues as well so that we weren’t getting fixes to things.

Rachel: It wasn’t even new features. We were dealing with problems, like bits of your content disappearing for no apparent reason. So yeah, it was frustrating, but it was very stable. Buggy but at least the bugs that we could list them, there were websites that listed all of the IE6 CSS problems, so you’d hit one and you’d be like, oh yeah, that’s that. I know how to fix that. So we all became pretty expert in dealing with browser bugs basically and knowing what they were.

Drew: I remember things like Peekaboo, was it Peekaboo bug was that era.

Rachel: Yes.

Drew: And what was the website that listed them, listed them all? I can’t remember it’s name now, but the list of known bugs just got longer and longer and longer over time to the point where it became difficult to find the one you were, the particular bug you were experiencing because the list was so long. We were in a place back then where the dominant browser, which was Internet Explorer at the time, was the browser that was seeing the least technical innovation but that doesn’t mean there was no technical innovation because there was a broader ecosystem, but was it ever possible to use new bits of CSS that were appearing in things like Firefox? Is that something we could do when the dominant browser was so far behind?

Rachel: It was pretty hard. I mean, I think all the ideas of things like polyfills and also there was a lot of us kind of pushing the progressive enhancement story as well and saying, look, it’s fine, your website doesn’t need to look the same in all browsers. I think I’ve been saying that for most of my life at this point. And that was a big thing at the time because people were just sort of A/B test in the browsers, you know, there was no... you’re sensing off to your client and they would just open it in another browser and be like, "Oh no, this is wrong 'cause it’s three pixels out on this other browser."

Rachel: And that was very, very common. People would talk about pixel perfect and what they would typically mean is it should be exactly the same as the PDF or whatever that you were working from or the Photoshop file and all of the browsers that they were aware of, or at least both browsers typically. So I think it was quite difficult to push the web forward at the time, you got quite a lot of resistance and you’d often have to just do it anyway and hope you’d get away with it quite a lot of the time.

Drew: We don’t seem to see that so much these days where clients or anyone really is looking at a web experience side by side in two different browsers and saying, oh, they’re not quite the same. Is that because browsers are much more standardized now and they do look the same or have the expectations changed, do you think, because of so many devices that we’re looking at, the fact that mobile devices and tablets and so many different screen sizes that has that expectation gone away?

Rachel: Yeah, I think it’s a bit of both, isn’t it? I think the web browser is how we do everything these days and it’s less of a separate bit of software, it’s just kind of how you use your computer and a lot of the time and I think theres less of an awareness of, oh, we should be checking this for someone who isn’t a developer, we should be checking this in the different browsers. Far more likely, I think, would be someone saying, "This doesn’t work well on my phone." 'Cause they’ll get the email saying, oh look at the new site, and they’re probably on their phone when they get that email and they’ll open it on their phone and then they find, oh, somethings overlaying something or it’s hard to get to something because of a toolbar or whatever.

Rachel: So I think it’s far more likely that a client is going to be coming back with that kind of problem. Maybe they’ve got an older version, an older phone that they’ve not updated and it’s got an older version of software on it or whatever than doing that kind of desktop A/B testing that used to be really common, even with a fairly non-technical client, they would’ve been told by someone that they should make sure it works in these browsers and so they would be doing that checking.

Drew: Yeah, I mean clients would come along to those of us who are building sites for them and they would say, right, we need this site built and it needs to work in IE6 or it needs to work in IE7 and they’d have these very definitive browser versions that things had to work in. And now between, as you mentioned, between IE6 and IE7, there was a multiple year gap, so that constraint from the client could have, it could massively impact your sort of choice of technology or design, couldn’t it?

Rachel: Oh, absolutely. Yeah, I mean that was just sort of fairly standard when you were building sites and at the time I was building sites for clients that would be on the spec for the site would be which browsers that you had to support and you would be expected to test it in those browsers and if it worked in those browsers, that was all good. That was the line that you were following.

Drew: Yeah, I guess even things, even that things were pretty limited. It was a fairly easy decision to make to say these are the browsers that we’re supporting. It’s got to work in IE7 for whatever reason.

Rachel: Yeah.

Drew: It was fairly clear cut, but these days I don’t think I could even tell you what version of Chrome or Firefox or Safari I’m running or if that’s the latest, I’m presuming it’s the latest, but it’s not so clear cut and straightforward now, is it?

Rachel: Right, yeah. You don’t even notice that the things update. They just update and you don’t realize if that’s a major version or just some say security release that’s come out that you need to update to. I don’t think most people know which features landed in which version of a browser. We used to know. We used to know exactly what was available in each browser, so it’d be like, "Oh great, this project is IE8 and therefore I’ve got, I don’t know, display table" or something that landed in that browser.

Rachel: We used to know. These days we don’t know. I know I spend all of my time documenting this stuff and writing about whats new in the web platform and even so, I’m fairly hazy. If you said to me, "Oh, what was in Chrome 113?" And I’ve just done the work on that, I’d be like, "Err, was that in that one or was that in the beta?" So the average developer then you’re not going to be able to keep track of all that stuff. Theres so much stuff landing all the time.

Drew: So it makes the situation quite difficult, doesn’t it, when you might have sometimes contracts with people you’re building stuff for and certainly expectations that theres going to be a level of browser support but it’s not, if you don’t know what versions things are and they move really quickly, it can be really difficult to pin down to a targeted browser version. And this is, I believe it’s the crux of the problem that’s addressed by one of the big announcements at Google I/O. How do we figure out whats safe to use?

Rachel: Yeah, and so this is something we’ve been thinking about actually for as long as I’ve been at Google is we’ve been thinking of this top pain point that we hear from developers that they struggle to keep up with the web platform and they struggle to know what is safe to use, what is okay to roll out in production without worrying about it. Typically developers will be building for the latest versions of a site and then suddenly they’ll realize that, oh, this is broken over here and they just don't, they didn’t realize that and to actually figure out the browser support involves going kind of property-by-property, feature-by-feature to say, can I use our MDN and looking at the compatibility data. It’s all out there, but you have to do that on a feature-by-feature basis.

Rachel: And so we’re kind of thinking about this issue and it always comes up, we talk to a lot of developers and it always comes up as the top problem and so we’re thinking about how we can resolve that. And that’s what kind of came to this idea of, well, can we create this line and say that everything that’s passed this line has interoperability, is kind of safe to use without worrying about it. And that’s where this idea of Baseline came from, to have this kind of moving line that includes all of the features that are interoperable and don’t have any major standout issues. And that’s what we’re calling Baseline.

Rachel: And the whole project is it’s not just a Google thing, this comes from the Web DX community group. So we’re working with other browsers and other people on defining this and kind of coming up with the feature groupings so that we can try and create this clarity for developers that they’ve got a sort of line where they can say, they can look at that and say, oh yes, this thing is in Baseline and therefore I know it’s going to work everywhere in the most modern browsers.

Drew: So instead of saying this, we’re supporting these particular browsers, you’re saying this is a core feature set that’s common across all the currently available browsers. This is a safe set of features and it’s that set that I’m going to be developing for compatibility with.

Rachel: Right, yeah. And that sort of takes that requirement to figure out each individual feature for, and also because we get partial implementations of stuff all the time on the platform and it’s like, so the kind of feature grouping part of this, it is the big piece of work really to actually identify, does the feature completely work everywhere because sometimes there will be support for things. I think one of the things that, an obvious thing that people understand is the gap property in where in Flexbox and Grid and so on. Now you could test for that. You could test for where the gap was supported and a browser would say yes because it was supported in grid layout even when it wasn’t supported in flex layout and therefore there was no way to check for this. And it was quite confusing for people if they were just doing that test. So I think theres these sort of groupings of things is also quite useful. So the things that are in Baseline are things that do work as a feature, even if that does actually involve various moving parts.

Drew: Yes, because theres been a trend from the sort of latest CSS specs to be, whats the word, sort of unifying some of the properties isn’t there rather than-

Rachel: Yes.

Drew:span> ... rather than having individual properties that do the same thing in different context, using the same-

Rachel: Right.

Drew:span> ... keywords across different uses.

Rachel: Yeah, so things like alignment, fragmentation, we’ve got these specifications that deal with sort of alignment across all of the different layout specs, which is great because it means that say if you want to switch from a flex to a grid layout or whatever, all the alignment stuff should work in the same way, but does mean that we potentially get these partial implementations and that’s quite difficult to understand. So yeah, I think it’s things like that and so that theres an awful lot actually goes into the creation of this sort of feature set grouping and we’re not all the way there yet. We’re hoping to get most of CSS and JavaScript done by the end of the year because it’s actually quite a job just to figure out how things all fit together.

Drew: So it’s almost like instead of targeting a version of any particular browser, we’re targeting a version of the web platform. We’re saying-

Rachel: Yeah.

Drew:span> ... look at the web platform as it is here today, these are the things that are universal, that are reliable to use and that’s what we’re going to support. And anything that falls out of that boundary included because the implementation might be patchy.

Rachel: Right, yeah. It might need a bit more care. And it’s not saying to people, oh, you can’t ever use these things, but if you know it’s not in Baseline then maybe theres some things you need to think about there and it might be fine for your project or it might be that it has a good fallback or it’s something that is polyfillable but those are things that you do need to think about on a case-by-case basis rather than just, this should be fine to use.

Drew: I think most of us are familiar with sites like canIuse.com, which you mentioned briefly before. Is this just replicating information that already exists or is it different from can I use?

Rachel: I think it’s different in that, so something that can I use does, and also the MDN BCD data, they work very much on a sort of feature-by-feature basis. They don’t actually cover all of the web platform. Theres definitely, certainly Can I use has made some decisions in terms of how to group certain things. I have a long standing open issue to split out fragmentation from multicar for example, because they’re bundled together, making multicar look harder to use than it actually is because there are fragmentation bugs in there.

Rachel: So they’ve done some of the same stuff, but what we haven’t got there is this sort of full view of the platform and this idea of this is within Baseline, this is out, you still have to go to each thing and make those decisions. Ideally we’re hoping, I mean as MDN are using Baseline on feature pages, they’re rolling that out at the moment. It’s probably saying that we’re hoping that Can I use, we’ll also be able to use and say, "Oh, this feature is in Baseline" as well as that more fine grained data.

Drew: And how do you make that decision to say that yes, this, not only is this supported but this is widely supported enough that we can include it in Baseline. How do you make that distinction?

Rachel: So at the moment we’re going back the last two major versions of browsers and theres been a lot of debate about that β€” as you can imagine. It’s something that’s great to [inaudible 00:17:38]. The fact is I think the line will always be wrong for if we say this is the line, two versions back, a lot of people are saying, "Oh, you should use minor versions of Safari" because we’ve seen some massive features going in doc releases because of the way that Safari do their versioning because obviously a main version of Firefox and Chrome, that’s every month we’ve got a new main version. And so that’s obviously up for debate. Some people are saying we should go further back. Other people are pointing out the fact that just because Chrome has updated, all of the browsers are derivatives that use chromium, they might not have updated. So I think the line will always be wrong, I think.

Rachel: But what it does give is this sort of stable view onto things. And the other thing that we’re planning to do as part of this is to have these kind of moments in time. So at the end of the year we’re going to say, right this cut is where we are at that point is going to be Baseline 24 and that will be a static line. That will be whats in Baseline at this point in time. And then in a years time we’ll do Baseline 25. And I think an interesting thing then will be the difference between those two points because I think a conservative web team could say, "Right, I am sticking with Baseline 24" even though maybe they’re well into 25, we’re sticking with this.

Rachel: But the things between those two lines then I think become the things that you might want to make judgments on rather than having to look at the entire web platform and say, "Oh, can I use this? Can I use that?" And say, "Well, we’re going to use this yearly cut of Baseline." And then the things that came after that that are in Baseline as it moves forward we’ll take a look at and see, oh, I can polyfill that or this is fine as a progressive enhancement.

Drew: It puts me in mind slightly of things like Ubuntu Linux distribution and their long-term support releases that they do.

Rachel: Right.

Drew: They’ll say, "This is the one that we offer long-term support. It’s stable, it’s reliable to use." And so you might adopt that and that doesn’t mean that you wouldn’t necessarily install a couple of key extra, more frequently updated packages or whatever, but you know that the system that you’re working with is sort of frozen in time and supported and is a known quantity going forward.

Rachel: Yeah.

Drew: I guess those who work in very regulated industries who sort of frequently go under contract with customers or suppliers, whatever, to say they’ll provide compatibility with certain browsers as it is at the moment. Surely this would be a very welcome change because these are actually more concrete measures that support can be tied to and it’s a stability that’s more in line with the stability of a binding agreement than an arbitrary version number that some nerd in Silicon Valley might attach to a build of a browser.

Rachel: Right.

Drew: So you can say our platform is targeting Baseline 24 and you could keep that way for three, four years maybe.

Rachel: Yeah.

Drew: And then review it and update.

Rachel: Yeah, I like that. I like that stuff, yeah, the idea, this is a sort of stable thing and I think that that yearly release will become, I think, quite important. So I think I can see libraries and frameworks and so on tying themselves essentially to a stable release, one of the yearly cuts and then moving on. And I think it should be really interesting as well being able to see, well actually how has the platform moved on between those two yearly points? We don’t really have a look at that at the moment. I mean you could work it out, but it’d be quite a lot of work. It’d be nice just to be able to see that and see how things are changing.

Drew: I always enjoy a list of features that are included in whatever. Heres things that you can use that you won't, perhaps weren’t aware of. And I can see how a big list of Baseline features might highlight different things that an individual developer might not be aware of that-

Rachel: Yeah.

Drew:span> ... have arrived on the web platform and are ready to be used.

Rachel: Yeah, I mean the awareness is a big thing. I mean, I’ve been doing, me and a colleague as well have been doing talks, whats new on the web platform type talks and typically introducing things that are interoperable. And every time there will be people saying, "Oh, I never knew you could do that", or "I never knew that worked. I thought that was an experimental thing." And then realizing that it’s actually a feature that’s in all engines. And I think that that’s very, very common. So I think that’s the other sort of side of this is that it also raises awareness of features that now are interoperable, that people have got an idea that the web platform moves incredibly slowly.

Rachel: I think particularly people like us who’ve been doing this for a long time and remember those days. And so people are very surprised, you know, you still see people saying about a new feature, "Oh well it’ll be five years before I can use that." And yet you’re looking at things like container queries and cascade layers. All of these things landed cross browser very, very quickly, which is great. And I think that’s a story that this can help tell as well.

Drew: So this was a big announcement from Chrome at the big Google I/O conference, but you mentioned it’s not just a Google thing is it, there are other parties involved. So who is deciding whats in the collective Baseline? What parties are involved in this?

Rachel: Right, yeah, so I mean obviously we partnered very closely with Mozilla and MDN in launching this. So that actually during the developer keynote we launched this on web.dev and on MDN at the same time on a select number of pages because we haven’t got a full feature site yet. But it was nice to actually show what it would look like rather than it being a kind of theoretical thing. And also MDN published a blog post about it too and their thinking. But yeah, the work has been done within the Web DX community group and that group has representatives from all of the browsers and various other people including interested developers.

Rachel: Anyone can join that group and be part of those discussions. So that’s where we’re also asking people to go and comment on this stuff rather than, I mean people are very welcome to come and talk to me about it, but in terms of getting sort of information out there and discussed by the wider group, raise issues on the Web DX community group site because that’s where the people are who are making the decisions. And at the moment it’s just fantastic to be getting the feedback into that group so that we can actually see is this solving a problem, what problems maybe we’ve missed and be able to talk about that.

Drew: So it’s a broader community effort, but it just so happens that the major players Google, Mozilla and everything are putting a lot of time and effort into it and really backing it as an idea.

Rachel: Yeah, yeah. And I think that’s something that as DevRel, you know, as developer relations, that’s kind of what we do. We try and bridge the gap between browser engineers and spec writers and the developer community. And so I think that’s something that we can do as DevRel for the web is to actually bring forward these things that we think might help and see where we can take them.

Drew: Now I’ve heard about the Interop 2022 and now 2023 initiatives. Does Baseline relate to Interop at all? Or maybe you could talk us through that where it fits in?

Rachel: Yeah, I mean it’s kind of the same group of people certainly as Google who are involved with those projects. So the Interop project takes a set of features that if it’s based on web platform tests, so it takes a set of features that have some sort of interoperability problem. So it might be that they don’t work in one or more browsers or they have sort of bugs that are causing pupil problems. So we’ve got this set of features and then over the year all of the engines work to implement or fix those things. So we’ve kind of got a score, a scoreboard where you can go and look and see how everyones doing.

Rachel: So the Interop project works to fix known issues, either make things interoperable or fix books and things that look on paper like they work, but have some sort of problems. And so that project is getting more things essentially into Baseline. So they’re linked in that way and they’re a lot of the very similar people are working together on those from the browsers. So I think in terms of the relationships there and the fact that Interop did bring, for the first time, all of the vendors together in this sort of common goal to make the platform better, theres definitely a link there in terms of this is what we care about. Whereas Baselines kind of from the other side, it’s saying, well, okay, what is there? What is interoperable? What can we already use? So yeah, hopefully things like Interop will help to add more things to Baseline as we go along.

Drew: So it is basically just identifying things that could potentially go into Baseline, might be nearly there, and then swarming on those features to get them across the line and get them interoperable and usable on the platform because they’re seen as important or significant in some way.

Rachel: Yeah, and I mean we know that that developers aren’t going to use things in general unless they are available across all engines. So it’s kind of in everyones interest to work together to get to that point because then people use the stuff that we’re building so that, yeah, it’s said so they kind of work very well together. And I think it’s just this sort of spirit of collaboration and trying to make things better for developers.

Drew: We’ve talked about how developers might target, in past, a browser version and now we’re saying would target Baseline, but it works the other way around, doesn’t it? If the frameworks and the tools that we are using as dependencies in our projects, they can also declare that as a level of support. Is that right?

Rachel: Yeah, absolutely. I think that’s something that we’d love to see how a framework or whatever you could say, everything that is used by this framework is Baseline or is Baseline 24 or what have you. That’s going to give a lot of clarity to developers to not then need to fish around in the framework and find out what they’re doing to make sure 'cause if you’ve got to do a certain level of browser support in your project, you need to make sure that everything you use also has that level of browser support so that it could definitely make that a lot clearer.

Rachel: And I think also things like publishing articles. One of the things that frustrates people, and I know as someone who writes and edits a lot of content, is if people get halfway through an article and then they find something that is experimental or is so new or only works in Chrome or whatever, that’s really frustrating because you think, oh, I’ve found the thing that helps me solve my problem. You’re working through it and then you’re like, oh, that’s not coming 'til next year. And so have been able to put on an article, everything in this article is in Baseline. That gives you a lot of confidence to go forward. So I think theres lots of uses for this out in the community and that’s something we really hope will happen, that just to give that kind of clarity to developers.

Drew: It’s that last section of an article, isn’t it? You’re reading along about some interesting technology and then it comes to the section of how you might work around it for the browsers that don’t support it.

Rachel: Yeah.

Drew: I thought-

Rachel: Exactly.

Drew:span> ... we were into a good thing here.

Rachel: Yeah, 'cause when you’re searching, you’re searching to solve a problem, things come up. It’s very frustrating if you realize that it’s a year away or other browsers have said we’re not doing that or whatever, you know? So yeah, I think theres a lot of opportunities for clarity for people who are writing and for developers of libraries and frameworks to actually just make it very obvious to developers what the status is.

Drew: And things like WordPress themes for example, or any of these sorts of things where you’re taking somebody elses code and making it part of your project to know that what level of support in terms of web functionality is in that is invaluable. I guess it would make sense for things like tools that any tool that gives you code to embed into your site, be that a Stripe checkout or a live chat widget or any of those sorts of things, I guess it would make sense for them to declare their state of compatibility too.

Rachel: Yeah, yeah, it’s just kind of a shorthand. It saves you having to do all of that investigating for each thing that you use. And we know that every website these days has tons and tons of third party stuff in it. We’re not all sitting down with Notepad anymore and carefully crafting our websites. So I think anything that makes that easier and allows people to show the status of things is really helpful.

Drew: It actually is a really simple concept, isn’t it, to say heres the set of features, they’re well supported, we’re giving it a label, we’re documenting it. It’s actually so simple, it’s really rather genius I think. It’s some amazing work that’s been done there by everyone involved.

Rachel: Yeah, I think it speaks to a lot of what I’ve thought about over many years in terms of that kind of clarity. And that’s always been my thing is making things clear to people, making things seem straightforward rather than trying to make things complex. And so I really love being able to be involved with this and bring it forward.

Drew: The HTML spec for example has a process for an element or an attribute to be deprecated. So things get removed from the spec as they become obsolete or they’re replaced by a newer specification. Is it possible for features to drop out of Baseline once they’ve been included?

Rachel: It could be possible. It’s one of the things we’ve talked about a lot. I think really the devil will definitely be in the detail with all this stuff. And that’s one of the things is well what happens if something essentially gets broken? Maybe one engine does something which causes a problem with something. There is a possibility that yes, we’d have to remove something. That’s definitely something we’ve talked about. I mean hopefully browsers aren’t going around breaking stable features, but it is a possibility or something might get deprecated although we tend not to fully remove things from the web platform very often. It’s more that we say, "Yeah, maybe don’t use this," but there is a possibility that something that is in Baseline could start to have a problem because of something that one of the engines does.

Drew: I guess then that’s one area where these sort of yearly cuts as you’ve described them, become sort of quite useful in that something might have appeared in Baseline 24 but then in Baseline 30 it might be gone and there is a way of having a distinction there.

Rachel: Yeah, and it would also highlight that stuff I think a lot more clearly than we have a way of doing at the moment because I think hard to know what things have actually been deprecated on the platform. A lot of things that are deprecated are things that are only in one engine and therefore would never have been in Baseline in the first place. But yeah, it is possible as things move forward that that would happen and it would make it clearer.

Drew: And such as the way of the web, we do deprecate things, but as you say, they don’t ever go away really.

Rachel: Yeah.

Drew: We don't-

Rachel: I was just saying maybe don’t useβ€”

Drew:span> ... tend to remove things, you know, can still use the, I’m guessing you can still use HTML font tags because we don’t break things once they’re standardized.

Rachel: Yeah.

Drew: Even though nobody would ever recommend using them, they’re still going to work in your browser because sites have been developed to that standard and the browser-

Rachel: Yeah.

Drew:span> ... will continue to support it. I guess, in a way, theres Baseline forms a little bit of a positive pressure. If a feature does get broken, then the fact that it was in Baseline and the whole community is relying on it being there is a factor in prioritizing what gets worked on by that particular maintainer of that browser engine. They’re going to see that, no, this is important, we need to fix it pretty quick.

Rachel: Yeah.

Drew: So hopefully it’s a sort of positive pressure in that regard. There seems to be so much really in development and coming to the web platform. Are there any particular things that you’re really looking forward to seeing becoming interoperable in the coming months?

Rachel: Yeah, I mean theres a bunch of interesting stuff. I’ve always been interested in the things that look at things that developers are already doing. So they’re using JavaScript to do it, or what have you, and then having them built into the platform because obviously things that are built into the platform we can build in things like accessibility and also performance. Things that tend to perform an awful lot better if they’re a built-in feature as opposed to being JavaScript on top. So theres sort of interesting stuff from the open UI group. The next thing that is about to land in Chrome is the Popover API. And of course popovers are something like everybodys building all the time.

Drew: Yeah.

Rachel: And I think a lot of these open UI things are very much those sorts of features that pretty much every developer, every front end developer has built on numerous occasions. And every front end developer has tried to solve the accessibility issues and the performance issues and the sort of weird bugs that come up when they interact with other things. And so the fact that these are getting actually built into browsers, I think, is very exciting because it just, it’s a bunch of work you don’t have to do and it’s probably going to have better accessibility and so on than most people are going to be able to manage for themselves and it gives something to build on top of as well, you know, can add things to them.

Rachel: So yeah, so I’m excited to see Popover and in a similar sort of vein is the work on scroll-driven animations because that’s a thing that people like to do and is very hard to do well, you know, having things that animate on scroll and that, again, is something that is coming in. It should be in Chrome 115. So it’s, again, it’s these things that we’re doing on the front end of the web and we’re actually able then to build into the browser. I’m always very keen to see those 'cause I think they solve a lot of problems.

Drew: Yeah, definitely. I mean anywhere where a developer has to mimic something that you think is native browser UI and you’re trying to build it yourself, there are so many places to go wrong, aren’t there?

Rachel: Yeah.

Drew: If you’ve ever had any of your work through an accessibility audit, you know that it’s things like modal dialogues and all these sort of things that constantly will contain flaws that need to be addressed because theres just so many things to think about in terms of keyboard focus and clicking away and all these different subtleties that you need to make sure that you take care of, that is, as much as anything, as much as it being bad for accessibility, if you get it wrong, it’s a massive waste of time for all us developers doing this all ourselves over and over again when it just makes sense. Most apps will have some sort of modal or popover functionality. So yeah, it makes complete sense for it to be part of the platform implemented by the browser vendors in a way where it’s accessible and it’s just a good solid layer to then build on top of in terms of styling and yeah-

Rachel: Yeah.

Drew:span> ... it makes total sense. It’s a exciting way to see the platform go.

Rachel: Yeah and I think, because the other thing with everyone building their own thing is that a lot of people don’t build their own thing, they rely on a third party thing and quite often things people are relying on are actually really old and they haven’t been updated to, they might have issues with accessibility or whatever and they haven’t really been updated for more modern browsers. And so it’s sort of, I think the more that people can use whats built into the browser, the sort of better experience that the end user of the site is likely to have.

Drew: So your team at Google maintains a bunch of resources to help developers keep up-to-date with the web platform. What are those resources and where should people go to look and find things? What would they expect to find there?

Rachel: Yeah, so we’ve got web.dev and developer.chrome.com are our two sites that DevRel own. It used to be, back in the day, when I sort of arrived, there was a real mixture of things on each site and a sort of thing that was commonly said was that Chrome were using web.dev to pretend things that were only in Chrome were stable APIs, lets say I don’t think anyone ever intended to pretend that. I think there was just a slightly disorganized content strategy. So as kind of part of the preparation for Baseline, because I wanted to make sure that we could be clear because if we’re talking about developer clarity, it’s pretty bad if all of our stuffs in a mess. I started moving content. And so now, certainly all the newer content, there may be some older stuff that we haven’t tracked down, but the newer content, if you go to web.dev, you should really be seeing stuff about stable APIs.

Rachel: So things that are interoperable and also things that are coming onto the platform. I do a sort of whats new on the web platform that includes some new stuff from all engines. So that kind of looking at what the broader landscape is and also things like our best practices. So things like about performance, which while some of the tooling is Chrome-only, raising the performance of your site, it is going to help in all engines. So that’s whats there on web.dev. So that’s kind of the practical side of things. You’re building a website, you want some advice. That’s what we’re doing there. And I try very hard to make that about the web, not about Chrome and that’s the sort of content there.

Rachel: But obviously we are a team that’s supporting Chrome and supporting the things that Chromes releasing and so we do that over on developer.chrome.com. So that’s going to be your new APIs. You want to find out about popover that’s landing, there’ll be an article about that soon. So all the things that Chrome is doing for the web, essentially you can find on developer.chrome.com. So that will be experimental things or Chrome-only things, things that are Chrome-only for now, all that stuff is there. And I hope that brings a bit of clarity to our content and that we’re not trying to pretend anything. We’re just trying to be clear about what we’re doing and how well supported it is.

Drew: Great. So we’ve been learning all about Web Platform Baseline. What have you been learning about lately, Rachel?

Rachel: Theres always something interesting to learn about. I’ve done a couple of things. I’ve been learning Python because it’s a language that I, for whatever reason, never learned. I’ve learned various languages over the years, but I do less web development these days and more kind of comparing of data sets and Python is the language that a lot of that stuff is done in. So it’s quite fun to learn new language anyway and it’s useful for the sort of stuff I tend to find myself doing these days.

Rachel: And I’ve also been thinking a bit about the whole generative AI space and in particular as a content lead, how do we prepare our content to make it more useful to those kind of models because theres a lot of stuff about asking questions of a chatbot and so on. And so I’ve been kind of just starting to read around that subject a little bit and start to see, well, if we’re preparing content, how can we be making that more useful for that kind of thing and that interaction?

Drew: If you, dear listener would like to hear more from Rachel, you can find her on the web at rachelandrew.co.uk where you’ll find links to her socials, her writing and numerous other projects. And you can find her writing regularly about the web platform at web.dev. Thanks for joining us today, Rachel. Did you have any parting words?

Rachel: Let us know about Baseline. Comment and raise some issues, or just join in the chat on the Web DX community group, on the GitHub repo there. We’d really like to hear what you think. This is, we’ve been talking about it internally for a long time and so now we’ve got it out there and I think the work starts now and the discussion with the community starts now. And so we’re all very, very excited to read the feedback and find out what you think.

Resources

Smashing Podcast Episode 60 With Mei Zhang: What Is Design Storytelling?

We’re talking about the process of design. How do you build a process to enable your best work? Vitaly Friedman talks to designer Mei Zhang to find out.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: She’s a senior UX designer and a UX consultant with a strong product and strategy background. As a kid, she was busy creating arts and fell in love with UX while studying industrial design in college. She has spent her career developing design systems and solving problems for e-commerce products that are loved by millions of people around the world. Now, she also loves helping designers uncover root causes, explore multiple directions, and identify sweet spots between user and business.

Vitaly: She’s currently working with Booking.com and resides in Amsterdam, Netherlands. Of course, she is a cat person, as it often is in the Smashing Podcast. And in her spare time, she can be found painting, skiing, serving her cats β€” there are a couple β€” writing on her design blog and learning about design, business, leadership and management. We know she’s a wonderful UX designer, but did you know that she used to swim in order to participate in the Olympics? That was one of her dreams, which unfortunately didn’t come true. However, help her have a lung capacity of over 5,000, which is a big deal. My Smashing friends, please welcome Mei Zhang. Hello, Mei. How are you feeling today?

Mei Zhang: Hello. Hi, everyone. I’m smashing.

Vitaly: Oh, that’s wonderful to hear. How are you? Is it cold out there in Amsterdam these days or is it sunny?

Mei: Luckily, it was sunny in the couple of days. In the past couple of days.

Vitaly: So, it’s better. I have to ask this story. Swimming in the Olympics. Why did you decide to do this? Because I guess you were playing with design and UX already at this point. Or was it before or prior to design?

Mei: Oh.

Vitaly: Why did you decide to take on this challenge?

Mei: It was definitely before the design career. I was in my elementary school and I fall in love with swimming. And as a ambitious little girl who want to have some targets. So I need to compete for the Olympics because this is something very challenging. But unfortunately, I didn’t go through the competition. But I think it definitely gave me something, make me a stronger person. Not only physically, but also mentally. So I really appreciated that.

Vitaly: I have no doubt at all. We’ll probably bring up β€” I’ll probably bring up this question about how it in the end influenced your UX and design career. But maybe before we dive into that. And maybe you could share a story about how did you even end up in this design and UX world? Maybe you could share a bit about your journey and what brought you where you are today.

Mei: I think what brought me where I am today is the iPhone 4. I got iPhone 4 as a gift at the first year of my college and then I get to learn about human-computer interaction which published by Apple. And another fun fact, the human-computer interaction guidelines are already there in 1987. That is what I remember. Whoa, it’s a long history of something that I have never heard about. I start studying basically X design by myself. I just genuinely really interested in the fancy interactions at that time. What CSS can do for you.

Mei: I was also a Smashing Magazine fan. I follow all your articles and try to do something with CSS and JavaScript. And I think also during my study, people start discussing about what you want as a career after graduation, what industry you would like to join. I was lost at that time, but I know I love UX design and I’m good at it because all my school project was related somehow to human-computer interaction. And, I think, at that time, the IT industry also was booming because people started having Facebook. I think that somehow made me feel like maybe that is something that has a future. So, that is basically my journey into UX design.

Vitaly: But then, you ended up where you are here today. And you have all this. I always reminded of all this UX methodologists and methods and all the ways. And you have created these incredible mind maps as well. But all the things that you potentially need to keep in mind as a UX designer when you are working on a product or on a project. And maybe before we dive there, maybe we could speak a bit more particularly about breaking complexity into something that’s more manageable.

Vitaly: I know that you’ve been working or you are working on relatively or quite complex products. And again, just given this huge amount of all the different methods and options available to you as a UX designer, how do you choose your path? Or specifically, maybe, how do you start when you have a really complex. Maybe an enterprise product or maybe B2B or maybe anything that’s complicated and you need to break it down. How do you do that? What would be your process? And maybe also, your methods to make sense of it all?

Mei: Such a great question. I would guess the first step is always find what is the real problem. What we are designing for. To deep dive into the problems and find the root cause. That is definitely the first step I would choose because the problems also help the designers or people around you to define the process because with different problems you might need different methodologies. And also, the second step will also be identifying the stakeholders. As you mentioned, you have people around you who are genuinely interested or who are in charge of the project. Identify the people around you and what they need.

Mei: The outcome is not only the end product that deliver to the users, but also to. Let’s say it in the simple way. Make your stakeholders happy. I think those are the two basic principles for navigating through what methodologies that I pick. And also, you need to look at availabilities as well. That is, usually happens in the real life work. Maybe for example, you don’t have data for some project. But also, it’s impossible to collect that. Maybe you need to find another method that could answer the same questions that is available.

Vitaly: But then I’m also wondering: you also mentioned data. I’m actually quite wondering because I feel like very often, I end up in this dilemma with teams I’m working with. Where there is a person or there is a team, they have a very strong design vision. This is how it should be. It’s usually based on research and usually going to be very much focused on user needs or customer needs. A very customer-centric view. But then sometimes, it clashes against the business idea of how things should be and the business direction of where the company wants to go. And sometimes, I feel that there is this really strong tension between where the designer wants to go and what the, let’s say, A/B testing tells.

Vitaly: And maybe, testing is such a short-term thing. Where you test if it works now and then. It might be a good thing, of course, to improve things and that will drive conversion, though. But where do you see? How do you see this resolving? How do you get to this balance between doing something? Because again, we run A/B tests and this performs better than this. Against the big design, the grandiose, so to say, design vision that exists in designers’ heads based on user needs and based on business needs.

Mei: First of all, I don’t think those two A/B tests. Let’s say A/B testing and a great vision in the designer’s head is something that cannot exist together. I think they can co-exist because A/B testing is just one of methodologies to validate the concept. It’s the small steps to take you towards a big vision. It’s not a easy task, but it’s the designers who need to guide the product managers or guide your team towards the vision. That is actually sometimes underestimated by the outside because we have a lot of things showed to us designers because we are visionaries.

Mei: We have a vision, so we need to take that through. What I usually do is first, definitely have a great relationship with your product managers because you are actually working together as a whole to reach the vision. They are more business of course, and they are more data-driven or metrics-driven. But on the other hand, you are the user advocate. Build a good relationship and trust with your product managers and work together on a daily basis. It shouldn’t be like, "Ah, I don’t agree with you". Or something like this. But more be like, "Let’s sit together and make a great thing or make a great product."

Mei: And I think sometimes, I also feel like it’s really important to have a businessman side as a designer. Especially if you are working for an organization that’s aimed for profit, your responsibility is also to keep the business running. The business goal is also your goal as a designer, as well. Your responsibility is to craft a great user experience that will improve the business or make the business stronger. For example, learn about business metrics, understand the view from the product side. And also, sometimes I find what is helpful for me is to define user behavior metrics because for A/B testing.

Mei: Sometimes you, say that, maybe some business metrics doesn’t increase but the user behavior metrics were improving. You can also use this as a argument to get things through. It’s not only about A/B testing. It has to be improving business. But if you can prove that it’s going to improve the user experience and the user experience can lead into long-term business growth, then that will happen. And also, I think what I’m doing very often in the past is also to break the vision into smaller pieces that is experimentable.

Mei: In this case, it’s also help as a designer to validate your ideas. I know we are all, as a designer, we’re all proud of our ideas and we believe that’s going to work. And most of the time, of course it’s going to work, but we also need to use data and argument to support our ideas. I would say it is something. It definitely bring a lot of positive side from A/B testing to build a vision.

Vitaly: The reason why I brought this up actually because I’m just coming from a project where this has become a big issue. Where essentially, it seems like there is this very strong tension between, again, the ideas of we need to do something now and drive conversion up now. But again, we also need to think about the long-term goals. And very often, what happens is you might be improving things by showing a new set of popup very prominent and then a bit more prominent, then a bit more flashy and then even more flashy. But then it’s actually going to hurt your long-term goals. I actually want to maybe dig a little bit deeper. When you speak about user behavior metrics or any ways to capture the quality of the design work basically done. Could you maybe share a few of them that would be most important in your work?

Mei: I’m thinking about something related to the example you just gave about the flashing popup. One example I can think of right now is that, in the past, I also had experience where the product was pushing for metrics. They’re making things rainbowy or flashy. I think definitely what helped was to conduct user interviews to understand what is user’s point of view of that. They’ll be like, "Oh, I think this brand was just to trick me." They also understand the black UX part or the bad. Sorry. The bad UX pattern that try to trick them into something.

Mei: And also, something help me as well is to look into the long-term user flow because they tend to only focus on one metrics and improve that. But have you looked through the whole flow? Maybe the click rate went up, but in the end, less people are converting. Then you cannot say that this is a good solution. You just. Try to find different metrics that can, to build your argument with the product. And also, try to, in your daily basis, try to make your product manager or your product colleagues to more understand what is a good user experience.

Mei: Because I work with all kinds of product managers and some are like you mentioned in that case. Really focusing on one metrics and don’t care the UI. And there are also product managers who really understand what is UX experience. I want to do something good for the long run. Try to also influence your product managers to understand what is good for the long run. Because in the end, someone has to clean up the bad UX in the end because that will lead into something in the future.

Vitaly: Absolutely. I think it also heavily depends on the culture that the company has, the organization has and how the teams are organized. And sometimes, you see that there are. Whenever everything is siloed, you will end up in the situation where a silo would have very specific goals and they don’t even know what the other teams are doing. Or how their things that they may be performing or they’re working on in the vertical effect everyone else. This is more probably a slightly broader question in there, as well.

Vitaly: Maybe you could also share a bit of insight about some of the really complex challenges that you are facing at this moment. And something that you’re working on that, I would say, keep you awake at night. Hopefully not, but maybe there are some things. Just get sense about what you’re working on as well at the moment.

Mei: I couldn’t share details of product strategy with you inside.

Vitaly: Sure.

Mei: Because of the NDA stuff with my current employer, but I will say, the current challenge definitely about how to level up your people skills and communications as a designer through your career. Because I’m running a very big project right now. Basically, more than 30 stakeholders on the play. I really need to learn connecting people. How I can connect with people first by establishing yourself with your activities in your field. And also, to connect people and find the right person for the right question.

Mei: And also, at this point, you need to try to work through other people. I don’t know how to put it in the beautiful way, but more enable others to contribute to the project. In this sense, you need to really articulate the project and the impact of this project. So you can onboard people and to create a win-win situation where they can learn something from the project or they can do product improvement in their services, project as well β€” so if they would like to be onboarded and work with you.

Mei: Think that was about communication, connecting the people. But the most challenging part is leading the whole project. You need to be super organized, which I was not that great before. You need to have a roadmap of this project and keep updating this every day. So you can visualize what is going on. What are the updates, and also identify the key stakeholder for each phase of the project, of the activities. And how to communicate with them. And you need to visualize them, document them to help you organize the whole project. I guess that was the most challenging part for me.

Vitaly: That doesn’t sound like a lot of moving pixels around in Figma, though.

Mei: Which, I actually missed that part as well. I’m not sure if this is a common case, but I guess so. When you are running a big project where we are not in the phase of creating new ideas and Figma files. It’s more communicating, documenting, pitching or about the project.

Vitaly: This is just a normal state of things, I guess, all the time. Guess I become this person who would move away from, well, sketch at the time and Figma to spreadsheets. I don’t know. Much of my life these days is basically organizing things and also documents in Dropbox Paper or Google Doc. Just organizing things in a way that’s available, accessible to everyone else. It also goes, for example, for organizing meetings. I actually decided to take a design approach to design the best meetings experience. And this is really difficult, I think.

Vitaly: In general, processes which involve people be hard, of course. I’m also just curious about your take on the process because I know that you. Meetings including, for example. Because I know that you often say that you need to design your design process. And this is, very much plays. It’s a melody, beautiful melody to my ears because this is what I’ve been doing to some degree, I guess, for the last couple of years. I’m wondering though, how do you mean that? We’re designing the process. We need to figure out the right way of working for us, for the team, as well.

Vitaly: How do we design meetings? How do we? Do we do stand-ups? Do we do written stand-ups? When do we do retros? How often do we do this and that? Maybe you could share a few things that tend to work better for you that you learned working well. And something that you definitely advise as a consultant, as well, companies do really stay away from when it comes to design process.

Mei: I can quickly tell what companies should stay away for, in terms of a design process.

Vitaly: Sure.

Mei: Is to, for the sake of having a design process, to have a design process. Regardless of what problem you are trying to solve. I still remember in my career there was a company who really want to have a persona. I’m like, "Why we are going to create the personas?" They were like, "Oh, because everybody’s having a personas for this project and it’s a key important deliverable for understanding our customers. So we need this persona." So I’m like, "But do you have any?" I trying to explain persona is more you need to conduct interviews.

Mei: You need to gather datas and then you come up with someone that represents the key problems or key pain point of your customers. It’s not like you just create a persona out of a workshop with some people, internal colleagues of your company. So they’re like, "Oh, okay. Then we need to gather data or we need to have a lot of insight of the persona." But we couldn’t because they don’t have infrastructure to try user behavior. So I’m like, "No worries, just interview eight customers. It’s a good number. And try to find what are the common pain point or what’s a common desire or need they have? And then you have a persona."

Mei: That is something I learned through my career. Oh, you shouldn’t just say, "Oh, this thing looks fancy, the personas or something else. Oh, customer journey map, we need that." It’s not what you’re trying to understand and what do you have. And based on those two aspect, to try to find a methodology that really serve your needs or can help you move forward. This is definitely not advised for people or company. I think what I definitely enjoyed is to design, as you mentioned, design your own design process. Because when I was studying UX design, we have this design thinking process and everyone tried to follow.

Mei: Define a problem and try to understand and create something, iterate. I was also one of them trying, really into that. But then, when I start working I found, this is not always the case. You need to find what is the most important phase of the project. For example, if you are tackling a very complex problem and you don’t even understand what exact problem it is, then you need to spend a lot of effort in defining the problem phase. Or if it is a project really focused on deliverables, we need to shape a marketing video or we need to shape the design within two weeks. Then, maybe you need to spend more energy in the executing phase of the design.

Mei: While we are working, it’s very hard to have everything. To have a very complete design process where you have a solid deliverables for every phases. But you need to figure out which phase is the most important based on the needs and the problem and try to shift your energy there. But that doesn’t mean that you should skip some process. You can still have them, but it’s more trying to say what you have already have and not create new words on there. I think that’s what I learned from design your own design process.

Vitaly: That’s fine. You also, I always keep coming back to this. I don’t even know why. But I always feel that many of the colleagues I’m speaking to, they’re always just don’t even know how to navigate that space of UX methods and models and process. And sometimes, it feels like there is this huge amount of all these different things that very different companies are doing. And they’re inventing for themselves or using some of their other established, already established methods. Luckily, and fortunately for all of us, you have created two mind maps. Which I found really useful to be able to navigate the space in a bit more predictable way. Maybe you could tell a bit more about this and how it helps you in your work.

Mei: A very good question. At the beginning, I was just writing them down for myself. It’s more like library where what is available there and you can grab them as a building block to build up your own design process. But it’s not like something can mapped out the how of those design process and those methodologies and what it can bring. What I’m trying to say is to be flexible about your design process. To not just see the articles and I need this and this in exploration phase. But maybe you don’t need it based on your problem or what you are trying to design. Try to be flexible.

Mei: And also, I will say sometimes it’s more of the experience you get. When you are first time. For example, if you are conducting a user interview at first time or maybe you are doing a survey first time. It’s more you start learning how this methodology work and how you can improve based on the methodology. But then, as you try multiple methodologies in your career, you can reflect on. Well, this can help and what do I need to conduct this methodology? And then if you keep reflecting on them, it will help you in the future to decide, do I need this methodology in my design process? Will this fit the timeline? Will this fit the requirements? Will this be the best methodology to answer the business questions?

Mei: Then you start reflecting and then you can say, "Then, I don’t need this. Oh, I really need this methodology." It’s more, if you haven’t had a lot of experience, try to try them out. Even if you are not working or you are just doing an internship. But try things out to understand how those methodology work. And then, later on, you can. You get a next experience, then you can decide when to use what. So that would be my take.

Vitaly: That’s interesting because I think that to many of us, it’s... I don’t know... Many companies have the process. This is the process that they’re following through. It doesn’t matter what department. Doesn’t matter what their designers are working on. There is the process. This is how we work here kind of thing. And what I’m hearing from you is that basically you might need to be adaptive there. So if you are, say, switching from one design team that you’re working with or another team that maybe have different experience.

Vitaly: Maybe have different preferences. Maybe most of them are working remote. Maybe most of them are hybrid in one way or the other. So adjusting the methodology and the process based on the team that you have. The only thing that’s required there to get it right and to do it well is to know and be comfortable with the different techniques and different methods that are out there. Does that make sense? Is that pretty much what you do?

Mei: Yes, thanks. Yeah, definitely. That is a very great summary of what I just said.

Vitaly: But I think it is also very interesting because it can be quite challenging. Do you find yourself sometimes maybe stuck because you have a particular way of approaching a particular problem with the design team? But then you might have very different levels of experience on the team? You might feel like we need to do something because we might not be able to get things done in time. Or we are not moving along fast enough and I need to switch gears and move something to another methods.

Vitaly: The reason why I’m asking or what I’m asking here is that not only do we need to be able to switch and be adaptive moving from one team to another in your process. But also, as the process is in place, do you feel like sometimes you need to shift gears and change things and plug in something else because what you have is not working?

Mei: Yeah, definitely. I think a very great question. This is a daily life of designer, I guess.

Vitaly: The sad life of a designer, isn’t it?

Mei: Yeah, the sad. We have a dream design process defined before project or before we start working on something and maybe one month later something changed. Then you need to be flexible and adapt to it. We decided to collect user data because the PM was super into quantitative data and we need that. But our source was not available at that time. So we need to really think about, what can we do? Because we are not going to run the survey anymore as a design team or. What I did, I think it’s a really good step. I was also not super experienced at time. I’m the newbie in the company.

Mei: I bring this to the design team. So I never feel shy that if I couldn’t solve them myself, I should consult with other colleague. Then we start doing some root analysis. Why we need this survey? Because we want to discover problems. We don’t have a clear problem. We want to discover the problem. Then do something to also discover the problems without the researcher that can help us send the survey. Then we said, "Maybe we can do a diary study with UserTesting.com. We can set this up together."

Mei: So we did, in the end, a diary study. Those two methodologies actually serve the same purpose in the end. I guess you need to shift when you can, I think, maybe try to have another methodology that can give you the same insight or maybe. Also sometimes, just trust your gut feelings.

Vitaly: Sure.

Mei: If some data is not available, you can validate them later.

Vitaly: That’s right. But Mei, I have to ask a very provoking question at this point. And I’m sure that some of the listeners listening here will be, "What is this? What is he asking?" I do have to ask, do you think that chaos could also be a process? The reason why I’m asking is if you have a relatively small team. Imagine you have maybe two, three designers. You do not have this. And surely, we need to have research. We need to use some methods to make things work. Sometimes, you see companies trying to over organize things.

Vitaly: If you have a team of two or three, do you need daily stand-ups? Doesn’t seem necessary because people are there in the room talking all the time, anyway. It’s not like you have this big organization where you have five departments all doing different pieces and all that. Sometimes, I see companies feeling very comfortable in being extremely unorganized. Being chaotic. Not even having proper documentation and nothing. Obviously, the problem is that you actually end up with the knowledge being stuck with these people. If somebody leaves, that’s obviously an issue. Onboarding is a problem. But they feel like you can be very productive and very successful without having a proper process and pretty much a chaotic environment.

Mei: To be honest, I have to say that I agree with you.

Vitaly: Oh.

Mei: I think to not have a well established progress or being chaotic may be the norm for designers. Because we are creative beings. Sometimes, you get ideas or you discover something just randomly while understanding your customers, users. But I would say totally agree with you. If you have a small team and you are working very closely on a daily basis, you might not need to follow a design process super strictly. It’s more like, "we are in the understanding phase, then what can we do?" And we discuss together. It’s more like you just need the rough framework to guide you through. And the iteration will also be very fast-paced. You don’t need to go through everything then iterate again. Totally agree with. Another point, I feel like the design process is sometimes also more for the non-designers. Your product stakeholders in the organization or people who are not in your project or another designer who don’t have any background knowledge. It’s more for them to help to organize your self-process or just it’s for your own deliverable. Your ideas that work. To have it to communicate to the outside. That is what I have to say.

Vitaly: That makes perfect sense. Well, as we’re wrapping up here, I do have to ask you of course. But this is a question that I’m asking everyone and I’m really curious about your answer as well. Do you have a particular dream project? A really complicated challenge? A really complicated UX? I don’t know. Monolithic challenge that is probably so hard that it’s pretty, almost impossible to think about it? Just to give you an idea, some of my colleagues when trying to answer this question, they start thinking about, "Oh, I would love to design some, I don’t know. A deck or I don’t know. A control center for Rocket Science Center or anything like that."

Vitaly: Some other would say, "I just want to be able to work with United Nations." It goes really different ways. I’m just curious, do you have a particular dream project or dream task maybe or dream challenge that you would love to tackle one day?

Mei: I will say, I will go for the second direction. I really want to work for the sustainability topic or some project for NGOs because I have been spending my career working for E-commerce company. I really want to contribute to some non-profit organizations that, for example, sustainability or a turtles saving organization. I think what I can help them is my experience in E-commerce to convert people. Maybe I can convert more people doing the good stuff. That would be something I’d definitely love to work on in the future.

Vitaly: Maybe just totally ruining the arc, the story arc of the podcast. I do have to hook onto the thing that you mentioned about E-commerce because I’m just really curious. I spent quite a bit of time around E-commerce as well. Maybe you could share a few stories about things that you learned by working in E-commerce. Thing that’s how customers think or some important things to keep in mind when it comes to E-commerce UX in general.

Mei: I think what I have learned is your customers are smarter than you thought. That is what I have learned. Sometimes, you try to trick them. Sorry. Another dark part in UX I’m talking about. You think you can convert them somehow, but actually they know. They know what you are doing. It’s not the customer of 10 years ago on the E-commerce platform compared to right now. They’re very press sensitive. They compare with multiple competitors. They compare and they make the right decision for them. And that is also related to what we talk in the beginning of the podcast.

Mei: You have to focus on the long run to create a great experience for the long run. To bring them benefit in the long run because they understand everything. And you cannot. If you got them converted once, you might not get them converted the second time and they might leave you if they have really bad experience. I think right now the E-commerce world is really competitive, but also that is good for the customers because they have multiple choices and then they have learned everything. I think that is what I have learned from the E-commerce experience. The customers, they also grow as you grow.

Vitaly: We’ve been learning about UX and design today, but if there is one thing that I do have to ask, Mei because I know that Mei is very much interested in the something that maybe bothers or excites or inspires all of us. Who knows? I know that you’ve been playing with ChatGPT and AI in general, Mei. Do you see? I don’t know. Do you see this wonderful tool, AI as an opponent to us? Something that we need to fight or something that we’re going to embed in our daily workflow and just make the best use of it? How do you use AI today?

Mei: Very good questions. I think, we should see AI as our friends. We’re holding hands together.

Vitaly: Good friends.

Mei: And help us.

Vitaly: The best friends or?

Mei: Good friend.

Vitaly: Good friends.

Mei: Good friends for now before they replace our job, which will happen, I guess. Recently, I started using ChatGPT to write write documentations or write presentations for me. It’s still, you need to write down, get the key point and then ChatGPT will help you generate a good sentence. It saves your time as a designer. You could spend more time in Figma or creating new ideas or creating something or dreaming vision for your company for the coming three years. I think definitely AI saves our time and make sure we can concentrate on works that requires more creativity.

Vitaly: But I do have to ask a follow-up question. Do you think, Mei, that AI is creative?

Mei: I think, to some extent. They are creative based on basically data and stuff that already exist or they could find on the internet. But they might not be able to dream further. Maybe predict human in 10 years. But I’m not sure. I’m not a expert in AI. I would say they are creative to some extent, but it’s also up to us to think about, do we want them to be creative or not?

Vitaly: That’s a good question. Maybe, we can resolve this issue once and for good once we ask ChatGPT if it thinks it is creative. And if so, then it should better prove it to us. Well, if you, dear listener, would like to hear more from Mei, you can find her LinkedIn where she’s at, Mei Zhang, and also Medium. Medium.com/ThisisMei, if I’m not mistaken. Well, thank you so much for joining us today, Mei. Do you have any parting words of wisdom to the future generations who are going to listen to this very podcast 25 years from now thinking, "What are they talking about? Everything is AI anyway now."

Mei: What I want to share is definitely know AI is something not new, but something innovative in our generation right now. Designers are using ChatGPT to create their daily slides. But I would like to talk to the future generations to maybe being creative or follow your intuitations is something that cannot be replaced by AI. I think I really treasure. I think designers should be really treasured because we have the power that might not be able to replace by any machines and stuff because we are human. We are caring and we are always creative and we can connect the dots. That is something you should develop or treasure as a skill. I think that is something I would like to tell to the future generations.

Smashing Podcast Episode 55 With Tejas Kumar: Is Technology Making Us Redundant?

In this episode, we ask whether technology is making us redundant; will we all soon be replaced with AI? Vitaly Friedman talks to Tejas Kumar to find out.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: He has been writing code since the age of eight and still continues to do so today. He’s a DevRel leader, YouTuber, advisor, mentor, influencer, and has very, very strong opinions about pretty much everything. Previously, he’s worked with G2L, Vercel, Spotify etc picking up things along the way, sometimes as a developer and sometimes as a manager.

Vitaly: Now he lives in Berlin, Germany, but most of the time travels the world equipping and encouraging developers to do their best work, aiming to make the world a better place for quality software. Beyond that, he’s extremely kind, passionate, friendly, and smart. And not that a passes by that him sharing his opinions again on everything Tailwind, JavaScript and people on Twitter.

Vitaly: Now we know he’s a great product engineer and a kind human being, but did you know that he can easily type faster than 100 words per minute when writing code without a single mistake, especially if it’s a life coding session in front of thousands of developers? My smashing friends, please welcome Tejas Kumar. Hello, Tejas. How are you doing today?

Tejas: What’s up? I’m doing good. I’m smashing. I’m smashing things as we speak. I’m also doing smashing.

Vitaly: Oh, wellβ€”

Tejas: Smashing enough.

Vitaly: You always look smashing. Always. I always feel smashing when I see you being smashing in some way or the other.

Tejas: Yes, that’s what my grandpa always used to say. Smash them with kindness.

Vitaly: Oh, really? Wow. This is just the perfect beginning of the interview. Now it’s so nice to have you here. I remember everything from our strange bus trips to our walks in somewhere between Croatia and Germany, and what not, it’s always so, I don’t know. It’s so much fun to be around because you always have, again, opinions about things.

Tejas: Yes.

Vitaly: You always express them with a very strong kindness. Why is that, Tejas? Where is it coming from?

Tejas: Yeah, it comes from a lot. So when I do talks and things at conferences, a lot of people tell me... they come to me after and they’re like, "Hey, that was so genuine. I felt like that was very genuine." And it comes from that. I’m a strong believer in speaking truth in love or kindly, and I guess that’s where it comes from. I do have strong opinions about things, right, but I feel like they have to come under an umbrella of kindness and respect. Otherwise, nobody wants to listen to some angry person with strong opinions who’s not friendly.

Vitaly: Well, you don’t know. I mean, I’m very happy to hear maybe not angry people, but like whenever someone has a very strong opinion, I’m totally fine with that. Actually, there is Lex Friedman, who is a podcaster. He’s doing all these videos with people on YouTube like you do as well. We’ll talk about it in a moment. But he had just posted recently one thing. He applauded to all the people who are attentive enough to listen to other people’s opinions and their arguments and be willing to change their minds.

Tejas: Yeah.

Vitaly: So I think that if you have a very strong opinion about things, as long as you are willing and open minded to change your mind based on the arguments that come your way, right? I think this is fine for me. This is actually a very important skill to have.

Tejas: Yes. Yes. I think the underlying skill there is critical thinking and being open and receptive. 100%. I was just watching the Welcome to Chippendales. I don’t know if you’ve heard of this show, right?

Vitaly: Not yet, no.

Tejas: It’s a great show. I can recommend it. And in that show you watch the founder of Chippendales repeatedly screw up his company and go into bankruptcy. And the common thread in his mistakes is that he just has a lot of this entrenched, close minded pridefulness where he refuses to have his mind changed despite his strong opinions. So I agree with you. I think that’s something I try. I work hard at and try to maintain, and so I appreciate that you called it out here on this conversation.

Vitaly: Yeah, sure. Well, the reason why I wanted to have you on the show as well, because you have all these incredible experiences and stories you can share, right? And you also are very public about things that are important to you and you’re not afraid of strong words as well by doing so. And so maybe just for everybody to be kind of following your story to know who you are and what you’re coming from and so on, maybe you could just share a little bit of insight about how did you end up in this front end madness? Where is it coming from? Did you wake up one day when you were eight and thought, "This is it. I went to write HTML, CSS, JavaScript for living now for the rest of my life."

Tejas: When I was eight years old, react was actually a thing. I’m joking. It wasn't.

Vitaly: Oh, who knows? Who knows?

Tejas: Yeah. No, but yeah, no, I was born with a disease that was really limiting and there’s a lot of things I couldn’t do. I had a ton of physical limitations. I made a whole 48 minute YouTube video about it, which you can watch if you’re more just interested or we could talk about it here. I don’t really care. But with the limitations I had, I couldn’t go to school every day. I couldn’t carry a backpack. I couldn’t open doors. I couldn’t walk upstairs. I couldn’t do a lot of things. The only thing I could do was take my fingers and type on keyboards with them. And thankfully my family was relatively low income at the time. I grew up quite poor, but we had just enough privilege to where we had a computer and a keyboard. And since this was the only thing I could do in many ways I feel like coding found me. And I was drawn to, I have a YouTube video coming about this coming out about this on Thursday, I was drawn to the quick feedback loop of JavaScript where you just write a little bit of code in your browsers console and it executes. And I was like, whoa. And it’s that kind of whoa, that kind of I found when I was eight just kind of playing with browsers and code. And it’s the same whoa that I chased today.

Vitaly: That’s interesting. So would you say that this was specifically then JavaScript that kind of spoke to you, or would you say that this just, if Flash was still a thing it’d still be running around building Flash websites?

Tejas: That’s an excellent question. No, it’s definitely not JavaScript at all. It was, well, it started with Photoshop, so I was-

Vitaly: Photoshop. What is Photoshop, Tejas?

Tejas: Yeah, I know, right? Nowadays with Figma and stuff, Photoshop’s a bit lost, but when I was young, Photoshop was the design tool. It wasn’t just for photo editing and manipulation, it was for at least I used it for creating stuff because Vector wasn’t so recommended at the time. And so when I was younger, Vitaly, we had Macro S Factor.

Vitaly: Even younger.

Tejas: Yeah?

Vitaly: Even younger.

Tejas: No, no, not even younger. When I was younger than I am now. When I was kind of just getting into it, Mac OS Aqua, the design principle aqua thing, was very in vogue and everybody was trying to design these shiny balls.

Vitaly: I remember them vividly, yeah, yeah. I remember.

Tejas: Yeah. The shiny balls. And so I did tutorials on Photoshop. I was like, I want to make a really shiny ball. And then from there I moved to Tux. They made these penguins with gloss effects, and that’s where I started and I was like, wow, this is so beautiful. And then I found the slicing tool where I could design something and make it html, and I was like, whoa. And then I was like, okay, this is cool, but how do I make it interactive? And then I found JavaScript. So the draw was really creating stuff without any physical damage to myself and without any financial requirement. I was able to create stuff without any barriers to entry other than the crappy old keyboard and computer we had. So that was it.

Vitaly: Yeah, the magic thing for me was really this moment when I realized that I can actually make it available to everybody else. That was that magic thing. I mean, I remember FTPing all the way, andβ€”

Tejas: Yes.

Vitaly: I mean there were plenty of free servers out there with all the kind of advertising and all of that. And I was just, wow, there are 12 people who visited my website in the last three months. It was incredible. That was just really mind changing, like mind blowing, life changing for me. Yeah, that’s really incredible. And if I look at the industry now, the industry is so mature. There are so many incredible things. Like the thing that we’re building on the internet, on the web, it’s just unbelievable. It’s just the level of software engineering and all.

Tejas: Yeah but you know, Vitaly, I feel a bit sad that it’s so mature now that it’s ... when I was younger, not younger than when I started ...

Vitaly: I assumed that, yeah.

Tejas: As I was growing, I’ll put it this way, I was often terrified of being a mature adult because when I was younger and rebellious, being mature was being boring for me. I was like, oh, I have to put on a suit and tie and kind of be bored. Like my childlike wonder was lost in my definition of maturity many years ago. And I liken that to today. You say the web is mature and I agree with you. It kind of makes me sad because I feel like in this maturity we’ve lost a lot of the awesome whimsy that we used to have. I don’t know if you remember these Geo cities, angel fire type of websites with under construction banner and like all of, you know?

Vitaly: I mean, you can still have them on the web. It’s just not many people do.

Tejas: Right. But it’s because it’s not cool anymore. And I want to bring that back. I remember the dancing baby for no ... like every website just had a dancing baby and a cursor that was a clock that would follow your cursor. Anyways, so all of this I feel like we’ve lost, and I’d like to see more of that. Anyway, sorry. Just a little rant.

Vitaly: No, I think that’s actually, in many ways, it’s like we’re always moving in circles. I have a very strong feeling that in many ways when I look at e-commerce websites, you probably don’t want to have it there necessarily unless it's, I don’t know. Maybe it’s a brand with a personality and things like that. That might be okay. But I do feel like we are a little bit too used to getting things done in a certain way. And I mean, very often we think about we have to be conventional. We need to follow particular guidelines and rules. And we probably should if you want to be conventional and we want to follow the rules and want things to be familiar to everyone. But I mean, there’s also this notion of surprising people, and I’m not talking about delight necessarily, but just surprising them. Just making them think a little bit about where they are and what they’re doing. I mean, if I look at your website, well every time I come to the site for some reason I see a slightly different and sometimes slightly strange photo of yourself. Sometimes in very different outfits.

Tejas: Yes.

Vitaly: So is that the whimsical that you are kind of mentioning there? Speaking about?

Tejas: Yeah, yeah. If you drag your cursor, if you move your cursor around, you just cycle through a bunch of random photos of me. It’s open source. So I’ve lost control of ... so people will add pictures of me dressed as a flower, pictures of some muscular guy.

Vitaly: Look fantastic as a flower, if I may say.

Tejas: So. Yeah, thanks. Yeah, they’ll do some muscular guy shirtless with just my face photoshopped on him. They’ll do all kinds of weird things. This is not me, this is the community who feel the need to add weird pictures of me on my website. But it’s exactly the whimsy I’m talking about. And as you drag your cursor across, you’ll see some of these. And I like that. And I feel like, to your point, smashing does the perfect balance of this with the cats. The cats are not ... like if you’re talking about content and great content, great tips, great, whatever smashing does, the cats are really non-essential. But I feel like they are essential because they bring that awesome whimsy. So I like that y'all do that as well. I think it’s much needed.

Vitaly: Yeah. So I think we do like cats. I mean it’s been quite a journey with all the cats. I mean, I don’t even know where they have been and have not been at this point, right?

Tejas: Yeah.

Vitaly: But also speaking about you, where you have been and where you have not been yet. I mean you’ve been working on so many different really cool companies. I mean, I look at Vercel, Spotify, Xata recently, right? Maybe, I don’t know if you could share some insights about what did you learn from each of those things? Maybe there was some really interesting insights that you wish you’d known earlier in your career.

Tejas: Yeah, definitely. I was just talking to my good friend Fabian. I just had lunch with him and he mentioned he’s reading this book by an ex-Google engineer called Solve for Happy. Great book. And in that book he talks about how really nothing is really good or bad or happy or sad. It’s just what’s our perception of it. And I feel this way about the jobs that I’ve left because there’s lessons in there from each of them. Most recently from Zeta, I learned the, actually from Zeta and G2I, both of these companies combined, I’ve learned the value and importance of urgency, ownership and autonomy. I think that’s really important.

Tejas: In fact, there’s an old Steve Jobs interview when he was much younger. He had hair and was alive, but he said people tend to leave when they feel like they can’t have ideas. And I saw that, I saw it executed very, very well at G2I where I was reporting to the CTO. And he was just like, he would talk to me on Monday and ask me what my plan is. We’d align and he’d be like, "Awesome, make it happen. Goodbye. Come to me if you need anything, but I trust you." And this phrase, "I trust you." I learned how powerful that can be in a position of leadership. And then I would continue to have multiple management leadership roles there, even as director of developer relations at Zeta. And that’s something I carried with me from G2I was this, β€œI trust you. Make it happen.” So I would talk to my team on Monday. We’d kind of plan for the week and then by Friday, well on Monday I would tell them, I would say, "See you Friday. Come to me if you need anything, but I trust you." And then we’d go to Friday where we would have just an end of week, what did we do, how do we feel check in. And this was excellent. We came up with this really nice rhythm that facilitated this kind of urgency and ownership without stress, urgency without stress. It was really, really nice.

Vitaly: I mean, one thing that I noticed recently is that many companies try to be very careful about how, on the one hand, to give people this sort of autonomy to just trust them and do the work. Because again, when you think about micromanagement, it’s such a bad kind of really bad pattern to use. And I mean there are probably plenty of companies that are still my micromanaging on some level. But I think there is this way of crystallizing, I guess in some way, those things that really work and things that do not work. One thing that I saw companies were using, and it works seems to be working really well. This idea of, maybe you’ve heard about this as well, is the idea as a manual for me.

Vitaly: That means, for example, where you say, okay, every single individual contributor or anybody, manager. It doesn’t matter really. Every single person who is working in the company, you better go ahead and try to prepare a little Google Doc on Notion document or anything like that where you describe how do you work comfortably, what is important to you, like your calendar, your preferences, when do you work best? So is it okay to disturb you in the morning? Is it better to disturb you slightly later when it comes to an urgent meeting or things like that. And so everybody’s encouraged to create this as long as it can be a mural board or mural board or anything like that. And so everybody’s encouraged then to put the link to it in their Slack profile. And so everybody knows, okay, I don’t know who that person is. And especially in a big corporation, a big company, we have maybe tens of thousands of people working.

Vitaly: It might be very, very comfortable to be able to say, okay, I need to reach out to that person, that position from the team, but I don’t want to come across as in kind of pushing my ideas or whatever I want through their agenda in some way the other disrupting them. But I wanted to be more respectful. So that was really magical when I saw that and I thought, wow, I really appreciate it, especially in the remote first environment that where we are working.

Tejas: We did that at G2I as well. We had social contracts, they were called. These documents. And I remember them working really, really well.

Vitaly: Would you say that for your perspective would you... now I assume that you are looking, I don’t know, either maybe building something on your own, maybe kind looking what’s around and all. Is it important for you that you’re working remote first, remote only, or would you say that’s not a problem for me to go to the office every day?

Tejas: Yeah, it depends. It really depends on a number of factors. I could honestly make the office thing work if the other factors were appropriate. But, yeah, no, I don’t think remote’s a hard line for me. I was, again, to cite my friend Fabian. I asked him the same question. I said, "Do you prefer remote or onsite?" And his response was a third option, which he tends to think outside the box. He is like, well, honestly, I prefer a choice. Being able to do a remote for a season and then onsite for a season. Like the choice is the magic to him. And I kind of agree with that. But I could do office if it’s required for sure.

Vitaly: But also looking in general at the IT industry, I know with a big eye and a big T, I guess at this point there is a lot of stuff going on and many people are concerned layoffs, and there isn’t a sense of uncertainty about where we’re going with ... Is it still a thing to be a project engineer? Is it a good thing to be a project engineer? I’m pretty sure it is, right? But where do you see all of this kind of being today? Is it just a natural way of the economy is not in a good shape, so sure there are layoffs after a season of hiring, or do you see this kind of becoming a trend where we have to be careful and cautious about not losing our jobs for AI by any means? What’s the take on this?

Tejas: Yeah, my take on this is it’s normal. I feel like look at the GDP curve of any country of any year and you’ll see is dips recessions are normal and predictable and they happen. And when recessions happen, layoffs happen. I feel like a recession is a sign of economic normalcy. If it lasts very long, then it’s a depression. That’s a huge problem. But I feel like it’s expected. I feel like layoffs unfortunately have their time and place. They’re not good. They affect families. I mean, I had the privilege of quitting, but I also feel the squeeze of unemployment. So I don’t think they’re good. But I think it happens. I don’t think the jobs will be taken by machines yet because machines and AI is being designed now to kind of be a helper.

Tejas: So I feel like it’ll help us. But I do think you give chat GPT, access to the internet, which it doesn’t have, and then it gets extra superpowers and gets more threatening. But I feel like there’s human beings with a vested interest in preserving human beings with jobs. So I’m not so sure the AI will take our jobs, but the state of the industry now I think is actually pretty cool, Vitaly, because when you and I started and I mean you probably started way before me, so I’ll just say when I started. I’m not calling you old. I’m just calling you experience.

Vitaly: That’s okay. That’s okay. We’re all friends here.

Tejas: No, but when I started, there was no front end and backend. There was webmaster. There was a web dev and it was the one guy or girl who would design, develop, and then drag things over to the FTP thing to upload to some shared hosts. Some of this is quite common. But then over time you and I have had the privilege of watching higher specializations develop. So we went from webmaster to now front end and backend to DevOps. And then from that to now machine learning engineers, data scientists, and then an emerging part of this is DevRel, is developer relations, I feel like is still pretty young, but I think the industry has kind of a tree root with branches, has kind of branched off into specializations and I see more of them occurring.

Tejas: And I think it’s pretty great because that means more options for people to get jobs to maybe start at an abstract level, but I think it’s better for humanity. One fear of mine is that the world is becoming, the tech industry is taking over the world, right? We used to have clothing stores, now we have online companies that sell clothes. We used to have travel agents, now we have websites that sell tickets. Like everything’s becoming tech. And this is part of the reason why I used to have strong opinions. This is part of the reason why I campaign really hard for diversity, equality and inclusion because Plan A was heavily unequal of the world, so to speak.

Tejas: I watched a documentary on Columbus yesterday and made me hate the world a little bit more, right? And so I feel like if we’re undergoing some type of tech revolution where more companies are tech companies advocating for fairness, equality, diversity and inclusion is massively important so that people don’t get left out and equality doesn’t get as skew as it has been historically.

Vitaly: I think it’s also this notion in general of I think us focusing a bit too much on speed. I remember vividly having this conversation a while back about, "Oh wow, the technology is moving fast, so fast and we’re going to do less, which is going to do less because the technology is going to take over." It’s the same way we see AI now like oh ChatGPT can do so much. It can be giving us answers, better answers, faster answers, andβ€”

Tejas: Can write code.

Vitaly: You can actually quote ... yeah, you can write code, it can debug and everything. So we are going to do less. But I think that reality, I mean at least in my life so far it has been very different. It becomes faster, but then we tend to do much more. We always find a way to fill in not necessarily the gaps, because these gaps don’t even have a chance to appear, right? We are just moving. It’s like it’s everything. I have the strong feeling in the past. Maybe it’s kind of similar to you as well, maybe not. I have a feeling that I was doing one thing and I was doing it interruptedly, and then I would spend two, three hours on that and I would be kind of done more or less. Now it seems like, well, maybe 23 things. And yeah, we don’t do them in peril. I don’t really believe in multitasking or maybe I’m just really bad at multitasking while other people are much better. But I do have a strong feeling that it’s all so fragmented and we do so many different things at the same time. And so I don’t believe that technology is making us redundant in any way. It’s just we are doing certain different things, right?

Tejas: Exactly.

Vitaly: But talking about that, one thing I do have to ask because we probably, I expect probably can hear the voices in the back asking, "Tejas, what about those frameworks and front? Let’s talk about phone time landscape in 2023." And one question that people ask me, and I want you to answer it is, we came from times when Jake worry was a big thing and it still is a big thing on many websites and legacy website and many websites in general. Do you expect this world of frameworks to change or are we at some level of maturity where a react is going to stay, view is going to stay, angle is going to stay? I mean, it’s impossible to answer that. That’s why I’m asking you now. What’s your take on this in general? Should we be talking ... like imagine 20 years from now we’re sitting in a podcast like this thinking, "Remember when React was a thing and look now?"

Tejas: Yeah, you say 20 years, I feel like one year from now someone’s going to listen to this and be like, "Oh my gosh, this stage Tejas was so wrong about his answer."

Tejas: No. So I think first of all, I think the web is held up by giants who are underappreciated. And by that I mean specifically jQuery and WordPress power more of the internet than React period. So a lot of them people talk about, "Oh, they’re not cool." No, no, they power most of the internet and I think they should be acknowledged. But there was a time in the React story where React had enough momentum and critical mass to look cooler than jQuery. It’s the new thing, it’s the new industry standard. And then jQuery kind of got diminished even though it’s usage didn’t, but it’s I guess perceived value got diminished and reacted over. And I think in 2023 we’re starting to see some of that as well with React. Where React is used a lot. I mean I just put out a YouTube video about why React is unbeatable. And I do think it is unbeatable because here’s the deal: jQuery and WordPress have not been beaten.

Tejas: They’re also unbeatable to some degree. And now especially you have teams at Google investing in React, investing in how React works in Chrome, et cetera. So I think React is here to stay, but I think it’s perceived value is diminishing in 2023. And I feel like it will diminish further with the advent of awesome tools like Quick and solid specifically.

Vitaly: Right, right.

Tejas: And, of course, View and Svelt and Angular are around, so I think they’ll all stay. It’s always looking for this newer shinier thing. The big appeal, right, with the newer stuff with Solid and Quick is that they don’t ship a whole virtual dom implementation to the browser, which is heavy and slow. So React is objectively slower and heavier than Solid and Quick. And so there’s two sides, now it’s divided. Some would say, okay, but it’s just milliseconds. They don’t matter that much. It’s not true. It’s been proven by Google, by Chrome, that milliseconds make millions. And so I do think React is seeing its decline, maybe not in usage but in the popular vote in 2023.

Vitaly: But at the same time also see that there are all this kind of fine tuning almost coming in where, I don’t know when was that? I can’t track drug time anymore. But five, 10 years ago, oh, we have React and we have this full client side thing and off we go. But then now when we can run React on the server, we can now be a bit more clever I guess, about what is going to happen on the server, how much of it do we need to ship to the client and when and when not, and all those things.

Vitaly: I think this is, in many ways we moved away from this notion of let’s have one single React application to let’s have, I don’t know, hundreds. Every single component we have might be a single standalone React application with its own life cycle and all that. And it kind of really changes it. But I also think that, I don’t know, I learned that’s probably, there is no way to know for sure. So maybe just tomorrow there will be somebody coming up with a chat GPT query and this is going to take over both J query and also React. I don’t know.

Tejas: Yeah.

Vitaly: Do you feel like something like ChatGPTQuery it could exist or help us in some way? Like bending in body and making, I don’t know what can I do everything.

Tejas: I would be interested to ask chat GPT to write code for the best fastest UI library on earth. See what it comes up with. But on a more serious note, I feel like a big contributor to this shift from we’re doing things on the client to we’re doing things on the server that then influences the development of React and Solid and all the others to be more server oriented is these serverless platforms - Versa, Netlify, CloudFlare. These platforms have led to what I’m calling server liberation. Like nobody server rendered before, Veril, Netlify, CloudFlare, et cetera. Because servers were inaccessible. They were hard to configure for client side apps. You would need to do a rewrite on a 404 to go to your index or HTML so you can download the client.

Tejas: It was very complicated. And then these companies stepped in there like, β€œHey wait, we’ll make servers easy.” And then if deploying a node server is easy, now you’re like, β€œOh, now I can render on the server.” And so they kind of unlocked this. So I feel like if we want to predict where the libraries and frameworks will go next, we can kind of look at what is the adjacent surrounding supporting tech that would lead them. And I think that’s kind of a good indicator. But I’m not in a position to make such predictions accurately.

Vitaly: Well of course you are. Of course you are. You’re here on a podcast. You can predict anything, you can see the future. I’m sure you’ve seen it. So here we go. You can definitely report on that. But also moving maybe to slightly different topic, just to explore the landscape. I always fascinated by this feeling of community and by this feeling of bringing people together, the conferences, and we’ve been running conferences for many years now. And you’ve been to so many conferences as well, and I heard rumors, and maybe they’re not true, but I don’t know. I heard rumors that you might even be thinking about setting up a conference one day?

Tejas: Yeah, I’m actually starting ContagiousCon. It’s where everybody comes together and tells me how much they like me.

Vitaly: It’s like a contaga of the SmashingConfs. Thank you for that. But, dude, I’ve been to so many conferences, experienced so many things that I’ve kind of developed an intuition for what attendees want, what speakers want, and the pains that organizer. I’ve spoken to Charis also the pains that organizers have to deal with.

Vitaly: And so bringing this triquetra of experiences, kind of working in coordination with the organizers to provide something very rich for people. I think that’s something that I’m very excited for. Also connecting organizers to sponsors. A lot of conferences don’t have the privilege of money and with the amount of companies I talk to and et cetera, it looks like connecting the right sponsors to the right conferences for the best experience for attendees really. Right. But do you feel like we are at this point where in-person conferences are back for good?

Tejas: Yes, 100%.

Vitaly: Yeah. It feels like different parts of the world maybe, I don’t know, maybe it’s just me. Things a little bit slower. But I do know for sure is that there is this sense of enough of online stuff. We do so much stuff online anyway. If we do something then we do it in person. Now you having attended so many conferences last year, I think both virtually and in person, would you say that kind of online conferences are here to stay? There are still plenty of them around. We had to do it for a while and now we’re probably going to keep it as a live livestream in addition to an in-person? Or is it a good replacement still?

Tejas: I don’t think it’s a good replacement. Nothing will ever replace face-to-face interactions. I said, I’m not in a position to make predictions about front end stuff. I can make 100% an accurate prediction about this. Nothing will ever replace an in-person interaction face-to-face. No screen can substitute a warm flesh and blood person in front of you. And so I think in-person is here to stay, but a lot of companies and organization teams have invested time and money into getting the online part, right? That why should we throw it away? We have it now.

Tejas: So I feel like it will be a fallback and a second track, as it were. And it’s not bad for business. You can sell a lot of tickets by volume for just some livestream and people will join. And I think it’s good because there’s people who can’t travel that you get to include now, right? So it’s good. So yeah, I think that’s the future is in person, but also virtual.

Vitaly: What is your future though? So I mean, I’m very curious. You always have these ideas of things you want to do in general. I mean, again, having learned so much from all the different companies. There must have been some things that where you said to yourself, "Okay, I would’ve done it differently."

Tejas: Oh man, you can’t imagine.

Vitaly: Oh, yeah, please go ahead. I’m very curious to hear that.

Tejas: I’ve been in positions where I’ve been micromanaged to death, right, and I’m very, I look back at those and go like, oh my gosh, I would do this so differently the way I’ve done it by not micromanaging people. I think that’s probably the strongest one. But also conferences. I’ve seen conferences do things wrong. I think the biggest mistake I’ve seen there is overselling. They’ll show you a venue that’s packed full of sunlight and everything and you get there and it’s just someone’s dark basement.

Vitaly: There is no sunlight.

Tejas: No, yeah, they turn off the sun for this one conference. So I’ve seen conferences that will just not record talks and they won’t tell you ahead of time. So I think the biggest mistake conference organizers have made is a lack of communication about important things. I want to know if I’m not going to be recorded, so then I don’t make the effort of going there. Because a big draw is this thing’s going to be recorded and visible for everybody after. And some conferences have made it known not at all that your thing’s not recorded and then months go by and you’re like, where’s that video? Oh, they didn’t record it. Oh no.

Tejas: So I would do those things differently, but what’s next for me? It’s funny you ask literally, because it’s a new year and I’ve dedicated this week, so I’m unemployed in case listeners are unaware. And I’ve started to feel the squeeze of being unemployed, put it that way. And I don’t know what’s next. I’ve decided to take this week and figure it out. I think I do want to spend time creating YouTube content because I like communicating with people and reaching people and really, yeah, this will sound a bit narcissistic, but blessing them with whatever I can bless them with. So I think YouTube is one thing I want to keep. But really, I don’t know, man, do I join a company as an employee? Do I start my own company? Do I just remain a freelancer? I don’t know. So I’m taking this week to talk to good friends and have them speak into my life and give me the best advice, who know me well. I’m currently leaning more towards starting a... I can’t say a company for legal reasons, but starting a type of company.

Vitaly: And enterprise.

Tejas: Sure, yes. Start starting an enterprises. Starting an enterprise somewhere around DevRel. That seems really attractive to me. And really you are an inspiration for that. Watching you lead smashing, right? I want to be able to do that. To give people a place where they can be creative and do their best work, et cetera, while also earning a good amount of money. I want to create something like that. So I’m kind of leaning towards that. I don’t know if it’s sustainable or if I’m skilled enough to do that, but that’s kind of ... Plan B, listen to this privilege. Vitaly, listen to how ridiculous this sounds.

Tejas: My worst case scenario, my like fallback is I get a job at some tech company and earn a decent salary. That’s unbelievable. But that’s kind of plan B is just take a job somewhere. Of course, it would have to be in a field I’m passionate about, that I care about, et cetera. But yeah, that’s kind of where I’m at.

Vitaly: Where would you see yourself in general? I mean there are many companies, many people who are trying to get to the fan club, the big ones, the Facebook, the Apple, the Google, the Amazon and so on so forth. Did you ever think about, okay, I’m going to do whatever is needed? And I know that, again, looking that you started coding back when you were eight, right? And you’re a software engineer. I assume that that might be on your agenda to get to this top five, top 10 other companies on the world. Is it interesting to you or would you rather work in a smaller company?

Tejas: That’s a great question. Yeah, so it was interesting. I feel like the closest I’ve got to big company energy is Spotify. And just by virtue of working at Spotify with 4,000 employees, I learned very quickly that this isn’t for me. So maybe, but I’m leaning more towards, no, with the larger tech empire-type companies. I feel like it would be great if I had three children in a very busy personal life to go to work and kind of have that much structure and rigidity. But at this point in life it’s a no for me.

Vitaly: I think it’s interesting because I’m being asked that as well. And actually I was under a very strong impression at some point in my life when I was thinking that if I want to make a good career, I have to work in one of the big ones. I have to do whatever it takes. But you know me a little bit. I like my freedom and I don’t want to be sitting day and night working or anything. I mean the work-life balance and I mean everybody’s talking more or less about work-life balance. But I mean it in a very ... it’s been hard to explain in a very personal way. Meaning I want to be able to say to myself, and this is kind of the ultimate test that I put for myself.

Vitaly: Never want to be in a position where at 2:00 PM on any given day, I have to tell me myself, "Okay, I don’t want to do this and I have to, no matter what it takes, I have to do it for the next four hours, whatever it takes." And I kind of always wanted to be in a position to say, okay, you know what? I’m going to go to cinema at 10:00 AM on Monday morning. Frankly, if I’m being very honest, it really never happened to me that I actually wanted that. And it never really happened to me that I made it or I did it. But I mean, this kind of sense of freedom is very important here, but not everybody can afford that. And it’s a lot of risk too.

Tejas: Yeah, it’s also an emerging trend in the industry. Zeta works this way when I was there at least. It’s more results-based than time-based. So on paper you have a 40 hour kind of work week, but you distribute those 40 hours. However, you could do two days straight and then the next day go to a movie theater in the morning. So they don’t care about when you work, it’s just that stuff gets done. I see that. That happens with full-time employment too. I feel like with the fan club, everyone I talked to at fan companies. My own experience at Spotify was, and this is not to speak ill of these companies, there are big companies with lots of things happening. There’s a lot of meetings, a lot of meetings to where you will have a meeting blocked-

Vitaly: And you don’t like meetings.

Tejas: Me? I like meetings, but I feel like look, too much of any good thing becomes a bad thing. And I feel like, respectfully, Spotify when I was there, had too many meetings. It did. And it’s not their fault. There was a pandemic and they’re used to working in office. They were not remote ever. So the pandemic made them go remote. But then there was a lot of learning to do about how to be remote. And I joined just in the middle of that where async meetings were not really a thing and it was very complicated. And so I was just at my laptop all day in video calls because it’s kind of being in an office.

Tejas: So no, I didn’t enjoy the meetings. And I found not just me, but I have friends at Google, at Meta, they’ll accidentally around me be like, β€œHey, look at my phone.” And they’ll show me a photo from their vacation, and I see notifications pop up, β€œOh, you have meeting at 10 minutes?” And they tap on the notification, go to the calendar app and β€œOh my God, the carnage in this calendar app.” You look at that once you’re like, okay, I do not envy you. Soβ€”

Vitaly: Yeah, I mean surely meetings are necessary, but it’s also a matter of how to organize it because for me, or for us and at Smashing for example, we don’t have many meetings. But also, most importantly, everybody can set boundaries in a way. So I like to have, for example, like for this call, right? I like to have two or three days blocked out when there are no meetings.

Tejas: Yes.

Vitaly: No meetings. Just almost, I mean, something must happen, something bad, or too good must happen for the day to have a meeting, right? And it’s also really just about having proper boundaries in place of this is when we work, and this is when we have meetings. Although of course meetings also work.

Tejas: Yeah. One lesson I learned working at so many different places is people. I say people because I know people, but even just speaking of myself, people suck at creating good and healthy boundaries in the workplace. I do. I did more when I was more inexperienced, but still it’s a struggle to have good, strong boundaries. I feel like it could work better if the employer enforced and enabled people to think more about boundaries and even suggested, β€œHey, maybe you should do a no meeting day.”

Tejas: If managers push, not push boundaries, but how do you say? Establish boundaries on behalf of their people. Yeah, and that’s something I’d like to see more of. I haven’t seen the opposite. I’ve seen the lack of people’s ability to set boundaries be exploited far more often than I’ve seen healthy boundary setting from the top.

Vitaly: Right. Well, now I do have to ask though, I’m just curious at this point, do you then have a dream project that you’d like to work on one day, maybe, I don’t know, be building a, I don’t know, some sort of software for rocket ship or anything? Do you have any particular ambitions in that regard?

Tejas: I’m really thankful, Vitaly, to say that this year I’m actually spending all of my unemployed time working on three dream projects of my own. One of them is a secret. I can’t tell you about that.

Vitaly: Oh, come on. Just give us a little of a spoiler then.

Tejas: It’s a very social thing. There is the spoiler. But the other one is working on this DevRel startup co consultancy thing. I’m thinking of starting is the second one. And that’s really excited about that. Worst case, it fails and then I join a company as it were. But that’s something I’m excited about. And the third dream project is my YouTube channel, which I’ve wanted to be a YouTuber for years, mainly honestly, because I like reaching people, but also I’ve speaking about this Mac OS 10 Aqua Ball thing. I get to do that with video, create beautiful videos, and I’m really into cameras and making nice shots and everything. And that’s a cool project. It’s a dream project actually to be a good YouTuber, emphasis on the good because I don’t want to be an average YouTuber. And also to be able to turn it into a living. I feel like my dream would be to just kind of be a full-time YouTuber. Yeah.

Vitaly: But what about TikTok? We don’t see you on TikTok yet.

Tejas: Yeah, sadly. I’m not so good at dances.

Vitaly: Well, maybe that should be the next skill to learn.

Tejas: That could be my New Year’s resolution. Get good at shuffling. Every day I’m shuffling.

Vitaly: So we’ve been learning a little bit about front end and JavaScript and AI and the other companies and so on, but what have you been learning about lately, Tejas? What have you been reading or kind of the skill that you’ve been trying to get acquainted with recently?

Tejas: That’s a good question. For me, communication is probably the thing that I enjoy the most based on conference speaking and stuff. And one thing I’ve been learning is the difference in mode of communication. What I mean by that is like what makes a great in-person conference talk does not actually make a great YouTube video. And I find this fascinating that when it’s a different modality of communication, people have different preferences. So like what I mean by that is if I come out at Smashing Conf New York or Freiburg, and I’m on stage and I’m like, "What’s up everybody?" High energy. People are like, wow, that’s awesome. But if I do the same thing on YouTube, they’re like, dude, what are you on? And that’s something I’ve been learning how to communicate effectively on different platforms. I’ve yet to learn the TikTok one, but I think it’s mostly through dance.

Vitaly: You’ll get there. I have no doubt about that. All right. Well if you, dear listener, would like to hear more from Tejas you can find him on Twitter where he’s at Tejas Kumar underscore. We’ll probably have to have another call about why underscore. By the way, why underscore?

Tejas: Because the other one was taken. You know whatβ€”

Vitaly: That’s reasonable.

Tejas: If that Tejas could delete their handle and then email me I’d appreciate it.

Vitaly: Excellent. So that would be Tejas Kuma underscore. On YouTube where he’s just at Contagious K and potentially on TikTok, where he’s going to show his best dance moves and tips around Svelt and React eventually. But also on his website, Teg.as Where-

Tejas: T E J

Vitaly: T E J. Yes, indeed. T E J dot, yes. You can also find plenty of photos of Tejas as well. Well, thank you so much for joining us today, Tejas. Do you have any parting words of wisdom you’d like to send to the universe for people who are going to watch us 20 years from now?

Tejas: Yes. I would say this: kindness and compassion is the most important.

Meet β€œSmart Interface Design Patterns Checklists” (Deck With 166 Cards)

Every UI component brings along its unique challenges. Inventing a new solution to every problem takes time, and very often it’s really not necessary. We can rely on smart design patterns and ask the right questions ahead of time to avoid issues down the line.

As a little celebration for our 16th birthday, we are happy to finally release our Smart Interface Design Checklists β€” a deck of 166 cards that are here to help us all keep track of the things we need to consider. Jump to table of contents.

About The Checklist Cards

Meet the deck of 166 checklist cards with common questions to ask when tackling any interface challenge. Curated and compiled by yours truly to help us all keep track of all the fine little details to design and build better interfaces, faster. Plus, a good way to not forget anything critical, and avoid costly mistakes down the line.

The cards are beautifully designed by our dear illustrator Ricardo Gimenes and jam-packed with everything you need to keep in mind when designing UI components. This deck of checklist cards is always by your side β€” on your desk or on your phone when you’re on the go. Check the free preview. (PDF, 825KB)

The Smart Interface Design Patterns Checklists are a trusty companion on any designer’s desk. Large view. What’s Inside The Box?

The cards are here to help you make the right design decisions. They don’t provide ultimate answers; you can see them as helpful conversation starters for your design/dev teams to help avoid misunderstandings or confusion down the line. They remind you of things that often get forgotten, overlooked or dismissed.

Here’s an overview of all the topics covered by the deck of checklists:

Designing For Touch Checklist
+
  • Are all our icons large enough to avoid rage taps/clicks (50Γ—50px)?
  • Can users double tap on the same spot to undo/restore actions?
  • Have we tested for frequency of rage clicks/taps?
  • ...and 23 more questions.
Accordion Checklist
+
  • What icon do we choose to indicate expansion?
  • Should expanded section collapse automatically?
  • Should the user be scrolled automatically when expanded?
  • ...and 11 more questions.
Navigation Checklist
+
  • Do drop-downs appear/disappear on hover, tap/click, or both?
  • Do nav items appear in a full page/partial overlay or slide-in?
  • Can we split the nav vertically for sub-menus on mobile?
  • ...and 27 more questions.
Hamburger Menu Checklist
+
  • Can we avoid a hamburger icon and show navigation as is?
  • What happens when the user opens both search and hamburger?
  • Do we expose critical navigation by default on desktop/mobile?
  • ...and 20 more questions.
Filtering Checklist
+
  • Do we expose popular or relevant filters by default?
  • Do we display the number of expected results for each filter?
  • Do we apply filters automatically or manually on β€œApply” button?
  • ...and 22 more questions.
Sorting Checklist
+
  • Do we repeat sorting at the bottom of the content list?
  • Do we include the β€œSort by” label separately from the buttons/dropdown?
  • Does the default sorting reflect the diversity of all major product types?
  • ...and 29 more questions.
Search Autocomplete Checklist
+
  • Do we surface frequent hits, popular searches, products or categories at the top of autosuggestions?
  • At what characater do we start displaying autosuggestions?
  • Do we use look-ahead pattern for search queries?
  • ...and 30 more questions.
Carousels Checklist
+
  • Can we display thumbnails or a grid instead of a carousel?
  • Is there a way to pause a carousel if it’s auto-rotating?
  • How do we choose the sequence of slides?
  • ...and 29 more questions.
Tables Checklist
+
  • Do we add steppers to navigate through columns or rows predictably?
  • Do we highlight the cell, row or column on user’s tap/click?
  • With rows as cards on mobile, do we expose relevant data for comparison?
  • ...and 25 more questions.
Pricing Plans Checklist
+

How many features do we want to display per plan?

  • Do we want to allow customers to switch currency (€/$/Β£)?
  • Can we avoid requiring credit card data for the free trial period?
  • ...and 48 more questions.
Sliders Checklist
+
  • Do we provide a text input fallback for precise input?
  • Are there any values on a slider that shouldn’t be accepting?
  • Should users be able to β€œlock” some values?
  • ...and 16 more questions.
Date Pickers Checklist
+
  • What presets (β€˜prev day’/’current day’) do we need for faster navigation?
  • Do we use dots color coding for different rates or days?
  • How do we avoid displaying unavailable dates or zero-results?
  • ...and 17 more questions.
Configurators Checklist
+
  • What’s the entry point to the configurator?
  • Should the user automatically move to the next step when finished?
  • For every step, do we explain and highlight dependencies?
  • ...and 31 more questions.
Feature Comparison Checklist
+
  • Can users switch to see only differences/similarities/all?
  • Can the user move columns left and right?
  • Should we ask customers to choose preferred attributes?
  • ...and 24 more questions.
Timelines Checklist
+
  • How do we expose/highlight critical events (e.g. now/coming up next)?
  • Should some events or time segments be available/fixed at all times?
  • Do we communicate changes over time with an underlying histogram?
  • ...and 21 more questions.
Schedule And Calendars Checklist
+
  • Do we provide quick jumps between tracks?
  • Should we consider flipping the timing header by 90 degrees?
  • Do we display what’s happening now and coming up next?
  • ...and 21 more questions.
Maps Checklist
+
  • Do we provide zooming?
  • How many levels of depth will zoom provide?
  • Would an autocomplete search help users find information faster?
  • For charts, can we flip axis to make use of available space?
  • ...and 23 more questions.
Seating Plans Checklist
+
  • What kinds of pricing tiers and discounted tickets (senior, student) do we have?
  • Do we have any planes or floors that users need to navigate between?
  • Do we calculate and display an experience score for each seat?
  • ...and 23 more questions.
Privacy Checklist
+
  • Can we group user data according to low/medium/high priority?
  • Can we gradually request more user permissions when we need them?
  • Do we ask for permissions only if we are likely to get them?
  • ...and 41 more questions.
Onboarding Checklist
+
  • Can we avoid intro tours, tooltips, wizards and slideshows as they are usually skipped?
  • Do we use empty state to indicate our features?
  • When is the right timing to show a particular feature?
  • ...and 12 more questions.
Reviews and Testimonials Checklist
+
  • Can we group testimonials by a feature/impact and highlight them together?
  • Do we highlight the number of testimonials/reviews prominently?
  • Do we display name, photo, title, age, location, role, company, brand logo?
  • ...and 33 more questions.
Web Forms Checklist
+
  • Will we be using floating labels? If so, are they accessible?
  • For a country selector, do we display some countries as frequently used?
  • Do we show the number of errors above the "Submit" button and in the tab title as a prefix?
  • ...and 73 more questions.
Donation Form Checklist
+
  • Do we include any testimonials or stories next to the donation form?
  • What suggested donation amounts do we display, and how many?
  • Which types of donations do we have: one-off, monthly, quarterly, annually?
  • ...and 29 more questions.
Authentication Checklist
+
  • What password requirements do we want/need to implement?
  • Do we really need CAPTCHA, or can we use honeypot/time traps instead?
  • Do we limit the frequency of password recovery attempts?
  • ...and 31 more questions.
Product Page Checklist
+
  • What layout do we use for the page (tabs, accordions, one long page, floating bar)?
  • Do we display the final price (incl. standard shipping, taxes, payment fees, currency)?
  • What do we display when an item is out of stock (notification via SMS/email)?
  • ...and 73 more questions.
Video Player Checklist
+
  • How do we optimize for precise input and fast-forwards (keyboard, buttons)?
  • Do we use preview clips, popularity bar, key moments preview?
  • Do we persist the position of the video track on refresh?
  • ...and 30 more questions
Disabled Buttons Checklist
+
  • When should the button become disabled?
  • What happens when the user hovers or taps on the disabled button?
  • Do we prevent the click via JavaScript by using aria-disabled?
  • ...and 32 more questions.
Inline Validation Checklist
+
  • For every input, do we have exact validation requirements?
  • What happens when a user refreshes the page?
  • When editing a field that was invalid, do we validate immediately during data entry?
  • ...and 47 more questions.
Back Button UX Checklist
+
  • Can we make the URL more helpful, structured, and human-readable?
  • For a sorting direction, does the β€œBack” button restore the previously set sorting direction?
  • If a user jumps abruptly on the page, does the β€œBack” button bring them to the previous spot on the same page?
  • ...and 28 more questions.
Modals Checklist
+
  • When do we absolutely need to interrupt the user (modal)?
  • Do we want to use a modal for critical notifications?
  • When do we want to dim the background (modal, lightbox)?
  • ...and 55 more questions.
Mega-Dropdowns Checklist
+
  • How many levels of navigation should be accessible directly from the mega-dropdown?
  • Do we highlight a selected section (e.g. underlined/background change)?
  • How do we extend navigation of necessary (e.g. if more items need to be added)?
  • ...and 27 more questions.

166 checklist cards in a sturdy box. The digital version is available as PDF.

About the Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX workshops. He loves solving complex UX, front-end, and performance problems.

You’ll get:
  • 166 checklist cards on everything from hamburger navigation and carousels to web forms and tables, carefully curated by Vitaly Friedman and designed by Ricardo Gimenes and Ari Stiles,
  • Practical examples and guidelines (400 slides),
  • Editable text file to adjust for your needs,
  • Life-time access to the deck, updated regularly (digital version).
Team Bundle Discounts πŸŽ‰

Do you want to equip your entire team with the card deck? Now, that’s a great ide! If you plan to get 5+ decks, you’ll get a friendly 15% discount. Get in touch with help@smashingmagazine.com, and we’ll make it happen!

166 checklist cards to help you ask the right questions at the right time. Large view. Technical Details
  • 166 checklist cards in a sturdy box.
  • Practical examples and action points (400 slides).
  • Editable text file.
  • Life-time access to the updated deck (digital version).
  • Free worldwide shipping from Germany.
  • Get the checklist cards right away.
More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) 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 that stand the test of time. Steven, Stefan, and Adam are three of these people. Have you checked out their books already?

Touch Design for Mobile Interfaces

How do we design for touch in 2022?

Add to cart $44

TypeScript In 50 Lessons

Everything you need to know about TypeScript, its type system, generics and its benefits.

Add to cart $44

Form Design Patterns

A practical guide to designing and coding simple and inclusive forms.

Add to cart $44

Smashing Podcast Episode 51 With Ben Callahan: What’s The Value Of A Design System?

This article is a sponsored by Wix

In this episode of the Smashing Podcast, we ask how you can prove the value of a Design System and how you can pitch it effectively to stakeholders. Vitaly talks to Ben Callahan to find out more.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: He studied computer science and worked as a software engineer, as an audio engineer for independent films, as an animator and of course, as a front-end developer focused on standard-based web development. These days, he’s the design system researcher and consultant working with wonderful people, almost sparkling people at Sparkbox to build a better web. Now, he’s always in learning mode and there is no better way to describe him as an explorer, maybe even Internet Explorer, with a very strong focus on design systems. Now, he lives in Dayton, Ohio, loves cooking, poetry, travel, photography, coffee; that was an important one. And has two, pretty as well kiddos, my threshing friends, please welcome. And I hope I can hear the cheers and applause right here, Ben Callahan. Hello Ben, how are you?

Ben Callahan: Hi, Vitaly. I am smashing.

Vitaly: Well. That is fantastic to hear, while you do look smashing as well. If I may say so, Ben, let’s start right away and dive right in there. How does a person who just happens to be a software engineer turn into a design system researcher? Can you show a bit of your journey to get there? Because I know that you’ve been working on design systems probably before it was even a thing. So I want to hear it all.

Ben: Yeah, absolutely. Thank you for having me, Vitaly. I do appreciate it. I’m super excited because I love design systems. And one of the reasons that I think it’s become an area of focus for us is because I have seen how it has helped organizations create a lot of unity inside their teams, which is something that I’ve always wanted. And so, if you’re asking about my journey, the reason I’m pointed in this direction is because of that. And if I go back, I did study computer science.

Ben: I was frustrated working in the corporate world feeling like I didn’t have a lot of... There wasn’t just a lot... This wasn’t a vision for the things I wanted to work on. And so eventually, I stepped out of that space, took a year to just explore different technologies like animation and audio, and just other things that I was interested in, and ended up starting a business, doing video production and audio engineering.

Ben: And then we did a website for one of our clients. And as soon as the rest of our customers saw that we offered that, it just was the only thing they wanted. This was early days of the web, and so I ended up buying my partner in that business out and transitioning it to a web studio, a very local web studio here in Ohio. And eventually merged that with a few other folks who were doing good creative technical work in town, and the result over a few years of us churning to figure out what we really wanted to do was again a focus on the web.

Ben: And that’s how Sparkbox was born. I’m really fortunate because we’ve grown slowly and steadily over the last 14 years. And that means that as a front-end engineer, as a computer science guy, I’ve transitioned out of writing code every day. And instead, I get to focus on where I want us to be headed. What do I think is important for us to be learning, and how can we best serve our customers? And that’s really how I pretty naturally ended up digging in deeper to design system work. Because I actually do believe that it is a unifying opportunity for a team, so that’s how I landed here.

Vitaly: Oh, that sounds very exciting, indeed. And I think in many ways, we are everybody who is listening to the show now as well; I think we all have been in one place, and then we moved to a slightly different one just steadily and slowly. And I know a couple of people who used to, I don’t know, sell glasses before the internet was a thing. And then off you go becoming a designer, developer, manager into design systems and all things like that, so that’s really exciting to see that.

Vitaly: Interestingly, talking about design systems, I think we are in a very interesting position right now because it feels like we have been playing, and doing, and experimenting, and working around design systems for many, many, many, many, many, many years now. And I don’t know about you and probably have, of course, way more experience than that. Many teams already have one, right? Or they’re trying to get one, and it might be up-to-date, maybe not, but they’re definitely not something new and shiny around the block that we just need to try out.

Vitaly: Many people have tried to do that, you did spend a bit of time trying to understand what makes a design system mature. So maybe you could actually dive a little bit more into this and explain, based on your experiences, of course, the Sparkbox as well. What is the maturity model for a design system? So what does it entail?

Ben: Yeah, you’re right, Vitaly, that we have been as an industry working very systematically for a long time, years before we started to use the word design system. And Sparkbox, like many other studios or consultants, had been working in that way for a long time. I think when you put a name on a thing like design systems when you give it a name, it takes on a life of its own.

Ben: And so definitely, there was a point probably six years ago when our clients just started asking us for that, six or seven years ago. And so I think when that starts to happen, as an organization, as a leader in an organization, I feel like it’s my job to better understand that. And for us, what that has meant is for the last five years, we’ve done what we call the design system survey.

Ben: And that’s just to open to the industry. And as part of that process, I get to ask; I get to do lots of interviews with folks who I just find online, who are doing this work in an interesting way. And I just ask if I can have half an hour or an hour of their time, and I just ask them a ton of questions.

Ben: And so that has given me a lot of exposure to very broad perspectives on what’s happening in the space. And so with all of that, as part of an input for me, what I have done over the last four or five years is each year talk to lots of folks and then sit down and try to find some cohesion in all the different stories that I’m hearing.

Ben: So, a couple of years ago, leading up to the release of our survey for 2021, I had done that series of interviews. And I realized that there were some patterns that I was seeing emerging in terms of how systems were moving and maturing. And that’s where we landed on these four stages that we think most design system programs move through. And that we tried to keep these quite simple because I don’t want this to be something that’s super theoretical.

Ben: I want it to be practical and useful, but at a high level. The model is there are these four stages; the first is just building version one, so that’s literally everything you do up until you release something for subscribers inside your organization to start using. And then pretty much every team that I’ve spoken with who has gone through that and actually got something out the door, their next big focus is almost always on adoption.

Ben: And that makes a lot of sense, right? You spend a bunch of time building a thing. Of course, you want to see if other folks are interested in using it. And so that second stage is driving adoption. And then, if you’re able to make it easy to become a subscriber, and if you do a really good job supporting folks who are using your system. And if you continue to evolve the system in a way that it shows value to lots and lots of different types of subscribers inside your organization, then you can reach this third stage, which we just call surviving the teenage years.

Ben: And it’s a tricky season, because there’s lots happening, right? You’re having a lot more people use the system. I can guarantee you that they’re probably going to try to do things with it. You never imagined they would. This is where you heard of having to make a decision. Are we actually going to treat this like a product? Are we going to offer support in a really healthy way? Are we going to come alongside the subscribers and engage with them been good ways?

Ben: And if you can continue to survive that stage, you reach what we call stage four, which is just evolving a healthy product. And this is really where the design system team actually takes a role in terms of leadership inside the design organization itself. And these teams that are stage four are doing incredible things. When I talk to people inside these organizations, they talk about the design system team as the place where the most skilled workers in their organization operate.

Ben: They say things our design system team was ready for us. When my product team came and said, β€œHey, we want to try view.” That they had already done a spike on the design system team to show they could support that. They’re very proactive. They’re not reactive. And that’s, I think, a really healthy place to be at the table for big conversations, to be driving decisions inside the org. That’s what I think is possible if you mature in that way.

Vitaly: Well, that sounds very exciting. But then in your experience, looking again at the work that your clients are doing, where would you see most companies are at this point? How many actually reach level four, and where do most companies struggle?

Ben: Yeah, that’s great. I’m glad you’re asking that because I think doing that work, one of the outputs I was hoping for is to make it clear how to move through these stages in a healthy way. I think you said something earlier that I’ll just harken back to you which was... You said most folks have a system already. What I’m seeing is that many organizations are on their second, third, fourth, or fifth attempt at doing this work.

Ben: So it’s not just that they have a system; it is that they have been struggling to build a successful system for years in some cases. Most of the time, I would say most organizations that I get a chance to interact with are stuck somewhere between two and three. And it’s actually really common to get stuck there because this is where everything before stage three is about building something people will value and use.

Ben: And in order to transition into three, you have to... What it seems like right now is that you need to increase the size of your design system team. And the skill sets that are needed are a little bit different. This is where you have to actually add in a product support team, like customer service for your subscribers, right? And it’s because the system is if it’s going to take root, it’s going to be a really fundamental piece of any interface work that your organization does. And for that to be the case, you have to really actually support those folks in a really healthy way. If they don’t feel like you’re there for them, if they’re going to use your product, you have to show them that you’re trustworthy, and so-

Vitaly: That’s right.

Ben: ... that requires more people, there’s just more to do. And so that’s a tough spot. I see folks oftentimes moving between two and three quite a bit. I haven’t spoken with a ton of folks who have reached that stage for more mature, really driving more proactive decisions inside the org yet, but they’re out there.

Vitaly: Yeah. One interesting thing for me was when I encountered working with one of the bigger companies from Romania, actually, and they’ve been working on a design system for six to seven years, pretty much aligned to what you were saying as well, where everybody was on the gold-rush design systems, gold-rush in a way. And I was extremely impressed with just how concise, how well established, how reliable, and how sophisticated the design system was.

Vitaly: And so that took a lot of iteration, of course, as well, but it also takes a big commitment from the top. And I know that you also have been speaking for a while now about how to sell design systems because very often it is expensive. And very often, you still need to convince the right people that this is the right amount of effort and that the return on investment will be worth it. Would you say that at this point, it’s something that’s already considered to be true most of the time? Or is it something that you actively have to prove every single time with some metrics or KPIs? How does this work for you?

Ben: Yeah. It’s not proven. I think, I mean there are organizations who have done that work for their use case and I think that’s great. This is a tough area, and I don’t have a single answer. I have more of an approach. I think that has helped us. So I have had the opportunity to speak with a lot of leadership inside organizations where they’re trying to make a decision if they should be investing heavily in a system.

Ben: And I think that’s actually probably the right first step. I’m not somebody who is absolute in this. I think there are situations where a design system is really helpful, really beneficial. There are situations where I probably wouldn’t recommend it. That doesn’t mean some variation of patterns and components and things isn’t needed in most cases.

Ben: But if you have a single product and a small team and you’re in startup mode, it’s probably not worth investing all this time and money to build a design system to support a single product. It's just the bang is not there for your bucks. So there are definitely use cases. That’s one of many where I probably wouldn’t recommend it.

Ben: In terms of once you’ve made that decision to pursue it, then it is about making sure leadership is on board at some stage in there, you have to make that transition to getting leadership really bought in. Not every system starts that way. We talk about in the maturity model, there’s a concept called origin stories, which is just really how involved and aware and supportive your leadership is in those early stages.

Ben: And there are many systems that are very successful now that started without any... No leadership involvement at all. It’s a transition; it’s maturity that has to happen. And as part of a successful system, you do need that long-term, but the way we help our clients figure out how to get support from leadership is that we do what you would do with any other product as we go. And we talk to those folks, and we try to understand what their needs are and what their goals are.

Ben: And how can a design system be shaped to serve those things that are important to them? And if you can reposition, the effort in a way that it solves problems for folks, they’re going to be willing to support it. The other big thing to talk about in those early days when you’re selling the systems especially is that you... A design system is only going to show its value over a very long period of time.

Ben: So this is truly an investment, right? It’s the kind of thing you put time and money into, and you have to trust that over the years, you’ll start to see a return on that, but it’s not a quick thing. So being clear about that upfront is actually really helpful in the work. And your last question was about, is it something you just sell once? And then you’re done.

Ben: I’ve never seen that really work. It’s a constant. That actually is part of the maturity model. We talk about three things, education, which is convincing folks, talking to folks, casting the vision, explaining why, what, how, and all those things. Engagement, which is getting folks involved in the work with you. It’s not a one-way thing.

Ben: It’s definitely very... There’s a lot of work required from all the different groups involved and then evolution, which is just simply making the system better over time. So if you’re not doing all three of those things all the time, you get stuck in that, in those steps to mature, so that’s what we’ve learned.

Vitaly: Right. Well, that’s very exciting. I’m wondering, and I really want to know more about what you have learned because you did mention that you and the wonderful team at Sparkbox have released the design systems survey 2022. And I’m really curious about some of the new things that you maybe haven’t uncovered there. What were some of the most surprising findings that you discovered there during that research?

Ben: Yeah. I mean, each year, we do that. This is our fifth year releasing that; each year, we come away with some really interesting insights, and this year’s no different. One of the things that really stood out to me I remember when we were working on what questions we would ask this year. And there was a series of questions in the survey this year about your top challenges. And we give folks a list of options to choose from, and then what are your top priorities? And we give them the same list.

Ben: And I remember reading that question and saying to my team, aren’t people just going to pick the same things here, right? If these are my challenges, then why wouldn’t those be the things I’m prioritizing? But they convinced me to leave it in, and they thought we would find something insightful there. And, of course, they were right. One of the things that are really interesting to me is in that survey; there are a handful of areas where you can see a difference in what is important to people in terms of what is a challenge and what they’re actually able to prioritize and work on?

Ben: The one that stands out the most is staffing. And this ties in actually with what we were just speaking about, Vitaly, around that stage two to stage three transition where you need to grow the team, the number of folks working on this, like the volume of work gets much larger as you move from stage two to three. And if you don’t have the support from leadership to increase staff, which is what that is hinting at, you can’t really do that well. You can’t make that transition well, and to me, the way I’ve interpreted this is that a lot of folks in the survey data say staffing is a big challenge, but it’s not; it can’t be a priority for them.

Ben: And it’s interesting because I think what that means is there’s a separation in the things that the design system team has the authority to prioritize, right? So they may be able to say, β€œHere are the things objectively that we have as challenges,” but maybe they don’t have the authority to choose how to spend the money or how to prioritize things, which I feel is a disconnect. If we’re going to trust these folks to run this design system program, we have to trust them to set their own priorities. So that’s one that stood out to me for sure.

Vitaly: Right. Right. It’s always kind of a story because I think in many ways when I deal with companies that choose to go ahead and give the green light to the team for design system, there is still always a little bit of trust that this is a simple, relatively simple site project, which is not going to drive us away from the main core product that we’re working on. So if designers, in this case, believe that this is the right thing, surely this cannot be the priority. And so surely there will be no extra stuff involved in making this happen.

Vitaly: And so that’s pretty much, I guess, aligned with what you are saying here as well. And obviously, people are important. So I’m wondering, though, in your experience, maybe that would be interesting to explore. What would you say are some of the important ingredients of a successful design system? When do you know that you are on the right track? Or how do you know, do you ever know, Ben? Do you ever know?

Ben: Yeah, it’s hard, man. It’s hard because it gets into the promises you make early on, which are the things that people are going to expect you to prove later. So I think successful systems can look very different inside different organizations, and it’s really. I wish there were a simple answer. I think there are some common things; we talk about a lot of those things in our survey we ask each year, do you feel your system is successful?

Ben: And then we can take that information and look at the other characteristics of design system programs that where they feel they are successful? And then we can make some interesting observations. One of the things that we always see is that having better engagement almost always means that individuals feel that the system is more successful. So, in other words, you can’t operate on this. You can’t build and offer a system unless you’re actually working alongside the people who need it.

Ben: It’s like any other product, you have to understand their needs, and you have to get down into the work with them. And so that’s what we encourage and help our clients set up as those engaging practices. I think the educational side of it is always key too. And this is where, in fact, this year, one of the things I’ve been focused on is just going back to what a design system is.

Ben: And this sprung out of a couple of consulting engagements last year, where big companies that have had systems for years, and we get in there and ask a ton of questions. And what we understand very quickly is all the people here have very different ideas about what a system is. Why it’s important? How should it be done? And this is seven, eight years into folks working on this stuff. And people still don’t actually understand what a design system is? And so that’s a problem, right? And-

Vitaly: Right, right.

Ben: ... I’m not saying that you have to have the same exact definition that I do, but if you internal to your organization, don’t have that defined, that’s where the real problem is. So we did a bunch of work this year to lay out what we just call the anatomy of a design system, which is a very simple breakdown of what a system is. It gives us some common language to use, and that’s been really helpful for our clients and for us as we work alongside them. So I think going through that exercise with your own internal team is one way to make sure that you’re going to be setting yourself up for success. There are probably many more.

Vitaly: Right. But then, Ben, can you maybe shed a bit more light on things like, β€œHmm, how would I put it best?” So if I’m working with semi design system in the company, and I’m pretty confident that things are going in the right direction, and it seems like everything is reasonably well structured within the organization, there are people who are working on it. It goes as it’s supposed to be. What would you say as some of those red flags that one usually should be aware of? Just avoid... I don’t know, deterioration, I guess, of a design system in the company.

Ben: Yeah. There are definitely seasons. I think folks go through where they feel like, β€œHey, we’ve got things figured out. We have a good groove. We’re following our processes. Everything’s good.” I think one of the things that we’ve seen is that, like any other product, there is a level of stability you have to aspire to as well. And the same challenges that we’re used to solving for our externally facing products are also going to be the reality for us with an internal product, like a design system.

Ben: And that’s when things change around. And so many times we’ve come into work with an organization where they felt they had a great program running and leadership changed, like a new director comes in, or a new VP comes in. And they have a very different perspectives on how to approach the work. And they haven’t been there for the journey that you have been on. And so, all of a sudden, you’re thrust into this instability where you have to, again, prove that you’re a valuable part of the organization and the process you have to show.

Ben: Sometimes, this is where the metrics come in, where you have to not just tell them which you have to actually show them. And so that’s one tiny example, but shifts in the market, right? Pivoting a product like a rebrand, all of these kinds of things can impact that. What feels like that stability? And so we try to think about... We’ve done a bunch of work to try to figure out what are the things that we can have in place in the seasons where things are feeling good. How do we make sure we’re creating more stability that will actually help our system last through those kinds of changes?

Ben: And there’s three big things we’ve identified. The first is authority, which is that real visible support from leadership. The second is value, which is that you’re continuously monitoring the product you’re offering. The design system itself is actually valuable to the folks you’re asking to use it; that’s engagement, right? You have to be making sure that it’s doing something helpful for you... It has to be the easiest way to work, and then tradition is the third.

Ben: And that’s a little bit different in that you earn that over time, right? Having authority and being valuable over time, you become the way an organization builds interfaces. And that tradition of this is how we work. Actually is quite a stabilizing force in the context of a lot of change. So those are the three things we help our customers put in place in order to create systems that last beyond just those seasons of feeling like we’ve got it figured out.

Vitaly: Right. But I also think the underlying asset behind all of that is something that we spoke about in Berlin when you were here. I remember that cup of coffee. That was a very nice cup of coffee.

Ben: Yeah. That was good.

Vitaly: And also very nice conversation that we had back then. And we were talking about culture.

Ben: Yeah.

Vitaly: We’re talking specifically about... For all of this to succeed, we need to have proper culture and companies and organizations that not only support and enable a design system but also have a little bit of a design system sprinkled pretty much everywhere in the organization. So maybe you could share a bit more on that because I know that you spent quite a bit of time working around design systems and culture.

Ben: Yeah. Yeah. This is what I’ve been working on most recently. And I’m so excited about it. I think I have learned a bit from a couple of our engagements with clients where... Any place where people are getting together consistently, a culture is formed. So that means if you work at a big company, there’s an organizational culture that is created from all of these folks coming together to work on a thing. But also, each day, you’re probably not interacting with every employee.

Ben: And so, your small team that you interact with on a daily basis will form a subculture that exists inside of that larger organization’s culture. And there are probably hundreds or thousands of subcultures inside big organizations, right? The group of folks who get together on Zoom and knit over lunch, there’s going to be a subculture formed there, right? The book club where they’re reading about whatever science fiction book just came out.

Vitaly: Well, I love a Good Book Club.

Ben: Yeah. See, there’s a subculture being formed there, right? I have been doing a bunch of research by just reading papers from the last few decades of other folks much smarter than I who have been researching organizational culture. And I’ve been looking at that because I feel like there’s a missing piece in what we’re talking about with design systems. And that’s an observation that I’ve made just in our work.

Ben: And one of the things that I think is helping us to frame that challenge up a little better is understanding the different types of cultures that can exist. And there’s lots of material on this. There’s a model that I love. That’s, I think, from the late or early ’90s, which is called the competing values framework. And I’ll send you a link that at least you can share in the show notes, butβ€”

Vitaly: Absolutely.

Ben: ... it’s really nice. And it just takes two ideas on a spectrum X and Y. And it gives you four high-level general types of cultures that can exist in an organization. And one of the things that I’ve learned is in my interviews, almost every single one of our design system teams that I’ve talked to is on the left side of this diagram, which means they’re internally oriented. So they’re either collaborative or they’re controlling. Those are the two culture types that are the most common for a design system team.

Ben: And that makes sense, right? A collaborative approach is when you’re saying, β€œHey, everybody come help me do this.” And together we’ll build something that we can all use. That’s very common. And then controlling is a little different. And that’s we’re saying, β€œHey, this design system is in place to ensure that the output is consistent.” And so you cannot veer from this. It’s more like us being restrictive.

Vitaly: Like a strict guideline that we need to stick to, right? Mm-hmm.

Ben: That’s right. So those are the two... This is very general, but those are the two general ideas of cultures that exist really in design system teams, but there are two others, and those are more externally oriented. And one of those is competitive, which is about being driven by the market, and the other is more entrepreneurial and it’s creative, it’s called. And these are folks who are just trying to disrupt stuff. And so, with these four ideas, what I’ve learned is some of these cultures work well together, and some of them don’t.

Ben: And as a design system team, you don’t get to choose the culture of your organization, right? You are going to be a subculture. And so what we’re learning now is there’s a lot of nuance in being smart about how to structure the culture, how to curate the culture of your design system team in a way that it can operate successfully inside the larger organization’s culture.

Ben: And that’s a lot of the work that I’ve been doing. And I’m real. I just feel like there’s so much to this. I have a lot more research to do, but it’s already starting to show a lot of value in our consulting work, so-

Vitaly: Yeah. Yeah. That makes sense. Because once you have an organization that already has a culture in place, you probably can’t change that, but you might change the way how your design system would operate in that environment to make the best out of that.

Ben: That’s right.

Vitaly: Well, I hope that at some point you will be, I don’t know, writing articles, maybe even books about this.

Ben: Yes.

Vitaly: Either hear something, a rumor about an upcoming book on just that eventually.

Ben: That’s the plan. Yeah. Trying to put something together that has these three big concepts, the anatomy of a system. So actually getting some nuts and bolts about being very clear and articulate about what a system is? Understanding how systems mature, as we’ve already spoken about, and then recognizing the impact of an organization’s culture on the design system team and how we can structure that in a way that it’s successful? So those kinds of the bigβ€”

Vitaly: Any deadlines that you’ve put yourself in your calendar?

Ben: I’m hoping to have my draft done this year. And then from there, that the whole process of editing and all of it, so-

Vitaly: Yeah. I even know a publisher who might be interested in publishing at some point-

Ben: Oh, yeah.

Vitaly: ... who knows you.

Ben: Yeah. Give me their name.

Vitaly: Yeah, I will, I will maybe let’s just spend a bit more time thinking more hands-on about what are some of the things that designers developers working in organizations, working in companies on a design system? What can they do to make things a bit better for the process, for collaboration, for the workflow, for everything?

Vitaly: Let’s start maybe just by you briefly maybe highlighting, how do you start the kickoff projects when it comes to design systems with your clients? What do you usually start with? Obviously, there is going to be some research involved and all, but what would be the initial steps to get to a solid foundation early on?

Ben: Yeah, you’re right. It is research. We call this phase onboarding at Sparkbox and what we try to recognize is that those early days of an engagement like that, or the days when you know the least, right? And so we try to embrace the idea that we’re going to know a little bit more tomorrow than we did today. And we try to be very iterative. I think those early days for us are oftentimes about building relationships with the folks inside the organization.

Ben: And we do often ask to be introduced to lots and lots of people, even if we’re not going to work with them daily in the design system work. We still need to know what they’re dealing with? What they’re going through? How are they accomplishing their tasks each day? What are their goals? And what we’re trying to do is I think, model for our clients that you cannot do design system work effectively unless you really truly understand the needs of your users, your subscribers.

Ben: And so that is where we start. And so it’s about... We do that in a lot of different ways. So we may run a small internal survey and send that to lots and lots of people. We may schedule three to five interviews with each discipline. And one of the things that’s a little bit of a pet peeve of mine is that we talk so much about how a design system can benefit a designer or a developer, but we ignore a lot of other disciplines.

Ben: And so one of the things that we’re intentional about is making sure we’re not only speaking to the designers and the developers but also let’s talk to some folks in QA, let’s talk to the product owners. So let’s talk to UX research folks. I think the system should be broad in its goal of serving lots of different disciplines. And so the only way that we can do that is if we understand the needs of all of those folks so that’s how we get rolling.

Vitaly: Right. And then, as time progresses in terms of collaboration, let’s say between designers and developers, right? It’s still always a topic handoff or no handoff. Den Mole and Brett Frost are speaking about the hot potato model as we throw.

Ben: Yeah.

Vitaly: The stuff from designer to developer, from developer to designer, it’s all alternative. And there is no notion of a handoff because it’s just happening all the time in small bits and pieces. What do you see working? Or do you see it working best or maybe not working well at all?

Ben: Yeah, it’s funny there. This is a spectrum; there are so many organizations that are more iterative in that way. There are a lot of organizations out there that are still very linear, and I definitely fall more in the camp of iteration where we believe, but I talk with our team a lot about this idea of empathy. And I’m not talking about empathy for our end users. I’m talking about empathy for the other disciplines that we have to work alongside.

Ben: And I think that is key to doing this work well, is understanding that every decision you make, say you’re a developer, every line of code that you write to build an interface has an impact on the visual side of the things, right? So, and the experience for the end customer. So recognizing that all of our decisions are interplaying with each other, I think, is necessary. And that’s where building relationships with those people is the way that you can do better work.

Ben: So we encourage that. And that’s why I love design systems because it forces all of us onto the same team instead of us thinking about, β€œOh, I’m on this products team.” No, we’re actually all trying to build stuff that better serves our end customers, right? And the one way we can do that is with a system.

Vitaly: Right. And when it comes to... Let’s say those little fine little details; for example, many teams will be working with storybook on the coding side of things and then Figma on the design side of things. How do we then, the ultimate, the billion dollar question from me to you? Ben, of course, how do you breach that gap? Will tools save us? Will processes save us workflows, Slack channels? I don’t know. You give me an answer, Ben. I don’t know.

Ben: Yeah. I definitely don’t think tools are going to save us. I get asked a lot about tools because right now, especially with design system stuff, there are so many tools coming on the market, and every tool that’s out there is investing heavily in offering better and better services. And that’s great. We need that innovation happening in the space for sure. And I’m not saying you shouldn’t use tools, of course, but I don’t think tools will save us.

Ben: I think it’s... So in our anatomy of a design system model, we talk about every layer of the system consisting of three different parts. And those are, of course, the assets, which are the things everybody thinks about, the files, the components and react, the Figma designs, all of it. But those are important, right? But also, we talk about documentation, which is like a major piece, which is offering a really actual, insightful explanation of what a component is or what a token is. Or whatever the thing you’re documenting.

Ben: Of also, why is it important? Why is it that way? And, and then we also talk about the process as a key part of that, of this for each layer. And this is, I think I had to say what will save us; I think being intentional and thinking through the actual process that you’re going to follow and being clear about what it is and how to follow it is the way that we’re able to set these different disciplines up for success. In the example you said, designer developer, like one of the common things that one of the biggest challenges we see is that folks don’t trust the design system because the version of it that a designer used is no longer in sync with the version of it that a developer is going to use.

Ben: And that’s a problem, right? Because now, all of a sudden, I’m going to... The next time when I come around, I go through the process thinking that it’s in sync, and at the end, I realize, β€œOh my gosh, I used the design system as a developer. And now, the output is different than what my designer designed. That’s a problem. I’m not going to want to use the system anymore because that issue means I have to go redo stuff, right? So that actually has taken away any efficiencies that we might have gained by having a design system because I’ve just created a bunch of rework for myself.

Ben: So the solution to that, there’s two big things, right? One is defining a process to keep these things in sync and just being clear about what that is. And the other is transparency about the current state of each piece of a system. So now, I can choose as a developer to use the system. I know if there’s transparency, and I know that it’s not quite in sync with what the designer used. That just means, oh, I might have a little bit of iteration to do on it, but I haven’t gone through expecting it to be perfect at the end so that transparency creates trust.

Ben: And the process is the way that you can say, β€œHey, we know things will, at some point, become synchronized, you can choose to wait until that’s done, or you can go now and maybe help us create the synchronization.” So I think those are the two things that’s just one example, but it’s a balance, right? Of the way that we work with each other and the tools offering some of that automatically. And then when they don’t putting the process in place to do it manually, so-

Vitaly: Right, absolutely. Well, that sounds very exciting. Well, I do have to ask one more thing, Ben; as we’re wrapping up slowly, I know that you’ve been working on so many different projects with so many different companies, so many different brands, and so many different designs systems across. I don’t know how many companies and brands, at this point, do you still have a dream project that you would love to be working on one day? I don’t know, maybe it could be a design system for a big brand, or maybe it could be anything else.

Vitaly: I know that you know, you are a big audio guy, right? So you have been spending quite a bit of time with audio and as not your engineer as well, and you have so many other things that are really interesting to you, and during the conversation that we had back in Berlin, I just realized just how broad your interests really are. So if you could do anything, any big project that you would like to take on, what would it be?

Ben: Oh my goodness. Yeah. I think it’s not, for me, it’s not about the size of a company or the brand awareness, that kind of thing. I mean, we have worked with some big organizations, and that’s always fun to... When you’re talking with your family later to be like, β€œOh, you went to that website; we helped build that.” That’s always a fun moment, but I think for me, it’s always been about impact.

Ben: So if there was a way to help organizations actually create that unity on their teams, that’s the thing that really is driving me at the moment. So, the idea of a book, I think, is a way to put that together and actually see folks grow from it and make better decisions within their daily work.

Ben: That’s pretty exciting to me. The other one, I think, is just that I really enjoy teaching and working with folks. And so, I think at some point in my future, I probably will find a way to give back in that way. And that’s pretty exciting for me to think about. So there’s a couple.

Vitaly: That sounds great. That’s great. So dear friends, we’ve been learning quite a bit about design systems this episode, but I’m still wondering, what have you been learning about lately, Ben, that might not be related to design systems or might be related to design systems? What keeps you busy these days? What keeps on a toast?

Ben: Yeah, that’s fun. My son is at a camp this week, and he is studying VR gaming. He’s learning how to make VR games. And so, he and I have a lot of fun. He’s learning to program as well. And so my computer science background gets me back into some code, goofing around with him. So there’s some stuff I’m learning there. I’m always learning about coffee. You can probably see some of my coffee equipment here. So I have a couple of new toys that I’m playing with within the coffee world too always, so-

Vitaly: That sounds great. So do you think we should be expecting you to become a VR developer or VR engineer or barista anytime soon?

Ben: Yes. That’s definitely. I’ll be a barista probably in the near future if nothing else works out.

Vitaly: Right. Well, that sounds about right. If you, dear listener, would like to hear more from Ben, you can find him on Twitter, where he’s @bencallahan, and will obviously post the link to it in the episode notes and also on his website @bencallahan.com. That’s not very surprising, or I would say, but you also can find him @sparkbox.com, where the wonderful sparkling Sparkboxers. Is that the right way of saying that?

Ben: That’s what we say. Sparkboxers. Yeah.

Vitaly: Spark boxers are doing all the incredible job on design systems and beyond. So thank you so much for joining us, Ben. It was a pleasure and fun as always.

Ben: Yeah.

Vitaly: Any parting words of wisdom streaming to the internet out there as an Internet Explorer?

Ben: Oh my gosh. Internet Explorer. No. Well, go check out the second draft of the tokens spec that’s coming out. There’s a lot of feedback needed there if you’re into that space, so that would be a thing. I would encourage folks to go read.

Smashing Podcast Episode 50 With Marko Dugonjic: Can You Change A UX Dinosaur?

This article is a sponsored by Storyblok

In this episode, we ask how you can affect change to UX design in large organizations stuck in their ways. Vitaly talks to Marko Dugonjić to find out.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: For him, everything started with a passionate love for CSS and typography in early 2000s. He used to be a front-end developer and UX designer, then moved to the role of user experience director. Working with plenty of clients, such as Deutsche Telekom, SGS, Hrvatski Telekom, Font Bureau, L, National Geographics, and so many others. He also built a tool called Typetester, which has gained quite a momentum in the 2000s and even beyond that, allowing designers and developers to test their topography in the browser.

Vitaly: Now, five years ago, he moved from Zagreb, Croatia, where he's originally from, to Sacramento, California, where he now is working as a Director of User Experience at SymSoft Solutions. So we know he's an expert in UX, but did you know that he has been an avid fan of Acapulco Beaver's Handball team from Zagreb since the age of seven and remains one up until today? My Smashing friends, please welcome Marko Dugonjic. Hello, Marko. How are you doing today?

Marko: Great... I mean smashing, I guess.

Vitaly: Excellent. That's wonderful to hear. It's interesting because we have these conversations every now and again, talking about the meaning of life and so many other things. But one thing that really excites me, and I think it deserves a bit of attention, I have this incredible story of how you actually just fell in love with the web many, many years ago, where you used to do something very, very different. And look at you now, work on enterprise applications for a pretty fancy company. Can you tell us a bit of that backstory?

Marko: Sure. It's a weird story in a way, but maybe it'll give someone an idea about how to start with completely different expectations about your career in life and end up in, as you said, in California. And so my story really began when I tried to build a website for, believe it or not, my dogs, my kennel because I used to breed dogs. And at that time, my full-time job was as a fitness trainer.

Marko: So as I was working with people who would have rehabilitation needs or any type of permanent or temporary disability, I also learned about how people who don't have the visual ability to use the web by listening to the web pages. And so one thing led to another, and I was thinking about, "I have this website for my dogs. Is this even accessible?"

Marko: And so what do you do in early 2000s? You find a web forum where real web professionals reside, and you start asking questions about how to improve the accessibility of your website. And it was really just my hobby website, and it's almost something that I've built out of my front-end or front page software, Microsoft FrontPage. I don't know if you remember that one.

Vitaly: Who doesn't, Marko? Who doesn't?

Marko: And I don't know how, but I never used tables for layout, but I did. And this is probably the first time after almost 20 years that I'm saying it, "I didn't use tables, but I did use a bunch of frames." It was a frameset that pretty much I used to create the header and the sidebar, and the footer. So I had four frames on that page.

Marko: And of course, it didn't validate and everything was really horrible from [inaudible 00:03:45] perspective. But I was hoping that the web design community would help me. And I started researching and learned about CSS positioning, and that was the first thing that I fixed. And then, I learned about Internet Explorer because at the time, I was using Mozilla. I don't know what was even before Firefox. Maybe Phoenix or something like that.

Vitaly: There was Netscape Navigator, of course.

Marko: Netscape Navigator, yeah. I knew about it, but I think I onboarded with the Mozilla type of browser. But what happened is that at some point, the web forums really weren't enough for, I guess, my obsession with making things perfect. So I started reading web standards from the W3C website, and I read the specs because I thought, "This is probably what every web professional does." And so this is how I learned about accessibility and web standards and all the stuff.

Marko: So that was 2002, 2003. And then one thing led to another, again. I was participating in these web communities, and eventually, people from what today is called Human Design Agency from Zagreb, had a call just like this one. And they said, "Hey, would you like to be paid for what you know?" And I was like, "What are you talking about? I'm a fitness trainer."

Marko: But they did convince me, and then I joined that incredible team. We just had so much fun back in the day. And stayed with them for a couple of years, then moved on to an in-house position, and everything else is pretty much standard. But I think that moment when I realized, "I know something that somebody's willing to pay for," was incredible for me. Again, at that time, it was still almost like a hobby to me. But soon enough, it became a profession.

Vitaly: Right. And then, of course, you also ended up having your own studio, which then eventually, after a couple of years, moved you to this decision of maybe it's a time to move to or try to move to the US. How did that happen?

Marko: Well, I think what has always been following me is that I didn't really have any general plan. I knew what I wanted to do day-to-day. I knew what I felt about projects and work and skills and all that stuff, but I didn't really have a general plan of moving from this company to another company and then to that company. It was really about maybe selecting good projects, and good people to work with.

Marko: And so when I had my studio, we became pretty international. And you know that we also collaborated on a couple of projects in Europe. And for me, it was really for the past couple of years in Croatia; it was really just 100% international. And so one of our clients, and through a good friend, Christina Portner, who also participated in some of the Smashing activities, I think she gave a talk and had a couple of articles for you guys.

Vitaly: That's right.

Marko: She introduced me to Savita Faruki, who owns SymSoft Solutions with her husband. And it's a nice, small, family-run business. And looking at the projects that they had and still have, it just made sense for me to move over here, and so I accepted the offer that they extended to me after that visit. Where I really didn't plan to get employed, but we were just discussing some of the collaboration and maybe working on some projects together, but it ended up being me becoming a director of the user experience here at SymSoft.

Vitaly: Right. That's an interesting story, and also chose a journey that one can take from one place to a very different place. Now you've been all around UX for now 15 or 20 years now. I don't even know. Who counts at this point anymore at this point? And of course, you've seen quite a lot of stuff happening in terms of just UX, I would say.

Vitaly: We've been fighting, as you could probably find thousands of articles stating that we need to have a seat at the table. And it seems like now, at this point in 2022, we have a pretty solid seat at a table. Do you think that we are in a place where we wanted to be 15 years ago? Is there still something missing? Where do you see us as a community and just as an industry, I guess, in terms of the state of UX today?

Marko: So I think the there's a couple of things right in there. It's an interesting and also complex topic. So I think we do have a seat at a table; however, the horizon is now different. Because as you travel, you just discover other things are behind the horizon. And so once you climb that first peak, then you reveal more peaks to climb. So I think this is where we are right now.

Marko: And a huge thing that nobody really talks about is that even IT or digital as a whole has had that problem in the past, of the seat at the table. And so we just now joined the crowd of people who might have better access to decision-making, but it's still not at the level where we can really immediately influence any decision, especially in big companies and enterprises.

Marko: Obviously, this is where I work at. Startups and younger companies are slightly different there. But enterprises or anything massive, like big insurance companies or big telecoms or financial institutions, or the government, 90% of my clients are now the government... these organizations have been around for years and hundreds of years, even.

Marko: So old ways and things that led to the success that they have right now are not necessarily something that you have to change, but very often, you can also change them by applying correct organizational change management principles. So I would say the challenge that we have nowadays is just general organizational change management. That's a hot topic.

Marko: And again, it's not just the UX people. I think it's the technologies in general or anyone who just have this new way of managing things. I would say digital marketers as well. So all of us, we have to sit at the table, but there's just this huge job of driving and steering the organization into whatever is next, whatever is the future.

Vitaly: Right. That's interesting. Maybe we should dive into this a little bit more in a little bit more detail. Just because, of course, we read and see and hear a lot of articles around UX, and many of them are very much focused on traditional, I would say, good all startups, digital products, and so on and so forth.

Vitaly: But at the same time, I find it quite difficult to even find case studies about enterprise UX. So maybe you could actually share those insights about if you do have this situation where you might have a seat at the table, but you actually need to change the organization. And organizations of that size are usually very reluctant to those changes, and people don't like to change their habits quickly.

Vitaly: So what would be then your process to make it all a reality, to establish a user-centric approach in a relatively tight and conservative and maybe even quite dated, let's say, environment?

Marko: Well yeah, sure. I wouldn't say necessarily that the organization is resistant to change or that people are not willing to change. Just, I would say the volume or the size of the organization is really your biggest enemy because you can influence only so many people in your immediate circle in the organization. And then some organizations are lucky enough to have a big enough UX team or, more broadly digital team that would also have a bunch of developers, solution architects, business analysts, and any type of role that you can think of in IT.

Marko: So it's just a matter of how many people you can touch within the organization with the new principles, how many people are actually in a UX type of project, user-centered service, something like that. So the change doesn't happen in the way of infecting people. You cannot just spread the UX type of virus to people, and they'll all get it. It requires a lot of effort. It requires a custom-tailored approach to communication.

Marko: Someone who has a desk job and is in departments that are understaffed, for that matter, they don't necessarily have enough bandwidth or capacity. And it has nothing to do with the personal preference of the individual person, but just the organizational structure is such that you don't have access maybe, to everyone that you would like to. And of course, it would require a lot of, a lot of time out of the regular day-to-day desk job for people to even get educated.

Marko: So I think the biggest enemy is the size of the organization. So you have to strategically pick and choose your champions within the organization. People who, whoever shows up on your open office or office hours, whatever you call it, meeting, that's a good champion. Even if they have low maturity in UX, these are people who have the intent to change something. And so strategically picking and choosing people, and then helping them become almost like a mentor within the organization to the people around them. And maybe you'll have that department embracing more of an interactive approach to understanding end customers.

Marko: I think this is the way to go. But again, I don't think people should be discouraged with that because even 1% improvement in the business process or in conversions or in optimization is... Vitaly, you and I work with web performance and conversions and E-commerce and all the stuff, and 1% can be a huge improvement.

Vitaly: Of course. I'm wondering, though, just what your way of dealing with a situation is when you have people in front of you, maybe higher up the ladder in senior management, who just have a very different view on things. Who very strongly look, of course, at their data and their KPIs, at their business metrics, and try to move them.

Vitaly: And how would you then, in a case where you, again, have to work with a company that might not have a user-centric approach at all and maybe don't think about the customer experience as much as they think about the financial benefit by the end of the year? How would you then argue in those kinds of environments about the role of UX or the importance of UX, or the importance of customer experience?

Marko: Well, I think the best way to sell something is to show them with a live example, with a practical example. And you also know that whenever we would come to an organization and say, "Hey, let's see what's the problem there." And you and I worked with a major German retailer couple of years back, and they were saying, "Hey, mobile is not performing really well. Desktop is much better." And then we realized that the average visit to a mobile E-commerce solution that they had was about 50 years or something like that.

Marko: And so once you start showing off these numbers and say, "This website is now faster," or, "This software will shorten the time from idea to conversion," just, I think performance is such an easy-to-use tool to convince people to invest into it, that it's just unbelievable... Because you can measure the before and offer, and this is something that my team at SymSoft always does. We always do the baseline measurement, whether that's the conversion rates, satisfaction, whatever, you name it, seconds to load.

Marko: And then we test and retest and retest and retest, and then you have hard facts that you can actually tie back to dollar value. And this is how you convince people that this is a good investment. And again, just starting small; almost like when you work with a new chemical that's dangerous, on your car or whatever... they say, "Hey, try somewhere where it won't mess anything up, like in a corner that nobody sees." And so we can also pick a pilot project, a really small case study, prove that it works, and then scale it up to something larger.

Vitaly: Would you say that it's important to have a buy-in at this point? Or would you say, "Just go ahead, experiment. Build a little prototype, maybe even a little bit in your spare time," just to convince that this is working? Or do you think that commitment from management and green light and approval is critical here?

Marko: So I would say that, and again, this is my experience. I don't necessarily think this is something that happens in every organization... But for me, whatever worked, whenever I was proactive and more on the side of, "Hey, let me do something in my spare time," or, "Let me finish the main task earlier so that I can actually work on the fun stuff."

Marko: Also, signaling to the management that you are proactive, that you are self-driven, that you are self-motivated, that you're not waiting for someone to approve, that you're not waiting to be served or approved or given the space. So I think management definitely likes people who are just thinking that way.

Marko: And so you basically have two benefits. You don't have to ask anyone for permission; you can figure out what is the scope and what is space available for you and just decide to do it. And then, if it doesn't work, you are not even embarrassed. Nobody needs to know. But if it works out, if it's a nice prototype, if it's a nice concept, you can definitely present it to the upper management.

Marko: And then again, you get double credit. You create something fun, but you also show that you care and that you are proactive and self-driven, and all these qualities that everybody ever always writes on the job posts, I guess.

Vitaly: Right. Well, you did mention scope, and of course, it's a wonderful keyword for me because, of course, I can almost hear the voices in the back asking about how to deal with scope creep. I mean, you are working with very different organizations and, well, of really big size. And eventually, I'm sure there will be situations where late changes come in, poor specifications are in there, communication issues, delays, and all of that.

Vitaly: So what would be your way to prevent things like this from happening, where you're missing deadlines because of the scope creep or poor estimates? What's your process in there to make sure that we don't get in trouble for delays and maybe underestimating the effort needed?

Marko: That's really a great topic. I think there are two things in there. So definitely, if we underestimate, it's completely on us, and there's no... That's very clear. It's on us. We should have had our due diligence before the discovery stage of the project when we were estimating. But these things happen, I guess, in the beginning for everyone, until you have enough experience to move from a one-page contract into a 50-page contract.

Marko: And my friend, Eva Lucas from NetGAN, from Croatia, he said once to me, "Hey, we started with one page for a contract. Now we have 70 pages," or something like that. So as you are more experienced, you just put more things in the contract and you, I guess, put more things into researching and estimating, and you probably track your hours, and you know how much time for each feature is required. So as you grow more mature in the field, there's less surprising when it comes to estimates.

Marko: Now, the second topic, which is the scope creep, usually in enterprise organizations, they already have this type of... they mitigate that with, again, other contractual clauses. Maybe something that you can communicate early on is the unanticipated effort budget. So that might be 10 or 20% of the budgets that's allocated to the project, that we don't have to spend, but this is our contingency plan.

Marko: And then another thing that's very, very useful, and this is what my director of project management always enforces, is regular meetings. Every week, we have at least weekly meetings. If not, daily stand-ups with the project management on the client side. And we have a really detailed status report that we carry over week after week after week. And we update it, and share it with everyone.

Marko: And we are not really afraid to raise any old risks. So whenever we see that there's a delay in reviewing and providing feedback, we will put it out in the status report, change the green light to yellow light, and just say to everyone, "Hey, we think that this is something that can get out of control."

Vitaly: Yeah. So that's a very interesting point for me as well because I was working with a company where this turned out to be quite a helper. So really having a more clear overview, I guess, of what our expectations are, what the process is going to be, when we expect some feedback and what kind of feedback we expect as well. And one thing that was really critical and useful at this point was to actually explain to clients that late changes are expensive.

Vitaly: Late changes are difficult to implement, and they are expensive because if you're coming from a very different industry and you're expecting a product to be delivered, you might not know just how expensive, how difficult it is to actually make those changes later on because you don't have this technical knowledge necessary. So explaining this early on, having this clear communication channel is indeed, I think, quite useful in many ways actually.

Vitaly: From my end, I think, and one thing I actually definitely wanted to cover today is, because this is something that comes up quite a bit and most recently is... you've been, again, in this industry for quite some time and you had your own head where you had your own agency, and now you are working for a company. What do you think, especially for people who might have just a few years of experience in UX... looking back, what do you think would be the right way to just guarantee personal growth in the company? Negotiate salary, get more ownership, all those things.

Vitaly: How would you say, what would you recommend maybe to people listening to this today, if they want to maybe improve their salary, maybe grow over time, maybe take more leadership position? What skills would be required, and what would be the right strategy to get where you want to be?

Marko: That's a great question. And so maybe from a manager position now, I can talk about people that I had in my teams, and what qualifies a successful UX designer or professional in general is, it's always, I guess people who are able to manage-up are more successful. Managing-up meaning that understanding that your supervisor or whoever you report to also has their life and their problems and their different, different tasks. And just understanding your overall environment, it's leading peer-to-peer.

Marko: So the understanding is that if you're in UX, there's another person at the same level in your organization in frontend or backend or marketing or project management. So just being aware of who's above, below, on the side from you and just understanding that these are also people. And then, what can you do to really move everyone, together, forward? And so this is, I guess, the attitude, being proactive, something that we talked about a few minutes ago.

Marko: Just not asking for permission because it's not true that you need weeks and weeks to create a concept. Maybe you can just catch something and say, "Hey..." You wake up one morning, and you don't necessarily have to open up your company laptop or anything like that. But just put it on a Post-it, and when it's office time, you just can say, "Hey, I have this idea. Let's do this."

Marko: And that really cost you nothing, I mean, you had that idea anyway. But you're building up your muscle of generating and communicating, and suggesting. And of course, it goes without saying, if you hear crickets every time you have an idea in your company, you should just change the company. But if you have a good environment and receipting environment where you can voice your ideas, that's a great place to be.

Marko: And so what happened is that, once you build up your credit and you look like someone who cares, not necessarily about the company... and I don't want to fool myself thinking that people want to stay here forever, but caring about the quality of work, caring about your teammates, caring about leaving some kind of impact after you leave. And there's another topic that we can also talk about. What do you do when you decide to leave the company? So are you that type of person who thinks about these moments?

Marko: And so once you have that, then salary negotiations are just straightforward because you opened up the communications channels, and then you can just come and sit and say, "Hey, what about the raise?" And then we can talk about that. But if your communication is completely blocked and you're just doing whatever you're told, and you're checking out the tickets, then that conversation about the salary is just difficult because you didn't really create an environment where you have this dialogue anyway, in the first place.

Marko: So I think practicing talking to your boss, good times or bad times, and just not necessarily sharing everything that's happening in your life, but just having this more proactive, I guess, communication. When nothing's really happening, you can just drop by and say, "Hey, this is what I'm working on. It's nothing special, but here it is." And then maybe having this regular cadence.

Marko: And if you don't have one-on-ones, and by the way, which is something that you should have with your boss... because that cadence in one-on-ones really allows you the space at some point to say, "Hey, I would like to work on something else." Or "I would like to have a better impact." Or, "I would like to have a better salary." Or, "Hey, I'm actually looking for a new job. Can you support me while I'm looking for something else?" Just being fair, I guess, to the people that you're working with. So that would be my advice about negotiating salary and these types of things.

Vitaly: Yeah. I think that many people are struggling with finding themselves in companies where there is just no culture for this kind of feedback. I mean, in some good companies, you will likely have maybe 360-degree feedback or 360-view feedback, whatever it is called, where you get feedback from everyone. And then you would have a dedicated time to bring up any issues with your manager once every three months, four months, two months, six months, I don't know...

Vitaly: But this is probably an important part to have or an important asset, I guess, to have at least. I think that many people just are afraid maybe a little bit to ask these questions, to bring this up, because I think that it might create a wrong attitude around them and that they're there in the company for the money alone. But I mean, looking at inflation rates happening right now around the world, it's probably important to have that conversation later or earlier. Right?

Marko: Yeah, definitely.

Vitaly: So maybe also building up on top of that, there're quite a few conversations happening in Europe, at least around salaries. And of course, everybody's looking at salaries in San Francisco thinking about, "Wow! Those salaries. This is incredible compared to the pay you get in Europe. Even if you're living in London or in Berlin, it's just much, much, much higher in San Francisco."

Vitaly: You happen to be in Sacramento, in California, and you happen to have moved from Croatia to the US, and shared the story about how you did that. So now being there, can you tell us maybe a little bit more about how different everything is for you? So do you feel like the culture, the way companies are run, the way people are working together that it's influenced you in some way, surprised you in some way, disappointed you in some way? What was your experience overall in these five years?

Marko: That's a good question. I think looking back, what really was new for me is how people over here are really focused. Organizations, not necessarily individuals, really focus on processes and repeatability of the process. So if you have certain steps, we can talk about the process... In design, we have double-diamond or triple-I or 5-Ds, or design sprint or design thinking.

Marko: And the reason for all of that, which is not very common in Europe... In Europe, we have a problem and solution. These are two steps that we have in Europe or have had in Europe. But here, it has to be detailed a little more with applicable tools and a decision-making diagram. So this is different over here. When it comes to San Francisco or Sacramento, I think in Sacramento, what happens is that we have a government here, so I'm not in a position to compare our environment in the projects to maybe the Bay Area, where there's a lot of just private companies and startups.

Marko: And there's a start difference even here. A two-hour drive from San Francisco. So I would even think, and this is completely my personal opinion, that Sacramento is closer just to the rest of the US than to San Francisco, compared to Europe. But another thing that's really different here is that the whole communication piece is just much more intentional because a lot of people are landing in California specifically from all over the world, and then you have a mix of cultures. And this is something that I definitely didn't think about when I was working in Europe, however internationally, but still, Europe, which is super tiny, by the way, as a piece of land.

Marko: And then we didn't have so many differences in the sense of just different cultural backgrounds, different educational backgrounds, how people have just different school systems in the first place. And so all of these people come over here, they're talented, they have certain talents; otherwise, they couldn't make it here. But then you have these different communication styles, and you have cultures that are just very generally speaking...

Marko: Far Eastern countries have high context conversations. And then you go more to the west; you have low context, which means that you have to always reiterate what the last conversation was. While in some cultures, it's implied. Everybody knows what we were talking about in the last meeting. So just these types of, I guess, communications skills that we develop now are really... that was really eye-opening.

Marko: I think especially Croatia for that matter, compared to California, is super monocultural. It's just unbelievable... That contrast is just super visible for me now, mowing from one to another.

Vitaly: Right. So having moved to the US now, do you feel like at any point you could consider moving back?

Marko: I think so, yeah. That's not off the table. I think what we like here, my family and me, and this was really a more collective move, not just necessarily for projects or work, is the access to nature here is just incredible. The way you can consume nature in California specifically is just unbelievable. It's just geared towards families. And over here, everybody's outside all the time, which is our family style anyway. So these are some of the fun things over here.

Marko: The good thing about Europe is that everything is very close. The furthest away is, I don't know, Spain from Croatia, which is a two to three-hour airplane flight. And, of course, I can fly to LA to visit Disney Land or something like that, but it's a drag to even think about the distances over here. So these are some of the differences that we notice. But again, I wouldn't say it's different or better; it's just, I guess, down to every person's personal preferences.

Vitaly: Right. Okay. Well, now, if you actually could recommend something to yourself when you were breeding dogs back, what? 20, 25-ish, 22 years ago, when you were just starting out with UX and all of that, well frontend and all that... what would you recommend to yourself?

Marko: I guess I would enjoy it more. I would joy the ride more. I was lucky enough to meet really, really great people along the way. I mean, such as yourself included.

Vitaly: Oh, that's very kind of you.

Marko: Yeah. But also coworkers and other speakers and just professionals. I think at certain points; I could have enjoyed it more, I guess. Just being more relaxed and having more faith in the future that things will work out the way they actually eventually did. So I guess, just more patience.

Vitaly: Okay. That sounds good. So we've been learning about UX in this episode of Smashing Podcast. So what have you been learning about lately, Marko? Any podcasts, books, TV shows, anything that drew your attention?

Marko: Well yeah, that's a good point. And you know me, I'm all over the place. Right? So I think lately-

Vitaly: You surely are, Marko. You definitely are.

Marko: ... lately, I'm really into mental health and just on all levels. So personal level, family level, organizational level. Just thinking about all the consequences of COVID, and just remote versus in-person. This is something that I'm really thinking about, not necessarily as something that we have to deal with right now, but what will be the outcomes in the years to come? So just getting ready for that, I guess.

Vitaly: All right. Well, I'm very much excited to actually meet you in person after all these years. In four days, we're going to meet in San Francisco for SmashingConf San Francisco. This is going to be very exciting. Quality time, family quality time, isn't it?

Marko: Yeah. It's going to be smashing.

Vitaly: That's kind. If you, dear listener, would like to hear more from Marko, you can find him on Twitter, where he's @Markodugonjic. And you can also check on Typetester, which is still kicking and still around, on typetester.org. Well, thanks so much for joining us today, Marko. Do you have any parting words of wisdom that will be staying with people listening to this, I don't know, decades from now?

Marko: No. Yeah. Thank you for having me. This is so exciting. And I think the best advice that I can have is to keep reading Smashing Magazine.

Smashing Podcast Episode 49 With Paul Boag: How Do You Ship A Billion-Dollar Idea?

In this episode, we ask what qualities are required to introduce change in large organizations, how to convince management to do the right thing, and how to ship a billion-dollar idea. Vitaly talks to expert Paul Boag to find out.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: He’s a user experience consultant conversion rate optimization specialist, and all-around expert in digital transformation from Dorset in southwest England. He helps savvy marketers, product owners, and UX advocates make the case that a usable, accessible, and people-first experience and are not reading this and seeing this. He’s the best part of business success. In fact, he’s worked in digital for 25 years, and according to his Twitter profile, he’s a very grumpy old man off the web. Apparently, he also is an author of six books on topics such as conversion rate optimization and digital and transformation. And he provides coaching, training, and consultancy for digital strategy. So we know he’s an expert in digital transformation, conversion rate optimization, and UX, and all that stuff. But did you know that he spends every Saturday evening drinking tea and chatting with his Cheshire cat called Frankie.

Paul: Lies.

<span class="smashing-tv-host”>Vitaly: Mass smashing friends, please welcome Paul Boag, and hello, Paul, how are you feeling today?

Paul: Not bad. All things considered. That’s the official British answer to how are you. There’s a really funny comedian called Bill Bailey who talks about that. He says about how Americans, when they’re asked how they are, they’re awesome; everything’s awesome. It’s an awesome day. And I’m having an awesome time, while the British say, well, not bad. That’s as good as it ever gets; it means all things considered.

Vitaly: Means that it’s okay. Yeah. Okay.

Paul: Yeah. Yeah, no, that’s, that’s a good thing. Not bad is good.

Vitaly: Right. Right. Well, it’s wonderful to have you back here. I mean, we go way back, and it’s wonderful to see you in person as well. Although I have to admit, in a very different setting, with a very great background in the back and no fancy lamps, no fancy lighting, no even fancy microphones, what’s going on with your life, Paul. I was told that you’re now not at home. And this is kind of going to stay this way for a while.

Paul: Yeah. So it’s your fault because I saw your jet-setting lifestyle for so many years where you were traveling around continually. And I thought I wanted that, but being me, being old and not quite as adventurous as you going from Airbnb to Airbnb, we bought an RV out in the states. And so we are now traveling around. We’re basically trailer trash now. We’re traveling around the states, sleeping in car parks, and just visiting the various places around the states. It’s good; actually, it’s very enjoyable, but yes, it means I don’t have my fancy podcast set up, and I just look like a disembodied head amongst the brown background.

Vitaly: No, that’s not that bad actually. So I should give you credit for that. You blend in well. Talking about blending in, I would say it’s interesting because always now, when I think of you, I always think about all the things that you’ve been doing all these years. And it feels like you had so many different hats. At one point, you would be doing mostly UX, and you would be doing digital strategy, and then you were coding websites back in the day as well, right?

Paul: Yeah. Well, we all did back in the day.

Vitaly: Yeah, sure. And also, we worked in agencies, and being a big part of an agency and not having your own big career as a digital UX consultant. So I’m wondering, there might be some people here listening, thinking about, who are just starting out their career, and UX is a good thing to kind of dive into. Is there anything Paul that you are now looking back think, okay, I wish that when I was starting out, when was it like 20, 25 years ago, I wish I had known X or Y, what would be those things?

Paul: Yeah. I mean, it was 27 years ago now, which is terrifying. Yeah, it’s a question that I often get asked. I think the main thing that I would say to myself, and of course, it was a very different world back then, and the web was very different. So people often ask me, oh, what advice can you give someone starting in their UX career today? Well, none because I started mine so long ago that it was totally different. But in terms of what I would tell myself, which is what you asked, I think I tell myself to focus on the soft skills. Don’t get caught up on the latest tool or the latest design technique, or whatever. Those things come and go, but interacting with people, being persuasive, presenting your ideas well, and not being a complete idiot to work with.

Paul: Those are the kinds of skills that really last, so. And we’re really bad at teaching those. Take Smashing Magazine, and this isn’t a criticism of Smashing Magazine, because everybody has got this problem. You’ll find hundreds of posts about design techniques, development techniques, all of those kinds of things, but you don’t find as many posts about how to survive a meeting with your boss or how to pitch the design-in, or how to review somebody else’s code without coming across as an asshole. That those are the kinds of skills that I think are in short supply.

Vitaly: Well, maybe we should change that. I mean, I heard that you have a bit of time while you’re traveling some places. Would you like to write a few articles maybe that would be just on that topic?

Paul: Well, to be honest, yeah. I mean, to be honest, a lot of the articles I have written for you have been around that kind of thing.

Vitaly: True. That’s right.

Paul: Because I do tend to write that kind of stuff because I think it’s important. I mean, the favorite article I ever wrote for you was one about mental health, wasn’t it? β€œYou’re not a machine” and β€œyou’re not alone”, which it’s still one of my favorite articles I’ve ever written because I think it was a very important article to write, but it had nothing to do with design or development.

<span class="smashing-tv-host”>Vitaly: Well, I remember another article that you wrote a while back that got quite a bit of... How to put it? It was argued. Many people were arguing if this is a good way of kind of explaining things or not because I remember vividly you publishing that article about SEO, right? Yeah. Do you want to share that story?

Paul: Not really. No. Because I don’t want to drag it all up again. No. So, I wrote an article saying that, yeah, SEO, I can’t even remember really what it said.

Vitaly: I remember.

Paul: But basically, I was rude about SEO, wasn’t I? but that was a long time ago, to be honest. And SEO has come a long way since then. It was back in the day where SEO was a lot of smoke and mirrors, and oh, we’re going to spam links and all of that kind of stuff/ now, of course, because Google’s algorithm has matured, most of SEO is basically good content, which is great. That’s the way SEO should be. And actually, that was what I implied in the article back then, that you should just focus on creating great content. That was part of what I said as I remember. Spend your money on content, not on SEO consultants.

Vitaly: Yeah, yeah. Yeah. Pretty much sort of plenty of SEO consultants that came your way decided to argue with you in the comments. I remember that vividly. Not only in the comments, I’m sure.

Paul: But it was really good, you see. See, I think sometimes it’s really difficult because we’ve lost the ability to disagree without it escalating. I mean, that did escalate to some degree. There were a lot of people that strongly disagreed with me, but I had some amazing conversations at the back of that. And I actually posted a follow-up post on my own site, which basically said, β€œYou’ve educated me.” The view that I shared of SEO on Smashing Magazine was even then a little bit out of date, and that SEO was already transitioning away from what I described as being towards more being content-focused. And so, it was a really educational process to me, and I think it was a very worthwhile conversation. But these days, it’s like that would’ve exploded up into quite a violent and obnoxious discussion. And it did to some degree even then, but not as bad as I think it would’ve done today.

Vitaly: That’s about right. That’s about right. Well, you mentioned that you’ve been in this industry for 27 years now. That’s a lot of time, of course. That makes me wonder, though. So, you’ve been doing this, maybe some kind of similar work, for such a long time. So have we actually managed to sort out these general misunderstandings about the role of UX and what UX means and how to use UX, and how to transform organizations? Because it seems like we still keep running in circles, having the same conversations. So did we fail at kind of doing the good UX education work out there? Or where do you see the state of things now working with companies and organizations small and large?

Paul: Yeah. Yeah. I mean, things have certainly progressed; they’re much better than they were. So I think most organizations now recognize the value of UX, which is a huge step forward. They didn’t always. I think the many larger organizations, UX is taken more seriously. And it does have that β€œseat at the table” to some degree. I think, however, there is still a lot of confusion about what UX is and what it isn’t. I think it’s still used interchangeably with UI. So UX, UI designer. While in my mind, those are very different roles. So yeah, I mean, we’re making progress, but like anything, these things take time, don’t they? Cultural change is always difficult. And when you’re talking about an entirely new discipline and integrating that into existing organizations, that doesn’t happen overnight, and we’re still only a quarter of a century old, which is barely out of our teens.

Vitaly: That’s right. That’s about right. Well, now that you’re talking about those large organizations/companies because you’re spending quite a bit of time working with companies on digital transformation. And I even heard that you wrote some books about this.

Paul: I did, which are published by Smashing Magazine of the Excellent Publishing House.

<span class="smashing-tv-host”>Vitaly: Oh, that’s very kind of you, but this was not supposed to be a promo at all, actually. But I’m actually quite wondering because I’m working on my own in some kind of large rooted organization, and they are bringing along this notion of let’s establish a UX culture. This sounds very foreign. Something doesn’t feel almost alienating to some people like, oh, you want to do this now? We’ve always been working differently. So why should we do that now? Why should we change that now? So what would be then your starting point if you want to start moving an organization again, of any size, really towards something that would be a little bit more user-centric? They have their own, of course, business goals. They have their own KPI. They have their own old way of thinking. And in my experience, changing the way people work is hard. It sometimes takes not even years, like multiple years; it’s really, really difficult. So, how would you start moving the needle?

Paul: Yeah. The bigger the organization, the longer it takes to turn. I mean, there are different ways of doing it, top-down or bottom-up. If you do it top-down, then you are basically targeting senior management initially. And sometimes, someone in senior management gets it, and then you can start chipping away from that angle. But most of the time, it has to come from the grassroots. And really, I think of it as a political movement. Let’s take changing policy towards the environment, right? If you just go in and you write your MP, you’re not going to get anywhere by yourself. Okay? The way that you get large-scale change like that is your band together with other people that feel the same. You make a lot of noise, and you get the attention of those people in power.

Paul: And fundamentally, it’s the same when you’re trying to change an organization, you have to find allies. You have to find other people in the organization that has got the same desire to be more user-centric. Now they might not know the term UX, but they might. Marketers, for example. UX people are very rude to marketers, but ultimately they want to achieve the same thing because they want customers to be happy; because if customers are happy, they repeat buy. They recommend you to other people, et cetera. So you could go to those people, and you start creating an informal group of people that share your views on UX. And then you start to mobilize just like a political movement would do. Write yourself a manifesto, right? What do you stand for? What do you want? What change do you actually want to see? Very specifically.

Paul: Then do you start propaganda, basically. You start doing lunchtime sessions and sharing UX best practices. You send emails around. You get in guest speakers. You make a noise. I’ve run internal conferences within organizations. I’ve started newsletters and internal blogs; you run a marketing campaign, promoting user experience best practices. And that’s how you do it. And you begin to build momentum over time and only go to senior management when you have got sufficient momentum that they can’t ignore you. But you’re right. That takes time. Takes time to build that kind of culture.

Vitaly: Yeah. So the interesting part for me is really that very often it feels like you really have to be so well prepared for that meeting with senior management.

Paul: Yeah.

Vitaly: Sometimes it feels like you have like 20 minutes shot. This is the window that you get. And if you can convince them, that’s the only chance you get because nobody’s going to be talking to you ever again.

Paul: Then you’re doing it wrong, right? I’ve walked into meetings like that. I’ve been in meetings like that, but I already know the result by the time I stepped through the door, right? A meeting like that has got to basically be a rubber stamp by that stage. You have got to have spoken individually to each of the people in that meeting before the meeting, you have to need to have won them over beforehand. And a lot of that is about, let’s say... It’s a couple of mistakes people make; first of all, they go into meetings like that, and they go, well, no one think of the user. And nobody cares about the user other than you. So that’s mistake number one. And then-

Vitaly: That’s a little bit disappointing.

Paul: Yeah. But it’s true. Because we’re all inherently selfish, and we’re no different, right? If somebody from the compliance team said to you, will you not think about our legal obligations, right? Are you telling me you would really give a shit? No, of course, you wouldn’t. Right? Because you’re selfish. You care about users because you’re a user experience designer. So we all are selfish. We all think about our own individual areas. So, that’s one thing, don’t talk about users. You’re wasting your time. The second thing with those kinds of winning over senior management is that you got to not ask for too much, right? So, for example, I don’t know, let’s say you’re Disney, right? And you’re a little group of Disney, and you’ve got this amazing idea of you to want to create magic bands with RDF chips in them that could do all these incredible things.

Paul: But you know it’s going to cost a billion dollars to renovate all of the hotels, all of the theme parks, all the rest of it. You don’t go into senior management and say, can I have a billion dollars? Because they’re going to say no, no matter what it is that you say. What you do is you go in and say, can I build a prototype, a proof of concept, right? For a much smaller fee using a backlog, right? And this is exactly what Disney did. So, reduce your ask, go for little steps. Slimy tactics to move towards your idea. And then in terms of the, not talking about the user, instead what you do is you go to each of those stakeholders and to the finance person, you say, well, if we implemented this magic band, yes, there’s going to be a big upfront cost.

Paul: But our ongoing operational costs are going to go down as a result because the finance person likes that, right? And then you talk to the marketing person, and you say, oh, can you imagine how excited kids are going to be to get their band? And how people are going to photograph it, and they’re going to share their band if we could personalize the band, so they’re different. They’re going to love that.

Paul: And then you talk to the operational director, and you say, oh, well, people won’t have to have money, so the number of transactions that need to be processed will go down. And so we could be more efficient in the way we work. So I’m taking the same idea, and instead of talking about the user experience, I’m tailoring it to each of those different people that I’m speaking to. So when I walk in the room, they’re already all convinced, right? Otherwise, you are wasting your time because you walk into the room, you give a pitch, and you can’t tailor it to the individual person. You’ve not got enough time to convince them. So you’ve got to do it before you get there.

Vitaly: Okay. Well, I think we should be speaking a bit more in the nearest future as well, but maybe actually looking into some more of the kind of navigation search kind of problems that often show up on websites. People don’t find what they want to find. People can’t accomplish stuff that they want to accomplish. And let’s imagine just taking an example, you have a huge site, which has dozens and dozens of subsites, different departments, owning different sites. It’s all very messy. Some of them are a kind of legacy. Some are just really poorly designed, and all those things, plenty of content duplication, ambiguous labels, just all the best things kind of put together, right? What would be the kind of your process to actually just deal with it in a complex organization that has just literally hundreds, maybe even thousands of people involved that is willing to actually get better in terms of UX?

Paul: Well, it depends how willing they are.

Vitaly: Well, they hired you. They hire the best person in town. So they pretty much are.

Paul: No, no, no, no. Do you honestly think that’s the case? Lots of people think they’re willing until they realize what is actually involved. In a situation like that, Okay. I was going to make a flipping comment. I won’t make a flipping comment. What would I really do? Okay. In a situation like that, I think the first thing I would want to do is audit everything, so. And I don’t mean an in-depth audit because there’ll be too much to do a proper content audit. But I literally would want a list of all of the sites. And I would want an owner for every single one of those, who owns it, right? And who is maintaining it. I’d also probably want very top-level analytics on it. How much traffic is each of those sites is getting and a sense of when the site is last updated, right?

Paul: And the reason that I want all of that is because normally, in the vast majority of situations, there will be a load of stuff that could be just cold, right? That nobody really owns, that hasn’t been updated for the longest time, that has got hardly any traffic going to it. So the aim would be to viciously cold back everything that was there. And the logic is very simple, right? The logic basically boils down to... For a long time, there’s been a perception that it’s like a brochure. You publish it, and you’re done, which we now know is not an option. That you get rocked, redundant and trivial content. And so any web service, any website, needs to be maintained over time, which means it needs an active owner and active budget, regular reviews, et cetera.

Paul: So when you’ve got hundreds and hundreds of websites, potentially thousands of websites, you’ve got one of two options, haven’t you? One is that you hire enough staff to actively manage every single one of those websites, right? Which you end up with hundreds and hundreds of people, basically, which is totally unfeasible. So you pitch that first. And of course, everybody says no, because that’s completely unrealistic. There’s no way that you can justify that. So that leaves option B, which is to reduce your footprint, your digital footprint down to a manageable level, right? And so that means culling anything that can’t be actively managed and maintained across the organization.

Vitaly: But Paul, that means deleting and archiving stuff. That’s scary. Who wants that in a large organization? Who knows, maybe we’ll delete something important, maybe we will not be able to find something important. Who even knows all the dependencies on all those things?

Paul: Yeah. Yeah. Yes. So you’re not going to delete anything. Because A, why? The web is cheap. Having content online is cheap, but what we need to do is we need to archive it. And by that, we need to remove it from navigation. We need to remove it from search .it can still be Googled, and any internal links that go to it will still work. But then, at the top of the page, we need to add a banner or notification that basically says this page is no longer being maintained. It was last updated on this date, right? So, that can deal with anybody’s fears that content is going to just disappear and it’s going to break stuff. Then there’ll be other content that you have to have online for compliance purposes that nobody ever looks at, but it has to be there. Fine.

Paul: Then with that kind of content, what you’re going to do is you’re going to remove it from navigation. You may potentially remove it from the internal search, but you still have a direct link that you can share as you need to. So there are lots of ways. Everybody thinks that every page that we have online has to be treated equally and has to be treated in the same way. There has to be part of the navigation. It has to be part of the search. In reality, probably most stuff doesn’t. A lot of stuff is just legacy or standalone content, or that could just be directly linked, that could be handed out as a URL, et cetera. And then, of course, that simplifies your navigation down. It simplifies your search down. It means that people can indeed find the needle in the haystack, so. Because you’ve just suddenly made that who stack a lot smaller. So, yeah, I mean, it’s really about stripping back to something that’s actually manageable and maintainable by the organization.

<span class="smashing-tv-host”>Vitaly: I can always hear people screaming in the back of the room, screaming and asking about things that were related to what you mentioned earlier, all those practical tips about how to convince management about anything. I think, at some point, you were even thinking about writing an article, how to convince... Or maybe it was my title that [inaudible 00:25:44].

Paul: You suggested I wrote a book on it.

Vitaly: Yeah.

Paul: And I said, "I’ll write an article for now." And I’ve actually written the article for you, but I just don’t think you’ve published it yet. So it’s your problem, mate.

Vitaly: Oh, okay. Well, I’ll have to look into that, but maybe kind of bringing this up again, it’s always the same story. I think it’s always very useful to get insight from experienced people like yourself about how would you even deal with situations where you get difficult clients, where you get scope changes that are coming in late, where you have situations when you just have a really poor specification, you have communication problems, all those things, right? This is pretty much in every single project that’s going to be appearing in one way or the other. So what would be your good strategy to deal with on the one hand with managers, right? And on the other hand with clients?

Paul: I mean, I do a whole day workshop on this. I’ve literally just done a workshop on that for front-end masters. So yeah, it’s a huge subject that I think... What would be my top tip out of that?

Vitaly: You surely have some topics.

Paul: Yeah. Yeah. The trouble is a lot of it is kind of interlinked things. So, for example, it’s about how you set up a project in the first place and manage expectations out of the gate in terms of whose role is what. And let’s take, for example, scope creep, right? With scope creep, there’s nothing wrong with scope creep, right? As you go through a project, right? You learn things, don’t you? You do user testing, hopefully. You do user research, hopefully. You just have ideas when you’ve seen the prototype that hasn’t occurred to you. So what happens out of those things? You have ideas, you learn new things, you learn improvements, and you want to improve them. So actually, scope creep is good, right? The only problem with scope creep is we insist on having projects with fixed budgets, with fixed timelines, and fixed deliverables, right?

Paul: If we get rid of that idea, then suddenly scope creep is fine, but that’s complicated to do, that opens up another can of worms, right? So one of the things that you might want to do is don’t do these big website projects, right? So occasionally, I get asked to redesign a website. I don’t tend to do a lot of that work these days. But often, if I’m asked to do that, I’m asked to kind of oversee the process. And the first thing I say is, I am not going to do a project that is an end-to-end project, right? From initial user research through to delivery and post-launch optimization. I’m not doing that as a single project. That is a big mistake. Instead, I’m going to run a series of smaller projects. I’m going to do a discovery phase, right?

Paul: Which is going to clearly identify user needs, the competition, the constraints, everything like that. And then that is going to inform me, giving you a quote and a timeline for a prototyping phase where I create a visualization of it. And I test that and that visualization and that prototype, that’s going to allow me then to quote for the build phase, right? And I could give you a price hourly because each phase informs the next. So how you structure projects makes a big difference. And then, of course, that means that between each of those stages, between discovery and prototype, between prototype and build, you could change the scope all you want because it’s another project. So things like that make a big difference as well. So, yeah.

<span class="smashing-tv-host”>Vitaly: Yeah, but what if you’re working, let’s say, you have this big procurement processes and all those big companies and tenders and all those things where you kind of need to know upfront. I’m guessing looking at your face right now that you are going to say, just don’t do them. But I’m wondering if this is the answer that we should be getting to?

Paul: Yeah. Yeah. I mean, I don’t do them. It’s the honest answer because I’m lazy. And any time there’s a procurement team involved, which requires a fixed price and fixed scope, immediately that’s a warning flag for me that it’s going to be a nightmare project. So I’m just too lazy to deal with it. But I understand that I’m in quite a privileged position. What I did do when I ran Head Scape with projects like that, and my preferred approach there is to, yeah, I’ll give them a ballpark for the whole thing, right? I will quote them for the whole thing. But in my tender, I will say that this is an estimate only. And I will introduce the idea of breaking the project down and doing it in different ways. Just because you receive a brief asking for a certain set of deliverables in a certain thing doesn’t mean you have to give them that, right? It’s okay to say, hang on a minute. I don’t think you’re doing this in the smartest way, right? And that there is an alternative, better way of doing it.

Paul: Now, one of two things will happen in a situation like that. Either they’ll dismiss you out of hand, right? In which case, you really don’t want to work on that project, right? Because it will be a nightmare from beginning to end, the expectations will be unrealistic. It will be challenging. There will be problems with scope creep and all those different areas that we’ve just talked about. They will happen. There will be no way around them, right? So that would be a huge warning sign.

Paul: Or they go, oh, these people are suggesting something different. Oh, that’s interesting. And they’ll actually like the fact that you’ve challenged their brief, and suddenly all of your competition that has just blindly followed the procurement rules and done what they were told to do suddenly look less proactive. They look less like they care about the project and that they want the best for the project. So actually, it’s a really good way of differentiating yourself to actually turn around and say, well, here’s something that kind of gives you a sense of the overall budget, but this is how you really should work it. And that ultimately it’ll work out cheaper that way. Because obviously, the overall budget, I have to add a load of guesses in there and a load of contingency in case my guesses are bad.

Vitaly: Yeah. Yeah. So I also see some agencies or companies using value-based pricing, where they actually go in and think about the impact that they can make in an organization and then kind of price based on that. What’s your take on this?

Paul: It’s BS. There you go. Here we go. This could be SEO, the SEO article all over again.

Vitaly: I’m very much excited about what’s coming up next year listeners, please pay attention now. Bookmark this spot in the recording.

Paul: Oh, people are going to hate me for this. Jonathan’s start is a great... I think it’s Jonathan’s Start. My brain is just shut down. He’s a really great guy who pushes value-based pricing a lot. I’m cynical about it. Some people seem to manage to get it to work, and good on them. And well done them, but it feels like a fantasy to me, value-based pricing. I understand, theoretically makes a lot of sense. If I’m going to earn a company a million, then it’s perfectly reasonable for me to take 10% of that $100,000, even though it’s five grand worth of my time, right? That’s perfectly reasonable. Don’t disagree with the principle. It’s the reality of it that is difficult for two reasons. One is that in a vast number of projects, depending on the type of projects you do, that can be extremely hard to prove, to get real numbers, right?

Paul: So unless it’s an eCommerce site or something like that, then actually it’s pretty hard to get a solid estimate on how much potential you could make. Secondly, you are giving no guarantees that you will get that level of return. And you can’t make those guarantees because there are so many variables involved. When you are quoting at the beginning of the project, you don’t know what constraints may exist that would limit what you can do. You don’t know what the client might say they want or don’t want. They might come up with stuff that’s a bad idea. There are so many things you do not know that there is nowhere on earth you can be confident you can generate that degree of return, right? And so how then, can you say, I want this percentage of that number. So I think, in principle, it’s great, and it sounds wonderful in practice, but it rarely works.

<span class="smashing-tv-host”>Vitaly: So Paul then can you hear the voices from the back again saying, but Paul, but Paul, but we are UX practitioners. If you look at the number of job applications all around on UX, it’s tons of openings. So because he was speaking about millions, how do you then become a millionaire by being a UX designer? It doesn’t work. Well, the reason I’m bringing up this question is because a good friend of mine told me once many, many, many years ago, he’s kind of more my mentor. And he told me, β€œWell, you never become a millionaire by just working 24/7 or kind of having a full-time job alone. You really need to think about passive income. You really have to think about how do you invest money? And you cannot just make a lot of money by working nonstop. That’s just not going to work.” So how then do we become a millionaire, as you expect?

Paul: Why are you asking me? I’m not a millionaire?

Vitaly: Why not? Well, you do have a wonderful, fancy chocolate background in there.

Paul: exactly. Well, this looks really high quality, doesn’t it? You can tell that I’m in a quality vehicle at the moment. First of all, I would challenge why do you want to become a millionaire? And this is really interesting. Take my dad, for example, right? My dad is a worldwide photographer. They have barely any money ever, right? They earn below the national average of the UK. Okay? Yet they travel around the world, right? They go on multiple cruises every year. They go all of these amazing places on somebody else’s dime, right? Because he’s a wildlife photographer. And he lectures on cruise liners and stuff like that. So money is only a way of enabling you to do what it is that you want to do. So the question then becomes what you want to do. And because I do a lot of mentorship of agency owners, right? And agency owners, a lot of them start going on about passive income and stuff like that. And don’t get me wrong. I have passive income. I get passive income for the courses that I run. I would say the royalties from the books, but how little that actually is, but I do get-

Vitaly: Let’s not put it out there.

Paul: Well, you don’t get rich writing books. Everybody knows that. That’s not why you write them. I mean, unless you write Harry Potter or whatever, so. So, but I do have passive income, but not an enormous amount, but I live the life. I want to live. I go where I want to go; I do what I want to do. So the question then is not, how do I become a millionaire, but how do I get the lifestyle that I want, right? And that’s a very different question. And there are different ways of doing it. And passive income might be a part of it.

Paul: In other words, an exit strategy where you sell on your business, whatever that is. And then you can retire early. I take the approach of I’ve designed a business where I have to work four hours a day, right? So, and that is achievable as a UX designer or a UX, or you can get your rate to a point where you can get away with working four hours a day, take over a good income, and spend the rest of your time enjoying yourself. So, I don’t think the answer is just to become a millionaire. I think the answer is to get the lifestyle you want. That’s my opinion anyway. Unless, of course, your lifestyle is I want a yacht. In which case, you do need to be a millionaire.

<span class="smashing-tv-host”>Vitaly: Well, yeah, but just because you’re working four hours a day, we cannot afford you anymore. Because you’re getting really, really expensive, no, I’m just kidding at this point.

Paul: Yeah. No, no, I am very expensive, right? I’ll be upfront with you. I will charge anywhere between 195 and 165 pounds an hour, right? That is my rate, depending on the number of hours that you buy. And I can maintain a charge-out rate at that level because I’ve built a reputation that means that demand for my services outstrips my ability to supply that. So basically, I could charge and weed out people that can’t afford me unless I really fancy the project. That’s enough. This is how you should price projects, right? And this comes from Mike Coos. Do you know Mike Coos? Yeah. He’s an amazing, amazing designer amazing from Australia. And he told me this once, he said... when he comes to pricing, this is how he prices. He says to himself, β€œHow much would they have to pay me to make me want to do this enthusiastically, right.” And I think that’s a great way of pricing. Okay? Because then you work on the stuff that you really, really want to work on, right? That you really enjoy. And because you charge that at a lower rate and then the stuff that you don’t want to do, you charge at a higher rate, which subsidizes the stuff at a lower rate, so.

Vitaly: Yeah, that makes sense. But what would you suggest then to people who maybe don’t have that much experience and they kind of have to compete on the market, and the market is quite saturated? I mean, if you’re a UX expert, that’s great. That works, but still, you go to there are plenty of platforms which provide services for like $30, $50, $80.

Paul: Yeah. Don’t play the game.

Vitaly: Yeah. So what would be the strategy for kind of pricing there?

Paul: So, I work with a lot of agencies that are kind working on these platforms like Fiver and Upwork and stuff like that. And those platforms are universally, without exception, price orientated, right? So you are always going to be stuck at the bottom of the market, and you’re always going to be competing on price at that point. And also, you’re competing against free stuff. You’re competing against creating a page that you can use a template from on Square Space; it’s a losing battle. So you’ve got to move out of the bottom of the market. So how do you move out of the bottom of the market? Where you start to build your own audience, rather than relying on the audience that’s provided by these marketplaces. And I’ve got a course on this called Finding Clients where essentially you need to decide, okay, I want to target a specific sector, because most freelancer agencies, their marketing approaches are terrible because they’ve got no training in it.

Paul: They don’t know how to do it. Nobody’s ever taught them how to do this kind of stuff. And so they throw out the old blog post, and they redesign their website for the 20th time. And they put out a few social updates, and they call that marketing well, that’s not going to win you any new clients. You need a strategy for targeting a particular sector, getting into that sector, and building relationships with that sector. So you become the go-to person for that sector. And once you are the go-to person, once you are the person that everybody goes to higher education, you must go to Paul for that; once you get to that point because you are specializing, then you could push your rates up. And also, you are targeting a sector that isn’t just going, oh, I need a cheap web designer. Now I know I’ve skipped over a lot of detail about doing all of that, but you know, we haven’t got that long, but.

Vitaly: We’ll have another session on just that I’m sure, sometimes soon in the future, I think.

Paul: Sure.

Vitaly: So maybe just one final question to wrap this kind of slowly wrap this up. I think just two weeks ago, I received an email from somebody who just, again, working maybe I think three or four years spent in the industry, and what they were asking is how do I negotiate my salary? So I’m working, let’s say, in a product team, or I’m working in an agency, and it feels like you are hired for the position, and you’re kind of stuck. So, the inflation is now through the roof, and it doesn’t seem like everybody’s going to get any increase in the foreseeable future also because the company isn’t doing that well. So at which point and how, what would be kind of strategic advice from your end to say, this is how you do it in order to increase your salary, at least, get a stronger position in the company, maybe instead of salary have more ownership or anything like that over time. What’s the right way of doing it?

Paul: I don’t really know. Sorry. That’s a really bad answer to your last question.

Vitaly: No, that’s an honest answer.

Paul: But the truth is the reason I don’t know is the last time I worked for a company was in 2001. So yeah. So it’s not an area I work in. Of course, I was an employer for a long length of time. And I could tell you what an employer’s big fears are, which is that you leave and so our desire is to maintain our staff because getting the new staff is really, really expensive. So I think if you are getting dissatisfied with your salary, probably an honest conversation with your boss and say, look, I want to be completely upfront with you, all right? I’m getting to the point where my cost at home because of inflation and all the rest of it is getting high. I’m going to need to start looking for another job, I’m afraid, right?

Paul: And instead of me taking lots of half-day sick and that kind of stuff, which is so obvious, I thought I’m going to be upfront with you and tell you instead. And if I get offered another job, I will come and talk to you first; if you want to match the salary, then we can certainly have that conversation because I don’t want to leave here. But this is the situation that I’m in. And it might be that is enough for them to want to nip that problem in the bud. And they’ll give you an increase there; if not, follow through on that, look for other jobs, find other positions. And if you do get an offer, go back to them. So sometimes, that’s the only way of doing it. It’s just honesty about your situation. Because most employers, in my experience at least, they’re not out to screw you over. They’ve got their own targets and things that they’re worrying about their own, budget-free constraints and that kind of stuff. And so honesty is always the best policy. Isn’t it really?

Vitaly: Yeah. That sounds about right. Well, maybe the final one, then. So Paul, is there the universal wish you would be writing a book about all those things combined and again, the management and the growth, and I don’t know what else. Do you have time doing it, don’t you?

Paul: No, I don’t have time on my hand. I will write another book. I will inevitably write another book eventually. It’s obviously quite a big-time commitment to write a book. I don’t think it could be about...

Vitaly: Is it? I think for you, it’s easy peasy. You just go ahead and say, okay, I can commit to the next three months. And then I get a chapter once a week. That’s much what it was like last time around.

Paul: Yeah. I mean, I can write a first draft in about a month of solid effort. Yeah. But I don’t earn any money in that month, so. And you got to keep that in mind as well.

Vitaly: I mean, we do pay some pennies,

Paul: But it doesn’t cover my charge out rate. Let’s put it like that, which we’ve already established is unrealistically high, so. But of course, it’s completely worth it for me to write a book because it kind of generates new business and stuff like that. But it does mean I’m in an interesting position. Let’s be honest about these things, right? I write books about subjects that I want to work on more right. So when I wanted to do digital transformation, I wrote Digital Adaptation. When I wanted to do more organizational user experience cultural change, I wrote User Experience Revolution. When I wanted to do conversion rate optimization, I wrote Click. That is simply how it works. And every time, without fail, it shifts people’s perception of what I’m an expert at.

Paul: And I win work in that, right? So it’s a really good marketing strategy, but there’s the problem. Literally, if I write a book on soft skills or I write a book on winning clients or whatever, what work does that bring me? See, that’s the interesting one, isn’t it? And that’s where you have to think ahead with these things. And what I was saying earlier about your marketing approach needs to be strategic. Yeah, perhaps it would get me more work with agency mentorship, freelance mentorship, and stuff like that. But that’s not a big earner compared to working for a multinational company.

Vitaly: Well, I know I have another title. No, no, no, no, no. I have another title. I would love you to write a book about something like, I don’t know, establishing processes or working in large enterprise organizations.

Paul: Yeah. See, now that one, that’s got a lot more potential, a lot more legs for it in terms of running my own business.

Vitaly: I think so too. So when should we sign the contract then?

Paul: No time soon, I’m afraid. I’m overjoyed in my life at the moment, so.

Vitaly: Okay. Well, that sounds about good. That’s good enough for me, but I’m not going to let it go, Paul. I’m just saying, so I’m going to send you a few messages back and forth.

Paul: Yeah. I’m feeling really bad about this interview. I feel like all I’ve come across is this really callous person that won’t do anything unless I’m paid; there’s other money to do it.

Vitaly: No, I don’t think it comes across this way at all. I think when I look at the articles and every now and again, when I Google anything really, I will be stumbling upon one of the articles that you have written over all this, what, 200 years?

Paul: 200. Yeah. Coming up to 200, right?

Vitaly: Yeah. That’s pretty impressive. So this in mind, I mean, I have no doubt that you do a lot of things also just because you honestly believe in that. If you, dear listener, would like to hear more from Paul, you can also find him on Twitter, where he’s at Paul Boag, and on his website, which is, surprise, surprise, Boagworld.com. His books, all the books that he’s so kindly mentioned in the last five minutes also available, of course, from Smashing Magazine. So you can also find them and read them. And if you want Paul to write more books, send him messages. Actually, he’ll appreciate that. Right from that end. Thanks so much for joining us today. Paul, do you have any parting words of wisdom with the wonderful people listening to us now?

Paul: I’ve always got the same one, which is a success is going from failure to failure with no loss of enthusiasm, which is a Winston Churchill quote. And when it talks about whether you’re talking about getting a pay rise, whether you’re talking about changing the culture in your organization, or whether you’re talking about getting a project over the line, success is going from failure to failure without any loss of enthusiasm. So just keep chipping away, and you’ll get there.

Smashing Podcast Episode 48 With Stephanie Eckles: Is Sass Still Relevant?

In this episode, we ask if Sass is still relevant in 2022 and if it adds any value modern CSS workflows. Vitaly talks to expert Stephanie Eckles to find out.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: She’s a software engineer focused on front-end and she creates front-end learning and development resources with an emphasis on CSS, accessibility, and 11ty. She’s a writer, teacher, and consultant. And she also hosts the podcast Word Wrap, where she and Claire Lipskey talk about a bunch of stuff related to what it even means to be a developer in 21st century. She’s also an advocate for accessibility, scalable CSS and Jamstack. And offline, she’s a mom to two girls and a Cava-corgi, and she enjoys baking. So we know she’s an expert in CSS and accessibility, but did you know that she absolutely loves hip-hop and dancing, occasionally, of course. My Smashing friends, please welcome Stephanie Eckles. Hello, Stephanie, how are you today?

Stephanie: I am smashing.

Vitaly: Oh, that’s wonderful to hear. It’s wonderful to see you as well because you’re writing so many articles. You’re writing so many tutorials and courses and tools. Everything is out there. Just really incredible to actually have an opportunity to just talk to you every now and again, this is wonderful. But I always have to ask, I’m just really, really curious at this point. Stephanie, you create so many tools for people out there to use. And I always think about HTML Recipes and Button Buddy and 11ty Rocks, and so many articles in CSS and trainings and workshops, and you have your own podcast and you’re also a mom. Where do you find time for it? Are you super organized? How does it work?

Stephanie: So I’m not super organized, but if anything about becoming a mom, becoming a parent, or any sort of caregiver, is the time that you do have is more precious and also you are sort of forced to be more efficient. So, when you have different goals, it’s just something that’s important to me to include in my day or make time for.

Vitaly: Yeah, that makes sense. It’s actually quite interesting because the less time you have, the better you get around to your time, the more you optimize your time and all. So, that’s incredible to hear that.

Vitaly: Well, Stephanie, today’s an important day. It’s a very important day, isn’t it? Well, do you know what I’m hinting at, by any chance?

Stephanie: I believe there’s a certain milestone for web developers that we’ve been excited about.

Vitaly: Yes. Isn’t it very exciting? Dear listeners, as we’re recording this interview today, it’s June 15th and this is going to be going in the history for calendars designed and created for web developers for, I don’t know, centuries, maybe? Do you think we’ll still be developing websites in a century? Stephanie?

Stephanie: I do believe that actually.

Vitaly: Okay. So then we will probably be celebrating this day because it’s a day when Microsoft officially ends support for the Internet Explorer desktop application. Are we feeling a little bit nostalgic today, Stephanie? Do you remember any quirks and bugs from IE?

Stephanie: Yes. You know, over my all 15 plus year career history, definitely it’s something I’ve had fondness and other feelings about throughout that history. So yeah, it’s a big day. It’s one we’ve, like you said, marked on the calendars, but yeah, I remember particularly staying up late at an advertising agency I worked at. At the time we were on IE 7 and I could not get a border to show up, of all things. I will always remember that day.

Vitaly: Yes, of course. It’s interesting actually thinking back about, let’s say 15 years, you said, maybe you could just share a bit of light. How did you actually fall in love with the web? I hope you didn’t fall in love with Internet Explorer because then it would be very sad day today. But how did you actually even get to the web? Tell us a little bit of your backstory, if you can.

Stephanie: Absolutely. So I started with Flash, Macromedia Flash, not Adobe Flash. Got that at a summer camp that I had gone to as a teenager. And it was sort of my gateway. I wanted to put my "art", as it were, on the web, very big quotes around art. So I fell in love with the keyframe animation at that time. And that led to figuring out how to get it on the web, that led to learning a little, tiny, tiny bit about HTML. I remember visiting a forum to get all of my HTML and Flash questions answered. And then I found WordPress and WordPress was just getting out the gate. It was a couple years old when I learned about it as a tool. And spent a decade of my career with WordPress, actually. My degree is in advertising, so, huge part of my career was working as a developer in marketing and advertising. And, that’s kind of the base evolution of how I got into it and throughout that time, front-end development has always been my specialty.

Vitaly: Right, right. That’s exciting. That’s incredible. I’m also thinking about all this times back when I was really playing with all this quirks around Internet Explorer and just in general. And it’s one thing that really excites me, I think, about all of this or excited me back then is that you could actually just go ahead and present something to the entire world and the entire world would come and see it. This is how I ended up creating my own football club website for a club that didn’t exist, which was kind of fun, I guess. And I had maybe 44 visitors over a year. That was very exciting for me at the time.

Vitaly: And I think about this now and I feel like sometimes it’s becoming just incredibly difficult for people to be able to do that. And it feels like you need to learn so much to even be able to publish "hello world" on a page. Do you think this is just how things turned out, we just have become more mature? Or do you think it actually has become a bit more easy, maybe, over the last years because we have browser inconsistencies gone. Tooling has never been better. What’s your take on this?

Stephanie: Yeah. So, in my early days, and I’m sure you experienced this plenty of times as well, you did have to worry about the server. You did have to worry about FTP, which might be a lost acronym for some folks these days. Very early, we didn’t have version control or at least it wasn’t something I certainly knew about not having grown up in a highly technological area. And I think that’s an important point here is it really depends how you’re introduced to the web. If you come in straight from a bootcamp, you’re going to have a very different lens and a very different idea of how to get things on the web than maybe if you’re casually looking around having an interest, trying to find whatever resources.

Stephanie: And I think even then it depends what your goals are. So I think it can be very easy and approachable, but it can also seem extremely complicated and definitely more complicated in a lot of ways because of the tooling. The tooling can either help or hinder that process, for sure. That’s kind of why I’m fond of Jamstack. I think that is a lower level, easier way to get introduced and get your first things on the web, if that’s the goal.

Vitaly: Right. And that’s also wonderful because you’ve been publishing so many tutorials around Jamstack and 11ty, and maybe you could tell us where do you see 11ty, for example, being extremely useful? What kind of projects would it be a default, let’s say, where you would say, "Yeah, that’s probably going to be working best with Jamstack and 11ty." And where would be its boundaries.

Stephanie: Yeah. Great question. So 11ty is a static site generator and the difference about it versus some other ones is there’s no client-side JavaScript required. You can build from truly flat files, HTML as well as several templating languages, the common ones being Markdown or Nunjucks or Liquid, as well as JavaScript as a templating language. And so it’s very approachable again for different mindsets, so that makes it a great tool, I think, to introduce to teams with different backgrounds, different interests in building a website.

Stephanie: But to your question about when would you choose it or where are the boundaries? So it is great for any time that you, as a starting point, when you don’t have any need for dynamic content. Which isn’t to say that you can’t bring it in, you absolutely can. And in fact, that is something they’re actively working on, is stepping into the idea of Islands architecture and things of that nature.

Stephanie: There’s other tools that are built on top of it, where you can easily bring in a framework that you’re comfortable with like Vue. So there are absolutely ways to expand it. That’s actually why I love it is because you can start at a real simple baseline and just build up as you go. I haven’t found a lot of boundaries. In fact, I’m even doing a project that I am sort of working on secretly dealing with user authentication, and that doesn’t sound like something you could do with static. But with the combination of edge functions and serverless functions, which are super easy to incorporate in, I think that the boundaries are being pushed farther and farther out at this point.

Vitaly: Yeah. That’s very exciting to hear just because when were moving from WordPress to Jamstack back in the day, it feels like it was a century ago now, although it was just five years ago, I believe. It was kind of a, "Wow, how do we do this?" Because we have the shop, the membership and well authentication then of course then as well. And so many other moving parts and the comments, all search and so on. And yeah, in fact, I think that, in many ways, Jamstack has been this really good compromise. I remember vividly this excitement that everybody had with fully client-side rendered applications. And that was the time when it felt at least like a revolution, really. And then it was pushed back. Would you say that Jamstack is kind of that push back somewhere to the server? Not too far away from the client. How do you feel about Jamstack? Is it the golden center for the universe of web development?

Stephanie: Yeah. You know, I’m definitely biased at this point. I’ve been working with it for a little over two years now, and so I’ve seen some of that evolution happening. And, again, having that history with WordPress, it’s one of the reasons I really enjoyed 11ty in particular, having that templating ability, but having that static rendered, you don’t have to worry about SSR, it’s just simply static. Your homepage likely is always static. Your marketing website, largely is static.

Stephanie: But, being that center, I really do think it is because you also have... You’re not prevented from incorporating a CMS, for example. You can bring that in. You can still of course add whatever other, as I mentioned, flavor of JavaScript that you need. It doesn’t have to be truly 100% static, but that’s your baseline. And we all know that’s where we put an emphasis on semantics, accessibility, progressive enhancement. And I think that’s another thing you’ll find in the community if you haven’t quite yet gotten into Jamstack and 11ty, in particular, is a focus on returning to that way of building. And I think that’s the part I see a quote unquote "return" to, is caring about those things.

Vitaly: Absolutely. Absolutely. It all fits in nicely then, somehow, with like you mentioned accessibility, of course, and CSS is just something that we both have in common. That we just have an incredible admiration and love and passion for. And every time I read an article that you’re writing, I feel like, "oh, you can do that with CSS now. That’s wonderful to see."

Vitaly: So maybe you could shed some light on how do you work with CSS? Do you have a particular methodology that you tend to rely on now? Or the way of structuring things? The way of naming things? Of course naming is the hardest part of it all. What seems to be working best for you, for your work, for your projects in terms of building things, in terms of, maybe just to simplify, how do you even start working on a project when it comes to CSS? The folders, the naming, the methodology and stuff like that?

Stephanie: Yeah, absolutely. So I still use Sass. I will continue to use Sass strictly because it allows that organization and I think that’s really critical. I think that’s where a lot of folks begin to have a less than pleasant relationship with CSS, is trying to figure out how to organize. And so Sass for me is that bridge, it’s very critical in my tool belt.

Stephanie: Alongside that, I do tend to use BEM. I’m not always completely strict on it. I don’t always completely rely on even having classes. I think it’s very powerful to focus on the semantics. And I also, I think it’s important to know where I’m coming from. So part of my history involves working on design systems. And so, through that, I’ve become a big proponent of creating components, whether that’s a formal design system or just the way that you’re approaching and organizing and architecting your styles.

Stephanie: I find that to be helpful for me to think of my system as components and to think of my system as having, some folks might know as design tokens, but having like a series of colors and these other, primitive variables, would be another common term, where those are leading into the system. I’m definitely using custom properties. That’s been a huge game changer in how I approach writing styles, both from... Folks might be used to opening up a site, looking at the HTML element and seeing just a whole laundry list of custom properties. I keep mine a little more focused, like I said, colors and really high up global tokens. But an important way that I write my styles and my components is really leaning on custom properties to allow very easy variations of those, very scalable variations of those.

Stephanie: And so, you mentioned my workshop earlier, that’s something we really go into because when you are starting to incorporate those things, you start to... I think it was kind of a light bulb moment for me, learning about these things where my styles became so much more simple, so much more efficient, so much less repetitive, being able to use things like custom properties. So Sass, custom properties, a little sprinkle of BEM, and also, in some cases, relying on particular element selectors that directly hook into accessibility features. So it’s kind of a combination of those things, but it all starts for me at the HTML level. And then I go to my CSS. So, that’s also an important part of my process.

Vitaly: Sure. Of course. Yeah. I also remember vividly that moment when we actually ended up getting custom properties in all the browsers, and I was like, "Wow, you can now do custom kind of variables?" CSS variables, dynamic variables now in the browser. That was incredible.

Vitaly: That also brings me to this notion of... This is a conversation that I keep having with some folks, just thinking about what is the role of Sass today and how is it going to evolve? Just to bring it a little bit more in the context, we now have custom properties for years now. But we also have these proposals for scoping and for nesting, which might be coming up soon. But then on top of that... I’m really excited about that, by the way, just because right now, every time you’re using Sass, we have to produce this humongous chain of classes, if you do nesting, nesting, nesting, nesting.

Vitaly: But if it is actually just written in CSS and just clean and beautiful on how it should be. Plus on top of that, of course, cascade layers, which are already well supported. So I’m wondering at this point, of course, not to mention... I mean, so many things coming up, it’s incredible in CSS, the color mix, color contrast, lighten, darken, all those things that are also coming to native CSS. So I’m wondering just about your take, where do you see now, Sass moving? Is it going to be more for literally processing for things like Mixins, functions, those kind of things? And where would you say this should be in CSS?, and that should be probably staying Sass?

Stephanie: Yeah. So all of those are super valid comparisons to how features and tools such as Sass has informed or helped inform the evolution of CSS as a language. And for sure, I’m excited for those things to come and be native. As I mentioned, organizations is still a huge reason I’ll continue to use Sass to compile my style sheets and still have that separation, like I said, of my components or whatever other parts that are coming together.

Stephanie: Also in a design systems context, or other contexts where you are creating a reusable system and you want to have a little bit better management of your, again, whether you call them tokens or whatever you call those sort of baseline configuration, of how the different customizations enter that style sheet is, I believe still where Sass is going to shine.

Stephanie: And like you said, functions, Mixins. I’m finding myself using less Mixins these days, because, like I said, custom properties gap fills what I was using Mixins for, in some cases. But I still use Sass for functions. Absolutely. So, whether that’s looping through my tokens to spit out automatically different utility styles. To me, that’s still plenty useful enough that I’ll continue to use Sass and that’s functionality that we don’t see in the horizon for CSS.

Stephanie: But yeah, I definitely have changed some of the ways I’ve used Sass. Using :is() and :where(), sometimes those help simplify my selectors in a way that maybe was using Sass for before. So yeah, I’m absolutely a fan of switching over the functionality that should belong in the browser to the browser, but still finding the organization and functions, in particular, to be useful in Sass for me.

Vitaly: Yeah, absolutely. It’s interesting because you mentioned BEM previously and I just recently had a conversation with a few JavaScript developers and the conversation went in a very unusual way for me, because usually I would be comfortable using BEM. I mean, just like you, not the dogmatic traditional the big BEM, but the small BEM. And I do like my hyphens and I do like my underscores, so don’t judge me on that.

Vitaly: But I heard this notion of, BEM, is it still a thing?Isn’t it like from 2017 or ’18 something? Why would you use BEM today, if you have Tailwind and you have CSS and JS if needed? Why do you work so hard to have the naming and have this relationship, which could be potentially just, create user using atomic classes or just writing some CSS and JS.

Vitaly: And I had my arguments about why I would still prefer BEM, but I see that many people feel like, isn’t BEM outdated? And, isn’t Tailwind the thing now? So what are your thoughts on that? And maybe specifically on Tailwind that would be probably quite relevant.

Stephanie: So for me, it’s not the right tool and that has to do with the way that I work, but also the team conventions that I have. And that’s usually what I tell folks, is it depends what kind of project you’re working on. It depends on the makeup of your team, your skillset, your project architecture, just like anytime you choose a tool, all of these things play a part.

Stephanie: As I mentioned, I’m a proponent of components. And so an important thing to remember is that not everybody is using a JavaScript framework. In fact, if we look at global stats, that’s actually a pretty minor part of the web. I know it feels like everybody is using React or whatever other tool, but it’s actually not true in practice. And especially if you’re coming into an established team that is not the latest. A new startup or something. You may not find Tailwind.

Stephanie: And so that’s fine. But the point is that some of these methodologies aren’t as transferable across projects either. So if you’re solely producing one type of project, one application, one product, it’s easier to make a decision towards something like Tailwind, rather than if you’re working on a project that’s intended to be used across multiple outcomes. Maybe I’m using it on my 11ty static site where I’m writing in Nunjucks. But I also need to share it to a back-end application that’s built in React. So my style sheet is going to be a lot more portable if doesn’t rely on CSS and JS, or if it’s not completely wrapped up already in React components. And, teams have found ways to overcome that. And again, your experience is going to heavily weigh into what choice you make here.

Stephanie: Another big one that comes up for folks is the issue of documentation and I absolutely respect that. Where it’s easier sometimes to pick up a tool that has ready-made documentation. So, that’s absolutely consideration in making that decision. I wouldn’t say that BEM is outdated. It’s just a naming convention where I think, as I said, it lends to being a little more portable. The intent of it is to be able to identify what set of styles go together. So we can apply that in multiple locations and have a good idea. I think perhaps in some instances it might be a little more memorable if you don’t have a system where you are able to create and template out components, because again, that’s not every environment that folks are practically working in.

Vitaly: Absolutely. Yeah, of course. It’s also fun to be just talking, thinking about all the things you could do with CSS and moving back to what we talked about briefly before, so many powerful things coming up, it seems like. Just a recent announcement of all the features coming to Safari 16. This is just unbelievable. It’s like Christmas coming in before Christmas. And then of course we have all the wonderful things coming up in Chrome 103 and it’s just all wonderful. Incredible. What are you most excited about of all of those things? Is there anything where you say, "okay, this is life changing for me, this is changing everything that I’m doing with CSS."

Stephanie: For me, it’s the one, two punch of container queries and :has(). I am excited for both of those to be stable. And again, coming from the design system context in particular, I just think we’re going to be able to create the most robust and scalable components we literally haven’t been able to achieve before. So I’m very excited about that as my top two picks coming up here.

Vitaly: Okay, well maybe we should be expecting some articles from you on them, although maybe you have written them already, who knows? I think you might have. Do you find yourself writing as much as you used to be or do you have a lot of writing coming up in the months to come?

Stephanie: Yeah. So writing’s taken a tiny bit of a backseat just because I’ve been working on a project a little more longer term, that’s a build out of a new side project here. So yeah, it makes it tough because I have a backlog definitely of writing ideas, so, hope to get back to that soon.

Vitaly: I hope we’ll get there as well. Well maybe, quickly a few questions to also slowly wrap up. Do you think you have a dream feature that you would love to CSS to have? Frankly, I don’t know, to be honest, if I had to answer that question, I’d be probably out of ideas because I always wanted the parent selector, well, :has() is much more than that, but we have that. And I always wanted container queries. Well, we have that and I always wanted subgroup, well, we kind of have it coming. What else should I wish for? I don’t know. Do you have any dream features that CSS desperately needs?

Stephanie: I think I’m similar as you, at this point, it’s waiting for certain things to land. A year or two ago. I probably would’ve said color contrast in the browser, but that’s even coming. So yeah, the list is definitely shortening of what, we still are waiting for. Another one for me, would’ve been a more native way to do fluid typography and we are also getting that once container queries hits because of container units, we’ll be able to do that.

Stephanie: So yeah, I think the last thing for me is, we have media queries related to Viewport. We’re going to get the container ones. The last thing for me would be expanding that a bit to a few more contexts, like a user browser zoom context would be useful to me. And I’m sure there’s some other device features, and things in that area might be the remaining area to grow a little bit. Sometimes there’s privacy concerns, hardware limitations, these things that prevent those particular features. But yeah, that’s what I kind of have my eye on.

Vitaly: Excellent. Sounds good. Sounds exciting. I’m just really excited to see what is coming up next. It just always keeps me busy. Sometimes I would find myself just going to something like Chromestatus.com just to see, is there anything new on the horizon? Just because I’m curious. Usually it takes a little bit longer than just a couple of days to see something new showing up though. But yeah, this is how excited I am.

Vitaly: Well, so we’ve been learning a little bit about CSS in this episode today. So what have you been learning about lately, Stephanie? Maybe any podcasts that you can recommend? Any books, any, I don’t know, TV shows, anything that’s really got your interest or attracted your interest over the last few months or so?

Stephanie: Yeah, so an area I unexpectedly found myself enjoying is watching developers on Twitch. So I’ve been learning all kinds of stuff from some fabulous streamers. Folks might already know, but White Panther whose Salma Alam-Naylor is excellent. And also I’ve really enjoyed Alex Trost who runs the Frontend Horse community. So if you’re looking to learn maybe some unexpected things in a little different format, that’s what I encourage folks to do. Kind of shake up where you’re getting your inspiration.

Vitaly: Excellent. Well, if you’d like to learn a bit more from Stephanie, we have an upcoming Smashing workshop, which is going to look into all kind of things CSS. probably also Sass, probably also BEM, and probably also 11ty, if I’m not mistaken. This is taking place on July 11-25th. And of course there are a few tickets left, so please do take a look and join in. And if you, dear listener, would like to hear more from Stephanie altogether in general, you can also find her on Twitter where she’s @5tp3h or Steph and on her website at https, of course, thingdobecreate.com.

Vitaly: Well, thanks for joining us today, Stephanie. Do you have any parting words with the wonderful community? Things that will remain in somebody’s memories centuries after they hear it here today?

Stephanie: Big responsibility. Experiment, play and share what you know.

Boost Your Skills Online: Smashing Workshops On Front-End And Design

How do we build and establish a successful design system? What about modern CSS and JavaScript? What’s the state of HTML Email? And what are new, smart design patterns we could use? What will it take us to move to TypeScript or Vue.js? With our online workshops, we try to answer these questions well.

Our workshops bring in knowledgeable, kind folks from the community to explore real-life solutions to real-life problems, live, with you. All sessions are broken down into 2.5h-segments across days, so you always have time to ask questions, share your screen and get immediate feedback. Jump to all workshops.

Meet Smashing Online Workshops: live, interactive sessions on front-end & UX.

In fact, live discussions and interactive exercises are at the very heart of every workshop, with group work, homework, reviews and live interaction with people around the world. Plus, you get all video recordings of all sessions, so you can re-watch at any time, in your comfy chair in familiar comfort of your workspace.

Upcoming Workshops (May-September 2021)

No pre-recorded sessions, no big picture talks. Our workshops take place live and span multiple days. They are split into 2.5h-sessions, plus you’ll get all workshop video recordings, slides and a friendly Q&A in every session.

We also have friendly bundles for larger teams and agencies.

Workshops in May–July

Meet our friendly front-end & UX workshops. Boost your skills online and learn from experts β€” live.

Workshops in August–September

What Are Online Workshops Like?

Do you experience Zoom fatigue as well? After all, who really wants to spend more time in front of their screen? That’s exactly why we’ve designed the online workshop experience from scratch, accounting for the time needed to take in all the content, understand it and have enough time to ask just the right questions.

In our workshops, everybody is just a slightly blurry rectangle on the screen; everybody is equal, and invited to participate.

Our online workshops take place live and span multiple days across weeks. They are split into 2.5h-sessions, and in every session there is always enough time to bring up your questions or just get a cup of tea. We don’t rush through the content, but instead try to create a welcoming, friendly and inclusive environment for everyone to have time to think, discuss and get feedback.

There are plenty of things to expect from a Smashing workshop, but the most important one is focus on practical examples and techniques. The workshops aren’t talks; they are interactive, with live conversations with attendees, sometimes with challenges, homework and team work.

Of course, you get all workshop materials and video recordings as well, so if you miss a session you can re-watch it the same day.

TL;DR

  • Workshops span multiple days, split in 2.5h-sessions.
  • Enough time for live Q&A every day.
  • Dozens of practical examples and techniques.
  • You’ll get all workshop materials & recordings.
  • All workshops are focused on front-end & UX.
  • Get a workshop bundle and save $250 off the price.

Thank You!

We hope that the insights from the workshops will help you improve your skills and the quality of your work. A sincere thank you for your kind, ongoing support and generosity β€” for being smashing, now and ever. We’d be honored to welcome you.

Collective #661




PINTR

An open source tool to create single line SVGs from drawings. Great for avatars and pen plotter drawings.

Check it out





Tiny Wins

Joel Califa writes about the big benefits of little changes.

Read it






SimpleLogin

A great open source email alias solution that helps you protect against spam, phishing and data breaches.

Check it out







3Dengine

Victor Ribeiro’s first attempt at a 3D engine using native JavaScript and WebGL.

Check it out


Ideas Filter

A great place to find apps/plugins/extensions from various marketplaces with the option to filter for ideas for which many people pay but that have a low rating.

Check it out




Readme.so

Use readme.so’s markdown editor and ready made templates to easily create a simple README for your repositories.

Check it out



The post Collective #661 appeared first on Codrops.

From Cats With Love: New Navigation, Guides And Workshops

Not many people know that the entire Smashing Family is a very small team with just 15 wonderful people working day-to-day on everything from magazine and books to front-end and design. At times it might feel like that’s quite a bit of work, but we do our best to be well-organized and be productive, while working (well, mostly) 100% remote for almost a decade now.

In fact, we’ve been quite busy over the last few months. We’ve been running our online workshops, redesigned our navigation, refactored a number of components, refined performance and improved accessibility. There are more subtle UX changes coming in, and we’d love to share what we’ve been cooking. Settle in.

Upcoming Online Workshops

We’ve run 40 workshops with 2.600 attendees so far, and we’ve learned how to run a workshop where you, dear readers, learn best. So for the next months, we’ve set up a full schedule on front-end and design, from web performance to interface design. Jump to all workshops ↬

Workshops in April–May

Meet our friendly front-end & UX workshops. Boost your skills online and learn from experts β€” live.

Workshops in June–July

No pre-recorded sessions, no big picture talks. Our online workshops take place live and span multiple days across weeks. They are split into 2.5h-sessions, plus you’ll get all workshop video recordings, slides and a friendly Q&A in every session. (Ah, you can save up to 25% off with a Smashing Membership β€” just sayin’!.)

New Navigation (Beta Testing)

With so many articles on the site, finding the right articles can be difficult. So for the last weeks, we’ve been going through 3.500 articles and manually refining and standardizing the underlying taxonomy of our posts. You might have been there as well: dealing with articles accommodated over 15 years wasn’t quite easy.

That was quite an exercise in patience and hard work β€” but now we are happy to roll out the new navigation, with important navigation options surfaced prominently across the entire site. Hopefully, you’ll find the new navigation (on the top of this page, too) more useful.

Please leave a comment if you spot any bugs, mistakes, or perhaps something important missing β€” we’ll do our best to fix it and deploy right away.

New Evergreen Guides (Beta Testing)

We have also rolled out new article formats β€” evegreen guides. These are the articles with curated articles, tutorials, tools and resources that we keep updating regularly. There are a few more of those coming up, but they should be a reliable source of techniques and tools.

Here’s what we’ve published so far:

You can also access the guide on the new Smashing Magazine's frontpage, although some UI/UX changes will be coming in there as well. Feedback? We are listening on Twitter, of course.

Join Our Free Online Meet-Up (Apr 27)

We’re getting closer and closer to our free online meetup coming April 27 β€” and we’d be honored and humbled to welcome you there. There we will be running a website makeover of the Powercoders NGO, live.

Tickets are absolutely free. So, if you don’t have one yet, please check out the details, speakers, schedule and timezones and get your ticket today, mark your calendars and invite your friends and colleagues to join in.

Thank You!

We are very committed to improving Smashing in every possible way, and we are working hard to do just that behind the scenes. We’d sincerely appreciate you recommending our little site, our articles and workshops to your friends and colleagues β€” and we hope that they will help you boost your skills and the quality of your work.

A sincere thank you for your kind, ongoing support and generosity β€” thank you for being smashing, now and ever. Ah, and subscribe to our newsletter β€” we have plenty of new announcements coming up soon! ;)

Collective #654



Collective 654 item image

The Component Gallery

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.

Check it out







Collective 654 item image

Garet Font

A beautiful presentation for the Garet font family. A modern geometric sans serif font with two free weights.

Check it out




Collective 654 item image

The End of AMP

Dwayne Lafleur shares some interesting news and insights about the failure of Accelerated Mobile Pages (AMP).

Read it







Collective 654 item image

Baserow

A Self hosted open source online database built with Django and Nuxt for creating your own database without technical experience.

Check it out


Collective 654 item image

Clone Wars

100+ open-source clones of popular sites. The list contains source code, demo links, tech stack, and Github stars count.

Check it out












Collective 654 item image

Focalboard

An open source alternative to Trello, Asana, and Notion. It helps define, organize, track and manage work across individuals and teams. Currently in early-access beta.

Check it out


The post Collective #654 appeared first on Codrops.

How To Boost Media Performance On A Budget

American scholar Mason Cooley deftly described a hard fact of life: β€œA budget takes the fun out of money.” Unquestionably, media enlivens websites, adding appeal, excitement, and intrigue, let alone enticements to stay on a page and frequently revisit it. However, just as out-of-control spending bodes ill in the long run, so does unbudgeted digital media decimate site performance.

A case in point: a page-load slowdown of a mere second could cost Amazon $1.6 billion in annual sales. Of the many factors that affect page-load speed, media is a significant one. Hence the dire need for prioritizing optimization of media. By spending your money right on that task and budgeting your media, you’ll reap significant savings and benefits in the long run.

Performance Budgets

β€œA performance budget is β€˜... just what it sounds like: you set a β€˜budget’ on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.”

β€” Tim Kadlec

A performance budget as a mechanism for planning a web experience and preventing performance decay might consist of the following yardsticks:

  • Overall page weight,
  • Total number of HTTP requests,
  • Page-load time on a particular mobile network,
  • First Input Delay (FID)
  • First Contentful Paint (FCP),
  • Cumulative Layout Shift (CLS),
  • Largest Contentful Paint (LCP).

Vitaly Friedman has an excellent checklist that describes the components that affect web performance along with useful tips on optimization techniques. Becoming familiar with those components will enable you to set performance goals.

With clearly documented performance goals, various teams can have meaningful conversations about the optimal delivery of content. For example, a budget can help them decide if a page should contain five images β€” or three images and one video β€” and still remain within the planned limits.

However, having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to organizational goals.

Business Performance

If you splurge a lot of bytes on nonoptimal videos and images, the rich-media experience will not be so rich anymore. An organization exists to achieve outcomes, such as enticing people to buy, educating them, motivating them, or seeking help and volunteers. Anyone with a web presence would appreciate the relationship between the effect of various performance measures on business metrics.

WPOStats highlights literally hundreds of case studies showing how a drop in perfrmance β€” from a few hundreds of milliseconds to seconds β€” might result in a massive drop in annual sales. Drawing that kind of relationship greatly helps track the effect of performance on business and, ultimately, build a performance culture for organizations.

Similarly, slow sites can have a dramatic impact on conversion. A tough challenge online businesses face is to find the right balance between engaging the audience while staying within the performance budget.

It’s not surprising then that a critical component for audience engagement is optimized visual media, e.g. a captivating video that weaves a story about your product or service along with relevant, interesting, and appealing visuals.

According to MIT neuroscientists, our brain can absorb and understand visual media in less than 13 milliseconds, whereas text can take the average reader over 3.3 mins to comprehend, often after re-reading it and cross-referencing other places. No wonder then that microvideo content (usually just 10–20 seconds long) often delivers big engagements and conversion gains.

Appeal Of Videos

While shopping online, we expect to see detailed product images. For years, I’ve come to prefer browsing products that are complemented by videos that show, for example, how to use the product or maybe how to assemble it, or that demonstrate real-life use cases.

Apart from my personal experience, a lot of research attests to the importance of video content:

  • 96% of consumers find videos helpful when making online purchasing decisions.
  • 79% of online shoppers prefer to watch a video for information on a product rather than reading the text on a webpage.
  • The right product video can raise conversions by over 80%.

Speaking about the delivery of videos on the web,

β€œThe average video weight is increasing dramatically every year, more so on mobile than on desktop. In some cases, that may be warranted since mobile devices often have high-resolution screens, but it may also be due to a lack of ability to offer different video sizes using HTML alone. Many large videos on the web are hand-placed in marketing pages and don’t have sophisticated media servers to deliver appropriate sizes, so I hope in the future we’ll see similar simple HTML features for video delivery that we see in responsive images.”

β€” Scott Jehl

The same sentiment was conveyed by Conviva’s Q4 2020 State of Streaming (registration required), which noted that mobile phones saw 20% more buffering issues, a 19% higher video-start failure and 5% longer start-time than other devices.

Apart from rendering troubles, video delivery can also raise bandwidth costs, especially if you cannot deliver the browser’s optimal formats. Also, if you are not using a content delivery network (CDN) or multiple CDNs to map users to the closest edge regions for reduced latencies β€” a practice called suboptimal routing β€” you might slow down the start of the video.

Similarly, unoptimized images were the leading cause of page bloat. According to the Web Almanac, the differential in image bytes sent to mobile or desktop devices is very small, which amounts to a further waste of bandwidth for devices that don’t really need all the extra bytes.

Doubtless, going overboard with an engaging yet unoptimized content hurts business goals, and that’s where the fine art of balancing comes into play.

The Art Of Balancing Performance With Media Content

Even though rich media can promote user engagement, we need to balance the cost of delivering them with your website performance and business goals. One alternative is to host and deliver video through a third party like YouTube or Vimeo.

Despite bandwidth savings, however, that approach comes at a cost. As the content owner, you can’t build a fully customized branded experience, or offer personalization. And of course, you need to host and deliver your images.

You don’t have to offload your content. There are also other options available. Consider revamping your system for optimal media delivery by doing the following:

Understand your current usage

Study the weight of your webpages and the size of their media assets. Web-research expert Tammy Everts recommends ensuring that pages are less than 1 MB in size for mobile and less than 2 MB for everything else. In addition, identify the resources that are displayed on critical pages.

For example, can you replace a paragraph of text and the associated images with a short video? How would that decision affect your business goals? At this stage, you might need to review your Real User Monitoring (RUM) and Analytics and identify the critical pages that lead to higher conversion and engagement rates.

Also, be sure to synthetically track Google’s Core Web Vitals (CWVs) as part of your toolkit with tools like LightHouse. You can also measure CWVs through real-user monitoring (RUM) like CrUX. Since the CWVs will also be a signal for Google to crawlers, it makes sense to monitor and optimize for those metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Serve the right format

Serve images or videos in the most appropriate format in terms of size and resolution for the viewing device or browser. You might need an image CDN for that purpose. Alternatively, create variants like WebM, AVIF, JPEG-XL, HEIC, etc. and selectively serve the right content type based on the requesting User-Agent and Accept headers.

For one-off conversions, you can try tools like Squoosh.app or avif.io. A related practice is to convert animated GIFs to videos. For more insight, see this Web.dev article. Want to try setting up a workflow to handle video publishing? See the great tips in the article Optimizing Video For Size And Quality.

Serve the right size

Over 41% of images on mobile devices are improperly sized. So, rather than serving a fixed width, crop your images and videos to fit the container size with tools like Lazysizes. Better yet, AI tools that can detect areas of interest while cropping images could save you a load of time and effort. You could also leverage native lazy-loading for images that are below the fold.

Add subtitles to your videos

Almost 85% of videos are played without sound. Adding subtitles to them doesn’t only provide an accessible experience, but it would capture audience attention and boost engagement. However, transcribing videos could be a tedious job; you can work with an AI-based transcription service and improve it instead to automate the workflow.

Deliver through multiple CDNs

CDNs can alleviate last-mile latency, shorten a video’s start time, and potentially reduce buffering issues. According to a study by Citrix, a multi-CDN strategy can reduce latency even further and offer continued availability in case of localized outages in the CDN’s edge nodes.

Instead of leveraging multiple discreet tools, you could explore a product like Cloudinary’s Media Optimizer, which effectively and efficiently optimizes media, delivering the right format and quality through multi-CDN edge nodes. In other words, Media Optimizer optimizes both quality and size, serving high visual fidelity in small files.

Progressively render video

Auto-playing preview videos on YouTube has shown to increase video watch time by over 90%. Video auto-play has few benefits and plenty of drawbacks, so it’s important to be careful when to use and when not to use it. It’s important to have the option to pause the video as a minimum.

A good way to balance the page-size budget would be to first serve AI-created video previews and poster images only, loading the full video only if the user clicks the video. That way, you can eliminate unnecessary downloads and accelerate page loads.

Alternatively, load a preview video at the beginning and let the player autoplay the full version. Once the preview completes, the player checks the connection type of the device with the Network Connection API and, if the user has good connectivity, swaps the source from preview to the actual video.

You can check a sample page for a demo. Here’s a tip: since CDNs can detect network connection types more reliably, your production-quality code could leverage the CDN to detect network speed, based on which your client code could progressively load the long-form video.

Wrapping Up

Down the road, thanks to its remarkable ability to tell stories in a way that words can’t, visual media will continue to be a dominant element for websites and mobile apps. However, determining the right content to deliver depends on both your business strategy and site performance.

β€œA performance budget doesn’t guide your decisions about what content should be displayed. Rather, it’s about how you choose to display that content. Removing important content altogether to decrease the weight of a page is not a performance strategy.”

β€” Tim Kadlec

That’s sound advice to keep in mind.

New Live Workshops On Front-End & UX

There is something magical about people from all over the world coming together, live. Camera on, mic nearby, in a comfy chair, with fingertips eagerly hitting your beloved keyboard. We've been so humbled to welcome over 2000 wonderful people like you in our workshops already β€” from Montevideo to Delhi; from Perth to Cape Town; from Austin to remote corners of Lapland.

Meet Smashing Online Workshops: live, interactive sessions on front-end & UX.

Every attendee has their own story and experiences to share, all from the comfort of their home, and the convenience of their working space. And so we’ve just announced new dates and speakers for upcoming months. And we thought, you know, maybe you’d like to join in as well.

Just in case you are wondering: here's what the workshops are like.

Upcoming Workshops in March–July

No pre-recorded sessions, no big picture talks. Our online workshops take place live and span multiple days across weeks. They are split into 2.5h-sessions, plus you’ll get all workshop video recordings, slides and a friendly Q&A in every session. (Ah, you can save up to 25% off with a Smashing Membership β€” just sayin’!.)

Workshops in March–April

Meet our friendly front-end & UX workshops. Boost your skills online and learn from experts β€” live.

Workshops in May–July

What Are Online Workshops Like?

Do you experience Zoom fatigue as well? After all, who really wants to spend more time in front of their screen? That’s exactly why we’ve designed the online workshop experience from scratch, accounting for the time needed to take in all the content, understand it and have enough time to ask just the right questions.

In our workshops, everybody is just a slightly blurry rectangle on the screen; everybody is equal, and invited to participate.

Our online workshops take place live and span multiple days across weeks. They are split into 2.5h-sessions, and in every session there is always enough time to bring up your questions or just get a cup of tea. We don’t rush through the content, but instead try to create a welcoming, friendly and inclusive environment for everyone to have time to think, discuss and get feedback.

There are plenty of things to expect from a Smashing workshop, but the most important one is focus on practical examples and techniques. The workshops aren’t talks; they are interactive, with live conversations with attendees, sometimes with challenges, homework and team work.

Of course, you get all workshop materials and video recordings as well, so if you miss a session you can re-watch it the same day.

TL;DR

  • Workshops span multiple days, split in 2.5h-sessions.
  • Enough time for live Q&A every day.
  • Dozens of practical examples and techniques.
  • You’ll get all workshop materials & recordings.
  • All workshops are focused on front-end & UX.
  • Get a workshop bundle and save $250 off the price.

Thank You!

We hope that the insights from the workshops will help you improve your skills and the quality of your work. A sincere thank you for your kind, ongoing support and generosity β€” for being smashing, now and ever. We’d be honored to welcome you.

New Year, New Beginnings: Smashing Workshops & Audits

With the new year sinking in and everyone’s resolutions still being put to the test, we are slowly returning back to our day-to-day projects. And as we do so, we focus on the new targets for 2021: improving accessibility, conversion, engagement, retention, and of course web performance. We all have different personal goals for this year, but one thing unites us all: improving the web for everyone.

The time between the years is always a great time to calm down; but it's also a wonderful time to do some reseach, thinking, writing and perhaps even unsolicited coding and designining. And almost as if it was an annual tradition (it actually is), Vitaly has been reading through everything that happened in front-end in 2021, and compiling it all in the front-end performance checklist 2021 yet again.

This guide covers pretty much everything you need to build fast experiences on the web today β€” from metrics to tooling and front-end techniques and strategies. It has proved to be quite useful to many readers in the past years, so hopefully it will be useful for you, too. You can also edit the checklist (PDF, MS Word Doc and Apple Pages) and adjust it to your own personal needs, or even use it for your organization.

Now, without further ado, let’s take a look at what the Smashing team has in store for you in the next months.

Plan Your Year Ahead With Online Workshops

Have you attended one of our workshops yet? We are thrilled each and every time we run practical, online workshops with all of the wonderful attendees from all over the world coming together to learn together. It has proved to be a great opportunity to connect with people around the world, and share experiences live. So many ideas have been brought to life thanks to the live design and coding sessions, and there are many folks that have found new friends, too!

It gets even better: We now have workshop bundles from which you can choose 3, 5 or even 10 tickets for the workshops of your choice β€” ongoing, upcoming or the ones happening in the future! Pick the online workshops of your choice β€” at the best price and at the best dates β€” for yourself, your team or your agency. Jump to workshop bundles.


Jan. 19 – 27 Form Design Masterclass Adam Silver Design & UX
Jan. 21 – Feb. 5 New Adventures In Front-End, 2021 Edition Vitaly Friedman Code
Feb. 2 – Feb. 10 Building Modern HTML Emails RΓ©mi Parmentier Code
Feb. 11 – Feb. 26 The SVG Animation Masterclass Cassie Evans Code
Feb. 16 – Feb. 17 The CSS Layout Masterclass Rachel Andrew Code
Feb. 23 – Mar. 9 Successful Design Systems Brad Frost Workflow, Code
Mar. 4 – Mar. 12 Psychology For UX and Product Design Joe Leech Design & UX
Mar. 16 – Mar. 24 Finding Clients Masterclass Paul Boag Design & UX
Mar. 18 – Apr. 1 Behavioral Design Susan & Guthrie Weinschenk Design & UX
Mar. 30 – Mar. 31 Designing The Perfect Navigation Vitaly Friedman Design & UX
Feb. 23 – Mar. 9 Architecting Design Systems Nathan Curtis, Kevin Powell Workflow, Code

We keep working on the program for this year, and there are more workshops to announce. Let us know if you'd like to run one, get in touch on Twitter DM and we promise to do our best to make it happen. Also, feel free to subscribe here if you’d like to be the first to be notified when new workshops come up. Plus, you get access to early-bird tickets as well.

New: Smashing Online Audits on Front-End & UX

Just last week we've silently launched our new little product β€” online audits β€” 30–60 mins video review along with a written report of our findings. It's a simple quick way to validate your ideas and get an honest, unbiased feedback (for now just from Vitaly) on the front-end & UX of your website, app, or mock-ups. Plus, guidelines and action points to do better.

Book an audit of your choice and share some details about your website, app, or mock-ups, and we’ll get back to you in almost no time!

Smashing Podcast: Tune In And Get Inspired

This year, we’ve published a new Smashing Podcast episode every two weeks, and the feedback has been awesome! With over 56k downloads (just over a thousand per week, and growing!), we’ve had 34 guests on the podcast with different backgrounds and so much to share!

If you don’t see a topic you’d like to hear and learn more about, please don’t hesitate to reach out to host Drew McLellan or get in touch via Twitter anytime β€” we’d love to hear from you!

1. What Is Art Direction? 2. What’s So Great About Freelancing?
3. What Are Design Tokens? 4. What Are Inclusive Components?
5. What Are Variable Fonts? 6. What Are Micro-Frontends?
7. What Is A Government Design System? 8. What’s New In Microsoft Edge?
9. How Can I Work With UI Frameworks? 10. What Is Ethical Design?
11. What Is Sourcebit? 12. What Is Conversion Optimization?
13. What Is Online Privacy? 14. How Can I Run Online Workshops?
15. How Can I Build An App In 10 Days? 16. How Can I Optimize My Home Workspace?
17. What’s New In Drupal 9? 18. How Can I Learn React?
19. What Is CUBE CSS? 20. What Is Gatsby?
21. Are Modern Best Practices Bad For The Web? 22. What Is Serverless?
23. What Is Next.js? 24. What Is SVG Animation?
25. What Is RedwoodJS? 26. What’s New In Vue 3.0?
27. What Is TypeScript? 28. What Is Eleventy?
29. How Does Netlify Dogfood The Jamstack? 30. What Is Product Design?
31. What Is GraphQL? 32. Review Of The Year 2020
33. What Is Machine Learning? 32. Coming up on January 26

Stay tuned for the next episode coming out on January 26!

Smashing Newsletter: Best Picks

With our weekly newsletter, we aim to bring you useful, practical tidbits and share some of the helpful things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and we’d appreciate it if you could help spread the word and give them the credit they deserve!

Also, by subscribing, there are no third-party mailings or hidden advertising, and your support really helps us pay the bills. ❀️

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime β€” they’ll be sure to get back to you as soon as they can.

Below are some of the popular newsletter pieces that we've shared in our newsletter recently:

Default Local Fonts Compatibility

Default fonts vary significantly across different operating systems. To provide an easy way to look up a system’s default fonts, especially the ones that need to be available through CSS font-family, Zach Leatherman built Font Family Reunion.

The compatibility table works like a Can I Use for default local fonts: Once you enter a font-family, it will tell you if it is supported, as well es what the five standard CSS keyword font-families (serif, sans-serif, monospace, and the lesser known fantasy and cursive) are aliased to in each operating system. One for the bookmarks.

Improving Google Fonts Performance

Self-hosting fonts is widely accepted to be the fastest option when using web fonts. However, Google Fonts can be speedy, too: their ability to serve the tiniest possible font files to specific user agents and platforms and their relatively new support for font-display via the URL parameter &display=swap are already a good base. And, as Harry Roberts shows, there are quite some things that you can do to improve their performance even further and mitigate a lot of the issues that Google Fonts are commonly known for.

For his article β€œThe Fastest Google Fonts,” Harry went down the performance testing rabbit hole to find the best combination for fast Google Fonts: asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains. All of these techniques combined might sound a bit overwhelming at first, but Harry concludes his article with a slim and maintainable snippet that helps you get the most out of Google Fonts.

#### Responsive Emails Made Easy

Coding clean, responsive emails that provide a solid experience in all popular email clients can be a time-consuming challenge. HEML is here to change that. The open-source markup language gives you the native power of HTML without having to deal with all of the email quirks. There are no special rules or styling paradigms to master, so if you know HTML and CSS, you are ready to start.

MJML is based on the same idea of simplifying the process of creating responsive emails. The markup language is based on a semantic syntax that makes the process straightforward while an open-source engine does the heavy lifting and translates the MJML you wrote into responsive HTML. A library of standard components saves you extra time and lightens your email code base. And if you want to build your own, Modular Template System Guide might help, too. Promising!

Bulletproof HTML Email Templates

Making an HTML email work across email clients ain’t an easy task. Fortunately, there are plenty of reliable tools, templates and frameworks to make it easier to get your work done. For example, Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing. It also provides a few ready-made projects (Maizzle Starters) that you can start with right away.

Cerberus and HTML Email provide small collections of reliable, solid patterns for responsive HTML emails that are well-tested in 50+ email clients, including Gmail, Outlook, Yahoo, AOL, and many others. EmailFrame.work allows you to build responsive HTML email templates with pre-built grid options and basic components, supported in over 60+ email clients.

Stripo, Chamaileon, Postcards, Topol.io and Bee Free feature plenty of free HTML email templates, Litmus provides Responsive Email Templates for newsletters, product updates and receipts, and CampaignMonitor has a free HTML email template builder with drag’n’drop functionality.

From CSS Gradients To Fake Data

Imagine that you just need to find CSS triangle styles for elements and pseudo-elements. Or perhaps refine the color palette a bit by exploring tints and shades of a given color. Or perhaps generate a linear and radial CSS gradient for a section of the page. There is no need to do it all manually or try to find those CSS snippets all over the web. You can always find them on Omatsuri.

Omatsuri means festival in Japanese, and the site is a lovely little festival of open-source browser tools for everyday use. On the site, you’ll find a triangle generator, a color shades generator, a gradient generator, page dividers, SVG compressor, SVG β†’ JSX converter, a fake data generator, CSS cursors, and keyboard event codes. Designed and built by Vitaly Rtishchev and Vlad Shilov. The source code of the site is available as well.

CSS Shadow Generator

Looking for a tool that’ll automatically generate CSS code for really smooth, layered box-shadows? Well, you’re going to love SmoothShadow. Inspired by an article written by Tobias Ahlin Bjerrome, this nifty tool was created to help anyone generate the code they need on the spot.

Once you’ve given it a try, it will be difficult to not use it. The little tool allows you to visually design a layered smooth box-shadow, but also tweak alpha, offset and blur with individual easing curves. And it gets even better: The creator of the tool, Philipp Brumm, has also released SmoothShadow as a Figma plugin, so you can optimize your workflow just like you’ve always wanted to!

Understanding CSS Variables

CSS variables are powerful. They cascade normally, inherit, make it possible to reuse code, and they are extremely permissive. But what can you actually put in a CSS variable to make full use of its potential? Since some of the things aren’t that obvious, Will Boyd explored the possibilities in a blog post.

From unit values to pre-defined keywords, content strings, images, and even fancy animated values, Will’s summary shines a light on the most common things that you might want to use in combination with a CSS variable. A great overview.

Never Stop Learning

The learning never stops. And since it’s often the little insights, code tidbits, and tips that turn out to be the most useful, Stefan Judis started β€œToday I Learned”.

Whether it’s the awareness that SVG filters can be inlined in CSS or how to tell browsers that your site supports color schemes, for each little thing he learned, Stefan shares a brief summary β€” not only related to CSS but also accessibility, bash, git, GraphQL, HTML, JavaScript, and much more. Samantha Ming’s code tidbits are also a treasure chest of quick but invaluable web dev wisdom that is bound to make your live easier.

And That's A Wrap Up!

We sincerely wish you a truly wonderful year this time around β€” full of laughs, memorable moments and remarkably smashing experiences. For one, we can't wait to see you online or in person, but one thing is certain: we sincerely appreciate you being smashing month after month, and for that we are eternally grateful.

Stay smashing!

Counting Down To Bundles Of Smashing Joy And Workshops In 2021

This year has been quite a ride β€” all the more reason to look forward to a new year with new beginnings, right? Well, we’ll never really know what awaits us in the next months to come, but what I do know is that everyone on this planet can do only so much and really just the best they can to pull through. It’s certainly been a year of less ups and more downs for so many people around the world, and we hope that with everything we’ve been doing at Smashing has helped make life at least a lil’ bit easier.

Plan Your Year Ahead With Online Workshops

Have you attended one of our workshops yet? The Smashing Events team is thrilled each and every time they run a workshop with all of the wonderful attendees from all over the world coming together to learn together. So many ideas have been brought to life thanks to the live design and coding sessions, and there are many folks that have found new friends, too!

It gets even better: We now have workshop bundles from which you can choose three, five or even ten workshop tickets for the workshops of your choice β€” ongoing, upcoming or the ones happening in the future!


Jan. 5 – Jan. 19 Build, Ship and Extend GraphQL APIs from Scratch Christian Nwamba Dev
Jan. 19 – Jan. 27 Form Design Masterclass Adam Silver Dev
Jan. 21 – Feb. 5 New Adventures In Front-End, 2021 Edition Vitaly Friedman Design & UX
Feb. 2 – Feb. 10 Building Modern HTML Emails RΓ©mi Parmentier Dev
Feb. 11 – Feb. 26 The SVG Animation Masterclass Cassie Evans Dev
Feb. 16 – Feb. 17 The CSS Layout Masterclass Rachel Andrew Dev
Feb. 23 – Mar. 9 Successful Design Systems Brad Frost Dev
Mar. 4 – Mar. 12 Psychology For UX and Product Design Joe Leech Design & UX
Mar. 16 – Mar. 24 Finding Clients Masterclass Paul Boag Design & UX
Mar. 18 – Apr. 1 Behavioral Design Susan & Guthrie Weinschenk Design & UX
Mar. 30 – Mar. 31 Designing The Perfect Navigation Vitaly Friedman Design & UX

We hope you’ll find at least one workshop in the list above that fits your projects and career path, and if not, please do get in touch with us on Twitter and we promise to do our best to make it happen. Also, feel free to subscribe here if you’d like to be one of the first folks to be notified when new workshops come up, and get access to early-bird prices as well β€” we’ll have lots of goodies coming your way very soon!

Members Get Access To Videos And More

We’re proud to have a steadily growing Membership family who love good content, appreciate friendly discounts, and are an active part of our lovely web community. If you’re not involved yet, we’d love for you to join in and become a member, too! There are constant discounts on printed books, job postings, conference tickets, and your support really helps us pay the bills. ❀️

Smashing Podcast: Tune In And Get Inspired

This year, we’ve published a new Smashing Podcast episode every two weeks, and the feedback has been awesome! With over 56k downloads (just over a thousand per week, and growing!), we’ve had 34 guests on the podcast with different backgrounds and so much to share!

If you don’t see a topic you’d like to hear and learn more about, please don’t hesitate to reach out to host Drew McLellan or get in touch via Twitter anytime β€” we’d love to hear from you!

1. What Is Art Direction? 2. What’s So Great About Freelancing?
3. What Are Design Tokens? 4. What Are Inclusive Components?
5. What Are Variable Fonts? 6. What Are Micro-Frontends?
7. What Is A Government Design System? 8. What’s New In Microsoft Edge?
9. How Can I Work With UI Frameworks? 10. What Is Ethical Design?
11. What Is Sourcebit? 12. What Is Conversion Optimization?
13. What Is Online Privacy? 14. How Can I Run Online Workshops?
15. How Can I Build An App In 10 Days? 16. How Can I Optimize My Home Workspace?
17. What’s New In Drupal 9? 18. How Can I Learn React?
19. What Is CUBE CSS? 20. What Is Gatsby?
21. Are Modern Best Practices Bad For The Web? 22. What Is Serverless?
23. What Is Next.js? 24. What Is SVG Animation?
25. What Is RedwoodJS? 26. What’s New In Vue 3.0?
27. What Is TypeScript? 28. What Is Eleventy?
29. How Does Netlify Dogfood The Jamstack? 30. What Is Product Design?
31. What Is GraphQL? 32. Coming up on December 29

Stay tuned for the next episode coming out very soon!

Smashing Newsletter: Best Picks

With our weekly newsletter, we aim to bring you useful content and share all the cool things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and we’d appreciate it if you could help spread the word and give them the credit they deserve!

Also, by subscribing, there are no third-party mailings or hidden advertising involved, and your support really helps us pay the bills. ❀️

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime β€” they’ll be sure to get back to you as soon as they can.

Preventing Layout Shifts With CSS Grid

It’s no news that CSS Grid is a fantastic tool to build complex layouts. But did you know that it can help you prevent layout shifts, too? When Hubert SablonniΓ¨re discovered a layout shift problem with a toggling state on a UI component he worked on, he came up with a solution: the β€œAnti Layout Shift Grid Stacking Technique”.

Compared to solving the layout shift with absolute positioning, Hubert’s Grid-based technique supports complex situations that require more than two panels. Another benefit: You don’t need to assume which panel should guide the size of the whole component. If you want to dive in deeper, Hubert wrote up everything you need to know to prevent both vertical and horizontal shifts in a practical blog post. (cm)

Fixing Headers And Jump Links

Jump links in combination with fixed headers can cause quite some frustration. Maybe you’ve run into the same issue before: When clicked, your jump link takes you to the desired element, but a fixed header is hiding it. In the past, wild hacks were required to solve the issue. Luckily, there’s now a straightforward and well-supported CSS solution.

The trick: scroll-margin-top. Assign it to your headers, and the position: fixed header won’t get into their way anymore when you navigate to them with a jump link. A short line of code that makes a huge difference. (cm)

Fluid Typography With clamp()

When it comes to fluid scaling, CSS has some exciting new features: clamp(), min(), and max(). They cap and scale values as the browser grows and shrinks. min() and max() return the respective minimum and maximum values at any given time while clamp lets you you pass in both a minimum and maximum plus a preferred size for the browser to use.

As Trys Mudford points out, clamp() comes in particularly handy when you want broadly fluid typography without being 100% specific about the relationship between the varying sizes. In his in-depth article about the new feature, he shares valuable hands-on tips for using clamp() effectively. (cm)

Open-Source Screen Recorder And Annotation Tool

If you’ve been looking for a free and easy-to-use tool to record your screen, it might be hard to find something more powerful than Alyssa X’s open-source screen recorder Screenity.

No matter if you want to give contextual feedback on a project, provide detailed explanations, or showcase your product to potential customers, Screenity offers a number of practical features to capture, annotate, and edit your recordings β€” without any time limit. You can draw on the screen and add text and arrows, for example, highlight clicks and focus on the mouse, push to talk, and much more. Screenity is available for Chrome. (cm)

A Human-Friendly Date Picker

Date pickers can be hard to get right. A beautiful example of a human-friendly and fully accessible date picker comes from Tommy Feldt.

Thanks to Chrono.js, it supports natural language inputs, so that a user can type something like β€œtomorrow”, β€œDecember 2”, or β€œin 5 days” to select a date. Shortcut buttons also help to select the most common dates. The date picker is fully accessible with the keyboard and screen readers (there’s even an on-demand help feature for screen reader and keyboard users) and degrades gracefully when JavaScript or CSS aren’t available. A very inspiring proof of concept. (cm)

Become A Jamstack Explorer

The Jamstack is still unexplored territory for you? Jamstack Explorers helps change that. Its mission: teaching you about building for the web with modern tools and techniques.

You can choose from three courses, track your progress, and earn rewards as you proceed through the Jamstack universe. Tara Z. Manicsic leads you through the wilds of Angular, Phil Hawksworth teaches you how to serve and track multiple versions of your site with Netlify, and Cassidy Williams guides you through all the essentials of Next.js. Once you’ve completed the three missions, there’s not only a certificate waiting, but you can call yourself a Jamstack Explorer, ready to use the newest tools to build experiences that are robust, performant, and secure. (cm)

Making Remote Design Work

Design reviews, sprints, feedback β€” design is a collaborative effort that brings along quite some challenges when doing it remotely. The folks at InVision put together a collection of handy resources to help you and your team master these challenges.

The content covers three of the most trickiest aspects of working remotely: fostering creativity, aiding collaboration, and staying focused. For more best practices for running a remote design team, InVision also published a free eBook drawing from their own experience of working remotely with 700 employees spread across 30 countries and no single office. (cm)

Full-Screen Countdown Timer To Stay On Track

Sticking to the schedule can be tricky when you are running a long video call or are giving a talk or workshop. To help you make sure the session stays on track, Koos Looijesteijn built Big Timer.

The bold yet minimalist timer counts down the remaining minutes right in your browser window β€” and even if you accidentally close the browser tab or need to restart your device, it will take the disruption into account. Keyboard shortcuts make it easy to adjust the duration and pause or stop the countdown. One for the bookmarks. (cm)

Sounds And Music To Help You Focus

Are you the type of person who can’t focus when it’s quiet around them? Then one of the following tools might help you become more productive. If you’re missing the familiar office sounds when working from home, I Miss The Office brings some office atmosphere into your home office β€” with virtual colleagues who produce typical sounds like typing, squeaking chairs, or the occasional bubbling of the watercooler.

Office sounds have always distracted you more than helped you focus? Then Noizio could be for you. The app lets you mix nature and city sounds to create your personal ambient sound. Another approach to increasing focus with sound comes from Brain.fm. Their team of scientists, musicians, and developers designs functional music that affects the brain to achieve the desired mental state. Last but not least, Focus@Will is also based on neuroscience and helps increase focus by changing the characteristics of music at the right time intervals. Promising alternatives to your usual playlist. (cm)

The Web Almanac 2020

Looking back at 2020, what’s the state of the web this year? The yearly Web Almanac gives in-depth answers to this question, combining the raw stats and trends of the HTTP Archive with the expertise of the web community. The results are backed up by real data taken from more than 7.5 million websites and trusted web experts.

22 chapters make up this years’ almanac. They are divided into four parts β€” content, experience, publishing, distribution β€”, and each one of them is explored from different angles. An insightful look into the state of performance is included, too, of course. (cm)

Generate A Request Map Of Your Site

Where do all the transmitted bytes on your site come from? Analyzing third-party components in detail is a time-consuming task, but it’s already a good start to know which third parties are on your site β€” and how they got there.

Simon Hearne’s request map generator tool visualizes a node map of all the requests on a page for any given URL. The size of the nodes on the map is proportional to the percentage of total bytes, and, when you hover over a node, you’ll get information on its size, response and load times. No more bad surprises. (cm)

Let’s Tweak Our JavaScript Bundles!

Chances are high that with your JavaScript code being around for a while, your JavaScript bundles are a little bit outdated. You might have some outdated polyfills, or you might be using a slightly outdated JavaScript syntax. But now there is a little tool that helps you identify those bottlenecks and fix them for good.

EStimator calculates the size and performance improvement a site could achieve by switching to modern JavaScript syntax. It shows which bundles could be improved, and what impact this change would have on your overall performance. The source code is also available on GitHub. (vf)