Without drawing you can’t really see, says Milton Glaser, in these two fantastic short films about drawing and design. He says many more things that are very much worth a few minutes of your time. And maybe a few extra minutes — or hours — to think.
We all know what HTML elements look like and what they do, but what do HTML elements sound like? Here’s a page with sound clips from JAWS, NVDA, and Window Eyes — for now. It hasn’t been updated in a while, but even in its current form it’s a very valuable resource.
Van de week had ik een mooie discussie met een collega van mij over de navigatie van een website. We hadden het er over of we studenten die een hamburgermenu gebruiken moesten laten slagen voor een toets. Mijn collega vindt van niet. De navigatie, zo zegt hij, is essentieel voor de gebruikers en voor de eigenaar van de site. Dat is dus niet iets wat je mag verbergen. Sterker nog, je moet er voor zorgen dat de navigatie altijd goed zichtbaar is, op elk scherm direct toegankelijk. Óók op een klein scherm. Natuurlijk heeft mijn collega hier groot gelijk in. En tóch ben ik het ook met hem oneens.
I don’t primarily use Twitter to follow celebrities, to promote myself, to look for deals, discounts, and promotions that are of interest to me, or to learn more about Twitter. I use it to follow a list of people I find interesting. I like to read what they’re up to. And I like to click on the links they post.
I’m always amazed by the incredible amount of possibilities that SVG offers. So many things that I coulnd’t imagine I’d ever need are in there. But once I know they exist, I can make better stuff. Take for instance the preserveAspectRatio attribute. I only knew its none value, but it’s much more powerful than that. In this post Joni Trythall touches the surface of what’s possible with preserveAspectRatio. When you’re done reading his blog post you probably want to go ahead and read his Pocket Guide to Writing SVG as well.
Last week I showed my class a diagram that shows the difference between mixing colours with light, and mixing colours with paint. If you mix light, you work with red, blue and green, and when you mix them all together you get white. And of course, the absence of colour is black. Paint works differently. Here the primary colours are red, blue and yellow. And if you mix them, theoretically, you get black. And the absence of pigment results in white paint. This made me wonder, if Piet Mondriaan worked with light instead of with paint, what would his works look like?
I copied this service worker script and added it to my site. This means that when you’re offline you can still visit the pages you visited before — if you use a browser that supports Service Workers. I was really excited when I first tested it. It works! And five clicks later it felt completely normal. It occurred to me that yes sure, this is fantastic, but it shouldn’t be: this should be how the browser cache works. So I’m happy it can be done, but I’m not happy at all that I need to add a script to my site to do it.
Yesterday Peter van Grieken asked on Twitter if anybody knew a tool that displays all the different characters that are used on a page. This would be a handy tool for font subsetting: if your page only uses a few characters you don’t need to add all those other characters in your fancy font-files. Quite a few people answered to Peter’s tweet, but as far as I can tell nobody linked to a tool that does this. So I decided to create this tool.
Sybren Wartna has a better name for content blockers. He calls them enhancement blockers. And according to him, they shouldn’t change the way we design things for the web too much. Progressive enhancement was always a good idea. And he argues beautifully that the we should use it not just to design the happy flow. We should use progressive enhancement out of love.
Ik schrijf nu al een jaar of drie elke maand een column voor Webdesigner Magazine. De reden dat ik dat doe is omdat ik het belangrijk vind dat ik de kennis die ik bezit moet delen met jullie. Met mensen met meer talent dan ik. Met mensen met toffe klanten die gebaat zijn bij mijn kennis. Ik kom uit een familie van onderwijzers, dus deze manier van denken is vanzelfsprekend voor me. Kennis wordt pas écht interessant als je hem deelt. Als andere mensen er mee aan de slag gaan dan komen ze namelijk op ideeën en inzichten die jij nooit had kunnen verzinnen. Zo werkt vooruitgang. Voortborduren op andermans kennis.
The ever brilliant Maciej Cegłowski created another gem. He copied the Google AMP promotion page and made it fast, as it should be. Not by using AMP, like Google suggests when your website is slow, but by simply fixing the problem. He removed all unnecessary cruft, loaded the page directly (instead of slowly, slowly fading it in), added an extra quote from a contributor, and updated the copy here and there.
I wrote this set of functions that translate the HSL colour notation to human readable text. To be honest, I wondered if this idea makes any sense to, for instance, blind people. I thought it might, but I wasn’t sure. A while ago I met Léonie Watson at a conference and she confirmed that yes, this is useful to people like her who lost their sight. She still remembers colours. She wrote this heart breaking account of how she lost sight. You should read it. And then you should optimise all your sites so they work for everybody. Because that’s the thing that makes the web as incredible as it is: we can make stuff that everybody can use.
A good explanation by Tiffany B. Brown about how CSS stacking contexts work, and what triggers them. She also links to this article about the same topic by Philip Walton. Powerful stuff. Your (debugging) life is so much easier when you understand this.
In this clear article about some of the issues with webfonts Prateek Rungta wonders why some designers and developers still have such a hard time with accepting the fact that the web doesn’t look the same under different conditions. You should read it and let the people who don’t understand this read it as well. Like your art directors, your boss, your client.