I was using the Crunchyroll app on my iPad this weekend and noticed my level of frustration rising because the most annoying feature of the Crunchyroll iPad app is that while using it, I can do nothing else. The developers of the application didn’t add Picture in Picture or background play support. It’s either on fullscreen or off. The Funimation app has the same problem. While I’d like to watch anime while doing something else (shopping, Twitter, RSS, etc), I can’t.
On the web, this is only a minor annoyance. I open developer tools and…
document.querySelector('video').requestPictureInPicture()
I under-appreciate the ability to patch or coerce websites to meet my needs. That’s a feature of HTML, written in the by-laws as “consider users over authors”. As a user, I get the final say. This is why stylesheets cascade, why JavaScript can be turned off, and why browser extensions exist; it’s a foundational aspect of the web.
This design decision impacts my life daily. Typing “d” into my browser console autocompletes to…
document.querySelector('audio,video').playbackRate = 2
Et voilà! Patching in a playback rate control feature to video or podcast websites where there was none. My biggest pet peeve is podcasts that don’t offer playback control, but as long as there’s an <audio> element, I can forgive their sins. I was opening the console so often, I even built a browser extension that did this. This is me, empowered!
In August I installed extensions to block Twitter’s Explore tab and Trending Topics. I (due to some undiagnosed ADHD), needed to recapture some of my focus. No more attention sirens pulling me into their vortex of political bullshit. Me, empowered!
Patching Twitter reminds me of how for years the blind community built their own Twitter clients because the Twitter app was inaccessible, Easy Chirp being a well-known one. I hope the situation is better now and non-sighted individuals can use the flagship application without modifications, but I think we should celebrate that clever people armed with good HTML and an API key were able to subvert ableist applications. They, empowered!
Over the summer, WebPageTest rolled out a new No Code Performance Optimizations feature. They are using the openness of the web to patch HTTP responses with different HTML to preview the performance outcome. Having done performance improvement work before, this feature simulates months of work with the click of a button. Us, empowered!
These are a handful of examples, but it makes me realize I don’t celebrate the Open Web enough. Native experiences may have the upper hand and feel a bit “juicier” thanks to their 120 FPS animations, but if an app doesn’t have a feature you need… you are handcuffed to that experience. You have to buy a second app to meet your needs, or a second device to work and watch anime at the same time.
/me slaps roof of the web: There’s still spark in it, if you treat it right.
This month I finished Michael E. Mann’s The New Climate War, a treatise on where we’re at with climate change. After my post on climate change a handful of people mentioned it and the book does a fantastic job at opening your eyes to the deflection tactics and information warfare that special interest groups (read, lobbyists) use to get you to talk about something other than their clients.
I could go on forever about ways this gross incentive system is destroying the world, but what I found most interesting about Mann’s book were the recurring cast of characters in the Climate Change disaster:
Mann then described in detail three more characters and how they —despite their best efforts— impede progress:
Denialists tend to be corporate shills, in for personal benefit. Alarmists tend to be somewhat correct, but ineffective in their constant foreboding. And Doomists, so concerned they’ve lost hope. All common characters, but it’s the Doomist, Mann cautions, that’s working against themselves:
By exceeding the consensus expert science, whilst claiming to be based on it, doomism feeds denialists by discrediting real science and it sets followers up for disillusion.
I hadn’t fully considered that doomism can have a net-negative effect on the cause they care so deeply about. Their doom disillusions followers, their doom discredits reality. As I thought further, my brain identified some recent interactions with Doomists in my own life; at that moment the scales fell off my eyes.
Seeing this cast of characters arrayed on the same stage struck me in a way I haven’t felt in a long time. I started time-traveling through my life seeing these characters pop up again and again; COVID-19, gun control, startups, websites, web apps, accessibility, politics, evangelicalism, non-evangelicalism, neighbors, school boards, clubs, the late 90s Houston punk rock scene, and so on. These are characters in any collection of people bound by common interest trying to enact social change.
I’ve seen the serpent-tongued Denialist, the Alarmist clanging like a gong while no one listens, the inconsolable Doomist, the Dunning-Kruger empowered Technologist, the obstinate Inactivist, the steady but exhausted Activist…
…I’ve seen these characters. I’ve been these characters! I am these characters?!
Last year I read the book 101 Things I learned in Architecture School. It’s a good book. Good enough, I thought I’d share 26 Things I learned from “101 Things I Learned in Architecture School”. Meta. A lot of this will, of course, be applied to web design.
This is probably the best argument I’ve heard for “why to use whitespace” I’ve ever heard. Negative/unused space makes the spaces with structure and/or content more impactful because we’ll dwell and feel more comfortable in the positive/filled-in areas.
This also explains why everyone ends up in my kitchen when friends come over.
A simple quote, but a wonderful sentiment. I wonder if you could come up with a web based axiom for this like “CSS architecture is the thoughtful making of cascading styles.”
There’s something about being so “for everyone” that your idea becomes watered down and unappealing. I struggle with this a bit from a code perspective, because in code I’m often trying to come up with generic abstractions. But there’s an entire catalog of Apple designs that shows how a luxury technology designed for rich coastal elites can have mass appeal.
One of my favorite designers Shigeru Miyamoto has a similar rule of thumb (that I can’t find) that any character action should serve two functions. Like how Mario’s jump is also his attack. Link’s shield is also his targeting. Good decisions achieve multiple purposes, not a singular purpose.
I like this dichotomy a lot. Better than dismissive terms like “generalist”.
This aligns with my experience.
The example given here is straight lines make curvy lines more curvy. It seems true, even if it’s not. This point makes me think a lot about web design and what elements you could combine beyond dark site header and white site. What counterpoints can you create in your design?
Okay. Makes sense.
Ah. Now we’re getting somewhere. A wavy line or orb-like body makes you consider where it starts and ends. A sloped roof jutting upwards makes you follow the line up. In web design we make the eyes explore by flying shit in and out of the page. Shapes alone could probably do the trick. A lot to learn here.
The two together! Static and dynamic. Some yin and yang. Some smooth and rough. Some straight and curvy. Juxtapose! Putting static objects and dynamic objects together instantly creates some contrast and counterpoints. Visual interest.
Simplicity, complexity, informed simplicity.
Ok, first of all, don’t judge my code. Second of all, I love the term informed simplicity. It’s not simple because it’s simplistic, it’s simple because I prefer simple and believe it’s better than “unnecessarily busy agglomerations.”
Think of that! Beauty is more about harmony in how and where something exists as opposed to some innate quality.
If you want a free outline for your next conference talk, here you go. Or even your next internal demo. This is pretty incredible and it starts hinting at the idea that a lot of what we do is about bringing humans along the way with us.
So do websites! <header>, <main>, and <footer>.
Still good advice.
Again, a public speaking masterclass. All visuals should be legible from 10 feet away. Practice your talks away from your desk.
Don’t design from room to room (e.g. component to component, page to page), visualize how the floor plan/idea fits within the cross-section of the whole building/product.
A floor plan demonstrates the organizational logic of a building; a section embodies its emotional experience.
That’s the whole page, but it speaks volumes. Piggybacking off the previous point and point #51, viewing projects cross-sectionally will tell you a lot more about the experience than viewing through vertical silos.
How do you test and evaluate design ideas under consideration? Well… the answer is: Prototypes! Architectual models are wonderful tools.
A neat isometric drawing tip. Instead of drawing a car or couch, draw the box it came in as a placeholder and then narrow down from there. Useful and practical concept to start with a vague shape of the object and fill in details later.
Damn. Going straight for the jugular.
“Architecture is an exercise in truth.” and “Architecture an exercise in narrative.” I believe both.
In web parlance, design components by considering them next to another component, inside another component, inside a modal, as the sole component on the page, something the user interacts with on twelve pages in a row!
Interesting to see how meta contracts (HOAs, rental agreements, etc) also exist as a layer above what the government regulates.
It’s also worth noting that through legal regulation, Architecture has come a long way in making accessible products the default. The web needs this.
Naming is hard in Computer Science so avoid it and let robots do it for us. But seriously, there’s power in a common name that everyone can reference.
And that’s it! That’s all I learned. You should read 101 Things I Learned in Architecture School 🎉