Web Design with a Marker

My kid Ruby (4) isn’t exactly a musician. She can’t really play an instrument. So when she wants to make music, sometimes she’ll hit a turned-over pot with a wooden spoon and shout words. But I suppose that kind of makes her… a musician? Who’s to say?

What makes a web designer? If you put an <img> of a JPG on a static HTML page, is that a website? Is there some line in the sand you have to pass in order to be a “real” web designer? I dunno. I don’t think so. Here’s some JPG’s as a website:

marker on fridge: OK, here I go. I'm going to make this whole website right now on this dry-erase board.
Miranda July’s book promo site for No one belongs here more than you.

It’s literally photographs of dry-erase marker on top of her fridge.

Photo pans out to show top of fridge. Text on fridge: Actually, I don't own a dry-erase board. This is just the top of my refrigerator.

They are missing alt attributes which is a little sad considering it has an <h1 class="content"> on each page as well, but it’s the same content on every page. Arrow key support would be nice too. This was 2007 though and I’d like to think these things are more clear requirements today than they were then. Like the site isn’t even HTTPS.

Also lol:

But doesn’t this make Miranda essentially a web designer? I’d say so! Well, almost:

This all reminds me of Jeff Bridges website, which is also a just images of marker drawings:

Homepage of Jeff Bridges site. Mostly a menu where all the links are hand drawn in scrawly marker, red ink over black ink.

Jeff’s site also has no alt text at all… rather unfortunate as I’m sure it could rather easily be done and seems likely it’s a lack-of-knowledge thing on the creator’s part (Jeff himself? Unlikely but who knows.)

Amy’s (aka sailor mercury aka sailorhg) Home Sweet Homepage is a completely wonderful story about coming up online and finding the web.

No such luck on alt text or any sort of accessibility tree, best I can tell, although there is some scrolling JavaScript stuff going on that might help that? I can’t quite tell.

Speaking of comics-as-a-website though, that makes me think of Contra Chrome I saw a while back.

Comic book layout for Contra Chrome. Blue and white panels. Narrator is Geoffrey Fowler.

It has a fully German version, but no alt text on any of the content-bearing images.

I didn’t even intend this blog post to be about missing alt text, it was supposed to be about how websites can be simple and low-tech and not only qualify as web design but actually be quite clever and interesting. But ooof, I certainly want to point out the fact that if you’re going to put a bunch of content in your images, you better describe that content in the alternative text as well.

Annnnddddd speaking of alt text, I was reading one of those “Critter” kids books to Ruby the other night, and I was noticing how much of the story was told via the image, not the words. Like the words will say something and then the image will almost contradict it.

Critter book, left side: We took a taxi to the train station. I got to ride in the front seat. The taxi driver drove real fast. That was cool. 

Image on left: Looking straight into Taxi with Taxi Driver. Critter looks happy. Mom is in back seat with eyes wide open, scared. Also a little frog that looks scared.

The funny part here is the contradiction between Critter thinking the taxi driver driving fast is fun, and his mom thinking it was scary. But you don’t get that from the text alone, so you gotta explain it. So if this was a straightforward “just read it” audiobook, that would be a bummer.

Fortunately, Miss Sofie on YouTube not only reads the story, but provides a lot of context into what is on the page and what is happening in the story:

Now that’s alt text.


I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️