→ 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 16, 2016 by Matthias Ott in Links 🔗 Designing for the Web, by Mark Boulton Modern web design is a discipline that spans a huge range of skills. In his book, Mark Boulton masterfully guides you through things like process and workflow, research, typography, colour, layout, and much more. #web #design #process #basics #books #typography #layout #color
Posted August 26, 2016 by Matthias Ott in Links 🔗 Using WebP Images – a great introduction by @malchata If you want to fight large images and save bandwidth with WebP, a file format created by Google that provides superior lossless and lossy compression, then this article is a really helpful introduction. #image #webp #performance
Posted July 23, 2016 by Matthias Ott in Links 🔗 Fractal – build and document web component libraries & styleguides Fractal by @allmarkedup, frontend dev @clearleft, lets you build and document web component libraries and styleguides, and then integrate them into your projects. It is flexible, data-driven, and can be seamlessly integrated into your site. #styleguides #design #design-systems #components #component libraries #development #pattern libraries
Posted July 15, 2016 by Matthias Ott in Links 🔗 The Web’s Grain – A view on designing for the web One of the best articles on designing for the web, by @frank_chimero. As wonderful as important. Required reading. #web #design #culture #craft #perspective
Posted July 13, 2016 by Matthias Ott in Links 🔗 Making And Maintaining Atomic Design Systems With Pattern Lab 2 By Pattern Lab 2 is an open-source suite of tools to help you and your team create and maintain thoughtful UI design systems. At its core, it’s a static site generator that stitches together patterns and allows you to design with dynamic data. #styleguides #design #design-systems #ui #pattern libraries #tools #static generators
Posted July 12, 2016 by Matthias Ott in Links 🔗 How Will Web Components Change CSS Architecture? With the slow rise of Web Components—the breakdown of interfaces into self-contained chunks of HTML, JavaScript, and CSS—will we see an evolution (or revolution) in how we manage the way we write, build, and bundle the CSS for our web sites? #html #css #web #components #architecture
Posted July 9, 2016 by Matthias Ott in Links 🔗 Accessible SVGs Impressively comprehensive article by @_hmig about creating accessible SVGs in order to ensure a great user experience for everyone. #a11y #ux #code #svg
Posted July 4, 2016 by Matthias Ott in Links 🔗 Astrum – A lightweight pattern library for any web project Astrum is a lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way. #design #pattern libraries #modular #styleguides #branding
Posted July 4, 2016 by Matthias Ott in Links 🔗 A #cheatsheet of the A-Z of #typography jargon, by Fontsmith London foundry Fontsmith has produced an in-depth glossary of typography jargon in infographic format. #typography #reference #terms #language #resource
Posted June 30, 2016 by Matthias Ott in Links 🔗 As We May Think. Vannevar Bush's visionary essay from 1945, anticipating the information society “Dr. Vannevar Bush […] calls for a new relationship between thinking man and the sum of our knowledge.” – The Editor #web #information #science #history #hypertext
Posted May 29, 2016 by Matthias Ott in Links 🔗 Just turned 6: Responsive Web Design, by @beep “Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.” #responsive #design #rwd #web #layout
Posted May 28, 2016 by Matthias Ott in Links 🔗 Semantic CSS Why everybody who talks about the importance of semantics is both right and wrong at the same time. #css #semantics #code
Posted May 26, 2016 by Matthias Ott in Links 🔗 Regressive Web Apps “What does it profit a website to gain app-like features if it loses its soul?” – a must-read by @adactio about how progressive web apps undermine some of the web's greatest features (like URL's) and about some dangerous assumptions been made. #pwa #chrome #apps #web #progressive
Posted May 24, 2016 by Matthias Ott in Links 🔗 The New Web Typography A wonderful piece by @robinrendle about the aesthetics, the quirks, the flexibility, and the fragility of web typography. #web #design #typography #culture
Posted May 24, 2016 by Matthias Ott in Links 🔗 Developing Dependency Awareness Progressive enhancement once more is on a roll: Great(!) article by @AaronGustafson about reducing dependencies #progressive-enhancement #progressive #enhancement #dependencies #js #css #javascript
Posted May 18, 2016 by Matthias Ott in Links 🔗 Design systems and Postel’s law Postel’s law – “Be conservative in what you do, be liberal in what you accept from others” – applied to design systems and their origination process. What a wonderful thought by @markboulton! #design #design-systems #postels-law #process #leadership
Posted May 16, 2016 by Matthias Ott in Links 🔗 Creating A Living Style Guide: A Case Study One of the most elaborate case studies on living style guides I've read so far. By @StevenKLambert #design #styleguides #development #process #design-systems
Posted May 16, 2016 by Matthias Ott in Articles Beyond Tellerrand 2016 Last weekend, I travelled to Düsseldorf and attended the IndieWebCamp and also beyond tellerrand, a conference about design, development, and all things web. I’ll say it plain: If you never have been at a conference, you should go. If you never have been at beyond tellerrand, you should definitely go as soon as possible. Here's why. #conferences #inspiration #community #btconf 25 Webmentions
Posted May 11, 2016 by Matthias Ott in Links 🔗 Responsive Images: Use Cases and Documented Code Snippets to Get You Started Nicely sums up of different ways to use responsive images. #html #media #media- #image #picture #rwd
Posted May 6, 2016 by Matthias Ott in Articles The Art of the Restart Websites aren't rockets. So why do we still far too often approach web projects like rocket launches? It's time to start planning for continuous change. #strategy #process #change 10 Webmentions
