Let’s reinvent the wheel
Yesterday I gave a talk at the border:none event in Nürnberg. It was a wonderful event. A beautiful mix of personal, reflective, technical, inspiring talks. I talked about clocks, about our design tools, about HTML, about accessibility, about CSS and about the problem I have with our industry. A small warning: I find this to be a bit of a depressing post. I’m glad that the talk itself was received as a highly entertaining talk about the rather sad state of our industry.
I started out by reflecting a bit on the visual design tools we used to use and the ones we use now. I argued that the ridiculous idea of using Photoshop as a design tool back in the day actually helped the web to become a much more expressive medium. And then I argued that the much more webby tool Figma is actually holding us back, since it only contains only a subset of CSS: that subset that we’ve seen before on sites that have already been built. Both Figma and Photoshop are for people who believe the web looks like an image.
Then I explained that these tools don’t help with designing the — often invisible — details that actually matter. There are no settings for choosing the right elements, these tools don’t force you to design hover and focus states, they don’t help you with exploring the possibilities of stuff like focus-within. In other words: they don’t care at all about how the web works, they care about the veneer only.
The UX of HTML
It’s so weird that there’s so little attention for interaction on the web. While the thing that sets the web apart from a word-document is of course the fact that you can interact with it. In our design tools there’s a lack of interest in interaction, but also when we talk about HTML. It’s always about the semantics. I explained to the audience that semantics of HTML don’t matter that much, since semantics are mostly theoretic. It doesn’t matter what an element is, it matters what it does. So I showed the link.
<a href="https://vasilis.nl/">Here’s my website</a>
This is how you make a link on a webpage. More and more people who generate stuff for the web think that they have to make webapps though. In a web app you make a link like this:
<span onclick="document.location.href='https://vasilis.nl/'">
Then I explained that if you want to make this span behave like a real link, you have to add a tabindex, a role, CSS to style it, javascript to give it a :visited state, much, much, much more javascript to give it a context menu that makes sense (which is impossible to do right, because every browser has a different context menu for a link), and then you’ll have to test if this “link” shows up in the list of links in a screen reader. I don’t think it does. There are so many hidden layers of UX in this simple HTML element. And these layers of UX are the details that matter, of you ask me. These details are why everybody should care about HTML.
I went on to show some examples of built in, very powerful UX of forms. Fieldsets and forms that can be :valid that result in a much more friendly way of validating forms. Instead of designing friendly forms, in a way that helps people, we hand over form validation to javascript developers, which often results in user hostile forms. Understand the UX of HTML and you can start designing the web.
Accessibility.
Another thing our design tools really don’t give a shit about is accessibility. And to be honest, I think most of our industry doesn’t really care about accessibility as well. And then I believe that even the people who do care about digital accessibility still don’t really care about it; a controversial stance, I know.
I illustrated this idea by talking about the new building of our university. The architect was very, very proud about the fact that it was completely certified as an accessible building. So he proudly agreed to make a short film with two people in wheelchairs, to see how well designed this building is. To the shock of the architect it turned out that in many ways the building was only accessible in theory. In practice it turned out to be very hard to use. For instance: to enter the building you need to climb some stairs. There is a, very, very, very, very, very, very, very slow lift that takes five minutes to get one person in a wheelchair up a few steps. Now imagine of we had ten students in a wheelchair who have to attend class at 8:30. They would have to start queuing before the school is open. I really wonder how this ever passed any test. Then if you want to drink a cup of coffee before class begins in the excellent cafe next to the entrance you’ll need to use another lift because the cafe is two steps down. This lift is a little bit faster but it makes a terribly loud noise. I won’t start about the way the doors work, or about how the elevators work if you’re blind.
The specialists who helped the architect in making sure it was certified did nothing else than ticking boxes. And this is exactly what most of us do when we think we make our sites accessible. We tick the WCAG boxes.
I then went on to show a few examples of how people who use screenreaders actually experience the web. And I hope these examples show that simply ticking the boxes is not enough. Most people are not nerds. They don’t care about their computer that much. They only use it when they have to, they have other things they care about. Many, many people who turn blind at a later age are not nerds. They are no power users. Yet navigating the web with a screenreader requires you to be a superpower user. It is incredibly complicated. Some people I’ve worked with know for instance that there is an option to read out all heading levels, yet they forgot the exact key combination and so they never use it. Others wonder what words like heading level and navigation mean and choose to ignore the web because it’s noisy and makes them feel stupid.
Now these are very complicated design problems. These are probably even wicked problems, yet we treat them as a thing that’s fixed by ticking off a simple requirement list. We must do better than that!
CSS
Because I didn’t want to end the conference with sending everybody home with a sour taste in their mouth, I decided to show some of the fantastic stuff we can make with CSS nowadays if we ignore the design tools. I showed a few clocks I made, I showed a few things that my brilliant colleague Sanne ’t Hooft made, like the intentionally horrible slow UX of his homepage, and I showed some of the incredible stuff that my very talented students made. Alas, I had to end the talk on minor note. I showed a little interaction experiment that one of my students made, with incredible attention to detail. Absolutely brilliant in so many ways. You would expect that all design agencies would be fighting to get someone like that into their design team. But to my amazement she now works as a react native developer.
I have more of these very talented, very creative designers who know how to code, who really understand how the web works, who can actually design things for the web, with the web as a medium, who understand the invisible details, who know about the UX of HTML, who know what’s possible with modern HTML and CSS. Yet when they start working they have to choose: you either join our design team and are forced to use a tool that doesn’t get it, or you join the development team and are forced to use a ridiculous framework and make crap.
After my talk I talked to quite a few people who recognise this. Creative developers, designers who know how to code, who cannot find suitable work. I heard about many, many very talented people who now work in a different industry because ours doesn’t understand their value.
Dear web industry, what is wrong with you? Please fix this. Understand how your tools are lacking. Fix your tools. Hire people who understand this stuff. Let them do their jobs. Let them design the web.
In ten years I would love to do another talk at the next border:none conference. And I would love to do a very happy talk then. About the incredible tools that we’ve been using in the previous ten years that truly let you design all layers of the web: the visible, the invisible, the UX layers. I want to talk about all the people with disabilities who’ve joined our design teams and started designing for truly accessible UX. And I would love to show all the incredibly beautiful and fantastic websites you’ve all been making on our wonderfully weird web. Please make it so. I don’t want to switch to a different industry.