Category Archives: Site Optimization

Episode 19: Beyond Usability with Aarron Walter

Aarron Walter

Designer Aarron Walter guests on Thursday’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped before a live internet audience.

Aarron is the author of one of my favorite web design books, Building Findable Websites: Web Standards, SEO, and Beyond (New Riders, 2008). It’s the book that explains the connection between “search engine optimization” and good, accessible, semantic markup. (Buy your clients a copy.) He works as the lead user experience designer for MailChimp, bringing ease of use and even fun to web-based email marketing and list management. He is also a popular conference speaker; the author of an upcoming A Book Apart mini-tome on emotional design; and the lead of the WaSP InterACT curriculum project, “a living, open curriculum based upon web standards and best practices, designed to teach students the skills of the web professional.”

The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.


My other iPad is a Kindle

Zeldman.com as seen on Kindle

The new Kindle has a lot going for it. It’s inexpensive compared to a full-featured tablet computer like the iPad; you can slip it in your back pocket, where it’s more comfortable than an old-style paperback; and it includes a Webkit browser. This last point is where folks like us start to give a hoot, whether we’re fans of epub reading or not.

The flavor of Kindle’s browser concerns us because it affords us the ability to optimize the mobile viewing experience with a single line of markup. You can see this in action in the photo at the head of this article (published and discussed on Flickr).

I made no tweaks for Kindle per se; the Kindle is simply responding to a line of markup I’ve been putting into my web pages since 2007—namely, the viewport meta element, which controls the width of the viewport, thus enabling mobile devices with a limited number of pixels to focus all available pixels on your site’s core content (instead of, for instance, wasting part of the small screen on a background color, image, or gradient). The technique is as simple as web design gets:

meta name="viewport" content="width=770"

(Obviously, the value of “width” should be adjusted to match your site’s layout.)

I learned this little trick from Craig Hockenberry’s Put Your Content in My Pocket (A List Apart, August 28, 2007), which I naturally recommend to any designer who hasn’t seen it.

Of Google and Page Speed

Our visually and behaviorally rich sites are about to lose precious Google juice, WebSiteOptimization.com reports in a new piece titled Page Speed Factored into Google Search Rankings:

Google’s addition of a page speed signal to its search rankings algorithm officially links performance with search engine marketing. The loading speed of a web page affects user psychology in a number of ways, and now it can effect its rankings as well.

This back-to-basics message catches us at a funny time in web design history.

“Make more of less” has long been the norm

Most of us who’ve designed sites for quite a while, and who consider ourselves user- and standards-focused, have traditionally designed sites that loaded faster than the competition. We did it by using caching technologies (CSS instead of table layouts, linked instead of inline JavaScript, and so on). For many, many years, we also did it by keeping images to a minimum, using system fonts instead of pictures of type, CSS colors instead of faux backgrounds, and so on.

As the web audience grew, heavily trafficked sites became even more restrictive in their decorative flourishes, whether they cared about web standards or not. Thus Google, while happily using bad CSS and markup, exerted monk-like discipline over its designers. Not only were images out, even such details as rounded corners were out, because the tiny images needed to facilitate rounded corners prior to CSS3 added a tenth of a kilobyte to page weight, and a tenth of a kilobyte multiplied by a billion users was too much.

Of late, we have grown fat

Yet in the past few years, as wideband became the norm, every mainstream site and its brother started acting as if bandwidth didn’t matter. Why use 1K of web form when you could use 100K of inline pseudo-Ajax? Why load a new page when you could load a lightbox instead?

Instead of medium-quality JPEGs with their unimportant details painstakingly blurred to shave KB, we started sticking high-quality PNG images on our sites.

As these bandwidth-luxuriant (and not always beautiful, needed, or useful) practices became commonplace on mainstream sites, many advanced, standards-focused web designers were experimenting with web fonts, CSS3 multiple backgrounds, full-page background images, and other devices to create semantic, structurally lean sites that were as rich (and heavy) as Flash sites.

So now we face a dilemma. As we continue to seduce viewers via large, multiple background images, image replacement, web fonts or sIFR, and so on, we may find our beautiful sites losing page rank.

Read the report and watch this space.