Category Archives: Computers & Technology

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.)

Responsive Web Design: On embracing the web’s uncertainty principle

What do Werner Heisenberg and Ethan Marcotte have in common? First and foremost is probably that I have just mentioned them in the same sentence. Second, whereas Heisenberg’s uncertainty principle paved the way for quantum physics (which revealed that matter and energy can exist as both a particle and a wave), Ethan Marcotte’s Responsive Web Design promises to usher in a new era where we discover that desktop and mobile websites, too, can be one and the same.

My analogy may be stretching thin, but the point remains that we are entering a new phase in web design. We can no longer assume websites are being viewed on a desktop computer screen of certain minimum dimensions. We also can no longer justify building and maintaining two (or more) discrete sites, shunting mobile users off to a scaled-back, limited experience while allowing desktop users access to the full version. And all of this means that we must consider the dynamic (and, in fact, increasingly so) nature of the web as a medium from the earliest steps in the design process.

Many examples of Responsive Web Design are beginning to crop up (including this site), but the best high-profile example so far is a site Marcotte himself consulted on: the new BostonGlobe.com. I’m hopeful that soon this design approach will become the norm for most websites.

But the challenges facing those of us who are ready to embrace Responsive Web Design are many. Getting a handle on the use of CSS3 media queries is the first and probably easiest of these, if you’re comfortable with code. Most of the leading innovators in web design have long worked directly in code — and knowing and working directly with HTML5 and CSS3 is pretty much a requirement for effective use of the Responsive Web Design approach.

But I would guess that the majority of web design going on today is still being done the “old fashioned” way. A graphic designer, usually with experience primarily in print, puts together a layout in one of Adobe’s creaky monolithic Creative Suite applications (Photoshop, Illustrator, InDesign), then (if we’re lucky) hands off that design file to a developer to build out as HTML. If the developer is with it, they will follow best practices and web standards, building out semantic HTML document structures with design properties defined in CSS. (No tables, please.)

There are many potential points of failure in this arrangement, because a design in an Adobe application bears little resemblance “under the hood” to an HTML/CSS layout in a web browser. It’s not just that the canvas you’re painting on is different, although there’s that. It’s that they’re not even both canvases. No matter how much Adobe tries to ease the transition for print designers, any process that forces you to start by specifying page dimensions just isn’t going to translate effectively to the nebulous, dynamic format of a website.

“Design in the browser” is the new mantra. And again, that’s great if the person designing knows how to do that. But many designers don’t, and it’s not necessarily fair to expect them to. The entire process needs to change. Developers and designers need to work together more collaboratively, and earlier on in the project. For years I’ve been promoting the importance of designers understanding HTML/CSS and the capabilities (and limitations) of web browsers, even if they don’t necessarily write the code themselves. It’s not just about knowing what certain browsers can or can’t do (like the fact that Internet Explorer didn’t support layered backgrounds until version 9). It’s about knowing all of the things browsers can do that can’t possibly be replicated or even represented in a static design built in an Adobe CS app.

There are so many aspects of this that have always been important (how best to slice up a design; what’s background/foreground; what should be images and what shouldn’t; when to use JPEG vs. PNG; optimal page widths; where the “fold” is and whether or not it exists even as a concept; the fluid nature of vertical elements; how users interact with elements and how the page gives feedback using JavaScript and/or CSS; etc.), but now on top of all of these concerns we have the additional complexity — and opportunity — of working with different classes of devices with radically different screen sizes, capabilities, and interaction methods.

Again, “design in the browser” is the ideal. But until we get there, it’s essential that graphic designers who aspire to work with the web take the time to really understand the medium: how it works, how varied it can be, how quickly it changes. Then, even if the designs are, for now, still delivered in an Adobe format, their structure and content will at least be better informed by the practical realities of the form they will finally take in a web browser.

So, as a designer, what’s the best way to get informed? Working with a developer who understands and is enthusiastic about Responsive Web Design is a great option (hint, hint), but at the very least I recommend reading Ethan Marcotte’s book. In fact, the entire A Book Apart series is essential reading for anyone who wants to build forward-looking websites. The future is coming. We may not know what it will look like yet, but it’s a safe bet that tools and techniques that were already antiquated a decade ago are not the way to get there.

I don’t want to end on a down note, so I’ll pose this final challenge to inspire and motivate any designers who might be reading this. Despite the potentially intimidating appearance of code, web standards are first and foremost about simplicity. The dynamic duo of HTML5 and CSS3 are a world apart from the hairy mess of table layouts and <font> tags that dominated the early web. Watching a design take shape directly in the web browser can even be fun! And with the powerful interactive capabilities of JavaScript tools like jQuery, and the typographic world that has been opened up recently with font embedding services like Typekit and Google Web Fonts, there’s never been a better time to be a web designer. The more you know about what goes into realizing your designs in a web browser, the better you will be at your job and the more opportunities you will have.

A tale of two decades

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way — in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

–Charles Dickens, A Tale of Two Cities

We’re approaching the tenth anniversary of two pivotal events in the early 21st century. One is perhaps the darkest day America has faced since, at least, World War II. The other was the seemingly inauspicious debut of an electronic device that would soon herald an era of unprecedented advancement in consumer technology.

That I should even place the World Trade Center attacks and the introduction of the iPod into the same blog post, much less the same sentence, is surely offensive to some and perhaps befuddling to most of the rest. But I think it cannot be denied that, while September 11, 2001 ushered in one of the darkest political times in American history, at least the darkest in my lifetime, October 23, 2001 — the day Steve Jobs introduced the first iPod — was perhaps the day that we formally entered “the future” as I (and many others like me) envisioned it in childhood: dazzling technological devices that we can carry around in our pockets and, increasingly, seem capable of doing just about anything.

As New York solemnly builds a monument to the tragic loss of over 3,000 lives on that Tuesday morning, an event that will surely be commemorated in countless ways by millions of Americans next month, we technophiles are learning about more sad news, with the resignation of Steve Jobs as CEO of Apple. Though he’s intensely private about his personal life, it is well known that Steve Jobs underwent surgery for pancreatic cancer in 2004, had a liver transplant in 2009, and has had limited involvement with Apple’s day-to-day operations since he took medical leave this past January. His resignation yesterday may mean his health has suffered further declines, but that is not for us to dwell on. Leave Steve alone to enjoy his life as best he can, for as much as he has left of it.

Personal concerns aside, the departure of Steve Jobs marks the end of an era. It would be little exaggeration to declare the past decade “The Decade of Apple” in terms of technology. Apple didn’t invent every technology it sells; like any modern company it relies upon the past developments of others, just as it outsources its manufacturing to companies like Foxconn in China. But the thing that Apple has done, largely due to Steve Jobs and his visionary leadership, is invent ways to turn these technologies into compelling, “magical,” transformative devices. And along the way he has transformed Apple into a finely tuned machine itself, capable of creating these products of unparalleled originality and unlimited usefulness, at highly competitive (sometimes unmatchable) prices, with such efficiency that the company has gone from “90 days away from bankruptcy” (as it was so famously described just before Jobs’ return at the end of 1996) to vying with Exxon to be the most valuable publicly traded company in the world.

I’ve read plenty of gloom-and-doom speculation about the future of Apple without Steve Jobs, especially in the last 15 hours or so since the announcement of his resignation. Most of it is utterly ludicrous. New CEO Tim Cook and the rest of his executive team are more than capable of carrying on producing great products without Steve Jobs (or with him in a far more limited role as Chairman of the Board). Whether, over the longer term, they’ll be able to continue inventing new products as transformative as the iPod, iPhone and iPad (and whether they’ll all have to have names starting with “iP”), only time will tell. But now is clearly not the time to sell Apple stock, if you own any. (And if you don’t, maybe you should buy some… which is what I should probably be doing right now instead of writing this.)

A tale of two decades. While the September 11 attacks, and the wars, economic turmoil and political polarization that followed them, have made the last decade one of the most difficult in our nation’s history, Steve Jobs and his work at Apple have led the way for the past decade to become one of the most exciting and transformative we’ve ever seen in terms of technological advancement and, in particular, what technology can do to improve people’s everyday lives.

So, thank you, Steve Jobs, for providing a counterpoint to what was otherwise a dark decade of foolishness, incredulity and despair. Thank you for bringing to the world your wisdom, belief and hope. I spend much of every day relying on Apple devices, from using the C25K app on my iPhone during my morning run, to building websites in BBEdit on my MacBook Air, to relaxing in the evening watching “Mad Men” on Netflix with my Apple TV.

There are plenty of things going on in the world right now that are cause for sadness, frustration, anger, confusion, and despair. But the simple joy and unprecedented utility of these devices that Steve Jobs and the rest of the minds at Apple have created give me hope. If people can produce things so well-designed, so incredibly useful, so delightful, then perhaps, someday, we can get all of the rest right too.

I kind of wish I didn’t notice things like this

I spend a lot of time with my Mac. In fact, I stare at my Mac’s screen for so much of the day that I have become intimately familiar with the nuances of Lucida Grande, the humanist sans-serif font that has been Apple’s default system font since the introduction of Mac OS X roughly a decade ago.

I’m not a huge fan of Lucida Grande, as I’m not a huge fan of humanist fonts in general. I prefer geometric fonts, even if they’re not as easy to read. I just prefer their mathematical precision because, well, I’m a geek. But I think the biggest reason I don’t love Lucida Grande is just that I’m sick of it. Even though it’s way better than Chicago (the original Mac system font) or Charcoal (the system font from Mac OS 8 and 9), I’ve just seen too much of it over the last 10 years. I want something new. The encroachment of iOS interface elements on the newly released Lion (Mac OS X 10.7) suggests I may be seeing even more of Helvetica Neue in the future, which is fine by me.

But in the meantime, we still have Lucida Grande. Lots and lots of Lucida Grande. And since I know it so well, I notice even the slightest change to it. For instance, I noticed immediately that something was… different… about the contextual menus in the latest version of iTunes, even if I couldn’t immediately put my finger on it:

It didn’t take too long though before I realized what it was. It’s ever so slightly smaller than the font in the contextual menus I’m used to seeing, including, unfortunately, those still present in the current version of the Finder:

The change is extremely subtle, but I like it.

Apparently the 10.7.1 update is out now. I’m sure I’ll begin downloading it within the hour. I’m not sure what changes it contains… but I suspect that despite my deepest desires, they will not include a 1-point reduction in the size of the Finder’s contextual menus.

Still, one can hope.