→ 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 services
→ Workshops & Training Over 400 designers and developers from all over the world have joined me for a live workshop – in-person or online. More about my workshops
Posted October 22, 2023 by Matthias Ott in Notes My New Newsletter: Own Your Web I just sent out the first issue of my new newsletter Own Your Web. Own Your Web is a newsletter for anyone who wants to design, build, create, and publish on the Web. Every other week, I’ll send out an email full of actionable insights, best practices, hacks, links, books, tools, and other high-quality insights I found or explored. Whether you want to get started with your own personal website or level up as a designer, developer, or independent creator working with the ever-changing material of the Web, this little email is for you. Having a personal website in 2023 is... #newsletters #ownyourweb 6 Webmentions
Posted September 11, 2023 by Matthias Ott in Notes My Favorite Mac Apps in 2023 After three years, I finally replaced my old Intel MacBook Pro – and its cracked screen – with a new machine. I’m still holding back a bit with my excitement for this 16-inch M1 Max MacBook Pro, just because I was really disappointed with my previous Mac. But thus far, it has been amazing. While I’m writing this, I’m sitting in bed, with the computer on my lap, and everything is running so smoothly and blazingly fast. This is as close as it gets to working at the speed of thought – and all this without any fan noise. Whenever I... #mac #macOS #apps #tools 49 Webmentions
Posted September 7, 2023 by Matthias Ott in Notes WOFF Has Left the Building In a recent project, the web fonts I bought and downloaded were only available as WOFF2 files. Staring in disbelief at the unpacked folder full of WOFF2 files, I wondered: Why did they not include WOFF files as well? Isn’t WOFF still needed? Or is it finally time to ditch WOFF? At least building for the Web includes regularly reevaluating how you do things. So, I asked the people of Mastodon. The unanimous answer: It’s WOFF2 or nothin’! I still vividly remember how a post by Zach at the end of 2016 made me abandon the “bulletproof” @font-face syntax that also... #web #design #development #design engineering #web fonts #formats #css #font-face 134 Webmentions
Posted August 31, 2023 by Matthias Ott in Notes Pointing Fingers Don’t use your finger!” Regardless of which country and school system you grew up in, chances are you have heard this sentence at least once from one of your teachers. I, for one, remember my elementary school teacher rebuking pupils who were pointing at the lines of words in their books. And thirty years later, as my son just confirmed to me, this hasn’t changed a bit. At a certain age, students are told to not read with their fingers anymore. The idea behind this is that fluent readers don’t have to rely on their fingers anymore and that pointing will... #reading #education #speed reading #books 44 Webmentions
Posted August 30, 2023 by Matthias Ott in Links 🔗 Dark Mode: How Users Think About It and Issues to Avoid An in-depth look at dark mode. Summary: it is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues. #ui #design #a11y #accessibility #ux #dark mode
Posted August 18, 2023 by Matthias Ott in Links 🔗 Green Web Directory For every country, the Green Web Directory lists the hosting providers that provided evidence of their green services. #climate #climate change #web #hosting #energy transformation #renewables #climate action
Posted August 18, 2023 by Matthias Ott in Links 🔗 Gravity Gravity is a platform for carbon management, purpose-built for companies with complex value chains. It lets you calculate the carbon footprint of your organization and helps you identify areas to reduce emissions effectively.“Gravity's platform quickly ingests, calculates, and distributes key emissions data about our businesses.” #tools #platform #climate #climate change #economy #data #carbon management
Posted August 18, 2023 by Matthias Ott in Links 🔗 Observable With 200,000+ community examples, Observable is the fastest way to build custom data visualizations, apps, and dashboards to uncover deeper insights. From the creators of D3. #tools #data #dataviz #dashboards #data visualization
Posted August 18, 2023 by Matthias Ott in Links 🔗 Accessibility Developer Guide The «Accessibility Developer Guide» is an initiative of «Access for all», Swiss Foundation for technology adapted to people with disabilities. It is developed and maintained in collaboration with a number of acclaimed web agencies. The vision behind the Accessibility Developer Guide is to bridge the gap between providers of websites and users with special needs. #a11y #accessibility #Web #development #inclusive design #tools
Posted August 9, 2023 by Matthias Ott in Notes Good Riddance, GPTBot Just like Google is constantly indexing the Web, OpenAI is now crawling the open Web to scrape content from websites for free to train their LLM (lucrative language model) “AI” products. But, as I learned from a post by Ethan on Mastodon, you can disallow GPTBot to get its tiny robot hands on your writing by adding those two lines of code to your website’s robots.txt: Good riddance, GPTBot! 👋 #robots #crawlers #websites #AI #content #Web 43 Webmentions
Posted June 18, 2023 by Matthias Ott in Notes The New CSS Alright, let’s write more about CSS! CSS! CSS! Change I’ve been writing CSS since the early 2000s, shortly after we ditched building web layouts with tables and spacer GIFs in favor of hacking our designs together with floats. CSS has since become my favorite programming language and, looking back on how the language has developed in all those years, one thing is certain: CSS is not the same anymore. The CSS we were writing in 2003 was different from the CSS we were writing ten years later in 2013. Fast forward another ten years, and the CSS we are writing today is... #css #CSS Day #tools #process #design #Web #design engineering #development 115 Webmentions
Posted May 16, 2023 by Matthias Ott in Notes Writing, Fragments, and the Memex Method This piece by Cory Doctorow about blogging, which I read a few days ago, is exceptional. Why? I already knew that blogging – and having a personal website in general – is a superpower. I had heard before of Vannevar Bush’s groundbreaking essay “As We May Think” that directly inspired the invention of hypertext by Ted Nelson and Douglas Engelbart, which, in turn, had a huge influence on the WorldWideWeb project. I also knew that a blog lets you document your thoughts and impressions in what can become an archive for your notes and a record of your experiences over time. I knew that... #writing #blogging #personal websites #publishing #process 34 Webmentions
Posted April 30, 2023 by Matthias Ott in Notes Simple Truths About Personal Websites Nobody knows you. You are not entitled to anyone’s attention. Be respectful, be helpful, be kind. Your personal website isn’t a replacement for social media. It’s much more than that. Who is your site for? Document your life. Your perspective matters. Capture your thoughts. Share what makes you lean forward. Use RSS. You never know what sticks. Make it easy to publish. Enjoy the process. The adverb is not your friend. Typography is everything. You will surprise yourself. You will grow. Be curious. Be intentional. This is your playground. Play. Your canvas is limitless. Sell the world. Hit publish. It’s yours. #personal websites #websites 57 Webmentions
Posted April 20, 2023 by Matthias Ott in Notes CSS Custom Properties Beyond the :root Manuel asked: Is there a good reason why we're defining global custom properties on :root/html and not on body?” It’s a great question: Everybody just seems to define most of their global custom properties (aka CSS variables) on the :root selector without giving it a second thought – and so am I. But why :root? The answer is that there is no real reason. It’s just a convention. Defining custom properties on the :root selector might make them look a bit more like global variables, because :root is the equivalent of the root element of your document. In HTML, this... #css #custom properties 28 Webmentions
Posted April 18, 2023 by Matthias Ott in Notes Starting A New Kirby Project Today, I started a new project with Kirby CMS. (No, it’s not my personal site. That one’s still brewing…) Kirby is a lightweight, no-fuzz content management system (CMS) created by Bastian Allgeier, which works well for projects of any size. It is easy to install and amazing to work with in development, also because it adapts to the structure and size of your project and you can flexibly configure the interface of the backend, the Kirby Panel, accordingly. Kirby is a so-called flat file CMS, which means that in order to create the structure of your website (“app”) with all its... #Kirby #tools #content #CMSs #websites #development 15 Webmentions
Posted April 11, 2023 by Matthias Ott in Notes A README Template – With an Automatically Generated Table of Contents A while ago, I wrote about what you could include in a README file for a project. Based on this post and a few practical examples of READMEs, I created and published a template that I will use in my own projects going forward. It is available on GitHub: https://github.com/matthiasott/README-template The template might certainly change a bit over time. But as it is now, I think it includes the most important sections I might need in most projects. Because not every project is created equal, the idea is to just use what you need and delete the rest of the template.... #README #projects #code #tools 7 Webmentions
Posted April 7, 2023 by Matthias Ott in Notes How I (Usually) Write Blog Posts Manuel shared how he approaches writing and publishing blog posts on his personal site. If you follow him, and especially if his RSS feed is on your list of feeds, you know that Manuel indeed does put out a lot of posts. Just recently, he completed 100 posts about more or less modern CSS, so his process certainly works for him. Keeping The Friction Low What works for some people might not work for others. So if you struggle to put out blog posts, Manuel’s approach might work well for you or also not work at all. But there are a few... #writing #blogging #process #drafts #editing 17 Webmentions
Posted March 23, 2023 by Matthias Ott in Notes How To README Solid documentation of a project is important, especially if you’re working in a team. When all information about how to install, deploy, or contribute to a project is buried in only one person’s brain, you’re in trouble once you have to make changes and that person is on vacation or has even left the team. So, a README file at the root of your project is not only your friend, it’s essential. What’s in a README? But what information should you put into the README of, let’s say, a website project? I’ve seen (and written) quite a few short and incomplete READMEs,... #code #documentation #projects #README 80 Webmentions
Posted March 12, 2023 by Matthias Ott in Notes Synthe Size Me Leonie Watson just shared an interesting audio snippet on Mastodon: https://front-end.social/@tink/110007014963441869 What sounds like her speaking about accessibility is actually not Leonie, but an AI-generated synthetic voice, a cloned version of Leonie’s voice based on audio training data. I was aware of the fact that speech synthesis is getting much better and that machine learning plays a big role in synthetic voices sounding more realistic, for example by adding modulation, variation, and emotion. But when you listen to some of the samples of the voices on play.ht, it is astonishing to see just how accurate and realistic those voices, and especially cloned voices,... #AI #speech synthesis #voice #machine learning #voice cloning 7 Webmentions
Posted February 20, 2023 by Matthias Ott in Notes Dig Deeper After about a year of living in our new home, after waiting for our neighbors to finish their driveway (life lesson: don’t expect gratitude from strangers), after our wholehearted horticulturist recovered from an acute illness, and after thaw had set in in the southwestern part of Germany, the circumstances finally were ideal for the ground work on our garden to begin. My humble role in it: digging a whole between the sidewalk and our front door for the bushes. Not necessarily those typically German bushes that grow into a beautiful, thick hedge, but still large enough to keep the kids... #digging #TimeToFreshBlogpost 2 Webmentions
