The Mutable Web 2019-07-23
Twitter recently rolled out a redesigned UI and I don't love it. It feels busy and has a lot of content I'm not very interested in. The sidebars are pinned, leaving the middle column (where the content is) feeling cramped and overpowered. I don't think I've ever clicked on a trending topic, and I don't care for the suggestions on who to follow. The text in the left navigation sidebar is enormous and I feel like it's screaming at me1. This is my question: why do we put up with websites that we don't like looking at? I think most people would answer that question with another question: What choice do we have?
When I was growing up, if you'll forgive me a little nostalgia, the relationship of users to the web was a lot more give-and-take. The average user of the web in 1995 or even 2000 was (anecdotally) far more likely to run their own website than the average user of the web in 2019. Using the web felt like you were participating in something, rather than consuming something. People would create websites to journal, post photos, and connect with like-minded people while in 2019 it's much more common for that sort of activity to happen on one of a handful of social media sites. Of course, there's a trade-off here: managing a website takes work and know-how, and often money, while Facebook is easy and free. On the other hand, Facebook is selling my data to malicious third-party entities and my friend's personal homepage is not (Google Analytics notwithstanding).
There's also an aesthetic homogeneity to the big social media sites that strikes me as bleak and depressing compared to the amateurish, handmade web pages of my childhood. Different pages on the same website — even different entries in the same journal — might look wildly different2. I can see why we'd want a little more consistency now that the internet is vitally important to daily life rather than a fun novelty but I think we've overshot the mark. As the web grows more consistent and more lifeless, people grow more disaffected and feel less like the web is something they can (or want to) participate in.
However, one of the web's really revolutionary features is the ability of every user to easily inspect and modify a running system. Non-web applications normally function as black boxes to the user. They are totally opaque and incorrigible, offering very little in the way of customization. On the web, however, you have full access to all the code that makes up the user interface. I can't think of another platform that offers as much visibility and power to the end user. Maybe Smalltalk? I haven't used it much, but it's sort of a moot point anyway because it never really took off. Browsers' built-in developer tools make it very, very easy to poke around a website, see how it works, and change whatever you want. This is a fantastic feature, and even better is the deeper implication that the web is for everyone. Despite the growing centralization of power in a few giant corporations, we all still have the ability to craft our own our experience of the web.
Going back to the example of Twitter, I found myself getting sick of the massive sidebars so I opened up the element inspector, highlighted the sidebar, right clicked on it, and selected
Delete Node. It's hard to say because I do know HTML, but I think that I could have managed this without knowing HTML. This kind of blurring the line between developers and non-developers is really inspiring to me and I wish these tools were called something less alienating to people who don't consider themselves to be web developers. I spent a while futzing around, changing colors, hiding this and that until I liked the look of it. When I was done, I realized that if I closed my tab, all my changes would be gone. After a little research, I found two solutions to this problem.
The first is to use a browser extension. You could make one yourself, but that's a little too involved for what I'm trying to do, so I turned to an extension called Stylus3. One way to use Stylus is to search https://userstyles.org for the website in question and find a theme you like. Alternatively, you can create new stylesheets right in the browser. You can apply them to specific pages, entire domains, or every site you visit.
The second method is to use web browsers' native ability to apply custom stylesheets to web pages. In Chrome the feature is called Local Overrides, while in Firefox it's the Style Editor. In Chrome, you can specify a directory on your filesystem to save the changes you make in dev tools and it will load that stylesheet the next time you visit the site, which is more or less how I think things should work, but for various reasons I don't use Chrome. Firefox's system seems to be geared toward developing your own website rather than overriding existing websites, which is cool but doesn't really work for my use case.
I chose to go the Stylus route and created a user style for twitter.com. Here's what it looks like:
It looks a lot like this website! This is perhaps not surprising since I built this website in such a way that I think it's pleasant to read, and that's what I wanted from my Twitter style. I spend quite a bit of time - probably too much - on Twitter, so it makes sense to me to get it looking a little nicer. This is a simple example, showing only some style changes, but this is a powerful concept. Every website you visit on the internet is a bundle of HTML and CSS and can be modified like this. An important caveat that opens up a conversation that could honestly fill a whole other blog post is that in the era of React and Styled Components, applying custom CSS to existing markup is harder than it used to be. This is a representative sample of Twitter's DOM:
It's a mess! I had to get pretty creative with my CSS selectors to target the correct elements. In some cases, I couldn't find a way to do it other than a) Build a CSS selector that looks like a XPath (e.g.
main div:nth-child(1) div div a span svg) and hope the structure of the DOM doesn't change or b) Copy the mess of CSS classes (e.g.
Anyway, despite Twitter's messy markup, I was still able to build my user style. Transparency and introspection are fundamental to the way the web works and obfuscation, intentional or not, can't really change that. I guess I don't have a real call to action to wrap this up, but if you love the web — or what the web could be — I would urge you to spend some time thinking and talking about how we use the web, and the difference between consuming the web and participating in the web. I don't think these kinds of conversations should be limited to developers either; after all, we're a small percentage of web users. What if Developer Tools, or a subset of them, was labeled Page Editor, or something similar? I bet people would figure out pretty quickly that when you're on a recipe blog and can't even see the content because of all the sticky ads and modals, you can just get rid of them. Fixing things we don't like about the websites we visit every day is a great way to start recapturing some of the autonomy, creativity, and active participation of the early web.
There's been a lot of talk lately about the trend of replacing navigation with unlabeled icons, and I wonder if Twitter's design team has been listening and overcompensated.↩
It's worth noting that personal homepages and Myspace profiles with custom HTML and CSS were absolutely accessibility disasters and were often just plain ugly. But I think there's a middle ground between an endless stream of slightly off-white rectangles and autoplaying midi files and flaming cursors.↩
Stylus is a fork of Stylish, which got pulled from the Firefox and Chrome extension marketplaces after it was discovered that it was collecting large amounts of data about users' browsing activities.↩