Web Design Engineering
I design and build modern and resilient websites and products for the Web. Let me help you build yours.
More about my servicesLatest Posts
Posted by Matthias Ott in Notes
To Affinity and Beyond
If there is one thing that I’ve learned in my roughly 30 years of working with design tools, it is that they come and go and that you should always stay curious and be open and ready to learn something new. As a teenager, I made my first clip-arty design attempts in CorelDRAW. Right after finishing high school, I dabbled in QuarkXPress during an internship at BBDO. As a student, I fell in love with FreeHand, and for my diploma project, I built everything in Flash. Years later, I was running workshops for and with Adobe XD. All those products...
Posted by Matthias Ott in Notes
The Mystery of Storytelling
Humans love stories. Maybe that is because for thousands of years, stories were the way information was preserved and passed on to others, to the next generations. Maybe because they create community and collective culture. Maybe because they capture our imagination and speak to our fears and our dreams. Maybe that’s why you will find a lot of stories in the writing on this site. My reply to Jeremy a few days ago – opens with a story. My post about Frank Miller challenging others and himself – opens with a story. My note about Brian Eno and his playful approach...
Posted by Matthias Ott in Notes
Amateurs!
I have to confess that I am not reading that many books these days. Most of the time, I resort to listening to them in audio form. But every once in a while, a book comes along that is just too interesting not to at least give it a try. Reading Kai Brach’s excellent newsletter Dense Discovery, I came across such a (new) book by Joanna Walsh: Amateurs!: How We Built Internet Culture and Why it Matters. That title sounds intriguing, right? The description even more so: “Since the nineties, platforms have invited users to create in return for connection. From blogs to...
Posted by Matthias Ott in Notes
Echoes of Connection
In 1977, NASA launched two spaceships carrying two golden records into the void of interstellar space. The Voyager Golden Records contained instructions for playing its contents, finding Earth in the cosmos (oh my …), as well as images, a variety of natural sounds, musical selections from different cultures and eras, and spoken greetings in 55 languages. We didn’t know if anyone would ever hear it. And we’ll probably never hear an echo back from outer space. But we sent it anyway, because the act of reaching out mattered, even into silence. “The spacecraft will be encountered and the record played...
Posted by Matthias Ott in Notes
Linear() Is Not (That) Linear
My gut feeling tells me that not that many people have yet heard of or used the linear() easing function, one of the most exciting newer additions to CSS. Looking at the stats in the State of CSS survey, this is somewhat confirmed: only about 30 percent of respondents have used it and another 30 percent have never even heard of it. But what’s also interesting is the ratio of people who report to have heard of it but obviously never tried it then: 38 %. So either, a lot of people don’t have a use case for this feature,...
Posted by Matthias Ott in Notes
View Transitions: The Smooth Parts
Now that cross-document view transitions are gradually making their way into modern browsers, now seems like the perfect time to explore them, if you haven’t already. They are, in fact, surprisingly straightforward to implement. And just like we’ve seen with modern images, view transitions can be slapped onto existing projects as a progressive enhancement. That my website is now called a “multi-page app” (MPA) is still a hilarious thought 😂, but hey – I’ll take it if I get a smoother experience with basically just one line of CSS: You add this @view-transition declaration to all pages of your site...
Posted by Matthias Ott in Notes
Adding AVIF and WebP Support to My Craft CMS Site
Five years ago, I wrote about AVIF: A New Image Format (back then). Since then, I’ve implemented WebP and AVIF support on numerous client sites for considerable performance improvements – but my own site was still serving JPEG, PNG, and GIF images only. So it was time to fix that. Here’s how I added modern image format support to my Craft CMS site. Modern Image Formats Rock 🚀 But first, a little reminder, why using only JPEGs in 2025 means missing out on a lot of what the modern web offers in terms of performance: WebP offers 25-34% smaller file sizes than JPEG...
Posted by Matthias Ott in Notes
Challenge
It’s the early nineties. Legendary comic book artist Frank Miller had just broken away from the major publishers, after creating titles like Daredevil: Born Again, Ronin, and The Dark Knight Returns. He was now working with the then-young Dark Horse Comics, when he decided to take his baby there – a comic he had planned to do for years: a crime story in black and white. Sin City. So, Frank got to work. After creating a first round of drawings, he showed them to Dick Giordano, a comic book artist and editor at DC Comics. Giordano studied the pages and said:...
Posted by Matthias Ott in Notes
Acoustic Room Treatment and Building Sound Panels, Part 1: Planning
Whether you are running online workshops, recording audio or video, or making music, it’s worth spending some time on acoustic treatment for your room. Shit in, shit out, as they say… In my case, I wanted to improve the sound of voice recordings and live audio in my little office in the attic, which has a quite small footprint. So, a while ago, I made a real job of it and did my (amateurish) best to make the space sound better. Part of that involved building a few sound panels myself. This is a write-up about which considerations went into...
Posted by Matthias Ott in Notes
Play On
In the late 1960s, a young musician was recording the sounds he played on his synthesizer onto his Revox tape recorders, when he suddenly discovered: if you connect the two tape recorders together, so that the playback head is separated by several feet from the record head, you get a very long delay echo. A few years later, the young man used this idea for the legendary title track of his fourth studio album and went on to basically invent the genre of ambient music. He worked and produced records with artists like U2 and David Bowie – whom he...
Posted by Matthias Ott in Notes
Overshoot
I still remember that moment. Do You? For me, that was a moment I never thought I’d see. The leaders of the world, finding common ground – agreeing to limit global warming to 2°C, and aiming for 1.5°C. Everyone, finally, coming together. Acknowledging that to avoid catastrophic damage to the planet and the ecosystems we depend on – and to protect our very livelihood – humanity must act. We all must act. It’s now ten years later, and we’re overshooting. Suddenly, the stories we’ve been telling ourselves about climate change don’t make sense anymore. In that moment, when world leaders raised their...
Posted by Matthias Ott in Notes
The HTML Output Element
One of the most amazing things about working on the Web is that you can have years of experience under your belt and there are still things you don’t know. Often, people associate this with a more quickly-moving language like JavaScript, but it equally hold true for HTML. Although, on the first sight, HTML seems like a very “easy” markup language, it can still be incredibly hard to write solid, semantic HTML – even for seasoned developers. But then, there are even moments where you are just surprised because you hear about a little detail you never heard before or...
Posted by Matthias Ott in Notes
Listening Closely
My son, who is the violinist in our family, recently told me an interesting little fact about Augustin Hadelich, one of the greatest violinists alive: it’s hard for him to enjoy other people’s performances. Not because he’s critical or dismissive – to the contrary – but because when he listens, he’s also always playing. He just can’t help it. When he hears someone play a phrase, he always wonders how he would play it. He notices a bow stroke and immediately imagines what he would do differently. When he listens, he’s not just hearing what’s there. He’s hearing what could be...
Posted by Matthias Ott in Notes
Compressed Fluid Typography
When it comes to web typography, I’m a sucker for fluid type. I love that it creates a harmonious rhythm for the typography of a project. I love how it speeds up the responsive design process in the browser. And that it feels like you are working with the grain of the web, not against it. Instead of trying to control every typographic detail, you are defining boundaries that make sure your design works well – regardless of the end device. Fluid type is a textbook example of what Jeremy likes to call declarative design. Fluid type can sometimes also be...
Posted by Matthias Ott in Notes
The Lifeblood of the Web
One Thursday in May, I was sitting in a slightly delayed train, heading home from Düsseldorf after three days of meeting good friends and making new ones at beyond tellerrand, my friend Marc Thiele’s wonderful conference. As usual, after visiting a conference, and beyond tellerrand in particular, my head was bursting with ideas and creative energy. I would feel the same way again a few months later, after visiting Smashing Conference in Freiburg. There’s something magical about walking into a conference venue in the morning. The hum of first conversations, the smell of coffee, the anticipation, and the smiling faces. And...
Posted by Matthias Ott in Notes
What Could Go Wrong?
In 1986 – when I was four years old – three researchers at the University of California, San Diego (UCSD) were working on an idea that would change the world of technology forever: they figured out an efficient way for smart computer systems they called “connectionist models” to learn from their own mistakes. Not by manually correcting each error individually but by using a procedural algorithm that tells every little part of the system how much it contributed to the error. This mechanism, which is now known as backpropagation, is the reason neural networks can learn patterns by adjusting the...
Posted by Matthias Ott in Notes
That’s My Rank
Have you ever wondered why new CSS features and other web technologies very often seem to just work across browsers these days? The reason is probably: Interop. The Interop Project is a collaborative effort between major browser makers — Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla — to improve the Web by making it more consistent and reliable across all browsers. The idea is that instead of each company implementing web standards slightly differently, each year, Interop defines shared goals for the “interoperability” of web standards like HTML and CSS, which are created in organizations such as the W3C...
Posted by Matthias Ott in Links
Yuni Grotesque
Beautiful new release by Philipp Neumeyer and TypeMates. 😍 Next TDC Award incoming … 😉
Posted by Matthias Ott in Notes
Making Space
Gregory Scott, founder of Kush Audio, shared an interesting insight about mixing music the other day: Sometimes, to bring something forward in the mix, instead of turning it up, it can be more effective to actually turn all the other things down. Let’s say you realise that the track you are working on needs more bass. So you pull up the fader for the bass by a few dB. But now you notice that the drums could be more present, so you pull them up a tiny bit as well. Now, the vocal is a bit too silent, so you...
Posted by Matthias Ott in Notes
CSS :is() :where() the Magic Happens
For Blogtober, I dug up a draft about the two CSS pseudo-class functions :is() and :where() that I’d had lying around in my drafts folder for quite some time. Actually, when I originally started writing this post, :is() and :where() had just landed in CSS, and — just like with so many other new CSS features — I was expecting them to “change the way we write CSS.” Both are now widely available baseline features supported by all modern browsers. We often write about CSS features when they are brand new, but it is equally interesting to see how those shiny...