6 October

How are Beatles albums like mobile-first web design?

When I’m meeting with clients and collaborators to discuss building websites, I like to make analogies. As the representative “tech geek” in most of these meetings, I find them the best way to convey the meaning of esoteric technical concepts, even if they’re sometimes rather strained. (I make car analogies a lot, for some reason.)

The other day I was explaining my two favorite (and overlapping) current trends in web design: Responsive Web Design and Mobile First. (How convenient that A Book Apart has books on both topics. I mention A Book Apart a lot in meetings, too.)

Suddenly in the meeting it occurred to me that mobile-first web design has an analogy with the production of most of the Beatles’ albums. In the early and mid-1960s, popular music was released primarily in mono format. Most of the market for these albums was listening to them on small mono turntables, not expensive stereo equipment. (And apparently at the time mono equipment could not properly play back stereo records.)

When the time would come for the Beatles to prepare the final mixes of their albums, the band members would join George Martin in the studio and carefully perfect the mono mixes. Then the boys would all head to the pub and leave George Martin alone to hastily assemble the stereo mixes as an afterthought. (And, frankly, it shows.) But somewhere along the way (in 1968, specifically) stereo had caught on enough that the last few albums (Yellow Submarine, Abbey Road and Let It Be) were mixed in stereo first.

The web is kind of like those Beatles albums. Up until now, websites were designed for “mono”: a computer screen. Eventually enough people started using the web “in stereo” (on mobile devices) that mobile versions of websites became necessary, but they were a hasty afterthought. But we are presently arriving at a time when a lot of people are doing a lot, if not most, of their web browsing on mobile devices, of a variety of shapes and sizes and capabilities. It’s starting to make sense not just to consider mobile versions, but to start with the mobile design.

Fortunately, we’re also at the point (to, as usual, strain the analogy) where the mono equipment can play back stereo records. There’s no need to design two separate websites, one for mobile and one for desktop. Responsive web design (via the magic of CSS3 media queries) lets us build one site that works on any screen.

But why mobile first? I see two main benefits, stemming from one main factor: the small screen size. By targeting the smallest screens first, you 1) focus on what’s most important, and 2) can more easily see what’s not important… or, at least, less important.

Mobile first fits well with the model of best-practices web design I like to promote. The decisions you make to create the best mobile experience will generally create the best experience, period. Granted, the needs of a visitor on their way to your office and checking your site on their smartphone may well differ from those of the visitor casually browsing your site on their iPad in bed, or from the customer placing an order from their office PC, but it’s easy enough to enhance the experience for users of those larger displays after the core needs of the mobile user have been addressed.

It’s an exciting time to be a web designer. Things are really starting to… come together.

(Come on, you knew I had to end with a Beatles reference.)

My new workstation set-up

Working mostly from home (save for the occasional coffeehouse “office” day) for the last year and a half as a freelancer, my workstation set-up has been a slowly evolving arrangement. First I was in a bedroom on the main floor; now I’m in a dormer upstairs. I’ve been working exclusively with my MacBook for most of that time, but with increasing frequency I’ve had to work on large-layout web pages for clients with no access to a screen larger than 1280×800. Yesterday I finally decided it was time to make a change. I wasn’t up for the $899 outlay for a 23-inch Apple Cinema Display, so after a little (OK, very little) research, I settled on an LG 20-inch LCD that supports 1600×900 resolution, for $159 at Best Buy.

I quickly found that using the keyboard on my MacBook while looking at the LG display was not a satisfactory arrangement, so I also added an Apple Bluetooth wireless mouse. I also found that my desk surface was too low for the new monitor, so I solved that problem with a $6.99 wall shelf from IKEA. That shelf also works well for elevating my computer speakers — a change that makes a surprising difference to the sound. While I was at IKEA I also picked up a solar powered LED desk lamp. Anything to help reduce the number of cords on my desk.

The only problem I’ve encountered so far is the Mini DisplayPort jack on my MacBook. There’s… something… wrong with it. Not sure what, but the Mini DisplayPort adapter doesn’t fit properly. In fact, it requires a tremendous amount of force to insert the plug into the jack. So much so, that I was convinced at first that it was the wrong adapter. But it’s not. It works. But I’ve confirmed that forcing the plug into the jack has actually damaged the plug. But it still works, so for now I’m living with it.

Overall, I’m happy with the arrangement, even if some of the details (the intense brightness of the LCD display, the need to put the solar cell in the window to charge it during the day, along with a few other quirks) are imperfect. But my improved posture itself is enough to justify the effort.

And now, a crappy picture:

New workstation set-up

Added bonus: I hadn’t even thought about the awesomeness of dual displays when I set out to get the LCD. Also, it’s nice to put my Mighty Mouse to use again after it’s been sitting in the desk drawer for months. But the biggest unexpected change — I figured out that the vintage optometrist’s chair I use (along with the vintage optometrist’s desk you see in the picture) actually can be raised… so I cranked it all the way up.

I will miss one thing about Sarah Palin…

…when she retreats back into the relative obscurity of the governor’s mansion in Juneau. And that’s Tina Fey’s impersonations on Saturday Night Live. Even the governor herself enjoys them… at least with the sound turned down.

As I was watching the vice presidential debate last week I was already thinking ahead to the skit that would inevitably be on SNL in two days. I didn’t get to watch it live but I just watched it online and it’s probably the most I’ve laughed out loud at anything on the show since “Dick in a Box.” Let’s give some credit to Jason Sudeikis; his McCain-loving, Scranton-detesting Joe Biden was on par with Tina Fey for laughs. I’m just glad I wasn’t the only one who had contemplated a “maverick” drinking game.

(I had to strip out NBC’s Internet Explorer conditional comments to get the video to show up in Safari. I could probably have taken the time to fix their code properly so it will work in all 3 major browsers but, well, I don’t really care about IE. But if you’re stuck with it, here’s a link to the video on NBC’s site.)