Interaction

Trying to get this blog off the ground in the 2010s has been challenging. Most of that is simply finding the time to work on it. But motivation is elusive too, and repeatedly I’ve found that the design and organization of the blog don’t quite give me the juice I need to go forward, or the means to keep maintenance simple enough to let my time be used for thought and writing.

I’ve taken another crack at it, re-motivated by the opportunity to bring in techniques I’ve picked up in my professional life — particularly the notion of, for the first time in my personal blog-dom, using a development environment to really see what I was building instead of, as in the past, dismantling HTML prototypes into PHP chunks, moving them to the live server, and being prepared to make immediate fixes.

This post lays out how I went about it all and a lot of the tools and tips I used. As it happens, all the steps involved begin with “D.” Do with that what you will.

I met an engineer last week who, like me, is among the CSS-geeky. Upon discovering this shared ground, he asked if I knew the answer to an age-old puzzler: how to, using just HTML and CSS, put a fixed-width column on one side of a page and have a fluid column fill the rest of the width. (In other words, a navigation or sidebar column that’s ___px wide, and a main-content column that is as wide as the rest of the space.)

This comes up often because, as much as we all may sincerely speak of separating presentation and content, CSS still has profound limits in what it enables. Putting fixed and fluid side by side is a big one.Keep reading

And so it came to pass, that I redesigned this blog before I even launched it.

It’s a surprising outcome, no less to me, especially since the first design was an intentional experiment. I wanted to try a Pinterest/Tumblr approach to the home page. And I wanted to experiment with a variation on the latest-first tradition: leading with a featured post, even if it wasn’t the newest thing, while maintaining reverse chronology on everything else. Making that work would have provided blog fodder, too. (And might still.)

So, what made me rebuild the ship before I cracked the champagne bottle against it?

Worst icons ever? My reflexive answer: the icons for the buttons that open and close elevator doors. At least, the ones in my building.

I’ve seen then hundreds of times. Yet, every time I actually need to use them — usually, to help out someone enter by opening the closing doors — it takes me so long to work out which button does what that the effort invariably fails.

A message telling the user of a website or application that something has gone wrong or (just as important) right seems like a simple thing. But it’s a product of what-ifs, a tangent of application flow, a piece that often doesn’t get much love when a user interface is built and developed. It is a simple thing, but it is a small thing, easily lost.

I went to the desktop to look up something on Google last night (notice how I worded that in a way that no one does to respect a certain web giant’s trademark), and was surprised to not see something: lines beneath the links.

Link underlines have been gradually going extinct on the web for a while now. Google was a big holdout, a strong indicator that those lines were still found to be, by a company that doesn’t muck about with such things, too valuable a cue to throw away. (Though even it had put a toe in the lineless water, removing lines on all but the main entry links, and, for some reason, “Previous” and “Next” in the pagination.)

Trend: A quote, explanation, or joke shared as an image containing the text.

Reflexive reaction: If these words were really meaningful, they wouldn’t need to be pasted onto a stock photo.

Considerations: It’s easier to share the message this way in Facebook. Maybe on Twitter too, where that quaint old character limit is probably too brief for the message — though viewing tweeted images is still kind of a pain in the butt, especially with certain apps.

Caveat: If the message is political in nature, it’s almost guaranteed to be a lie, distortion, or laughably naive observation.

Conclusions: The photo-text thing is an overly numerous vehicle that clutters up feeds, so I’m probably not going to enlarge your photo meme. If the image text is too small or too lengthy for me to easily grok from the thumbnail, I’ll be scanning right past your message.

Exceptions: E-cards are almost always good for a chuckle.

09.03.12

About

Tim Bland is a UX-focused front-end developer and web designer, and a filmmaker who has written and produced two short films and a feature for San Francisco indie partnership Hidden Deadly.