Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
We need better design tools. Mattias Ott tells us why.
1.1k Plays3 months ago
Web design tools are great but they still fall short of all the incredible intrinsic based features of CSS. While there are features like auto-layout in Figma, they still fall so short of all the content driven features of The Web. Why is it that we still try to paint pretty pictures in a design tool and act like the web works that way? We can't control every details of what happens when our website is loaded on different devices over different networks and across different user preferences. Mattias Ott joins the show to discuss why design tools have fallen behind CSS and the mindset and skills we need to progress in our web designs.
Links
Mattias Ott - https://matthiasott.com/
Bad at CSS - https://x.com/badatcss
Adam Twitter - https://x.com/argyleink
David Twitter - https://x.com/_davideast
Recommended
Transcript
Intrinsic vs Extrinsic Design
00:00:00
Speaker
In design tools, we tend to work extrinsically, meaning that we hardcode things like heights and widths. And on the web, we tend to work intrinsically, meaning that we let the content set these things. And yes, in Figma, there's auto layout, which works intrinsically. But still, this falls so short of the web's dynamic sizing and layout features.
00:00:22
Speaker
Like, I can make a content-driven grid layout with autofill and min-max in just one line. CSS is full of intrinsic-based features like min-content, max-content, thick-content, clamp, min,
00:00:38
Speaker
Max, min-max, and fractional units, I'm still leaving out so many more. You can think of intrinsic versus extrinsic as a battle for control. But you can't control everything on the web. Intrinsic sizing is about adaptability. But what will it take for our design tools to catch up? That is the fundamental idea of this episode. Meet Mattias Ott.
00:01:08
Speaker
Matias is fresh off his keynote from CSS Day where he discussed the need for better design tools for the web. Adam and Matias have an amazing conversation about our web developer need for control. Just control is like a weird thing. You're ultimately delivering a document and the user can do whatever they want. So designers want this control. I want it to look at like my PDF and you're like, that's literally impossible for us to give unless you want to ship an image. And if we really want to build incredible and resilient interfaces, we'll have to relinquish that control just a bit. Welcome to the Bad at CSS podcast.
00:01:46
Speaker
We have Mattias Ott on the show today. Designer, engineer, teacher at Mutasius, University of Fine Arts, speaker, workshop runner, author, creator of the Own Your Web newsletter, member of the Indie Web, obviously, because he's
Adapting Web Design to User Needs
00:02:00
Speaker
got that newsletter. He's a pro-prototyper, rad-cap proponent of designing the browser because the designer offers the best canvas in the world for articulating digital experiences. Right? Welcome to the Vadit CSS podcast, Mattias Ott. Thanks so much for joining. Hi, Adam. Thanks for having me.
00:02:18
Speaker
intros are soly intro yeah it's really nice Oh man, they just said once I did a couple of those at CSS day, I was like, these are easy and really fun. ah yeah And i just I just kept rolling with it.
00:02:30
Speaker
Well, you're on the bad at CSS podcast, which obviously means you're pretty good at CSS because that's just the show's weird like attitude. It's like, I have this thing. It's like the better I get at something, the more I learn, I don't know. And so that's kind of what this is leaning into. We brought you in because you gave a fantastic talk at CSS day. You've also been writing for years. I've been following you and your blogs and your posts for so many years. You're really, really and just ingrained in the web in all the right ways. And I just love it. so Thanks for being on the show. and did did you are you What are you bad at? so i mean At this point, you're just like, yeah, I can i can make a lot of stuff, but what are you feeling bad at these days? yeah actually um Actually, I'm still bad at a lot of things in CSS. Just as you said, the the more you learn, the more you realize what what else you could learn and what you don't know. and I think you also still forget things. right and
00:03:28
Speaker
Oh, yeah. The more stuff there is out there, especially in CSS these days, um the more you still also have to look up stuff. So I regularly look up things.
Exploring New CSS Features
00:03:38
Speaker
I mean, it's it's just like, um I think a few years ago, I had had this idea that maybe one one day, you just sit down at your computer and you just write CSS and and everything and and you just know it, right? But this is actually not how it works. Even with 15 years of experience, you're still Yeah, you're still unsure um about stuff like CSS Grid, for example. I mean, I'm pretty confident now writing CSS Grid, but but still, there are always those details where where you still don't know, ah, is it? is it Do I need to and use align items? um Do I need to justify content, whatever it is? Like in this particular situation, and then you just open up
00:04:28
Speaker
whatever it is, the guide to CSS grid, for example, and just look it up. Yeah, I do that stuff all the time too. People ask me all the time, you you must surely sit down and and just just do this stuff right the first time. And I'm like, no, it's totally always an exploratory thing. like I have a general idea. like Usually it's like I have a few pieces or parts I want to put together.
00:04:51
Speaker
but all the little details along the way can get really tricky because yeah, this is a very kind of a hostile place to do design work, right? You've got people can change their browser window. They can change font sizes. There's so many factors. And then every new CSS feature that comes out, there's this combatorial explosion of potential where you're like, what if you mix it with that? What if you mix it with that? And and then what if you mix it with that plus that? And you're like,
00:05:14
Speaker
We're totally in this scenario where like new ingredients are given to us as chefs and no one has baked with them yet. And we're just like, just if you can like play down how excited I get trying to make stuff with these things. And ah yeah, that's kind of one of my favorite parts is this constant ah exploration and I learned something new and I'm constantly going down new trails. I've never been down and it's just so fun.
00:05:37
Speaker
Yeah. Yeah, definitely. I mean, it was, it was worth the same when I prepared the CSS day talk, for example. Um, and I looked into different areas, potentially areas where about stuff I could talk about, like, of course, typography was, was on the list very early. Um, and for example, in the typography part, I'm talking about how you can,
00:05:57
Speaker
can create fluid responsive topography, but not the regular way, like interpolating linearly, but with a sine curve and stuff like this this. This just came together a few weeks before the talk because then there was an article that was was being shared, caught my attention and this then made it possible to do something like this. and Yeah it's just a constant exploration and then putting stuff together in new ways and this is also what i really enjoy and what what is so interesting about css these days that it's just not some kind of boring layout language.
00:06:30
Speaker
it it wasn't It never was, right? But it's it's definitely... I mean, it was when it was like a column column three, a small column two, large column one. This is like the bootstrap days. I was like, I'm a little exhausted of this. um But it was really handy for when it came out because managing your own float-based column layouts was really annoying. so Yeah.
00:06:51
Speaker
i I used to call, ah when I was writing music, um if I came up with a song, I'd call it being slapped with creativity or slapped with inspiration. And I do the same thing that you just described. You read someone's blog post and just some sentence and their in their post would just trigger me. And I'm like slapped with inspiration, just midway through someone's blog. I'm like, all right, I got to open up a tab. Let's go to CodePen. I have to hammer out this idea really quick. I love chasing those moments too. It's just so fulfilling.
00:07:21
Speaker
um Cool. And yeah, you prototyping the browser a lot. Do you have a local dev environment that you do the, or you are you in CodePen? Where do you kind of spend your prototyping moments? Most of the time and in CodePen, yes. Yeah. So I think it's easy to do. and And also if you want to share it, you can just switch it to public and then you can share it with others. And it's really,
00:07:44
Speaker
Convenient over there. Um, have you tried their new code pen two at all? Have you seen that button change like last week? No. Oh, no. No, and not yet. Not yet. All right. When you hit new pen, you can say try the new editor. that's right Um, i I keep trying it and then I would, I pinked Chris Coyer one time. I was like, Hey, I just tried to make a new pen with the new editor thing. And he goes, yeah, i don't, don't, don't hit that button. don't
00:08:08
Speaker
So it's kind of still in beta, but it's cool. It exposes more of like ah files to you. So it's a lot like their projects that they had. Um, but like a little bit simpler and towards more, more of a code pen. I don't know. I'm excited to try it. I think it'll be cool. Yeah. I just heard them talk about it and on the shop talk show. Um, but yeah. Yeah. They've been hacking on it for a long time. So yeah, lots of episodes. They're like still hacking on the V2 editor. Oh.
00:08:36
Speaker
pretty sweet. Um, that's a good show. The shop talk show. Shout out to the shop talk show. If y'all are listening to this one, you should probably listen to that one too. That's a good show.
The Indie Web Movement
00:08:45
Speaker
What can you tell me about the indie web really quick? So my site, I think it's like half indie. Uh, I'm not totally indie. I feel like, uh, I'm like an indie one foot in type of deal. Um, yeah. Yeah. How did your site become fully indie? What does that mean to you?
00:09:01
Speaker
I actually don't know if if my site is fully indie and also there are definitely people who are much more involved in in the indie web, like um organizing indie webcams, homebrew website clubs and stuff like this, where they they meet regularly, more regularly. I've been to a few indie webcams and and I really, really love the idea of it. like yeah The basic idea is that you are back in control of your online identity, over what you share, what you post online, and you, for example, post it on your website first. So so this basic idea, for example, is one of the building blocks of the indie web. um But then also that it is this idea that everything basically evolves around your personal website.
00:09:47
Speaker
like You can use your personal website if you configure it in the right way to sign on to different portals or other sites even. So you can log in with your personal website. I think I have that one set up. Yeah, that's really cool. And yeah, different things like web mentions that you can add to your site so that when you post something online and someone mentions your post that you get something like a ping bag.
00:10:17
Speaker
And you can then display this reaction on your site again. So this is a really nice mechanism, I think, a really nice interaction mechanism. um Also too to pull in, for example, reactions from social media platforms like X, Twitter, ah Mastodon, of course, and another platform. So like yeah, it it really can make your site, I guess, more lively and more interactive. And and yeah, it really makes makes a lot of fun also to build stuff for the indie web then because you can really see how how your website is
00:10:53
Speaker
ah becoming part of a larger ecosystem of sites. I mean, there's definitely a lot of stuff still to do. It's not like um social media is being replaced by personal websites all of a sudden. Yeah, that's ah so many cool points in there. like I love the posse idea, which is like post once, syndicate everywhere, really want to own my content and and run that way. But I like this like comparison to social networks because with ah with a social network, someone's posting and they've got content and you follow them to their profile. And their profile, the only thing that they can do to customize it is put a cool header image and change their profile bio with like a few links or whatever. But when it's your website and someone follows and goes to your post, it's an entirely new world. it's It's like way more than MySpace ever was back in the day when people were customizing their MySpace. It's an identity. Like you said, they get to come see you.
00:11:43
Speaker
and what you stand for and what you want to look like, and its nobody can tell anybody what those are supposed to look like. It's just so much more exciting than this like watered-down version where we all just travel to each other's profile pages and we're like, look at his header image. Wow. It's just so much more interesting. and Then yeah you can put in school-driven animations, view transitions. You're just like, the world is your oyster when
Freedom in Personal Web Design
00:12:06
Speaker
you own the website. yeah and you can You can try out all this stuff. This is also something that that i I regularly do.
00:12:12
Speaker
I still have to rebuild my site. It's currently in the process of doing it ah oh really doing this again again and again. um But yeah, it's it's ah also kind of a ah joke between um me and a few other people like Manuel Matuzovic, for example. um he's also cast there yeah he's He's also redoing his site for, I don't know, a few years now.
00:12:35
Speaker
um Probably in in about 10 years we will do our relaunch. but But you can try out all the stuff on your site first. This is really nice because sometimes when you are working in in a day-to-day job, you don't have the time to try out how a service worker works. For example, you don't have the time to try out new CSS features, for example. And on your own site, you can always do that. Nobody is telling you, no, sorry, there isn't enough coverage, browser coverage or whatever.
00:13:05
Speaker
or we don't use this feature in our code base, please. um It's just yours. You can do whatever you want. And this is also really nice as a playground. Yeah, little personal sandbox. Yeah, my current quest there is to, I have like a little side nav on the homepage, is to refactor it away from JavaScript and use anchor and just CSS. I had it using has at one point, but you could you could see has being slow to match. And so there was like this weird delay. I switched it back to JavaScript because it was instant.
00:13:35
Speaker
And I was like, that stinks. I didn't want that to be that way, but I'll figure out a way to use anchor in there and get it nice and smooth and and off the main thread. We'll see. One of the things you and I have connected with over your talk also was your color palettes using trigonometry functions. So you mentioned already you used trig in scalable font sizes, which is something previously only kind of type trura had done, right? Where they had keyframes that were easing between values.
00:14:00
Speaker
yeah that it gave you a type ramp that was arced, but you've done it now with, so was it signed? What was the function that you ended up using? Yeah, I think I used the signed function. um You could basically also use use other ah trick functions for this. It's it's really interesting. I think TypeTura, Scott Callum was was using it before. I mean, the the basic idea is trigonometric functions have been used in in animation, for example, um for quite some time.
00:14:29
Speaker
Right. And his idea was, and I think it's still, it's super clever that you can use the same, the easing functions that you have in CSS to animate the font size from smaller to larger. And then you just stop this animation. You pause it at a certain point and then font size is larger. Right. And so you could, you could not only linearly scale your font font size up, but also in a more smooth way, like in a ease eased out sign function.
00:14:59
Speaker
in a curve. This has been in my head for quite some time for for several months. And also before that, like ah it would be really interesting to not only use this for typography, but also for for interpolating any value, basically, in a design. Spacing, colors, as you mentioned,
00:15:19
Speaker
ah so because then can become and feel much more fluid again. I mean, there are definitely also situations where you don't see the difference very much, honestly, right? So it's yeah also a bit of playing around with it and then just, it's it's nice to apply this and and know it works. But also and ah in other situations, it really works quite well. For example, if you want to interpolate between colors and you want to change the saturation of a color, you don't want to go from 0 to 100 when it comes to the saturation of a color linearly. But sometimes you want to have more saturated colors in the middle of a color palette. And on the lighter and darker side, you want to have it like a little less saturated. Yeah, because you can go at a gamut really easy if you've got high chrome about your high saturation values on those really dark and really light colors.
00:16:12
Speaker
Yeah, that's a it's okay. So you made a you made a palette generator that used sign that went from I think it had 10 colors or eight colors in it. um You applied a bell curve using sign, right? And the way that you had to do that was you have to shift the whole sign over half. And then that way you got the the arc that kind of continued and and Brought your saturation lower at the beginning of the palette peaking in the middle of the palette and then arcing back down to lower saturation at the darker palette, right? I Forked this and because it it's very very compelling. This is a lot of what I've been doing by hand So I have I have so many color palette versions that I've made and I do this just with my eye like optically and then I'll test it across screen anyway Okay, we'll get to that in a second. So I forked your your demo
00:17:00
Speaker
I was like, I need to know. And I, and I rebuilt it from scratch, just like step by step. Cause I wanted to follow it along very specifically. Cause it was, you built the demo that I had in mind for like a long time. I was like, can math through some arcs do what I've been doing by hand? That would really cool. Cause I'm trying to make kind of generators and give people custom properties that they can adjust a color palette and kind of nudge it towards
Mathematics in Design
00:17:21
Speaker
what they want. yeah So I forked it and I, and I made it and dude.
00:17:25
Speaker
I eventually got disappointed. The darks and the lights were like still too chroma intense, and then the ones in the middle weren't intense enough. like I was comparing them to the ones that I was doing by hand, to the ones here, and I couldn't get the quality to match the ones that I've done by hand, which is also pretty typical for color and math. like We all know that optically chosen palettes are superior to math chosen palettes, i'm just like and kerning. right You have math kerning, and then you have optical kerning. This is why designers would always go in with their with the eye. So then I forked it again. Dude, I did four forks, because I was like determined. I was like, I'm not going to give up. I did another fork, which then I switched um for ergonomics away from chroma being just float values. So like every time I'm looking at an OKLCH color, I'm like, all right, the hue, 200. That makes sense. Yeah, I can imagine hue. And then it's like chroma, 0.18. And I'm like, that's not going to make sense to anybody.
00:18:23
Speaker
I mean, I know that point one eight, it's like somewhere in the middle. I'm like, no one else is going to know that point one eight is like a kind of high amount of chroma. And if you go to three, you're really pushing it. So I switched it all to percentage. So I switched it so that the chroma and the arcs and this was all percentage based. And that way I was like in the middle, you know, get up to like 80, 90% saturation. And then the lower ends, then it could be, it's a little bit more legible. It's like a designer. Cause ultimately I want to give this like a designer or whatever.
00:18:51
Speaker
and man, I got to the same spot where I could i could nudge it and I'm trying to adjust it. i even so So here's where I really went down the rabbit hole. I look up and I'm like, okay, sign curves for, I just wanted the visualizations of them as bell curve, right? Because that's ultimately what we're going for is a bell curve. And dude, everywhere online it's like, the sign function makes the crappy bell curve. That's the crappiest of the bell curves. And I was like,
00:19:14
Speaker
I was like, what what? What do you mean a crappy bell curve? What does that even mean? It looks like a bell. It's a bell. And they're like, yeah, but it it it hangs out too long in the area. So like the the lower ends of the bell don't have enough chroma or whatever. And then the ones at the top, there's too much chroma amongst all in the middle. And I'm like, dang it. That is what I'm seeing. And then the math to go beyond that was really hairy. And I tried it. That was my fourth fork was like, OK, I'm going to try one of these more advanced curves.
00:19:42
Speaker
And then I just failed. I never, I never got it to work. And then I was like, you know what? My hand managed one is starting to look a little bit easier and it has great results. And so I kind of backtrack. I did not expect that. So like, I saw your demo, I saw the colors on screen and I was like, hell yeah, that looks great. And then I got home and I sat down on my computer and, you know, really put on my nerd inspector glasses and was like, Oh man.
00:20:04
Speaker
they're They're leaving me wanting. have you had yeah How do you feel about it now that you've like hacked on it? You've made all these palettes. You're looking at them. Have you tried them in an app and seen how they work? I i mean, I haven't tried them in in a production project in in an app or something like this or on a website yeah yet. i I'm still thinking of but of um using it in some way on my own website, like trying it out. And I have to find a few colors, which I can then interpolate. But basically also the the idea for the talk at CSS Day was not that this will end up with a final version of a color palette that just works and isn't just perfect and whatever. But I just wanted to to try out what can be done right with CSS already.
00:20:49
Speaker
And how much can play can you push it? And I wanted to play and try out, right? In the end, I think it's still it's still super interesting that you can do stuff like this now. You can you can create color palettes with relative the relative kind of color syntax, so color mix and other functions that allow you really to manipulate colors um based on a base color that you have. But in the end, as you say,
00:21:13
Speaker
color perception is is not linear or or not not math, right? Color perception is is highly subjective. I guess every one of us is perceiving colors slightly differently. And so yeah also, and definitely i a hunt and handcrafted palette will always be superior to something that is just generated out of a, yeah.
00:21:37
Speaker
with one button press or or with CSS, for example, I also tried one, one tool. I don't know if you know this, um, atmos, atmos dot style. Oh, I think he shared it in the presentation. Yeah. Yeah. It's also, it's a color palette generator tool and it allows you also to, to interpolate colors into various ways and and stuff. It's really nice. Interesting. But I also experienced the same that you, you are also starting with, let's say five base colors.
00:22:04
Speaker
Then you press generate my palette, please. And then the result is fine. It's okay. It's, it's a good starting point, but then you have to start tweaking it by hand a bit. It's like the red is maybe too bright and the green is too dark and you want to have it. Yeah. Much more vibrant and there is no way to.
00:22:25
Speaker
I don't know, apply another function and another another trigonometric function in another way to to make it more vibrant in the greens or whatever. and Yep. There's so many of these and I i keep using them too. I think it's color box IO. I'm looking it up really quick. Yeah. Cause there's color box, which allowed you to choose the easing. You had all the options of all the standard easing. Then there was components AI were written by the folks from evil Martians and they're great color experts and they have a color tool on, I don't know how many times I've gone in there and defined color palettes and tried to generate things that are giving me good starters and
00:23:00
Speaker
It's so weird, and just like you say too, um different even though we have OKLCH now, which is supposed to be the most perceptually linear and reliable a color space we have, yeah, the the hue still makes a big difference. So you can't just navigate to any hue and have like a perfect palette. You can get really good, but yeah, this this quest for the Holy Grail, here this might be just like a fun little side tangent. Do you remember the Holy Grail layout? Yeah, yeah, definitely.
00:23:27
Speaker
All right. So yeah, that was the sidebars and then on mobile was stacked. Yeah. And we could do it with flex box and we're like flex boxes solved layouts for all eternity. We've got the holy grail. And there's just this obsession with, you know, I just realized i I fell into that too. Looking at your color palette is wanting the right choice. People don't want to play a lot of times. They want to go straight from, I don't know shit about color to give me the best color palette in the world. And then we do this with everything, with components and with art.
00:23:58
Speaker
What is this this desire from us? is it yeah Do you have any thoughts on why do why do we always want the Holy Grail of a thing?
Innovative Design Methods
00:24:06
Speaker
Yeah, yeah and also also why why why does it feel so comfortable to to do things like we've always done them? right So it's maybe a bit of the same. like once Once something and seems to work, I think it's really hard to to do it in another way or try something else. If you're working in a team, for example, it's definitely hard to to then also talk to others and and and convince them that we should try something new despite the fact that the world keeps evolving and things are changing around us, right? I've been there too. I also experienced this when it comes to prototyping, for example. I've been working as an independent designer, so I'm i'm a freelancer. a worker
00:24:51
Speaker
a lot with agencies, studios, and so on, and also with different design teams, almost every project. There are teams who definitely get the value of prototyping, but for others, it's also like...
00:25:02
Speaker
why why do you want to to play around and then double around with this stuff? Like, isn't there a rule we can apply something that is safe and untrusted, right? just there Isn't there a way we can we can just lay out this just fine so that it works and then we hand it over? How is this not solved? like This has to be solved. Let's just use the solved solution. Yeah, exactly. Yeah, yeah, exactly. And and very often you you so you still have to play around with different variations of Let's say a layout or whatever it is in CSS Grid. You mentioned it before. For example, designers are still using their their tools, there their layout tools to create. Their synthetic flexbox, as I call it. Yeah. if If your design tool doesn't allow you to create, or only allows you to create columns of equal width, for example, you you just have your 12 column or your 14 or 18 column grid, then this is what you hand over to the developers. and
00:25:59
Speaker
This is where you can play around with prototypes a lot. And for example, use CSS grid in a prototype in CodePen and just set the columns at two different values, play around how it works with a fixed column on the side or whatever it is. But if you don't know that this exists and if you don't have a way to explore it with a prototype, then you won't come to a good solution or you won't even try. And then you go down the tried and trusted route, like a 12 column grid works fine.
00:26:29
Speaker
is what we've always done, but then there's also no innovation. Yeah, you're reminding me of one of my, um it's it's a moment of joy that I like bringing to the table, but it's also ah a big pain point is designers work extrinsically and you and I, we want to build intrinsically and design tools don't really offer intrinsic concepts.
Intrinsic Layout Design
00:26:51
Speaker
So for like layout, for example, yes, they'll make three columns and then shove shit inside, right? Here's my content.
00:26:58
Speaker
And you and I are like, whoa, whoa, whoa, whoa, whoa. That content could be of many different shapes and sizes. And and we should just, we don't want to squeeze it into a space. We need to ask it what it needs.
00:27:09
Speaker
And then we'll just create some balance and make sure it doesn't go too big and doesn't go too small, but otherwise let it exist very naturally. And so I've always enjoyed this translation from canvas that's flat and doesn't have this concept of intrinsic and then go build an intrinsic layout that can and and reflects the intrinsic nature of the content that's inside of there. But it it is it it it is a moment where you have to wonder how many times are we going to do this before designers can work this way too. I want designers to work. i I find, and again, this comes down to you've got a great part in your talk and this is just, we're working with the grain, right? We're working with the way that the web works and we've moved towards an intrinsic strategy because it's more flexible and it's safer and it just it has all these benefits. Yet here we are, designers are still using tools like Photoshop from 1990s, making boxes and pasting text in, predetermining the size of something. what What's it going to take to make this shift where designers can start to be more mindful of content
00:28:04
Speaker
And then work intrinsically. do Do you think they'd even want to, I guess is another question. I guess there are definitely people who, for for whom though this shift will be hard. The teams I work with, a lot of the designers are coming from a very visual background. Just like you're saying, they are working more or less extrinsically and they're thinking about content and layout extrinsically. Like we have those fixed sizes for the viewports, like a desktop.
00:28:29
Speaker
viewport, a tablet viewport, a mobile viewport. And then we fill in the content somehow. But if you're coming from the content, working intrinsically from the content out, so to say, then you can definitely build much more interesting stuff. But but I also see this problem. like you if If you open Figma and just start designing, there is no way to just explore different variations of of width of a column and and work intrinsically with images, with text and so on. And I guess the only way is the browser then to build a prototype in the browser. But this means that you might need to, to know a bit of CSS, right? At least a little bit, um at least like the the basics of grid layout, flexbox.
00:29:20
Speaker
Things like this also have a basic understanding of floats, maybe yeah the box model and stuff like this but so that you you can play around with it a little bit. It ah doesn't mean, and this is also something that I'm trying to explain quite often that also to my students, that it doesn't mean that you have to build everything from scratch yourself with production ready code, right? Like with final, the final output isn't definitely this, the stuff that designers will build, but you can, you can still, if if you know a bit of CSS, especially with CSS Grid, I mean, it's so magical in a way, what we can do with CSS Grid compared to what we had to do before, like explain floats to a designer, like floats and clearing floats and and stuff like this.
00:30:11
Speaker
and explain CSS Grid and what it does. And people will definitely want to use CSS Grid. And also kids are getting CSS Grid. So it's not that hard to get in a way, but still, of course, it is code. And so you so one of the the things I guess that needs to happen in a way is that people just yeah lose their their fear maybe also, or their reservations of just dabbling around with code.
00:30:40
Speaker
There's nothing you can, you can break in a way. If you just open a cold pen and play around with it and build some stuff, of course you have to learn and learning. Learning new stuff is always a bit hard in the beginning and it feels like you're stupid again. You have to vulnerable and accept that it it feels challenging at the beginning. But for example, with CSS Grid and also other CSS features, I guess,
00:31:10
Speaker
Once you get your head around it and and and start to to understand how it works and and what you can do with it, it is really valuable also for designers to do this. like And then of course there are design engineers who are are working at the intersection. People um maybe like like you and I who who know their design stuff a bit, but also know how to build it, how to code, how to Yeah, to to translate designs into code. and And then it's a whole different thing because basically then you can go into the browser and do the same stuff more or less that you can do in Figma, but you are just doing it in CSS. Yeah, just launch Fizzbug and double click the text. Yeah. I i liked so much of this. This is a great topic that I don't think we've had on the shows, this intrinsic concept. And I was just reminded of like a media query because so what was going through my brain initially was I want to talk about container queries at some point. But I was thinking about how that early, early responsive design would be. And I've heard Chris Coyier joke about this too, is ah you shrink your browser until the layout sucks.
00:32:18
Speaker
And then you're like, all right, what's the width of the browser? And then you go and you write a media query to handle the layout sucking at that point. And there's nothing wrong with that. But it's reminding me that that's also a very extrinsic way to work. And the more intrinsic way to work is to create a flexbox layer or a grid layout that's looking at the size of the content and and the content.
00:32:38
Speaker
owns its own presentation abilities. It goes, never let me go smaller than this and never let me go bigger than this. And so you tell an image, what size and ratio you want it to be. You tell the paragraphs and the headers, what size and ratio. for them And then you put these things next to each other and then you just tell the grid layout to like do the right thing.
00:32:55
Speaker
And you you figure out how to describe to the grid to do the right thing, which means look at the content, let it tell you what it needs. And so then you start to get into these layouts where you're not writing media queries. You've written components that are self-contained and self-intelligent about how best to represent themselves. And then the grid gets to ask them, and man, I just, ah it's so cool. And then you have container queries, which are sort of like a next level into that. I'm just like, we're such in a cool spot.
00:33:21
Speaker
And I'm sad there that there aren't more people with these tools in their hands because they're so much fun. They're so powerful. Well put because it's super interesting. But also again, it also shows that it is really hard to get right also for design teams there who are who are used to working. in a more extrinsic way. I think it was Jeremy Keith who who mentioned this in one of his last talks that it is always also a lot of control that you are giving up. Like you have to be comfortable with giving up this control, this level of control. And of course a lot of stakeholders and also designers and teams, but also the clients, they also want control.
Design Control vs Adaptability
00:34:05
Speaker
They want to sign off a layout and
00:34:08
Speaker
be sure that ah it will look in the browser like like it looked just at in this PDF they got. yeah and And this is where it's really difficult. If if you, for example, also look at a ah regular website, like a workflow that is more linear.
00:34:29
Speaker
If you are building a website, very often the content production isn't the first thing you are doing. Sometimes if you if you're doing a relaunch, for example, then there is enough content or you have a good idea of what the content will be. But the final content that is being produced, for example, isn't there yet. And so, yeah, this is almost a hard. Yeah, it might might be hard to to then imagine how the content could look like, then try an intrinsic approach to design and and just let things flow into the layout like like magic. um And then also communicate this to a client and how it will look like. They might ask.
00:35:09
Speaker
and I've been there, that you you are building a prototype of something that is quite basic still. And you're talking to them about how this will transform into a final layout in the end. And they're looking like you at you and like, i need i need something to I need something real. I want to see how this website will look like, right? So give me a layout. yeah And so it's it's difficult. It's difficult. i think There is a place definitely for extrinsic layouts for a lot of control, but there is also other world where you can try out this extrinsic approach where you can look at the content you have, especially on your own site, for example. Again, this is a really nice playground where you can play around with different post types and explore how this could work, how designing a site in this way
00:36:05
Speaker
from the ground up, from the various typography settings and so on. One of the things, if you visit my site, it's something I feel is unique. It's a kind of social networking looking site that has some cards on it, but the feed, if you scroll down, you'll notice they're not all the same width.
00:36:22
Speaker
the card width is intrinsic to the content inside of it. So if I haven't written very much or if the image is small, it's a small card. That's not what happens in a social network. Social network gives you everybody's content is this size. And I'm like, I don't like that.
00:36:38
Speaker
I like yeah you know like a paragraph, how the the text flows at the edge and you get rag right or rag left if you're you know reading in a right to left language. And I like rag. I think rag is intrinsic, chaotic, interesting, dynamic. But a lot of other people look at that and be like, nah, justify that paragraph. you know Turn it into a little block.
00:36:59
Speaker
yeah And I'm like, that's cool. And I love that you brought up um control too, because control is something I think about and talk about a lot. like I like chaos, which is the opposite of someone that says, I like control. And so you have people in TypeScript, which you know we complain about. which Because I feel like that's just a bunch of pseudo control that you don't actually ship. Anyway, I i don't want to rant too much about it. But just control is a weird thing that I think doesn't fit well with the grain of the web. The yeah the web, you're ultimately delivering a document that it goes into the most hostile environment in the world, which is this wildly dynamic screen concept with user preferences. And the user can do whatever they want to that thing when they get it. So designers want this control. They say, I want it to look like my PDF. And you're like, that's not possible. I don't know how to tell you PM and designer. That's literally impossible for us to give, unless you want to ship an image. You could ship an image.
00:37:57
Speaker
you know do some hot spots on there and then it looks the same for everybody but then they can't read the content or select the content you know it's like not screen reader compatible and i just wonder like control to me looks like this slippery slope you start to control one or two things and then you and then something escapes out the edges.
00:38:13
Speaker
And then you have to go control that too. And then something else escapes and you're continually trying to keep the control. And what I don't, and this is what I don't like. I'm like, ew, I don't like that. I would rather assume chaos and just create some healthy boundaries. So I'm not trying to control this tightly. I'm just trying to make sure that things don't go above or below certain bounds.
00:38:34
Speaker
And otherwise, this thing is a wild, wild west little little component. And yeah, I think that this is the stronger way to approach design is allowing it to be fluid. like i ah I use this example a lot too, which is like my parents and most people's parents that I see when they're text messaging their kids, the font size is turned up to the maximum on the chat app.
00:38:54
Speaker
And you know what that makes the chat app look like? It makes the chat app look kind of crappy. It doesn't make the design look very good at all. But you know what? That user is so happy that they could do that. And so the designers who made that tool have to give up some control for the sake of their users needing to feel like they can actually use it. And so there's a fight. And I'm almost always on the side of like,
00:39:18
Speaker
this user side, I'm like, no, let users be, let the chaos be. They're not criticizing the design when they get this moment. They're actually rejoicing. You're sad and you need to give it up designer and you need to let it be. So yeah, control is a big issue and PMs also have control. This is why I think progressive enhancement is also not implemented much.
00:39:37
Speaker
is because we want to deliver the same experience for everyone. And so we'll go ship a bunch of JavaScript to get a scroll-driven animation on the site. So that way, no matter what browser you visit from, you get the scroll-driven animation. And I'm like, who cares? Ship and a stable document that can be read. And if scroll-driven animations are there, add them in. They're totally icing on the cake. Like, if you think we have to shove scroll-driven animations down the throats of every user for this site to be well-designed and get respect, I think you're wrong.
00:40:05
Speaker
You're wrong. So I love that you bring up control. I i wish that there was, ah but then again, the tools, the tools that designers are in are full control tools. They don't enable this concept of chaos. They don't give them the ability to change the canvas size.
00:40:21
Speaker
to simulate, translating it to German, to simulate a right to left language, all of the chaos and thrashing that can happen inside of the browser, they don't have a way to empathize with that. And we got to give them, imagine every time we created a new artboard in Figma, it created six artboards just to help you simulate the empathy that you would get with a dark mode, a light mode, a high contrast,
00:40:43
Speaker
Mode a forced colors mode just all the different things that users can do you know zoomed in text so that you're like oh here I'll just do my text I said it's huge um I want I feel like designers are the right people to make these decisions, but it's usually you and I in their prototyping feeling things out and Solving the rest of the problem And I don't know, I want designers with us, dude. I really think that they enjoy it. and Yeah, ah it can be really really fun, a lot of fun. I really enjoy this, like this approach of working and in a way it is also what has made the web so such an success, success right? Like, um yeah, because
00:41:24
Speaker
you You can adjust your font size. You can adjust the colors on a web page if it doesn't fit right. The content doesn't have to look the same on every page, on every yeah on every device also. And this is in the end also what makes it more more usable to many people, that they can override maybe also the bad choices that some of the designers made.
Native UI Elements vs Brand Consistency
00:41:47
Speaker
And then it still works. I'm thinking of the select element right now. yeah just like the Every designer is like, I will make the next best select element. And in my head, I'm like, just let the system provide it. I'm like, you you're not differentiating your project your product here through your select picker. like like Just make it basic. Yeah. but i've I've also had had a client in ah in a recent project also demanding or asking for a nicer way to to display the options in a select. Like he said, well, what did you do there? And we said, yeah, we we used the native UI. it's It's just, it works fine on every operating system. And he said, this doesn't look like our brand. And I mean, yeah, so I think it's it's not only the designers, it's also that we need to
00:42:40
Speaker
bit by bit maybe also educate our clients a bit that this is actually a strength that this might seem it's not that's as consistent and especially in Germany people like consistency like they like control and it's it's very organized over here very often and also it it it gives people a good a sense of security like i I have invested in something that is solid and that works in the end but Actually, what really works on the web is that you play with this uncertainty, with this this Wild West out there, and that you don't know how your users will look at your content. and with
00:43:22
Speaker
which devices they are using or whether or not they can load your web font or override it maybe or whatever. like yeah This is actually a feature, but very often then also developers back down and say, and yeah, okay, i can I can change it if you want to, because you don't want to get into a fight. like it's It's really hard to convince people that this is the right way to build for the web, but I think more and more people are getting I was one of all the designers who who didn't know that much about this several years ago. And I'm now completely convinced. like I think the web is successful because it's weird. you know like With a native app, you get it you get a link.
00:44:06
Speaker
to They're like, hey, join this app thing with me so you can see my post or whatever. And so you have to go download download it from the store. Then you open it and you're like, it's going to guide me through a walkthrough and try to teach me all its features and blah, blah, blah. Things feel normalized in an app environment because a lot of the components are provided or whatever the scenario is. I think there's just like ah a vibe to like a mobile app and the web. You get a link.
00:44:26
Speaker
And you're like, I don't know what could be at the end of this. This link could take me somewhere really weird where the background is red and all the text is yellow, you know, like a ketchup and mustard layout or, or whatever it is. And I think that that is just so exciting. There is an element of like learning every time you open up a site, you tend to have to relearn where's their navigation.
00:44:49
Speaker
Where's the button that does X? And oh, their dropdown looks a little bit different. How's this dropdown work? The weirdness is its superpower. And if we get rid of that, it would change the web forever. So stay weird, web. I really think it's a superpower. I also see this in the on on the personal sites that that come up or that I see when i'm I'm researching for my newsletter a bit and stuff. There's so much interesting stuff. There are so many sites that are just wonderfully weird in a way.
00:45:18
Speaker
And it, yeah of course, there is something to be said for putting a navigation where many of your users will expect it and and also there. yeah Yeah, right. So you are definitely making it harder for people if you're putting your search, I don't know, at the very bottom of your site and not at the top or something like this. ah So there are certain interaction patterns that are learned, but at the same time, if every site looks the same.
00:45:46
Speaker
That's fun. It's like ah we got well it was like we got brutalist design, which was sort of like a stripping of color and and harsh lines and sort of oversized things, just very dynamic in its way that it's sort of expressing a punk rock simplicity. And I'm like, I wonder.
00:46:04
Speaker
If you could do the same thing with UX, so brutalist movement was a very UI focused thing. but So yeah, what if we did intentionally never put anything where anyone expects it? So you visit the site and you're like, where's the nav? You're like, it's somewhere new. You've you've never seen a nav where this one is. And that'd be kind of fun. You're just like, yeah, and just somewhere else. and and yeah And you add some ornamentation, right?
00:46:29
Speaker
like ornaments somewhere or something really weird and textures and stuff. Yeah. Maybe maybe there's there is a bit of a counter movement now happening that now that people are realizing that maybe this Bauhaus approach of of streamlining everything and and making everything ah nice and tidy and precise and so on is a way to control things to a certain degree, but it's also making things a little bit boring.
00:46:56
Speaker
very often. So yeah you can also see this like architecture, like like those buildings with a lot of ornaments. like yeah They have come out of fashion, but they are still the buildings that when you're walking around in a city that people are looking at. And of course it's decoration in a way, but it also adds to the whole experience and the mood of experiencing a building, for example, or if you walk into it and especially in in the US, there are many examples of of great architects who who used ornamentation or decoration, not only in a decorative
Web Design and Architecture
00:47:34
Speaker
way, but also use it in a way to to really create a special style, something that it is really interesting and then joyful. Yeah, I'm glad you went to the architecture thing. Sometimes I'll watch shows on building fantastic homes and just like these
00:47:51
Speaker
really incredible things. And the whole time I'm watching them, I'm like, this is just like web design. ah And then as you were talking too, right when you brought up architecture, I was going to bring up art movements and how there was like a modernist and postmodernist workflows where the modernists were like drastically simplifying, but enlarging And then the postmodernists were putting toilet bowls down and being like art, you know, and I just loved how it was like one, as soon as one thing became too popular, the counter movement was so strong. I was like, yeah, it's just starting. I think we could definitely see that. I need to make my website weirder too. Like I should put that on my to-do list. My website is familiar feeling and it's, I don't know, it could be weirder. I should add some weirdness. Yeah.
00:48:34
Speaker
Yeah, same same with me. I'm also exploring more weird layout options in my new design. Definitely also with the typography, like I picked a typeface that is, it's called Nantresor. It's from, yeah, ah from Christophe Köberlin, who is a designer from Berlin and he's, yeah.
00:48:57
Speaker
has designed a lot of really nice typefaces, also great typefaces with met more famous designers like Eric Spiegelman and so on. And it's yeah it's it's a weird and and and typeface, that just not the usual stuff. like It has really weird swooshes and and variations in in the the type, um the letter forms. And this could be something that you just use a different typeface and not, for example, Inter or Roboto or whatever it is. one know from the I always go system font. I'm just like, I don't know. i so i' like the lisa so but And then I know when someone's visiting my site from Linux, because they'll take a picture and I'll be like,
00:49:40
Speaker
I see the Ubuntu font. you know it's like I know i know what what operating system they're using just because the font will render that way. I need to do more playing with typefaces on my site too, just in general. Although OpenProps recently got, we've seen the, ah what's the tool called? I think it's called System Fonts, but somebody went through and found like humanist and geometric humanist and traditional fonts and serifed geometrics. And like they kind of like have these 10 categories that are really great categories of fonts. so And then they found all the system fonts that people have already installed that match the vibe. And then they create a little string and they have, like and I was like, this is so cool. Cause you can, you can,
00:50:20
Speaker
It'd be very expressive with your font choice and not download anything. And it's still, again, that's there's a chaos. Okay, this is the the thing. I'm into this because I'm not into control. I like the chaos. I like the concept of me going, I don't know, my headline needs to have a pretty positive rounded corner geometric vibe. And it's like, cool, there's a font category for that. I'm like, I'll just pick the category and let that user get whatever they got.
00:50:44
Speaker
And i'm I'm happy with that. And other people are like, no, everyone will get this one font. I like both. Both approaches are cool. I just like that someone made that tool and we folded it into open props now. So you can just import a pack. That's got all these different, you just say, you know, I want the font style of this and it will pick one from the system fonts. It's kind of neat. Do you have any container queries on your site?
00:51:05
Speaker
Not yet, not yet. My site is currently, my site is too old for this, but oh yeah, it's, it's part of the redesign as well. Yeah. I'm still, I'm still trying to, to find a way like, uh, to use them in a way that works well. Also, yeah, for older browsers, like you need to provide some sort of fallback maybe. And this is the same with subgrid, like, um,
00:51:29
Speaker
it It works well as and as a progressive enhancement sometimes. But then sometimes there are also ah situations where you think, eh, it would be nice. It really still would be nice to to have this also in browsers that aren't the newest ones. But basically, on your own side, it's OK, I guess. fallbacks are hard. I definitely understand why progressive enhancement or graceful degradation or just like a a lot of folks don't want to manage two or three versions of a component. They want just one. And so makes sense. Everybody's moving fast.
Progressive Enhancement Challenges
00:52:02
Speaker
you know and everybody wants to deliver stuff yesterday, and so there' they're not gonna use subgrid because they don't wanna manage the non-subgrid and the subgrid version. They're like, that's two, that's two components I have to write tests for or whatever, and it gets frustrating.
00:52:19
Speaker
But it's such a cool superpower. So I don't know. I don't know. yeah anything Okay. As like a weird final thing, I'm curious if you feel this way in Germany, but um I'm noticing a ah drop in product quality and that's on the web as well as in the the physical things in my home, even the homes being built.
00:52:41
Speaker
around Seattle right now. There's just mistakes all over them. um so people are so are rushing so Things are so expensive. People want to get things done quick. and so we're I'm seeing an intense an intense drop in quality across all sorts of things. Do you see that at all?
00:52:56
Speaker
or How do you feel about that um assertion? I think yes to a certain degree, yeah especially when it comes to the web. When you look at all the the sites that are just being churned out really quickly and you have to build something within a few weeks, it's also at the same time getting ever more complex, right? And so I guess people are using shortcuts and trying to build stuff just so that you get the sign off and then it's online and you're done, stuff like this. But at the same time, I think there's still always, there's always also good quality out there. I mean, I don't know if it's generally, if you can say that generally the quality has degraded or if it is maybe just
00:53:46
Speaker
much more stuff out there also that you, yeah, just the surface area is so much larger. And of course, when when the surface area is getting bigger and bigger and the web is getting larger and bigger and and faster every day, then of course there is more bad work out there.
Crafted vs Installed Work Quality
00:54:03
Speaker
But at the same time, I think if you take care, you can build really high quality products and websites still.
00:54:11
Speaker
And I also see this at times. I see it too. Yeah, there's certainly still crafters in this world. There's there's web crafters. and um I think we talked about this on one of the episodes one time, but in installers versus crafters, I needed a fence made in my backyard and I realized there's two different types of people I could hire. Someone that would install a fence.
00:54:31
Speaker
and someone who would build me a fence. And it was different. The the the quality of the output was going to be different. Even the materials that they chose, dude, were different. The crafter would pick wood. The installer wanted to sell me on something not wood. It would last longer in quotation marks.
00:54:49
Speaker
Cause it wasn't wood. It was some sort of plastic composite thing. But I was just like, this is just like the web. We have installers, people that just go grab stuff, put it together and ship it. And then you have crafters, people that are like, no, I'm going to do this myself and, and build this up from the materials that I'm given on the web. I don't know. I think we need both in this world. There's certainly times you want someone to just install something. And then there's other times you want something to craft something. So they need to coexist, but maybe I'm just feeling like installers are starting to run the majority of things. and But this is also in the housing. So going back to architecture, installing and just building some template house, there's way more of those, or buildings, just template looking corporate buildings. There's way more of those than the
00:55:34
Speaker
Well done, and hand architected, ideated, crafted building. And maybe it's kind of nice. Maybe I need to sit back and be like, I like installers because they make the crafted homes and crafted experiences so much more rich and unique. And if everyone was a crafter, then it wouldn't be very cool. So I don't know. Maybe I just backtrack to my, I know that we need both, but.
00:55:54
Speaker
Yeah, maybe, maybe. Yeah. Yeah. We moved into a new home two years ago, about two years ago. And and I also noticed this then also when when you had the different yeah people in the house building stuff and and also.
00:56:08
Speaker
bricklayers, whatever whoever it is. like ah You see this difference between those people who just want to get that job done very quickly, also because maybe they are not being paid that much. right and And also the the margins are very low in this industry, I guess, at the moment. so And also it was was just right. We went right into COVID with building the house. ah So there was a lot of pressure on the companies.
00:56:36
Speaker
And so you need to get stuff done quickly. And then, of course, you hire people who would just do it in the more most quickest and and standard way in a way. And so whenever you you ask them to be a little bit i don't know more more careful with certain things. or then then it always It just adds up to the to the time they have. yeah They don't have the time to do this. They don't have the time to to really put in the the the attention to detail that would be needed to make it really and careful, beautiful, whatever it is. And so maybe this is also the ah difference there that a lot of people are
00:57:21
Speaker
If they are just putting stuff out in the fastest possible way, then of course the quality goes down. But as you said, maybe it's also a good thing because maybe there is a lot of bad quality or not, not not only bad quality, but yeah, not of highest quality stuff out there. But it also means that we can enjoy the high quality stuff even more because when we see it, then we can and enjoy a nice website because.
Balancing Quality and Quantity in Design
00:57:49
Speaker
it's not always the case that you come to a site and then think, oh, those animations are nice. If all sites had nice animations, then We would need to to top even that, right? This is reminding me of just like life. It can't all be sunshine and butterflies, or else we wouldn't know it was sunshine and butterflies. Got to have some rain, got to have some downs. Otherwise, you don't feel up. It's just the nature. I guess this is yin yang, or whatever. This is the is the dichotomy of life that there's oppositions, and that's what brings the spice in the fun. Oh man, this has been so fun. I feel like I could bring up so many topics. like I just wanted to be like, would it be cool if you could prototype an architecture? like What would that even be like? to I don't know. It'd be cool though, but it's like a superpower we have. like I really think prototypes speak a thousand words. They answer all the questions that people don't know how to say. They have to feel it before they know the question to ask and where they're making prototypes to answer those things. One of the last questions I want to ask you is if people are going to work in a design tool, and
00:58:51
Speaker
Do you have a preferred design tool that maybe facilitates something closer to the grain of the web or just, I don't know, how do you, where are you at in design tool land right now? and yeah Who's getting your attention? That's different difficult in a way. I guess definitely everyone is is moving to Figma right now. I i and used to run workshops for Adobe for about five years until 2023. I saw a lot of teams who worked with Adobe XD.
00:59:20
Speaker
um but I like Texty. I think yeah it it was really nice, and in especially in the prototyping area, because the prototypes felt really snappy and and ah native and and fast. And this is something that I guess Figma is, it it works, it's fine, but you always have to wait a bit for a pure prototype. Reloading the prototype sometimes doesn't work that well. And stuff like this, and definitely everyone is moving to Figma at the moment, which has has definitely nice features, like especially the typography sections and things like this. Also, you have auto layout, which allows you to do quite sophisticated things, definitely, but it's not the grain of the web. right It's not the same. It's something different. It allows designers to work efficiently and and fast to produce static mockups and layouts fast, but it's not allowing you to to explore and prototype and and work with
01:00:15
Speaker
the real material. I looked at Webflow, for example. um yeah But I haven't used it in a project. yeah i think I think it's interesting that they are trying to to match things like CSS Grid more or less one one by one. like you If you know how Grid works, then you can definitely build something in Webflow more easily. Or maybe it's also the something like a Yeah, an entry can be an entry for a designer to to get their head around how CSS Grid works, because in Webflow, they can adjust it basically with the same properties, like in CSS Grid. And so when when i when I started coding a bit more as a student, my entry drug, so to say, was Flash. And Flash. So it's near and dear in my heart, too. Yeah.
01:01:10
Speaker
yeah So back then, it was the only way to do to do real amazing stuff. right So no the web was still more or less table layouts. And and so yeah, I had to get my head around Flash. But the nice thing about Flash back then was that you could start in the GUI and the the graphical user interface completely and and just use the timeline and go to and stop and use the timeline to animate things.
01:01:39
Speaker
But then there was this moment where suddenly you came to a point where you couldn't do the things you wanted anymore. Like, um how can it how can I push this even further? Oh, no, I am um might need action script for this. And suddenly you started to playing around with xs action script and you bought a book back then, of course. And it was a good, and a nice way to get into those things and to understand those concepts.
01:02:07
Speaker
and then dig deeper into coding and then get better at it bit by bit. And maybe a tool like Webflow could be a good entry ah point for designers who want to learn CSS a bit more. But at the moment, I'm also, when I'm working with agencies, using Figma a lot at the same time, building prototypes a lot, but there's still a gap. And the gap only widens, huh?
01:02:34
Speaker
I remember you you said something like you you always wanted to build a tool like this, like Webflow in a way, but also in the browser and something that bridges this gap would be nice. Love to build that tool. and i i think and i've got I've got multiple documents and I've written down the ideas, kind of like how we made the Gradient tool and how we've made Visbug. I've made a lot of tools that like facilitate a very design-centric thing that the that code is the output and but it just the endeavor seems so big the designers are also very hard to convince and so it had to be something that was i think what it would what it should do out of the box not a lot but it should do it amazing kind of like how sketch entered the scene sketch stole a bunch of hearts even though it couldn't do as much as illustrator or photoshop at the time but what it did do it did it in such a more simple way that it really attracted a bunch of folks and then they grew and they grew and it kind of inspired figma or whatever but I would love to build this. I'd like to build something where there's empathy built in multiple frames off the bat, something that you don't choose the artboard size. The artboard size is fit to the content or is some sort of way that makes it really easy to transition from extrinsic to intrinsic. So that maybe we can start working in a very traditional sense and then pivot over something container query centric out of the box.
01:03:49
Speaker
ah modern color pickers, of course, great layout tools, just giving people the straight up tooling, but giving them a very familiar looking side panel. Yes, I would love to do this. um Again, because I just want designers, I know that they're they're the right one. They think about the users. This is the thing, a lot of developers don't think about the users until they're told to. That's because that's not what gets them a raise and it's not what makes them look cool to their friends, but it's what ultimately brings the most value to the universe. And so the people that are thinking about that the most are designers. And so I'm like, they need these tools. They're the ones that need to experience these things, make the decisions, and then hand those decisions off to the people who want to make and manage systems, inheriting choices made by the people who want to represent users. That's also what what I experience when i'm when I'm talking to designers. And I, for example, show them a few prototypes or um just show them what would be possible with CSS. And very often they are like,
01:04:42
Speaker
Oh, that's really nice, actually, that could solve some of the problems we are facing regularly. It's not that they don't want to, the designers, but they are just using their static design tools. And very often they are also surprised by the outcome. And then they if if they, for example, if a fund um yeah or the the margins and paddings of a layout, for example, turn out to be bad, or ah the layout just breaks at a certain viewport.
01:05:11
Speaker
If you show them a way how they could have avoided it, then they would do it, I guess. So if if they had a tool that allowed them to explore this and play around with different variations, different viewport widths, and and see how the content flows into different layouts and how a layout can look if you base it on the content first, then they maybe would have fun exploring it. i mean We have fun exploring such stuff. so We definitely do. Yeah. Definitely. Other people will have fun doing this as well. But of course, there's always this this hurdle for many people that they need to learn coding or lead to learn CSS first. And it's definitely worth worth it, learning CSS. But it's also still a steep curve for people so today. Steep curve. Yeah. I think it's the hardest the hardest language to master, the easiest one to get started with, the hardest one to master.
01:06:07
Speaker
And that's why I think it continues to give and it continues to excite people like you and me. So, dude, what a fun conversation. I feel like we could have gone on for like another hour and maybe we will one day when I see you again. Thanks so much for coming on the show. Everyone, Mattias Ott, go find his website, follow that RSS feed, you know, forget social networks, go straight to the source. We'll see you on the next Bad at CSS podcast, everyone. Thanks so much. this and at cs orange par