Gregarius » Authentic Boredom

Authentic Boredom (100 unread)

Skip to page: 1 2

The debate over page zooming vs. text scaling

Posted: June 18th, 2009, 5:45pm CEST

After posting my reasons for switching back to px for font-size citing page zooming as the primary justification, it was apparent that enthusiasm for page zooming wasn't as unanimous as I had thought.

As a refresher from the article, low-vision users (or anyone) can alter their browser's text size by changing the default text size permanently via the browser’s settings, or on-the-fly using the keyboard commands Ctrl+/- (Windows) or Command+/- (Mac).

Until recently, these commands would cause all major browsers to scale up or down the size of the text while retaining the formatting and layout of the page, commonly called text scaling or text zooming. Now, however, recent versions of every major browser now default to page zooming instead of text scaling for Ctrl+/- and Command+/- commands AND for the "Zoom" option in the browser's menu. Page zooming literally zooms the entire page — layout, formatting, and text size — in unison. Elements retain their size and shape, which greatly reduces the need for us to compensate for text scaling. In effect, the browser assumes the burden of relative sizing.

Below are examples of each. First, page zooming:

Next, text scaling:

If you're running Firefox or Safari on Mac or Windows, you can easily switch between these two options. Select the "Zoom Text Only" option under the "View" or "Zoom" menus to override page zooming.

So, what's wrong with page zooming?

There are at least two compelling arguments I've heard that are unfavorable towards page zooming, and I am listening to what is being said:

"Low-vision users don't like horizontal scrolling." I've not done extensive research in this area myself, so it's hard to counter-argue. Besides, it's safe to say nobody -- good vision or not -- likes horizontal scrolling.

However, I'd like to see conclusive evidence that accompanies statements such as this from "Nik", who commented in my previous article:

We found during usability testing for a site with a large proportion of users with vision problems that most of them preferred to use text zoom instead of page zoom because page zoom almost always means horizontal scrolling.

We need to know more about how these users configure their browsers in the first place, the keyboard commands they do and don't use, and the like. Being asked to rate the two options in a usability lab vs. configuring and using one's own computer are often two very different things.

"What about IE6?" First, if your project, organization, or client still requires supporting IE6, you have far worse things to be concerned about than page zooming vs. text scaling. I have the luxury of not being concerned about IE6 in my corporate and personal projects. That is not a luxury afforded to everyone.

With IE6, only text scaling is an option. IE6 (and 7 and 8 actually) will not rescale px values. There are valid arguments for and against this approach, but regardless the only option for text scaling in IE6 is with em and % values. So, if supporting IE6 is still part of your game plan, the argument here is that relative values should be too.

Is one site for all feasible?*

For me, at the core of this debate is a much bigger question: Is one site for all really feasible? Traditionally, I've believed it is. But increasingly I'm finding that it's not always practical. Some examples:

I make the argument in Mobile Web Design that a mobile-optimized site is better for mobile users than a handheld style sheet that marginally modifies your existing site. I published this book nearly two years ago, and today I still believe that to be true, as do several other mobile experts.
Although I argue repeatedly in "The Highly Extensible CSS Interface" in favor or markup that endures the rigors of language translation, there are often elements (menus, buttons, etc.) within an interface that are virtually impossible or impractical to code in way such that any amount of text can be fitted properly. I'm seeing this right now with a project at work that has to be translated in 10 languages. The more practical solution has been to have a style sheet for each language, (language).css, that modifies the width, height, padding, etc. of those elements that cannot be compensated for otherwise.
In his article for A List Apart, "Big, Stark & Chunky", Joe Clark points out the fact that merely compensating for text scaling may not be enough for low-vision users. Separate CSS files specifically for these users may be needed. "Standardistas were able to stomach the idea that blind people were simply ignoring the appearance of their sites because, self-evidently, they were blind," he states. "It was no big deal; nothing happens to your visual design when you accommodate blind people. But to accommodate low-vision people, you have to totally rearrange your multicolumn site. You have to knowingly destroy your original graphic design."

The reality of all this debate is the fact that, as I've already mentioned, every major browser seems to be trending towards page zooming as the default for the "Zoom" option, whether via keyboard or menu option. This trend, along with the other arguments in this article, leaves me unsettled about the right approach for extensibility within a layout, and even unsettled about px for font-size.

So, if you were expecting a conclusion of some sort at the end of this article, there isn't one. I'm thinking aloud. Please do the same -- let's keep the discussion going.

Additional reading:

* This heading text is taken from a report of the same name, "Helping low-vision and other users with Web sites that meet their needs: is one site for all feasible?" by Mary Frances Theofanos and Janice Redish. The report, which is one of the references in Joe Clark's article, can be purchased here.

Coding like it's 1999

Posted: June 4th, 2009, 5:39pm CEST

UPDATE: Please see The debate over page zooming vs. text scaling.

Recently I made the switch back to HTML 4 for DOCTYPEs and px for font-size (sound like 1999 again?), and I've tweeted about it occasionally. I'm documenting the switch more thoroughly here.

HTML 4.01 Strict

I've chosen to go with HTML 4.01 Strict as the DOCTYPE in my projects moving forward, favoring it above XHTML 1.0 Strict and HTML 5. I'll briefly explain my reasoning.

XHTML 1.0 Strict – This is what many of us in the industry, including myself, have been using for the past few years. However, Dave Shea offers a compelling argument to drop XHTML with an eye towards HTML 5:

"Six years ago, many of us thought XHTML would be the future of the web and we'd be living in an XML world by now. But in the intervening time it's become fairly apparent to myself and others that XHTML2 really isn't going anywhere, at least not in the realm that we care about.... I'm not ready to start working through the contortions needed to make my sites work with an HTML5 DOCTYPE yet, which leaves me with the most recent implemented version of the language.... [U]ntil I get a better sense that HTML5 has arrived, 4.01 will do me just fine for the next four or five years."

HTML 5 – In a nutshell, HTML 5 is the next major version of the hypertext markup language. The good news is meaningless div and span elements will be replaced by more meaningful elements such as nav, header, and video.

This means instead of marking up something such as

<div class="header">
  <h1>Page Title</h1>
</div>

<object><param><embed src=" [vimeo.com] "></embed></param></object>

we'll be able to mark up the same HTML like this:

<header>
  <h1>Page Title</h1>
</header>

and this:

<video src=" [vimeo.com] ">

The bad news is HTML 5 is not currently supported adequately by major browsers (notably Internet Explorer). Estimates range from months to years before HTML 5 is fully supported and therefore a viable option for all of us creating websites.

An alternate approach is to maintain that same watchful eye towards HTML 5 by writing markup using current DOCTYPEs but with semantic, HTML 5-like class names. Jon Tan covers this approach beautifully in "Preparing for HTML5 with Semantic Class Names".

For example, using the nav element, HTML 5 markup would be

<nav>
  <ul>
    <li><a href="">Item 1</a></li>
    ...
  </ul>
</nav>

while our semantic, HTML 5-like markup using HTML 4 or XHTML 1 would be

<div class="nav">
  <ul>
    <li><a href="">Item 1</a></li>
    ...
  </ul>
</div>

However, the drawback to this approach is you potentially end up with a lot of extra divs. If our goal is meaningful and lightweight markup, the most optimal markup right now would instead be the following:

<ul class="nav">
  <li><a href="">Item 1</a></li>
  ...
</ul>

So, my opinion about HTML 5? We'll all adapt just fine when it's ready for prime-time and fully supported. The mental shift will be minimal. Until then, I'll keep coding the way we've always done it.

Additional resources:

px for font-size

For a number of years, px was the de facto standard for sizing text with font-size. It gave designers transferring their design from Photoshop (or other software) to HTML a consistent, absolute unit for text size. Then, as we became more knowledgeable of and concerned with accessibility, relative text size (em or %) gradually became the preferred unit. This enabled low-vision users, and really anybody, to change their browser's default text size permanently via the browser's settings, or on-the-fly using the keyboard commands Ctrl+ and Ctrl- (Windows) or Command+ and Command- (Mac).

Accordingly, and up until recently, all major browsers would scale up or down the size of the text while retaining the formatting and layout of the page. This is commonly called text scaling or text zooming. This adaptation required us to create markup that allowed for relative sizing of any elements containing text. For example, if a div contained text set atop a background image, we would have to either repeat the image as the div grew larger with text scaling or create the image larger than necessary to compensate for growth. This is something I covered in detail in my "The Highly Extensible CSS Interface" series of articles.

However, recent versions of every major browser -- Safari, Firefox, Google Chrome, Opera, and yes, Internet Explorer -- now default to page zooming instead of text scaling for Ctrl+/- and Command+/- commands. Page zooming literally zooms the entire page -- layout, formatting, and text size -- in unison. Elements retain their size and shape, which greatly reduces the need to compensate for text scaling. In effect, the browser assumes the burden of relative sizing.

What does all this mean? It means px can again be considered a viable value for font-size. It means the difference between setting text with absolute units or setting text with relative units is negligible for users. For you and me, however, the the difference is substantial. The burden of calculating relative units throughout a CSS document is replaced by the convenience of absolute units -- 14px is 14px anywhere in the document, independent of parent elements whose font-size may differ.

Additional resources:

I suppose the only legacy practice left to switch back to at this point is tables...

UPDATE: Some of you may have been led to believe I've given a mandate for the industry to move to HTML 4 and px. Please note I've documented only my switch here and the reasoning for it, and that px can be considered a viable value for font-size. As I mention in the comments, you need to make the right decision based on your audience and users. If XHTML and relative sizing is the right choice for your project, no one else can tell you otherwise.

Free download: Good vs. Great Design (summary)

Posted: May 19th, 2009, 5:09pm CEST

If you've not yet signed up for next month's HOW Design Conference in Austin, Texas, now is the time to do so.

The conference organizers have been gracious enough to allow me to publicly post the handout that will be provided in my session, "Good vs. Great Design". This 10-page summary of my presentation is something I've been hoping to compile for quite some time now, and HOW has finally provided the impetus for making it happen.

Download good-vs-great.pdf (PDF, 588 KB)

Highlights from other sessions and speakers include:

Print to Web Breakthrough
The Secret of Project Management for In-House Designers
Keeping Creative Control with Difficult Clients
Communicating Up, Down and All Around the Organization
10 Things You Didn’t Know Fonts Could Do
Craft + Activism = Craftivism
Studio tours (frog design, Olive Interactive Design & Marketing, others) for pre-conference attendees
DJ Stout (Pentagram), Thomas Phinney (Adobe), Cynthia Rapp (Cartoon Network), Lia Braaten Hager (Proctor & Gamble), and nearly 50 other speakers

Hope to see you there.

Authentic Jobs: Advice for Staying Gainfully Employed

Posted: May 7th, 2009, 3:52pm CEST

The redesign for Authentic Jobs, which is coming along swimmingly thanks to your feedback, will include a blog to allow myself and others to post articles on the topic of employment, freelancing, and the like.

The following is one such article. I've been bookmarking the links below over the past few months in anticipation of the new blog. However, because the redesign is taking longer than I had hoped, I've decided to post the article now given the timeliness of the subject.

The last 6 months or so have been rocky for just about everyone and every business, and with layoffs and budget cutbacks, job search is certainly no exception. Many more applicants, but far fewer job openings. The good news is that things seem to be on the way up. We saw the same number of freelance listings in April as we did in January, but full-time listings increased by 34%. Currently on the site, you'll find listings from Apple, HUGE, Facebook, frog design inc., Berklee College of Music, Backcountry.com, Comcast, Magnani Caruso Dutton, and plenty of other great companies small and large.

On to the advice. Whether you're on the clock with an employer or a full-time freelancer, I'm fairly certain you'll find the following remarks from authors around the globe to be helpful for staying gainfully employed in today's economy.

Ross Johnson: How to Respond to an Authentic Jobs Posting

Ross Johnson of 3.7 Designs posted a freelance listing on Authentic Jobs, then in turn offered advice to those replying to his and other listings. He offers 6 tips for applying, one of which is the following:

I was surprised at how many applications failed to answer questions I specifically asked to have included. Others ignored large portions of the listing (like experience with common open source CMS solutions). Even if you had no experience (or little) I spent twice as long considering the applicants who at least addressed all of the points.

smashLAB: Stop acting like a sissy and market your company

Eric Karjaluoto of smashLAB argues in favor of maintaining or even increasing marketing efforts during tough times, not decreasing them. "The problem-of-the-day has less to do with numbers," Eric mentions, and more to do with "fear, panic and our own knee-jerk reactions."

What baffles me about all of this is how people are choosing to cut their spending. I can appreciate reducing office space or negotiating a lower lease rate. I similarly understand reducing staff members or entertaining job sharing options. What I can’t quite grasp, however, is this tendency to narrow the pipe for incoming sales. When you aren’t getting dates, you don’t go home and watch re-runs of Matlock; you get out of the house and meet people.

A nice office space doesn’t directly drive sales. Office perks may heighten morale but they don’t necessarily bring in new clients. In times like these, all of us have to look at what keeps the machine running. As such, there’s one simple truth that I want you to embrace: your company has to accelerate its marketing and sales efforts.

Design Observer: Designing Through the Recession

A top-notch article by none other than top-notch advice giver Michael Bierut.

In your desperation to compete for work, you'll be tempted to do things that you might not do when times are good: take on work for a shady client, start a project without a contract, ship a finished job to someone who's fallen behind on an agreed payment schedule. Do not do these things. Not only will they not help, they will almost certainly end in tears, probably your own.

The modern design studio can't help but subscribe to the cult of asap. But while working at full speed is great for profit margins, it's not so good for quality control. A design solution almost always benefits from a second, third or fourth look. Take advantage of the slower pace of a recession by remembering what it was like in design school to spend a full semester on a single project. What seemed then like torture may now feel like a luxury, and your work will benefit.

New York Times Opinion: Designing Through a Depression

Partly a response to The Times' own article arguing design loves depression (which received a well-deserved rebuttal from Design Observer), Allison Arieff's piece encourages using the power of design to make smarter choices for the consumer and the environment.

Maybe one way the recession as good for design is to see it not as a form of punishment for frivolous designers but rather as an opportunity to allow for a rethinking of design itself — and the role of the designer within it. This rethinking needs to come not just from designers but from the manufacturers, companies and other clients who decide what products and projects will be produced. There’s no excuse not to examine and re-examine what’s made, how it’s manufactured, what materials are used (and which are recyclable), what benefit it’s giving the consumer (or lack thereof) and what contribution, if any, it’s making to anything other than landfill.

D. Keith Robinson: Hanging In and Helping

Keith, co-founder of Blue Flavor, on staying ethical in difficult times:

If you’re running your business scared and making all your decisions by fear I think you’re doing it wrong, regardless of the economic situation. I know I didn’t start a business just to survive and get by. This will pass. It might take awhile, but it will and I want to be right with my business and myself when it does. I’d rather go down fighting for what’s right than bend a bunch of rules just to get by.

A List Apart: Filling Your Dance Card in Hard Economic Times

A solid round-up of advice by Pepi Ronalds for freelancers and full-timers alike.

People in our industry enjoy far more flexibility than ever before, due to the buoyant economy we’ve had for the last decade. The new economy won’t eliminate flexible working arrangements, but employers and clients do have more bargaining power and may expect more of you. Your employers won’t necessarily ask you to work longer, but they will ask you to be more focused, committed, accountable, and reliable when you’re in the office. They’ll appreciate it when you arrive on time and that you work when you’re at work. Minimize chats and distractions. Shut down personal messaging programs, Facebook, email, etc., until you’re on break or until the end of the day.

Boagworld: 5 options when website budgets get slashed

Paul Boag:

We spend the majority of our ever decreasing budgets on adding bells and whistles to existing websites when there are large number of potential customers who never reach our sites. Instead of sinking your budget and efforts solely into your website consider looking further afield. Could your web strategy be better served by putting resources into a Facebook group or a twitter account for example? ... Ask yourself where your target audience congregates. Instead of constantly trying to draw users to your site begin to spend time where they already meet.

New York Times: Weary of Looking for Work, Some Create Their Own

A report from the New York Times on several entrepreneurs around the United States making the most of a largely barren job market.

Economists say there are some peculiarities to this wave of downturn start-ups. Chiefly, the Internet has given people an extraordinary tool not just to market their ideas but also to find business partners and suppliers, and to do all kinds of functions on the cheap: keeping the books, interacting with customers, even turning a small idea into a big idea.

The goal for many entrepreneurs nowadays is not to create a company that will someday make billions but to come up with an idea that will produce revenue quickly, said Jerome S. Engel, director for the center for entrepreneurship at the Berkeley Haas School of Business. Mr. Engel said many people will focus on serving immediate needs for individuals and businesses.

Think Vitamin: 15 Tips for Freelancers Starting Their Own Business

A generally helpful list of tips from Ed Raynham, particularly this one:

You should contact the customer on a regular basis (every 3 months if the job is over) to inquire how things are going. This will help to make the customer feel important and that you are still interested in their business even though the project is finished. It will also help to keep you in their mind for future projects. Try to avoid a sales push with every contact else this goodwill will be broken and they will dread your calls.

Jeffrey Zeldman: Recession Tips For Web Designers

Running a traditional business is like securing a political position in Chicago: it costs a fortune. That’s why bad times crush so many companies. But you are a creature of the internets. You don’t need an office to do great work. I ran Happy Cog out of my apartment for far longer than anyone realized. My clients, when they learned my secret, didn’t care.

Web design is a people business. If things are slow, email former clients. If you just lost your job, email former agency clients with whom you worked closely to inform them of your freelance business and find out how they’re doing. Best practice: focus the email on wishing them a happy holiday and asking how they’re doing. Let your email signature file tell them you’re now the president of Your Name Design. Leading with the fact that you just lost your job may earn sympathy (or commiseration: the client may have lost her job, too) but it’s not exactly a sure-fire project getter.

Shimon Rura: Working from Home: Why It Sucks

The reason I've included this article? It highlights the imperative need for in-person feedback. I take for granted how helpful this is in full-time employment. And if I ever go back to freelancing, this observation has changed my perception (positively) towards flying in to meet with every client at the start and throughout the project.

In an office you get feedback constantly. At the coffee pot in the morning, eye contact shows interest in your latest tasks, or nods express sympathy about difficult colleagues and bosses. When you have a question about something, your coworker’s eyes and facial expressions will tell you, consciously or subconsciously, if you’re sounding smart or stupid. Chances are, you depend on this feedback more than you realize. You need it both for work-specific communication, which is easy to see, and for maintaining your self-image, esteem, and motivation–which is harder to see because the mechanisms are subconscious.

There you have it. Take some time to peruse the articles I've linked to. Add a comment for other articles that should have been included here.

Poster officially on sale, and Kindle+Kiva giveaway

Posted: April 24th, 2009, 3:28pm CEST

Stack of freshly printed letterpress posters

Yesterday I finally retrieved a very large stack of letterpress posters, freshly printed and ready for shipping. More than half of the 350 available to the public in this press run have already been pre-ordered. Order yours here:

Also, the first 50 customers to order beginning today will be entered to win a Kindle 2 and $75 gift certificate for Kiva, which can be used to lend microloans to entrepreneurs in developing countries. One gift for you, and potentially many gifts for them. (The Kiva funds are perpetual -- as entrepreneurs repay their loans to you, you can reloan and reloan again.)

Total combined value: US $434. One winner will be randomly selected once 50 orders have been placed.

Posters will begin shipping immediately. $10 shipping to anywhere in the United States. $20 to Canada. $35 to any of these countries: Australia, Austria, Denmark, Finland, France, Germany, Greece, Ireland, Italy, Japan, The Netherlands, New Zealand, Norway, Poland, Singapore, Slovakia, South Africa, Sweden, Switzerland, Turkey, United Arab Emirates, United Kingdom. If your country is not listed, please contact me to add it to the list.

If shipping within Utah, use code UTAH at checkout to receive discounted shipping (5% off your order).

Additional detail photos available at my Veer portfolio.

The Fine Print No purchase necessary. To enter without purchase, send a postcard to PO Box 1525, Salt Lake City, Utah, United States. Entries must be received by May 31, 2009. Many will enter, one will win picked by random number. Void where prohibited.

Is it time to move beyond 960?

Posted: April 23rd, 2009, 6:35pm CEST

The new Typographica.org, which uses a width of 1040.

Lately I've been questioning if it isn't time to move beyond 960 for websites, and if so, what the ideal width may be.

Those of you frequenting this site for a few years may recall a similar quandary, "Optimal width for 1024px resolution?". In it, I proposed 960 as the ideal width for moving beyond 800x600:

I’ve been using 960 for some time now, as it’s slightly smaller than full width, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (imagine the grid possibilities).

Since then it seems 960 has nearly become the de facto standard for fixed-width designs on the web. A number of Photoshop, browser, and OS plug-ins default to it. There's even an entire CSS framework built on 960. (I should note 984 has also seen considerable usage, most notably Apple.com.)

Admittedly, I've not yet settled on an ideal width for 1280ish, and I'm working on only one site at the moment to inform my thinking about the topic. But I think we're at the point where it's time to talk amongst ourselves.

Before the flak begins flying from fixed-width naysayers, I remind you that I'm a huge fan of fluid designs with min-width and max-width limits, as evidenced by my Extensible CSS series and case study design for CSS Mastery. But I believe there will always be a need for fixed width, and frankly in many ways it's more practical than fluid width.

So what's the ideal width? I'm not sure yet. Let's figure it out together. Here's what I've got so far:

1020 is divisible by 2, 3, 4, 5, 6, 10, 12, 15 but not 8 and 16. It's not much wider than 960.
1040 is divisible by 2, 4, 5, 8, 10, 16 but not 3, 12, or 15. Yet it has a reasonable width that sits somewhere between the lower end of 960 and higher end of users browsing full screen (many don't, of course).
1080, which is what I'm taking for a spin with a site right now, is divisible 2, 3, 4, 5, 6, 8, 10, 12, 15 but not 16. It pushes the upper end of the width spectrum, and measure (line length) could become an issue if not dealt with appropriately.

Of course, there's probably a slew of other numbers between 960 and 1080 divisible by many of the widths listed above, so speak your mind about widths, measure, pros, cons, etc.

Design Considerations for Touch UI

Posted: April 21st, 2009, 5:16pm CEST

Gestural (touch) UI is gaining momentum as a suitable companion, and in some cases worthy replacement, to the traditional UI via peripheral device input.

Of course, with this momentum comes revised thinking about how we design for interaction. To this end, San Francisco-based Punchcut, an agency specializing in mobile design, threw together a very brief video demonstrating five considerations to keep in mind when designing for touch. (Beautiful job on motion design btw, guys.)

The more detailed article that preceded the video can be found here: Design Considerations for Touch UI.

Drummer Tony Williams: "Good Musicians Copy"

Posted: April 9th, 2009, 5:57pm CEST

Tony Williams, NYC 1965. Photograph by Francis Wolff.

Tony Williams, arguably one of the most influential and revolutionary drummers of the 20th century, clearly understood a concept that I tried to demystify, and probably fell short of demystifying, nearly 6 years ago. Published in June 2003, "Good Designers Copy, Great Designers Steal" was an attempt to describe the idea of becoming a better designer by dissecting, analyzing, and "copying" the works of other designers. (Sorry, you'll have to Google that article -- it's painful to link up at this point given its age...)

It was during our recent flight to Rome that I stumbled on the following, nestled toward the end of a very thorough article by John Ephland for Traps magazine (Spring 2009 issue). The text is formed from an interview with Tony Williams in October 1988. Check out how Tony explains it:

If you're going to pick just one style of playing and you can only play that way, that's what you want to do ... I don't discourage that. But I think that drumming is more important than style. When I've given lessons or clinics, I try to emphasize that learning how to play the drums is more important than having your own style. Really knowing what the drums can do and the scope and range of the instrument is more important.

He continues, explaining how he "set about religiously" to play other drummers' style in an attempt to understand the scope and range of his instrument:

You know the reason I play the way I do is because, when I first started playing, all I ever wanted to do was to sound like Max Roach, was to sound like Art Blakey, was to sound like Philly Joe Jones, was to sound like Louis Hayes, was to sound like Jimmy Cobb, was to sound like Roy Haynes. I really wanted to figure out why they sounded the way they did. I wasn't interested in my own style. So I set about playing like these guys religiously, and playing their style because it was just such a wonderful, magical experience. It was just a marvelous, wonderful feeling that I got when I heard these people and then I developed a way to sound like them, and to go about it. I mean, it was exciting to me to figure out how he did that.

Tony beat me to it by 15 years, but that's precisely the point I was hoping to make in my original article -- you become a good designer by familiarizing yourself with the methods and techniques used by those who are already good designers. Such is the advice Tony would give to emerging drummers:

I get guys coming up to me -- they just got a drum set; they've been playing maybe four years -- and they want their own style. They want to be expressive. I say, 'Well, then, if you want to be expressive, you've got to find out what the instrument will do. And to do that, you've got to go back and find out and get an idea of what's already been done.'

And to cap it all off, Tony's remarks conclude with this appropriate summary:

That's what the instrument's all about. It's the instrument that's more important. The quality and magic of the instrument are more important than you are.

That's what design is all about. It's the instrument of design that's more important. The quality and magic of what design can do are more important than you are.

Tony Williams died in 1997. I owe him a posthumous thank you for saying something far better than I could.

Letterpress poster: Pre-ordering now available

Posted: April 6th, 2009, 5:33pm CEST

Several of you asked for the option to pre-order one of my letterpress posters currently being reprinted. Over the weekend this option was provided to those on the notification list. The general public is now welcome to pre-order. (As of this writing, just over 100 of the 350 prints that will be available have been pre-ordered.)

Posters are being printed on the same paper and press (BjÃ¸rn Letterpress Studio), and your order will ship sometime in April 2009.

$10 shipping to anywhere in the United States. $20 to Canada. $35 to any of these countries: Australia, Austria, Denmark, Finland, France, Germany, Greece, Ireland, Italy, Japan, The Netherlands, New Zealand, Norway, Poland, Singapore, Slovakia, South Africa, Sweden, Switzerland, Turkey, United Arab Emirates, United Kingdom. If your country is not listed, please contact me to add it to the list.

If shipping within Utah, use code UTAH at checkout to receive discounted shipping (5% off your order).

Additional detail photos available at my Veer portfolio.

Roman Holiday

Posted: April 1st, 2009, 7:11pm CEST

At the hotel and during the combined 15-hour flight home, a couple hours of video from a Canon HG10 and a little Final Cut Express led to the creation of Roma Italia, a brief video synopsis of our 5-day stay in Rome.

Hope you enjoy it.

Exploring Cufón, a sIFR alternative for font embedding

Posted: March 19th, 2009, 6:00pm CET

Thanks to a tweet from Jason Santa Maria a few weeks ago (and his help since), I was pointed to Cufón, which "aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use."

I'll refer to these tests again in a minute, but feel free to jump ahead to these Cufón test pages that I've put together.

sIFR, as many of you are aware, is a means of replacing "short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems" using a combination of Flash and JavaScript. Shaun Inman, Mark Wubben, Mike Davidson, and several others put in many long hours developing and refining IFR and sIFR, and we all owe them our gratitude for moving forward in a big way the state of typography on the web. These efforts continue today, as evidenced by this Web Typography mini-site from a SXSW 2009 panel.

For many of us, however, the Flash part of these technologies makes it difficult to set up and use. (I personally have not opened Flash on my computer in literally 4 years, and I hope to keep that run alive.) Cufón, on the other hand, can be set up and run on your site in about 5 minutes. However, there are drawbacks compared to sIFR, which I'll get to towards the end of this article.

What we really need to be working towards as an industry is @font-face. However, despite good browser support, @font-face faces EULA (end-user licensing agreement) issues similar to Cufón and seems much more difficult to configure than Cufón because of the proprietary Microsoft .eot files required to make it work. For additional information on @font-face, see Jon Tan's Making Web Fonts Work and the aforementioned SXSW 2009 panel links.

Therefore, I personally see Cufón as an good interim step between sIFR and @font-face. Let's move on with getting it set up to use.

Setting Up Cufón

Here's how Cufón works:

Step 1: Download the Cufón script compressed or uncompressed.

Step 2: Upload the typeface of your choice using the Cufón generator, which will provide you with a second script.

Step 3: In the <head> of your document, add the Cufón script and the typeface script provided by the generator, such as:

<script src="http://cameronmoll.com/scripts/cufon-yui.js" type="text/javascript"></script>
<script src="http://cameronmoll.com/scripts/KievitPro-Regular_400.font.js" type="text/javascript"></script>

Also add this just before the closing </body> tag to avoid a flicker issue in IE:

<script type="text/javascript">Cufon.now();</script>

Step 4: Also in the <head>, indicate which HTML elements or selectors should be replaced with your typeface, such as:

<script type="text/javascript">
  Cufon.replace('h1');
</script>

<script type="text/javascript">
  Cufon.replace('h1')('h2')('blockquote');
</script>

Alternately, if you're using a JavaScript framework such as jQuery on the site where Cufón will be used, Cufón will take advantage of that framework's selector engine such that you can call out specific selectors like this: Cufon.replace('#nav a').

Or, if you're not using a framework, you'd reference these selectors using traditional (i.e. longer) JavaScript:

Cufon.DOM.ready(function() {
  Cufon.replace(document.getElementById('nav').getElementsByTagName('a'));
});

Step 5: In your CSS file(s), modify any text replaced by Cufón the same way you would any other text -- color: #333; or font-size: .87em; or text-transform: uppercase; and so forth.

And that's it. It really is as simple as that. Cufon is currently supported by IE 6/7/8, Firefox 1.5+, Safari 3+, Opera 9.5+, and Google Chrome. (See the documentation on GitHub for additional help, usage, and troubleshooting.)

Cufón Test Pages

Returning to the Cufón test pages I mentioned earlier, thumb through some of the samples to see FF Kievit Pro, Bickham Script Pro, Calgary Script, and Garamond Premier Pro rendered using Cufón.

Additionally, Cufón allows you to specify the units per em for which your typeface is rendered. a A lower value (e.g. 64 units per em) results in slightly better performance and smaller file size, but at the cost of rendering accuracy. On the unit quality test page, notice how poor the letterforms look at 64 units per em, compared to 256 or higher:

Drawbacks Compared to sIFR

It's worth pointing out Cufón is an emerging technology, though it is quickly evolving and improving. Because of this, there are several known issues or deficiencies, which include the following:

No text selection. This is a big one. Currently you can't select the text to do something simple such as copy and paste.
~~No a:hover state.~~ Update: :hover is now supported.
Older PostScript fonts on Mac OS X aren't supported. This is a weird one, honestly. However, you can convert these files into a compatible format using these instructions.
Letterform fidelity may be inferior to sIFR. Adjusting the units per em may overcome this. So far in my tests, letterform fidelity has been sufficient for what I need.
Typeface information (files) may be easier to thieve than with sIFR. See next section.
Other known issues I've not listed here.

EULA Licensing and Security

As of this writing, I'm in talks with type foundry FontFont, type vendor Veer, and Cufón creator Simo Kinnunen working through EULA (end-user licensing agreement) and security issues related to Cufón. There is a need to better understand what may be required by Cufón and its users to comply with type foundries' licensing -- or what alterations type foundries may be willing to make to their licensing -- to allow for font embedding technologies such as this.

The main concern from the perspective of the type foundry appears to be that the typeface script generated by Cufón could be used to reverse engineer the very typeface itself. Further, because this script is a simple JavaScript file, it's readily available to anyone for copying and downloading. The counter argument here is that the script generated by Cufón results in a proprietary format that no current software can make use of, except Cufón itself.

The good news? Our talks have been very positive thus far. Technologies such as this encourage the use of typefaces other than the standard set we're all used to (Arial, Georgia, etc.) inevitably could increase the demand for typefaces. Therefore, type vendors and foundries have a vested interest in seeing @font-face, Cufón, and similar technologies flourish. Additionally, Simo Kinnunen is ready and willing to make adjustments to Cufón as needed.

Optimism on the Horizon

All things considered, I'm extremely optimistic about Cufón. I'm hopeful we'll be able to work through licensing and security issues such that all of us can use it freely in our projects. I've already got plans for it in a project I'm currently designing using FF Kievit Pro, only a coded snippet of which I can show for now:

This site is expected to be translated into at least 10 languages, so you can imagine why Cufón could be a big advantage over traditional image replacement.

So, give Cufón a try and join in the discussion. You just might end up a sIFR defector, too.

Special thanks again to Simo Kinnunen and Jason Santa Maria for bringing me up to speed with Cufón.

The 5 P's of Twitter's runaway success

Posted: March 5th, 2009, 5:12pm CET

Hi there, respected Twitterer. Follow me at @cameronmoll.

Twitter, the social ______ application for which no one can accurately describe its purpose (except this video), became a runaway success last year. The San Francisco-based startup added 70% of its subscriber base in 2008 and is steadily growing in 2009, with an estimated 5,000 to 10,000 new accounts opened every day (source).

Actually, I think we enjoy claiming we can't describe what Twitter is, yet a closer inspection of it yields not only a better understanding of it but also why it's become so prevalent in the media lately. And when that kind of inspection occurs, it's not surprising to the inspector why Twitter is where it's at today.

1. Prudence. Twitter is solid proof that there is undeniable merit in doing just one thing -- as a business, as a strategy, as both -- and doing it really well. Users have 140 characters or less to share a thought, link up a URL, post a status update, or ask a question. That's it. Brilliant.

If Twitter lies at one end of the spectrum doing one thing really well, Facebook lies at the opposite end attempting to do all things well: status updates, networking, photos, videos, groups, etc. In terms of subscribers, Twitter's 6 million unique visitors lag far behind Facebook's 68 million (source). These numbers clearly indicate many web users currently prefer the everything-but-the-kitchen-sink utility offered by Facebook, but I suspect Twitter has the potential to not only narrow the gap but even outlast its Palo Alto neighbor by merely doing one thing superbly well.

...until, of course, we're over Twitter too and we move on to the next technology. See #3.

2. Pulse. I know of no more immediate way of gathering, monitoring, or responding to feedback about/for an idea, a question, a company, or an industry. Want to know what Twitter consumers are saying about Nike right now? How about the Lakers? Or photos for breaking news before any of the major media sources can report it? Or which shoes to purchase?

In fact, AdAge reports that Twitter is exploring even more ways of leveraging the Twitterverse for immediate feedback, enabling (from what I can gather) search.twitter.com to not only search previous tweets but also to generate new ones based on the search query.

3. Proximity. It seems with every new web trend or technology we gradually draw closer in virtual proximity to persons we admire and to the authors of the content we consume. First, it was the personal or corporate website with its distant, one-way consumption of information. Then came blogs and the ability to generate two-way conversation with the author by commenting on content. And now we have Twitter, enabling one to engage in tweets with Dave Matthews or to track down Shaq at a local diner.

4. Promotion. I've heard enough people complain there's no point to Twitter to come to this conclusion: You get back from Twitter what you put into it. Spend time and effort growing a network of followers, and soon enough you'll find Twitter to be a powerful promotion tool. For example, many of my initial letterpress poster sales back in December came as a result of my tweet, not so much because of my blog post. Additionally, I use automated tweets for Authentic Jobs as another means of fostering business.

Follow a regimen akin to Jack Humphrey's 90-10 rule, or whatever works for you, and you'll likely cultivate a valuable marketing resource.

5. Prominence. I'm certain I'll get flak for this, but it's worth not beating around the bush to just come out and say it. Twitter puts one's ~~ego~~ follower count front and center. In the heyday of blogging, one could quickly estimate and deduce -- whether accurately or not, foolishly or prudently -- the prominence and traffic of a blog based on the average number of comments on articles or the FeedBurner reader tally. These days it's follower count. It's unsurprising so many individuals and companies are sponsoring contests to drive follower count upward, whether for intrinsic gratification or for promotional purposes. See #4.

Granted, certain individuals such as celebrities will garner large quantities of followers regardless of what they tweet about, but for many Twitterers, it remains a challenge to constantly be acquiring new followers.

So, when scrutinized as we've done here, Twitter really isn't such a mystery after all, is it?

Recent job listings (and job search data)

Posted: February 25th, 2009, 5:17pm CET

I was reviewing analytics data for Authentic Jobs this morning, and some figures emerged that are remarkable, but also somewhat unsurprising:

For the same monthly period one year ago, visits to the site have increased by 45.9% and average time on the site has increased by 22.9%.
For the same annual period one year ago (technically two years ago), visits to the site have increased by 76.0% and average time on the site has decreased by 5.1%.

I say somewhat unsurprising because given the current economic climate, one can assume traffic to online job boards has increased in the last 6-12 months. Indeed, a recent report from comScore confirms this assumption: Job search ranked as the fastest growing U.S. online category in 2008. Had comScore's study included other countries, the same trend would likely have emerged.

Of course, Authentic Jobs welcomes any and all increases in traffic, and the site will continue to connect talented creative and web professionals with great work opportunities -- as it's been doing for nearly four years strong.

Some recent listings are highlighted below.

Full-time (U.S.)

Auburn, AL Front-end Web Developer at Politics4All
Cupertino, CA Sr. Web UI Engineer at Apple Inc.
Los Angeles, CA Flash Developer at HUGE
Palo Alto, CA Product Designer at Facebook
Golden, CO - Anywhere - Work Remotely Gifted Web Developer at RocketTheme, LLC
Washington, DC Production Specialist (Web/Multimedia) at AAAS
Lewes, Delaware Senior Web Designer at DecalGirl
West Springfield, MA Web Marketing Manager at Aspen Square Management
Lincoln, NE Interactive Operations Manager at Swanson Russell
New York, NY Web Designer at Six Apart Inc.
Eugene, OR Sr. Developer, Back-End at GarageGames
Philadelphia Web Designer at Happy Cog Philadelphia
Alexandria, VA Senior Frontend Web Developer at MPRI

Freelance

Anywhere Interaction designer at Sideshow
Anywhere Senior Designer Needed for Product Incubator at Jason Reed Web Design
New York, NY E-Commerce Web Designer at Bonobos

Post a job or find one at Authentic Jobs.

Speaking at HOW Design Conference in June

Posted: February 19th, 2009, 4:51pm CET

I've been reading HOW magazine on and off almost since I began my career as a designer 11 years ago. Every issue seems chock full of inspiring design, interviews with other designers I admire, and the like. Most issues land a permanent spot on my bookshelf.

For almost as long as I've associated myself with the magazine, I've had two wishes. These were never written down on paper. They existed only as an aspiration in the back of mind. The first was to have my work featured in a HOW design annual. The second was to speak at a HOW conference.

I have no idea the stars have aligned so perfectly in my favor, but this year I will fulfill both of those wishes. At the start of this year, one of my letterpress posters was recognized in the 2009 HOW In-House Design Annual.

In June, I will be speaking at the HOW Conference in Austin, Texas for the first time. The event will run from June 24â€“27 and will be held in the same venue as SXSW, the Austin Convention Center.

Highlights include sessions and speakers such as:

Print to Web Breakthrough
The Secret of Project Management for In-House Designers
Keeping Creative Control with Difficult Clients
Communicating Up, Down and All Around the Organization
10 Things You Didn't Know Fonts Could Do
Craft + Activism = Craftivism
Studio tours (frog design, Olive Interactive Design & Marketing, others) for pre-conference attendees
DJ Stout (Pentagram), Thomas Phinney (Adobe), Cynthia Rapp (Cartoon Network), Lia Braaten Hager (Proctor & Gamble), and nearly 50 other speakers

I'm incredibly excited. Register by April 1 and save $100. Hope to see you there!

20 tips for better conference speaking

Posted: February 16th, 2009, 6:05pm CET

View from on stage as I'm preparing to speak at An Event Apart New Orleans 2008.

I'll be straight up with you: I don't profess to be an expert speaker. I've had my share of presentations that have been total flops, along with some very successful ones.

But if anything, I've done quite a bit of speaking over the past four years (see the summary on my LinkedIn public profile), and therefore I've learned a few things about speaking along the way.

Below are 20 things I've learned. Though this list is geared towards one-hour sessions rather than panels and workshops, some of the same principles apply.

Preparation

1. The art of speaking is roughly 51% entertainment, 49% meaty content. Your primary responsibility is to entertain a room full of people. This doesn't necessarily equate to jokes and magic tricks*, but it does mean that the content of your presentation, and the delivery of that content, should be compelling and engaging. Bear in mind that sitting in a chair for a full day of presentations isn't the most enjoyable activity as an conference attendee. Keeping the audience eyes' on you rather than their laptops benefits both you and the audience.

2. Ask yourself: When attendees return to work and speak about you and your presentation, what do you hope they will say? What will be the key takeaways? How will they describe your presence on stage? Think ahead to what the discussion may be like among attendees as they return to work, and allow that to help inform your preparation.

3. To borrow a line from the An Event Apart Speaker's Guide, always err on the side of being more advanced. With Jeffrey Zeldman's permission, I've borrowed that line as well as this one:

One of our little backstage maxims is: â€œAttendees will apologize for not understanding a talk, but will want an apology for a talk thatâ€™s too basic."

Edward Tufte argues the same, as paraphrased by Phillip Kerman :

Match your presentation to the level of The New York Times or Wall Street Journal. Audiences donâ€™t suddenly become dumber when they sit down to hear you speak -- no reason to "dumb down" anything!

4. My personal rule of thumb when using slides: Roughly 1-2 slides per minute of speaking. This suits my style. It may not suit yours. You might show only 10 slides, you might show 100, or you might not have slides altogether. But when I'm estimating how much content I need for a one-hour presentation -- 45 minutes of speaking, 15 minutes of questions -- I usually end up with about 50-80 slides. Ultimately I run through my entire presentation a couple times the same as I'll give it on stage, but knowing roughly how much content I'll need before practicing is helpful.

5. Test legibility by sitting six feet back from your laptop display. It's not scientific, but it feels about the same as an audience member seated towards the back of a large room with an 18-foot screen at the front. If you can read it from six feet back, whatever is on screen is probably big enough.

6. Select a typeface appropriate for on-screen presentation. I hesitate offering too much advice here, as I've seen a variety of typography work in presentations -- big, small, serif, sans, etc. Be creative in your typeface selection, weight, and sizing, but also look at what others are using. Popular typefaces at the moment include Gotham, Helvetica Neue, and Archer. Just last week I saw Museo (free!) used in a presentation and it looked sharp on screen. Currently my typeface setup includes Warnock Pro, Gotham, and Helvetica Neue. A few samples are shown below.

7. If this is your first time speaking, expect to not do well. I'm finding that speaking is a skill that takes a very long time to master. Don't be overly concerned about your first engagement. Prepare really well, stay relaxed when delivering, and walk away knowing you'll do better next time. Chances are, things will go better than you expect them to.

Equipment

8. There is absolutely no reason in the world you should use anything other than Keynote. Period. I don't care if you're on a PC -- if you're serious about speaking, buy a MacBook just for presenting. There is an astounding difference (not an exaggeration) between the tools, canvas placement, typographic control, and overall aesthetics in Keynote compared to PowerPoint. Once you become familiar with Keynote, which isn't an arduous process, the productivity and just plain enjoyment you'll experience using it over PowerPoint is completely worth any switching costs.

9. Consider using iShowU for screencasts. If I plan to show interaction within a web app or use a video snippet for which there isn't a downloadable file, I do video screen capture using iShowU for Mac OS X. It's an inexpensive app with a good range of features.

10. Need a wireless remote? Go with the Logitech Cordless Presenter. This is all but the industry standard for presenting. It's a little more bulky than I'd prefer, but in terms of reliability and range, it's tough to beat this remote. (Don't use the Apple remote that came with your machine. It's unreliable and its range is short.)

11. Don't forget to travel well. This is a bit off-topic, but still relevant. If you're flying in, you'll probably be finishing up slides on the ride over, and often you'll have a lengthy flight. I try to be as comfortable as possible during flight, which is nearly impossible given the status of the airline industry these days. Among other advice I might give, one thing I've done is to try and combat the unpredictability of cabin temperature -- seems every flight is either too hot or too cold -- by dressing in clothing suitable for both temperature ranges, usually something like Columbia Omni-Dry pants and a Nike Dri-Fit shirt. Bring a lightweight jacket on board and you're set for just about any temperature, freeing you to focus on polishing your presentation. (Side benefit: If you spill a beverage in flight, synthetic clothing always dries faster.)

On Stage: The Presentation

12. Don't stray far from who you really are. Your presentation style should suit your personal style, whether that's relaxed, formal, snarky, etc. Dan Cederholm's style is laid back and casual. Jeff Veen's style is energetic and fast-paced. Hans Rosling's style is humorous and matter-of-factly. Elizabeth Gilbert's style is living-room-conversationly. All of these styles work well on stage because they reflect who the individuals really are.** Allow your unique personality to shine through on stage, and it's likely the audience will be engaged.

13. In the first 30 seconds you'll do more to establish your presence on stage than just about any other part of the presentation. Start strong and confidently. Be cautious not to lose the audience with personal or industry histories, unless completely relevant to your presentation. Dive right in and don't stop until it's over.

14. Always remain cognizant of audience interest. A good speaker can sense when the audience is engaged and when they're not, and carefully adjusts his or her tone, speed, and deliberate pauses throughout the presentation, and may even skip content when necessary.

On Stage: Q&A

15. Always repeat the question. There are two reasons for this: 1) so other audience members can hear the question, and 2) so those listening to the audio or video archived version can hear the question.

16. If the person asking the question has a puzzled look on their face when you're done answering their question, ask this: "Now, what part of your question did I not answer?" This is a technique I learned only a few months ago after watching perhaps the most skilled person I've ever seen do a Question & Answer session. I wish I would have known of such a question when I first started speaking.

17. Answer the question as best as you can, but don't linger on it. Realize you've only got a short amount of time to field questions. Even if you feel you've not adequately answered an audience member's question after a second attempt, mention that you'd be happy to talk after the session. Then move on to allow others to ask their questions. (You'll find there's an awkward feeling in the room when you and an audience member engage in a long conversation trying to adequately answer a question, and everyone else in the room becomes observers.)

Other Resources

18. Edward Tufte's Presentation Tips.

19. BusinessWeek: Deliver a Presentation like Steve Jobs.

20. Presentation Zen. Lots of resources here. Specifically, see Gates, Jobs, & the Zen aesthetic.

Fine Print *For the record, Jared Spool is about the only person I know who can pull off jokes, magic tricks, and great content all in the same presentation. **I know personally only two of the four individuals mentioned, so I'm placing a guess here, but I think it's a good guess.

Design's elusive "final ten percent"

Posted: January 29th, 2009, 5:01pm CET

With every design effort, there's a point at which we become satisfied with what we've produced, and we can either terminate the iterative process or refine one final time. I've yet to figure out what to call that point, but the best I've come up with is "90 percent".

Framed in terms of satisfying consumer needs and our own desires for a finished design, it's the point at which we can either stop at 90%, or continue on and get as close too 100% as possible. Often, I've found the detailing that comes after 90% can make a big difference in the overall success of the design.

Prior to posting the new design for Authentic Jobs, I knew I was at 90 percent-ish. I recognized it after a conversation with Suzanne the night before posting it. But I wanted to hear from others whether or not my assumptions about what was lacking were correct.

You all confirmed they were, and you pointed out a few other important things along the way. Here are a few of the common themes that emerged.

Search area needs finessing

Comments included adding more contrast and color to this area to help ground the page, making the category labels larger and allowing room for the addition of new categories, and allowing for filtering by location. In general, the response is positive to adding search and filter options to the site. (Um, duh, Cameron.)

"Post a Job" box needs better organization

Lots of dissenters here. From the color of the button to the organization of each element, in general the feedback suggests this box needs some serious lovin'.

More contrast needed overall

Image showing contrast between current site and new design

Several of you stated you'll miss the dark masthead, the leather texture, and the red/beige color theme. This one I don't totally concur with. I recognize the contrast levels are less elaborate in the new design, but for the most part I'm okay with that. After all, part of the aim of this new design is to reduce the contrast of the masthead and place more visual emphasis on the listings. I do agree, however, that it's not there yet.

And that returns me to the point of this post.

You won't ever reach 100%, nor should you try. I call that final ten percent "elusive" for a reason -- quality and utility will inevitably yield diminishing returns at some point. (See #2 on Eight Things.) But it is in your best interest to push through the final one, two or even nine percent after you've hit 90. The ability to recognize when you've hit 90 percent -- and knowing when to stop thereafter -- is a skill that I'm certain takes a career to develop.

Anyhow, thanks for the excellent feedback. I'm off to see how close to 100% I can get with this design. I probably won't post another screen until the new site is in public beta, at which point all of you will be invited to kick the tires on it.

Design Review: Your chance to critique me

Posted: January 27th, 2009, 4:34pm CET

Routinely I'm afforded the opportunity to put my money where my mouth is when it comes to redesigning vs. realigning. However, not since July 2004 have I done so in a forum so public as this. Here goes...

Through customer feedback and my own observation over the past several months, I've identified a number of enhancements necessary to improve the design and layout of Authentic Jobs, most notably the home page. These improvements, such as the addition of search and new categories, have also given way to an opportunity to update the identity and aesthetics of the site.

This new design is still a work in progress, but it's complete enough to begin gathering feedback. Given many of you are current or potential users of Authentic Jobs, I can't imagine a better audience to gather feedback from.

Feel free to comment on whatever, no holds barred (except the logo, which isn't complete enough yet to be included). At a minimum, I'd like feedback on:

Visual hierarchy -- is what's most important displayed as such?
Job categories (just above the first listing)
Typography -- size, color, weight, etc.
Overall look & feel

Lastly, how does this updated design address (or not address) your needs as a job seeker? As an employer, Is the purpose and function of Authentic Jobs quickly and easily discernible?

Please, with haste and earnestness, fire away.

(And if you're an employer, take advantage of promotional pricing through January 31: Use promotion code MOLL09 to receive $125 off the purchase price of a full-time listing. Use FRLANZ09 for $25 off a freelance listing.)

12 resources for getting a jump on HTML 5

Posted: January 14th, 2009, 6:15pm CET

Recently I've seen a considerable amount of press on blogs and such regarding HTML 5, "the 5th major revision of the core language of the World Wide Web" (W3C). I have virtually no experience (yet) with HTML 5, so as I jump on the bandwagon and begin familiarizing myself with it, I thought I'd share some of the resources I'm reading along the way.

So far from what I'm learning, the consensus among several of these articles seems to be this: The world isn't ready for HTML 5 at large just yet, but we can begin preparing for it by using common, semantic selector names (header, nav, section, etc.) -- or even new attribute names -- derived from HTML 5 within our HTML 4.01 or XHTML 1.x documents.

This is by no means an exhaustive list, just a start. In each of these you'll find other resources to help you dig deeper.

A Preview of HTML 5 by Lachlan Hunt. Start with this one. The fact that it was published a year ago, coupled with increased interest in and experimentation with HTML 5 recently, makes it feel less like a preview and more like a "here's what's just around the corner" primer.
W3C HTML 5 Spec. Like you'll totally read every word of this, right?
Preparing for HTML5 with Semantic Class Names by Jon Tan. A very thorough introduction, if not also the most well-formatted. "By using semantic class names, we give the information a semantic boost, and each chunk of related data is self-contained. However, it may have become obvious to some designers reading this that a side-effect of using this method, and eventually using HTML 5 elements themselves, will be lots of different content within containers of the same name."
HTML 5 differences from HTML 4. Not surprising: frame and frameset no longer allowed in HTML 5. Surprising: A document from the W3C that's actually fairly readable.
More on developing naming conventions, Microformats and HTML5 by Andy Clarke. Another article on the theme of transitioning to HTML 5 by using common, semantic selector names now. "If I could have one wish fulfilled today, it would be that all CSS framework developers would adopt the same naming conventions (and embed Microformats extensively too), so that people who are new to meaningful markup and CSS get off to the right start and use meaningful, logical rather than presentational id and class attributes." Includes a demonstration file.
Wikipedia: HTML 5 if Wikipedia is your sort of thing for stuff like this.
The Rise of HTML5 by Jeremy Keith. A behind-the-scenes for the UX London site, written in HTML 5, with plenty of accompanying links to HTML 5 resources. "It turns out that when it comes to the markup, HTML5 isnâ€™t all that different to what has come before. Itâ€™s all the DOM gubbinsâ€”which should allow a more declarative approach to building web appsâ€”that is the real hard stuff that requires browser support in order to work. If youâ€™re not interested in that side of things, much of the HTML5 spec wonâ€™t even be relevant to you."
An Event Apart and HTML 5 by Eric Meyer. Another behind-the-scenes for the new An Event Apart site. "I get the distinct impression that use of HTML 5 is going to cause equal parts of comfort (for the familiar parts) and eye-watering rage (for the apparently idiotic differences). Thus it would seem the HTML 5 Working Group is succeeding quite nicely at capturing the current state of browser behavior. Yay, I guess?"
HTML5 id/class name cheatsheet by Oli Studholme. To be honest, I don't fully understand this cheatsheet. Yet, that is. It'll come to me soon, I'm sure.
The Web Developerâ€™s Guide to HTML 5 by W3C. I've not read this one yet, but it's got colored boxes -- a rarity from the W3C. That must mean it's good.
Semantics in HTML 5 by John Allsopp. Published just last week, this article includes an alternate take on the methodology of HTML 5 altogether: "Instead of new elements, HTML 5 should adopt a number of new attributes. Each of these attributes would relate to a category or type of semantics. For example, as Iâ€™ve detailed in another article, HTML includes structural semantics, rhetorical semantics, role semantics (adopted from XHTML), and other classes or categories of semantics. These new attributes could then be used much as the class attribute is used: to attach to an element semantics that describe the nature of the element, or to add metadata about the element."
HTML 5 elements test by Bruce Lawson. Demonstrates how new elements in HTML 5 are rendered. Works only in the latest versions of most browsers, with an exception or two as documented.

Got any other resources? Please share.

Authentic Jobs promotion: $125 off with code

Posted: January 12th, 2009, 2:15pm CET

$125 off Authentic Jobs listings. Use promotion code MOLL09. Expires 31 January.

Authentic Jobs' annual New Year's promotion is now in effect, with a once-a-year savings opportunity. Post a job listing and use promotion code MOLL09 to receive $125 off the purchase price of a full-time listing. (Use FRLANZ09 for $25 off a freelance listing.) Offer expires January 31.

Of course, the money-back guarantee still applies, and others have found success, so toss in the discount and this is a great way to kick off the new year strong. And if you're on the other end seeking work in 2009, grab one of the available feeds, download the Mac OS X dashboard widget, or follow along in Twitter. (Don't forget the API and affiliate program, too.)

Happy new year, everyone. Here's to your success in 2009.

Framing your letterpress print

Posted: December 29th, 2008, 3:33pm CET

I realize the following is relevant to only a small number of you, but I figure this is the best place to post the information for collaboration and archival. And, for what it's worth, you might find helpful tips strung throughout the comments for framing other artwork.

If you've purchased one of my letterpress posters, below are a few options for framing it. Please add your advice for framing in the comments.

Option #1: IKEA frame with custom matte

This is the option I chose with my personal copy of the first poster, and it's also the option I'll choose with the latest one. It's relatively inexpensive and looks fantastic. The only requirement is that you have an IKEA somewhere close by, as IKEA doesn't offer online ordering for frames.

The final framed print looks something like this:

All it requires is an IKEA Ribba frame (19¾ in × 27½ in) and a custom matte about two inches wide:

If you're in the U.S., you can have a matte cut at any local or franchise craft store such as Michael's, Jo-Ann, Hobby Lobby, etc. I'm positive similar stores exist outside the U.S. but I'm not familiar enough with any of them to mention names.

Take both poster and frame in and have them do measurements, or feel free to use my measurements:

The matte I've used is from Jo-Ann. It's a black, semi-gloss matte with a subtle vertical grain. It's called Brushed Onyx, product #B8321 if you really want specifics.

Total cost for framing: About US$40 ($23 for the frame, $17 for the matte).

Option #2: Posterhänger

I've never used one of these, but I plan to when the right occasion comes along. Posterhänger by Jørgen Møller is a beautifully minimalist approach to framing. An aluminum bar at top and bottom with hidden hardware compliments a print quite well:

A 16" set, available in silver or black, will fit your poster nicely. And your wallet, too, at just US$16 for the set. Other sizes ranging from 12" to 72" are also available.

Of course, this isn't an ideal solution if you're concerned about protecting your print long-term, but it will certainly allow for closer examination of the print.

Option #3: Custom Framing

Naturally, this is a wise choice if you're interested in a quality result using the frame style of your choice. However, it's rather costly. You're looking at somewhere between $100 to $300 depending on the vendor and frame style. Many craft stores large and small offer custom framing.

Option #4: Your suggestions

Know of another option? Please leave a comment.

Randomness

Posted: December 24th, 2008, 5:15pm CET

Catching up on a few things spotted recently. Merry Christmas to all!

The Big Picture: The year 2008 in photographs

Boston.com's The Big Picture is easily the best thing to happen to blogging in 2008. There's also part 2 and part 3 of the year in photographs.

">Waveform wrist cuffs by Sakurako Shimizu " style="border-bottom: 0; display: block; margin-top: 10px;">

Ellen Groskorth, Veer:

This one is very cool. It is created using a laser cut of the waveform of a church bell. The artist is a Japanese artist by the name of Sakurako Shimizu. Other examples include giggles, yawns, sneezes created in necklaces, brooches and earrings.

Mike Precious, multimedia designer

Talent.

Ski Lodge for iPhone

Trail maps, snowfall, weather, live cams, and more (U.S. and Canada). That is, of course, if you're planning to carry your iPhone on the slopes.

CSS iPhone gallery

A gallery of iPhone-friendly mobile sites.

New Mint.com iPhone app

It's pretty basic, but perhaps that's the point -- at-a-glance info rather than fully featured.

24 ways: Making Modular Layout Systems

Jason Santa Maria's how-to for creating a modular layout similar to the one he uses on his site. I've not read all the articles, but 24 ways 2008 seems to have been one of the best years yet.

A history of the esszet or ß

I'm particularly fond of this character, probably because it sits atop my letterpress poster.

The German character ß includes the only surviving form of the long s in modern typographical usage. Since its sound is ss, it might be thought to be a ligature made up of ƒ and s, to be used at the end of a word or a syllable. But the matter is not nearly so simple.

RetailMeNot

One of the better coupon code sites around, this one includes sparklines (see Tufte) that indicate the success rate of the code over time. One of the more utilitarian implementations of sparklines that I've seen so far.

Optoma PICO Pocket Projector

I'm very intrigued by this, largely because I expect to see this technology built into consumer mobile phones by 2010, maybe even the end of 2009 (there are a few devices already being prototyped). The PICO measures about 2" by 4", weighing 4.2 ounces. Maximum 65-inch image and 480px by 320px resolution. David Pogue's review is positive overall.

...and that's a wrap

Posted: December 23rd, 2008, 4:33pm CET

As of this writing, there are just three of the 150 letterpress posters remaining. I'm honestly more than a little stunned by the interest from many of you in my work. Thank you. To have sold out in just over a week is pretty humbling. I've enjoyed shipping posters to various countries around the globe -- Japan, Norway, Denmark, Sweden, Netherlands, United Kingdom, Italy -- in addition to many in the U.S. and Canada. Signed and unsigned copies sold almost dead even, about 75 each.

Should I be willing to submit myself to another tortuous (though pleasurable) round of type-character designing, which edifice would you recommend be represented next? Anything around the globe is game, though preferably something of a different genre, i.e. not a temple.

Additionally, if you've received yours, I'd love to hear your feedback. Thank you again!

Letterpress poster on sale today

Posted: December 15th, 2008, 6:17pm CET

Note: This item is sold out but may be reprinted in the future. Enter your email address below and you'll be notified as reprints or similar products become available. (Your address will not be shared or used for other purposes.)

My 16"x24" letterpress poster is now available for purchase:

$75 unsigned
$100 signed (this is an updated price)

Only 150 copies total between the two are available. The first 100 orders placed on Monday, December 15 will be shipped on Tuesday, December 16. This is because I originally planned to print only 100 for purchase and have on hand shipping supplies for that amount, but there was enough interest to warrant an additional 50. The remaining 50 will be shipped beginning December 18.

Additional detail photos available at my Veer portfolio.

Job description interestingness at Authentic Jobs

Posted: December 11th, 2008, 4:32pm CET

I've plumbed through most of the listings currently on Authentic Jobs and have made note below of some of the interesting job descriptions, perk benefits, and stuff I personally find appealing.

But before that, another great testimonial. Dave Greiner, co-founder of Sydney-based Freshview, finally filled a position for the (pure awesomeness) Campaign Monitor email marketing app using Authentic Jobs:

After 6 months and finally accepting that we'd probably never fill the position, we decided to give Authentic Jobs a go. Within 2 short days we found the amazing interface designer we'd been searching for. We just relocated him to Sydney and couldn't be happier.

Congrats to Dave and the Utah-based-soon-to-be-Aussie individual who filled the position. (I don't know this individual, but Dave tells me he's from Utah.)

Full-time (International)

QS Quacquarelli Symonds is looking for a PHP5 Web Developer in London who will use Zend Framework to develop new applications. Starting salary is £22-30K.
This is really cool. U.S.-based Virginia Commonwealth University needs a Web Developer who will live and work in Doha, Qatar among six other highly ranked American Universities located together in a dynamic community called Education City. (I had to look this up: Qatar is an Arab emirate in Southwest Asia, bordered by Saudi Arabia to the south.)
Playfire.com, a gaming social networking startup in Soho, London, is seeking a Front-end Web Developer who will help build "the next big thing for millions of gamers around the world" as employee #7.

Full-time (U.S.)

Chicago-based CashNetUSA, which offers online payday loans (and whose business is likely to be very sustainable during the downturn), believes great individuals are "300 times more productive than average" individuals. They're seeking an above-average Web Designer / Front- end Developer.
TMX Interactive, who bill themselves as a "hybrid agency" offering technology, marketing, and creative services, needs a Front End Developer in Conshohocken (pronounced just like it's spelled), Pennsylvania. Position is alongside the same developer who helped build Authentic Jobs.
Southwest Florida Water Management District needs a Web Developer who embraces "the 'getting real' philosophy by 37signals."
And despite the downturn in the housing market, Florida Association of Realtors needs a Senior Web Designer to oversee the design and production of online media -- websites, e-mail newsletters, audio/video, and blogs.
Urban Outfitters, whose Electric Paper Airplane Launcher rocks, is looking for a Flash Developer in Philadelphia to oversee projects from start to finish for Anthropologie.com.
Clorox Creative Services, located in a town I visited frequently growing up (Oakland, California), is seeking a contract Web Designer to apply his or her unbridled awesomeness to the 35 products Clorox produces: laundry, cleaning, automotive, water filtration, cat litter, food, personal products and more. No monotony here.
RentJuice (love the name) is a pre-launch Internet company providing a platform for the apartment rental process. They need a Senior front-end designer/developer in San Francisco. The lucky hire will receive valuable seed stage equity package and competitive salary + benefits.

Plenty more interestingness (and job opportunities) at Authentic Jobs.

Four resources to consider when starting a project

Posted: December 11th, 2008, 12:53am CET

This morning, prior to a meeting with a client, I wrote down four resources I typically consider when embarking on a new project. I posted these to Twitter and received a few replies requesting I expound a little more.

Herein I expound.

1. Precedent: Who's done it already and how? I honestly can't recall a time a client has come to me with a new idea "that had never been done before" and that in reality had never been done before. Perhaps my experience is an anomaly, but every project I've ever embarked on had already been attempted, in full or in part, by someone else. This is almost always a good thing. It means there's a well of precedent to draw from, and that yields a few helpful questions: What have they done well in executing an idea similar to my client's (or mine)? What have they done poorly? And what opportunities does this create? What do we have to compete with?

2. External data. This is fairly straight-forward. What information is available about the market? The audience? The user? Trends? Where do I get this information? How much of this data will the client provide, and how much will I have to seek out on my own? How much will it cost me or the client to acquire the data? Costly names come to mind, such as Forrester, Gartner, and comScore, as well as inexpensive names such as Google Keyword Search. Even costly firms such as comScore provide free press releases containing valuable information.

3. Internal data & knowledge. Lots of options here. First, any company that has been in business for more than a couple years likely has plenty of data somewhere on hand about the market, its business, and its customers. If the company is diligent in housing this information in a shared repository, it's painless to acquire. If not, individual interviews with key employees who have gathered this data are vital. Second, nearly every company has one or more "experts" on staff. Arranging even just 30 minutes to chat with these experts can offer valuable business data for your project. Third, whereas external data is typically past-tense (already been gathered by someone else), internal data can be future-tense, gathered by staff or acquired (at a cost) through contract work per the demands of the project.

4. Educated guesses. As I said on Twitter, I often find this resource most valuable. After all, all the research in the world won't tell you how to design it. Good work requires guess work. This is why the field of design is often an attractive and well-compensated one -- it takes smart and talented individuals to gather the necessary data for a project, internalize it, and then give it life through our work by showing how we propose to meet the needs of users and the business, as suggested by the data. And that, my friend, requires plenty of good guesses about what we think will be the right approach. Data always has been and always will be a lousy designer. You, on the other hand, are not.

Even though I've been at this project thing for more than 10 years now, I still get butterflies in my stomach when starting a new project. So much is unknown. There are doubts about whether or not I can figure it all out and provide a solution that'll be successful. However, that's why I wrote down this list on a whiteboard today (we're beginning a new project). I've got some great resources to draw from. I just needed a little reminder of that.

FontBook, "the most complete digital type reference in the world"

Posted: December 10th, 2008, 4:03pm CET

I've had in my possession for some time now a copy of FontBook. Created by FontShop International, it's labeled as "the most complete digital type reference in the world."

They're right. I don't know of any other font or typeface reference as complete as this. It's even a juggernaut merely in weight -- at nearly 3" thick, the thing weighs more than 6 pounds (3kg). (Insert joke here about weight lifting.)

With 1,760 pages, 32,000 type samples from 90 foundries, and edited by Mai-Linh Thi Truong, JÃ¼rgen Siebert, and Erik Spiekermann, to say FontBook is an impressive piece of work would be a terrible understatement. It's far more than a reference. It's a means of discovering new and similar typefaces. It's sheer inspiration. I side with John Boardley (I love Typography) in his review of FontBook: "There really should be no studio without this in its library."

FontBook is arranged in nine chapters: Sans, Serif, Slab, Script, Display, Blackletter, Pi & Symbols, Latin Plus, and Non-Latin. Remarkably, next to nearly every typeface in the book is a list of similar typefaces, ala "If you like this, you might also like..."

For the typographer if your life, purchase a copy for him or her this Christmas. $99 is an absolute bargain for this massive volume of canonical reference, and giver and receiver alike won't be disappointed.

Below are a few photos of my personal copy (Flickr set). And for additional reading, see Khoi Vinh's "One Book to Specify Them All".

"Variety itself as a kind of consistency"

Posted: December 8th, 2008, 4:31pm CET

As one who works at an organization with nearly 3 dozen designers and websites and apps that also number several dozen, I feel comfortable admitting that the goal of striving for and maintaining visual consistency is often an elusive one.

Chris Pullman, Vice President for Design at the much respected TV station WGBH, has stepped down following 35 years of service. Upon leaving, he shared ten lessons he's learned over the years and gave Design Observer the privilege of publishing his remarks in full.

The entire article is worth a read, but #7, "Variety is the spice of life", is of particular interest to someone such as myself seeking a somewhat elusive goal. It's worth excerpting in full. Here it is.

When I came here in the early 70's the trend was toward monolithic design programs governed by a thick and sacred style manual. As I got to understand the business, this strategy seemed to me to make no sense for WGBH. With programming as diverse as The French Chef, NOVA and ZOOM, no one mode of visual expression could logically suite this range of content. It occurred to me that in fact variety itself can be a kind of consistency. But when the visual expressions of a company are always and rightfully different, you have to have some other constant that binds the work together, something that lets individual expressions be different, but makes them recognizable as a family of related materials. The goal in this game is to strive for the smallest number of constants and the largest number of variables. And you have to turn to non-visual sources of consistency.

So, soon after I got here, I proposed that our design team adopt a set of nonvisual criteria to define "good design" without resorting to the normal formal jargon. If you and your client could answer "yes" to the following questions about a solution, then it probably is a good piece of design:

Is it clear? Can I understand what it is, can I read it, can I sense its purpose?

Is it accessible? Does it engage me, does it invite me in, is it easy and intuitive to use?

Is it appropriate? (to its budget, to the amount of time available to make it, to the language style and level of the audience, to the medium, to the objectives of the project, and to the family of materials it will join, etc.)

A final measure, and perhaps the key measure in a business where variety is the norm, is quality. "Of the highest quality" does not mean expensive. It means thoughtful and well-executed in its genre. If all these things are present in a project, then it is likely to be successful, from a design point of view, and otherwise.

Key observation for me: Perhaps "does it look similar?" isn't always as important as "is it clear?" or "is it appropriate?". Thank you for sharing, Chris.

Letterpress poster available December 15ish

Posted: December 4th, 2008, 3:57pm CET

I'm going out on a limb here by posting a date(ish), so don't hold me to it if things go wonky. Files were sent to Bjørn Letterpress over the weekend, so I feel confident announcing December 15ish is the date my newest letterpress poster will be available for purchase, just in time for Christmas.

This poster was handcrafted character by character over the course of roughly 100 hours. Characters from the Bickham Script Pro, Engravers MT, and Epic typeface families form the edifice featured in the artwork, the Salt Lake Temple. Each poster is printed on Crane Lettra Pearl and letterpressed by Bryce Knudson of BjÃ¸rn Letterpress in Provo, Utah.

Getting to done was a much greater challenge with this one than the last given the complexity of doing an entire façade. Some details took hours to complete. The keystone that crowns each window alone took more than three hours as I struggled to find the right combination of characters to represent it.

In the end, I settled on a combination that didn't accurately represent the actual keystone, but instead was an interpretation of it that was in line with the rest of the poster's style.

And here are the actual doors represented in the snippet above:

This won't be a limited-edition run like the last one, which means I may print more in the future. But don't plan for it. If you're serious about purchasing a copy, watch this space, follow me on Twitter, or sign up to be notified by email on the shop page. The last poster sold out within 48 hours, and I suspect this one may sell out quickly, as well. 100 copies will be available, unsigned ($75) or signed ($125). As soon as 100 copies total (between the two) are sold, the item will be sold out.

Lastly, if you're interested in learning more about this design technique, see Techniques for designing with type characters.

On the value of candor

Posted: December 3rd, 2008, 11:28am CET

About a year after starting college, I was settled on the idea of majoring in music, specifically music composition. It was the perfect blend of two passions of mine. The first was drumming. The second was a long-standing love affair with film scores. James Horner, John Barry, James Newton Howard, Alan Silvestri, and John Williams were just a few of the composers I grew up listening to. To become one of them was the impossible dream. In reality, I'd done a little composing prior to college, so it didn't seem entirely impossible.

There was, however, a rather behemoth obstacle standing in my way, and that was the requirement of percussion performance and recital before I'd need to concern myself with composition. See, I grew up playing on a kit, but I'd done very little percussion work -- timpani, glockenspiel, marimba, etc. Any percussion major will tell you one doesn't get a music degree without mastering more than just the kit.

I was fortunate enough to have a willing yet demanding percussion teacher during my pre-major courses. After several weeks struggling through the marimba and countless paradiddles and double flams on the snare, I'll never forget the day my teacher put it straight up for me:

Cameron, you better think seriously about another career, because you're gonna have a tough time majoring in music.

That was a blow that was almost too tough to take. His remarks sank in over the next few days. I came to see his point of view. Soon I found myself in another major.

Would some say I gave up without a fight? Sure. But I don't believe I did. In fact, because of my teacher's candor and the ensuing switch to another major, I eventually found myself on the path that has lead to where I am today. I have absolutely no regrets or complaints about the cards I've been dealt in life. I like to think I'll still compose music for films someday. But back then, the timing wasn't right, and I wasn't qualified. Maybe some day.

I've reflected a lot on this experience lately for some reason. Maybe it's because I find myself answering one question more than others in email and in Q&A following presentations, that of becoming a better designer. Among the many answers I've offered, I think I'm coming to terms with adding another: "Maybe now isn't the time. Maybe you need to think about another career."

A harsh answer? Yes. One I'm not even comfortable delivering. But maybe, just maybe my candor -- when appropriate and justified -- will lead individuals down a path that would suit them better anyway. After all, I look back now and am entirely grateful for the honest criticism my teacher offered that day. Perhaps I owe others the same degree of honesty.

Why thinking in the shower may be an ideal model for "creative pause"

Posted: November 12th, 2008, 3:53pm CET

Let's be honest: Who doesn't profit from thinking in the shower?

I imagine we'd be hard-pressed to find anyone reading these words who hasn't had an epiphany, big or small, under the cadence of falling water.

There's something about showering that tends to spawn new ideas which may not occur otherwise. And the frequency with which this occurs seems to suggest that perhaps the occurrence isn't merely happenstance, but instead a decent model for what has been called "creative pause" -- the shift from being fully engaged in a creative activity to being passively engaged, or the shift to being disengaged altogether.

Edward de Bono, who may have first coined the phrase, describes creative pause as a deliberate, self-imposed pause to consider alternative solutions to a problem -- even when things are going perfectly fine -- for "some of the best results come when people stop to think about things that no one else has stopped to think about" (Serious Creativity: Using the Power of Lateral Thinking to Create New Ideas). He suggests these pauses can be as short as 30 seconds.

In his paper for International Journal of Psychoanalysis, Professor Lajos SzÃ©kely describes creative pause as follows:

The 'creative pause' is defined as the time interval which begins when the thinker interrupts conscious preoccupation with an unsolved problem, and ends when the solution to the problem unexpectedly appears in consciousness. ("The Creative Pause", 1967)

These two descriptions of creative pause suggest that deliberate interruptions, whether short or an unknown period of time, may be helpful to problem-solving.

While showering is often a daily, scheduled interruption, it's an interruption nonetheless, and it's deliberate in the sense that it's self-imposed. But aside from the obvious that showering is a pause to another activity, following are some additional observations about why showering often yields unexpected ideas and creative thinking, and why it may be an ideal model for creative pause in general.

There's little opportunity for distraction. The confinement produced by the physical environment of a shower results in isolation from work materials, digital devices, and social interaction. You have no choice but to allow yourself to become engaged in a new activity in solitude, while either thinking freely about something entirely different or continuing previous thought without distraction.
Minimal mental engagement is required for the the task at hand. The monotony and nearly subconscious nature of scrubbing, rinsing, and washing frees the mind to focus on things other than the physical activity of showering. You become preoccupied with entertaining yourself mentally.
Showering creates a "white noise" effect. Though Suzanne and I never chose to use a white noise machine with any of our infant children, some parents swear by them. This is because white noise "can aid concentration by blocking out irritating or distracting noises in a person's environment" (Wikipedia). In the case of an infant, the goal is typically sleep. In adults, however, the goal may be to better focus on the problem and its solutions. Water that is sprayed from a nozzle and falls to the ground may result in a white noise-like environment.
A change of scenery sets the stage for the unexpected. Merely changing your view and perception of things sometimes results in new thinking. With showering, the change is the location, temperature, attire (or lack thereof), and the addition of water. Coincidentally, the solution for positioning mirrors on the Hubble Telescope during a 1993 servicing mission was conceived by electrical engineer James Crocker as he was showering and observed "European-style fixtures [that] included a shower-head on an arrangement of adjustable rods" (The Hubble Space Telescope Servicing Mission, Joseph N. Tatarewicz, pg. 376).

Of course, few of us enjoy the convenience, time, or even desire to hop in the shower any time we're struggling with a challenging problem or want to think about the problem differently. But these observations suggest a model for other activities that may yield similar results if similar criteria are at play:

Distractions are minimized, including noise
The body is engaged in a monotonous, mundane, or repetitive activity, freeing the mind to think about other things
The environment is changed

A number of activities similar to showering come to mind, but I'll refrain from mentioning any to let you do the talking: How do you achieve creative pause?

(For additional reading, see Eric Karjaluoto's article for .net magazine "Beat the creative block" (PDF).)

"Act Well Thy Part" and a letterpress poster update

Posted: November 7th, 2008, 10:03pm CET

Those of you who enjoyed the letterpress poster I put up for sale a couple months ago might also enjoy this: Co-worker John Dilworth, a very soon-to-be MFA graduate, has posted â€œAct Well Thy Partâ€ for sale. Available in a limited edition of 100 (18" x 24"), this image is printed on Entrada Natural fine art paper by Fine Arts Gallery and Framing in Ogden, Utah.

As for the significance of the image, John explains:

The geometric figures were arranged in the format of a magic squareâ€”the number of sides on each shape added up in any direction will always equal 18. The symbolic nature of the geometric shapes as well as the inscription help to communicate a simple and profound message: we are all unique, with unique abilities and skills, and we each need to act out our part to the best of our abilities along with others to accomplish a greater good.

Speaking of posters, I was on the phone with Bryce Knudson of BjÃ¸rn Press earlier this week. I can't say a whole lot yet, but suffice it say that if things go as planned we'll be doing a second run of my poster, with an altered design, and ready for shipment by Christmas. If you're interested in purchasing a copy, send me an email and I'll put you on a mailing list if/when it's ready.

Veer and Authentic Jobs, sitting in a tree

Posted: October 23rd, 2008, 9:19pm CEST

Screen showing Authentic Jobs listings now appear on Veer.com

I'm super ~~pleased~~ giddy, really, to announce Veer -- the place for elements of creativity -- as Authentic Jobs' newest partner. Veer Ideas, which was launched several months ago as the hub for creative professionals to connect, share, and explore within Veer, now includes a Jobs section powered by Authentic Jobs.

I've known a few of the talented individuals at Veer almost as far back as the launch of Veer.com, and there has been plenty of cross-linking between the two of us since then. This latest development is a huge leap forward in our relationship, and it's a textbook example of pushing an API to its limits to create a great, off-site user experience.

As a reminder, use promo code MOLL31 and receive 30% off the purchase price of a full-time or freelance listing through October 31. This is a great opportunity to take advantage of the increased exposure for your listing provided by Veer Ideas.

(Hat tip to Myles Grant, the powerhouse behind Authentic Jobs and its API. The API is open to pretty much anyone, btw. Feel free to request a key.)

Linkification, part II

Posted: October 23rd, 2008, 5:16pm CEST

Simmy's tweet yesterday exposed a scenario we all encounter:

What are the best practices for including or excluding punctuation within an anchor tag?

Here's an example:

Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored â€œJavaScript and screen readersâ€.

Which of the following is the proper way to link up the article, and why?

A) Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored â€œJavaScript and screen readersâ€.

B) Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored â€œJavaScript and screen readersâ€.

C) Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored â€œJavaScript and screen readersâ€.

D) Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored "JavaScript and screen readers.â€

E) Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored "JavaScript and screen readers.â€

F) Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored "JavaScript and screen readers.â€

Study the differences closely, and then cast your vote (or suggest an alternative) with a supporting argument.

Fifty People, One Question: Restored

Posted: October 20th, 2008, 5:27pm CEST

Prior to a conference in New Orleans earlier this year, I arranged a dinner with a few acquaintances I had made through a post on this site. My intent was simple: Converse with NOLA locals to understand what life was really like for web professionals in the area.

We dined at Brennan's Restaurant. The cuisine was fabulous. The conversation was stirring. Hearing first-hand accounts of the devastation and recovery during and following Hurricane Katrina was both moving and inspiring at once.

Among the wonderful individuals accompanying me that evening was Benjamin Reece, a self-described "proficient designer, indie filmmaker, adequate photographer, and dabbling musician." What Benjamin didn't tell me that evening is that his indie filmmaking skills are phenomenal.

Left to right: Me, Yasco Sulejmanagic, Benjamin Reece, Jonah Langenbeck, Jacob Sibley.

One of Benjamin's recent projects is "Fifty People, One Question: Restored". The idea is simple: Ask 50 people a stimulating question. Record their responses. The result combines cinematography, music, editing, and human emotion to produce one of the most compelling, well-produced indie videos I've seen in recent memory.

Remarkably, the video was shot entirely with an amateur-grade Canon HV20 camcorder -- ~~the same one I own~~ (correction, I own the HG10) -- but with a 35mm adapter and Nikon lens. Music is by Four Tet. Opening song is "Slow Jam" available at iTunes and Amazon.

But the real excuse for this post? Proof that I knew you before you were big in Japan, Benjamin. Rock on, bro. Or film on, that is.

Authentic Jobs promotion: 30% off with code

Posted: October 16th, 2008, 6:36pm CEST

30% off Authentic Jobs listings. Use promotion code MOLL31. Expires 31 October.

As the owner of a job listing website, I can certainly empathize with other business owners weathering the current economic downturn. Authentic Jobs wants to help. If your plans call for finding and hiring great talent, post a job listing by taking advantage of promotional pricing at Authentic Jobs: Use promotion code MOLL31 and receive 30% off the purchase price of a full-time or freelance listing. Offer expires October 31. (Yes, the money-back guarantee still applies!)

And if you're on the other end seeking work, grab one of the available feeds, download the Mac OS X dashboard widget, or follow along in Twitter.

Ten

Posted: October 2nd, 2008, 3:55pm CEST

10 years ago today I married an incredible, beautiful woman. Those of you who know me for who I've become and what I've accomplished have her to thank for it. Happy 10 years, Suzanne.

Speaking at WordCamp Utah this Saturday

Posted: September 26th, 2008, 5:16pm CEST

Just a quick note that I'll be speaking at WordCamp Utah, the road show for WordPress users and friends of, this Saturday, September 27. WordPress founder Matt Mullenweg will also be present, among a lineup of reputable, mostly local speakers.

Registration is just $20. The event will be held at the Novell campus in Provo, Utah. Hope to see you there.

New from Mister Retro: Permanent Press PS filters

Posted: September 23rd, 2008, 6:27pm CEST

If you're keen on making your flawless photography and carefully crafted typography look like a cheaply printed handbill or gig poster (who wouldn't?), you best be checkin' out Mister Retro's Permanent Press Photoshop filters.

Four years ago I reviewed Mister Retro's Machine Wash Photoshop Filters as part of my Wicked Worn series. The aptly named Permanent Press filters fall into the same category as Machine Wash and fit nicely with the Mister Retro line of distressing software and vintage merchandise.

Much like Machine Wash, Permanent Press is really easy to use. Download and install the filters package, open up your artwork in Photoshop, and then open the Permanent Press filters from the Filter menu. A dialog box opens with preset filters and the ability to adjust the offset of the plates, halftone dot shape, ink viscosity, and much more.

Using the photo from Friday's off-topic post about drum kits, following are several examples of the filters. All of these filters were used with their default settings.

Original photo

CMYK Pro filter

Concert Poster filter

Halftone Spot Two filter

Newspaper filter

Printed in Taiwan filter

Darkroom filter

Text and illustrations can also be modified with effects such as intentional misregistration of colors, halftone scaling, and more. Here are a few samples from the Mister Retro website:

Permanent Press filters can be purchased and downloaded from Mister Retro for just $99.

Got drum? Pimp it.

Posted: September 19th, 2008, 10:08pm CEST

Okay, so this is totally off-topic, but hey, it's Friday.

Some of you know I was an avid drummer growing up. I haven't played much at all the last 7 years, but I'm finally diving back into it after buying a replacement kit and cymbals over the last couple years.

I know some of you who read this site also drum. If you've got a drum kit, post a photo here with specs. Or, if you don't play but have a friend who does, forward this along. Let's get a good variety of kits represented in the comments.

Here's my kit:

Kit: Yamaha Stage Custom. 10" and 14" toms, 22" bass.
Cymbals: Ziljian 20" A Medium Ride, 20" Ping Ride, 18" A Medium Thin Crash, 8" A Extra Thin Crash, 14" A Custom Hi Hats. Sabian 16" AA Thin Crash.
Stool: Pearl Speed Saddle.
Sticks: Vater Teardrop, Zildjian John Riley Concert Jazz.

Your turn. Feel free to use img and ul in the comments.

Update: Sorry about that, didn't realize img was disabled for comments. It's enabled now, but please post your image at 320px width or less. (Feel free to link to a larger image.)

FAQ: How to convince my boss to let me attend a web conference?

Posted: September 17th, 2008, 6:55pm CEST

Q: I am a course developer for a university. I am interested in attending An Event Apart and need to justify to my supervisor why this conference would be really great for me and the university. I have explained that the learning more about standards-based HTML, CSS and accessibility are a must as an employee of a state university, and that some of the best creative minds in the world will be speaking at the conference. However, my boss would like to know how this conference would benefit me and my department in terms of creating instructional websites. I was hoping you might be able to add deeper insight to my case?

A: Conferences such as An Event Apart do indeed bring together some of the best minds in the web world. I remember my first web conference in Seattle seven years ago. I can recall vividly much of the content that was presented, and to this day I can honestly say it has still influenced my work as a designer.

I take a special liking to colleges and universities, having worked with several previously a freelance designer -- Michigan State, University of Texas, Hiram College, and a couple others. I understand the opportunities and challenges they and you face.

Your question about how an event such as this would would benefit you and your department is not an uncommon one. Your boss is justified in being concerned about budget and time away from work. Overall, this event (or just about any other) will probably cost you roughly $2500 for flight, hotel, and registration, and you'll be absent from work at least three days.

On the contrary, look at things from the perspective of your users: the students and faculty. I can recall what it was like to be a student using technology as both a hinderance and an aid to my education. What frustrated me then as a web user/student, and what still frustrates me today are user experiences that are less than optimal or desirable.

Consider the following photo showing a gas pump "interface". Ever seen and used a pump like this? Sure you have. You know how it works -- you pull up, you swipe your credit card, and what's the next thing you have to do before pumping? Choose a grade or rating. Notice the usage pattern of this pump and where people have tried selecting a grade ("85") vs. where the actual button ("Push") is located to start pumping?

Gas pump interface showing grade sticker worn out from finger presses with smaller start button to the right

Contrast that with this second gas pump. Notice the difference? The grade label and the start button are the same interface element. Imagine the hundreds of people that use a single pump in a given day. Multiply that by the number of the pumps in your city, and you're in the hundreds of thousands of uses in a single year.

Gas pump interface showing the grade sticker that also functions as the start button

Conferences can teach individuals how to avoid blunders like the first gas pump. It's all small thing, right? But multiply that by hundreds of users using dozens of pumps each day and your "insignificant" interface deficiency is no longer so insignificant. So for me, the real value in continuing education is not so much in the HTML/CSS instruction -- though these things are certainly important -- but rather in learning how to creating user experiences that are efficient, meaningful, and pleasant. (Coincidentally, the gas pump example above is one I use in my Good vs. Great Design presentation when speaking about machine efficiency vs. user efficiency.)

In the end, $2500 and three days of missed work seem to me a very small price to pay to help my users enjoy better experiences online.

FAQ: How to convince my boss to let me attend a web conference?

Posted: September 17th, 2008, 6:55pm CEST

In the end, $2500 and three days of missed work seem to me a very small price to pay to help my users enjoy better experiences online.

Job description interestingness at Authentic Jobs

Posted: August 28th, 2008, 4:54pm CEST

So, this month I figured I'd do something a little different to expose some of the great job opportunities found at Authentic Jobs. I've plumbed through most of the listings currently on the site, and I've made note of some of the interesting job descriptions, perk benefits, and stuff I personally find appealing.

Full-time (International)

Not only is it probably the best email campaign software available online, but Campaign Monitor also offers one of the most enjoyable user experiences I've had with any web app. They're seeking a Web/Interface Designer in Sydney, Australia, one who's passionate about continuing to create enjoyable user experiences.

Full-time (U.S.)

Quiksilver is seeking a Graphic Designer in their internet marketing department in Huntington Beach, "the largest stretch of uninterrupted beachfront on the West Coast" (H.B. City official website).
TripAdvisor, which Suzanne and I are using to help prepare a possible trip to Europe next year, needs a Lead Web Developer in Boston.
Located in downtown "Nashvegas", paramore|redd needs a Designer/Developer with a sharp eye for design and the ability to code XHTML/CSS like a champ. Send portfolio work to canihazjob [at] paramoreredd.com.
HUGE is seeking an Art Director in Los Angeles who will work hard with a great lineup of clients, and then play hard with 15 paid days off, 10 company holidays, and your birthday off.
I'm especially fond of university websites, having designed a few myself, so it's a pleasure for me to encourage you to head over and apply for Web Adminstrator/Developer position at New York University.
Best Buy needs an Associate Creative Director for bestbuy.com -- a pretty prominent position, IMO -- for a variety of efforts: directing internal and external resources, leading brand positioning, assembling and assigning team members, and more. Position is in Richfield, Minnesota.
Cisco Systems (San Jose, CA) is looking for a Frontend Engineer with expert knowledge of CSS1 through CSS3(!), among other things.
JavaScript guru? Apple needs a UI Engineer.
Chronicle Books, an independent publisher in San Francisco, is looking for an Interactive Designer with wizardry in the development of web pages, Flash promotional movies, email newsletters, banner ads, blogs, landing pages and mini-sites. (Whew!)
Merge (Greenville, South Carolina) wants to find a Web Designer Extraordinaire with a "portfolio that would make your mother proud" and one who is competitive enough to endure the "mandatory Nintendo Wii bowling tourneys."
UnitOneNine needs a Rockstar Designer in Chicago, and this pretty much sums it up: "If you're currently at a job that doesn't have much room for freedom in design, office environment, or just being able to wake up late and come to the office when you want, contact us."

Post a job or find one at Authentic Jobs.

Beethoven's Heiligenstadt Testament

Posted: August 20th, 2008, 4:57pm CEST

In Beethoven's Heiligenstadt Testament: A Study in Capability vs. Capacity, I explore what I consider one of Ludwig van Beethoven's greatest "works" and how it helps answer the question, "What does it take to go from good designer to great designer?" (More about the layout of this article here.)

Upcoming speaking events

Posted: August 12th, 2008, 3:19pm CEST

So, I began 2008 with a goal of minimizing my travel this year following two years of continuous speaking events, and I've done a pretty good job of sticking to that goal. I'll wrap up this year with a couple events in Utah, a web radio interview, and another appearance at An Event Apart.

AIGA Salt Lake City August 14th, 7pm This event will be held just across the freeway from me at the Art Institute of Salt Lake City (Draper, Utah). I'll be speaking on striving for design excellence individually and as a team. Admission is $5 for students and AIGA members, $10 for guests.
Couch Cast web radio interview August 18th, 12pm MST Anyone is welcome to listen live or call in by dialing (347) 324-3797 during recording.
WordCamp Utah September 27th To be held in Provo, Utah with WordPress founder Matt Mullenweg and others. I'll be presenting Good vs. Great Design.
An Event Apart Chicago October 13th and 14th I'll be speaking on a new topic, The In-House Designer. Use promo code AEAMOLL and save $50 on registration.

Linkification

Posted: July 31st, 2008, 5:41pm CEST

This is something that's been on my mind for some time now, probably a few years:

How do we select the particular words that are linked within a sentence or paragraph, and does it matter for the user?

Here's an example:

John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

How would you choose to link that up, and why? Is one more "effective" than the other, however you define that?

A) John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

B) John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

C) John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

D) John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

E) John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

F) John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

G) John Coltraneâ€™s 'A Love Supreme' is on sale at iTunes for just $7.99.

Cast your vote (or suggest an alternative) with a supporting argument.

The In-House Designer

Posted: July 29th, 2008, 5:31pm CEST

An Event Apart Chicago is just a few months away, and I'll have the privilege of speaking on a brand new topic, "The In-House Designer":

The fundamental principles of design remain constant irrespective of organization size, technical discipline, and the like. Yet within larger organizations, the dynamics of applying these principles, the ability to produce quality output, and overall job satisfaction are a challenge at times. Learn how to hone your technical skills, and, more importantly, your soft skills, to effectively grapple with the politics and red tape that are common to larger organizationsâ€”or, for that matter, to client services work.

In my mind, this is a subject that's long overdue for being addressed in conferences, and I'm excited to take a shot at addressing it.

But I'd like your help. What are the issues common to "larger organizations"? I'd be willing to bet the majority of you reading this work at companies larger than most agencies and startups and therefore have experience and an understanding of the challenges I speak of above.

So, help me start a list of things I may address in the presentation. I'll start:

Uninspiring workspaces
Passionless employees
An abundance of paperwork needed for anything and everything
Legacy methodologies (e.g. waterfall software development)
...

What can you add?

Review: SumoSac lounge seat

Posted: July 22nd, 2008, 5:34pm CEST

Readers who've visited this site for a few years may recall the review I did of the Sumo Omni bean bag chair. Once again, Sumo contacted me and offered to send a sample for review, and I agreed.

What I wasn't prepared for, however, was the ginormocity of the thing. I came home to the largest and heaviest package I think I've ever received, and inside was a SumoSac.

Unlike the Sumo Omni, the SumoSac contains "shredded furniture grade urethane foam" which creates a very soft sitting space that can be reshaped to your liking. It ships vacuum-compressed and looks like a "giant brain" as my sons described it:

Slip on the cover and begin separating the foam as if picking apart a giant loaf of bread. Within a day or so, the foam will expand to fill the cover.

For those of us here in Utah, lounge seats of this kind are nothing new. LoveSac, a competing manufacturer, was started right here in Utah and essentially created the U.S. market for large, foam furniture. What sets the SumoSac apart from LoveSac, however, is cost. The SumoSac is about one-third the price of a LoveSac of similar size, and yet the quality and comfort seem comparable to that of a LoveSac.

Perhaps the most enjoyable thing about SumoSac is versatility. It sits in our living room as a comfortable place to land for home bodies and guests, serves as the perfect landing pad at the bottom of stairs for stunts in a house full of boys, and can be transported (albeit not easily because of its weight) for other uses. In fact, on Saturday we dragged it out back for a late-night movie on the lawn.

SumoSac is available for purchase currently only in the U.S., while the Sumo Omni can be purchased in the UK and Australia.

Randomness

Posted: July 21st, 2008, 5:52pm CEST

A conglomerate of news, linkage, and some inspiring stuff I missed while I was away.

"Open Range" in Print August issue

I'm quoted in the August issue of Print magazine. It's brief, but hey, I'll take it.

The World Without Us by Alan Weisman

I've been enjoying this book on/off in audio format (available in iTunes) for a few months now. The World Without Us explores how our planet would "recover" from human presence if we suddenly disappeared. Give the chapter on plastic a listen and it's likely you'll never think the same way about plastic bags, water bottles, and the like.

Putting Your Email on a Google Domain

Not happy about the fact that your Gmail address shows rather than your domain when replying to email on your iPhone? If you're willing to spend a little time setting up your domain on Google (without switching hosts or nameservers), this may be for you.

Walking the Line When You Work from Home

asdf

-->
House Industries Ampersand Tees

Nice.

Cooler Business Cards

The second installment in Inspiredology's series of inspiring business cards.

California's Continuing Fires

The fires are no longer headline news (thankfully for Californians), but some of these photographs are beautiful.

A word for @#$%&?!!!

Grawlix, that's the term.

Enterprise UI Summit

Are you an "enterprise" designer? Jive Software is hosting an event at the Sky Hotel in Aspen, Colorado, August 7-8. Airfare and hotel stay covered by Jive Software. Apply/RSVP if interested.

Logopond Awards 2008

I had a hand in judging these, along with several other judges. Not all of the winners are ones I chose to be featured, but good picks nonetheless.

Inspiration Series: Magazines

Plenty to be inspired by here.

iPhone NY Times GUI

Felix Sockwell gives a brief account of the iconography work he did for the NY Times iPhone app.

WebAnywhere, a Screen Reader On The Go

This software apparently allows blind users to have access to screen reader software from any computer. I wonder if there's a chance the rest of us (sighted) could use this for initial accessibility testing?

"Gorilla" Usability Testing with Silverback

Garrett Dimon beat me to it. A very thorough review of Silverback, a good app for guerilla usability testing (still in beta).

iPhone apps mini-review

Posted: July 11th, 2008, 4:21pm CEST

An off-the-cuff review of apps I downloaded in iTunes yesterday. Ratings are based on usability and utility (or enjoyment).

Remote – Allows you to control your desktop computer's iTunes via ~~Bluetooth~~ wi-fi. Can't get the thing to work, and apparently I'm not the only one from all the discussion I've seen. Update: Finally got Remote working. This is awesome. Rating: 5 out of 5!
Band - Play and record instruments such as piano, drums, and guitar with multi-touch. Rating: 3.5 out of 5
PayPal – Nearly worthless. The only two things you can do are send payments and check your balance. How about being able to view and search history of payments? And why isn't a mobile web app good enough to do all this? Rating: 1 out of 5
Twitterrific – So, this is the bomb on the desktop from what I've heard. I don't know if the UI for the iPhone version is the same as that of the desktop, but I'm having a hard time figuring out how to use it; doesn't seem very intuitive. I remain a fan of the simplicity in m.twitter.com but welcome being convinced otherwise. Rating: 3 out of 5
Starmap – Disclaimer: I'm a huge fan of constellations. I can point out about a dozen in the summer sky. Naturally, this app appeals to me. What's interesting is everything looked dim when I first opened the app, until I realized it's meant to be viewed in low-level light (duh, at night). View by constellation name, star name, and more. Rating: 4 out 5
Checkout SmartShop – This is an interesting one. Get pricing online and offline, reviews, and more by simply entering the barcode of nearly any product. This will no doubt come in handy when shopping around town, as I've already done this many times using amazon.mobi and the like. Only complaint is that it'd be much easier if I could snap a picture of the barcode and have the info pull up. Rating: 3.5 out of 5
Labyrinth – Old news for any of you with a jailbroken iPhone. My boys enjoy playing this one. I was surprised to see how responsive and sensitive the accelerometer is. Rating: 3.5 out of 5
BoxOffice – Showtimes for local movie theaters, rating scores from Rotten Tomatoes, and a few other things. Rotten Tomatoes desperately needs a mobile version of their site, and I was hoping this app would be a suitable substitute. Not the case, as it shows only number ratings and not critic reviews. Not bad, however, for an app that doesn't cost anything. Rating: 3 out of 5

What's on your iPhone?

Authentic Jobs donates 1% through Kiva.org

Posted: July 9th, 2008, 5:06pm CEST

Since March 2008, Authentic Jobs, Inc. has donated 1% of its total revenue to entrepreneurs through Kiva, which facilitates microloans to business owners in developing countries. Because Authentic Jobs offers job opportunities for individuals throughout the world, it's only fitting that the company extend its purpose by helping entrepreneurs throughout the world.

As shown on the Authentic Jobs lender page, so far this effort has amounted to 17 loans to male and female entrepreneurs in 13 countries. I'm committed to seeing the company donate long into the future.

Some recent listings and testimonials from Authentic Jobs are highlighted below.

Full-time (International)

Toronto, ON Web Designer at The Globe and Mail
London, UK Front-end Developer at Macmillan Publishers
London, UK Client-side developer at Airlock

Full-time (U.S.)

Tucson, AZ Applications Systems Analyst (Web Designer) at The University of Arizona Libraries
Los Angeles, CA Sr/Mid-Level Flash Developer at 65 Media
San Francisco, CA UI Designer at iList, Inc.
Washington, DC Interactive / Web Designer at Illumen
Boise, Idaho Front End Web Developer at Access Idaho / Idaho.gov
Chicago, IL Interactive Designer at 4SIGHT Communications LLC
Waltham, MA GUI/Web User Interface Designer at D2Hawkeye
New York City Senior Designer at Thumbplay
New York, NY Graphic/Web Designer at Indaba Music
New York, NY Client-side UI Engineer at GoCrossCampus
Henderson, NV User Interface Designer at VEGAS.com
Conshohocken, PA Sr Front End Developer at TMX Communications
Conshohocken, PA User Experience Architect at TMX Communications
Houston, TX Senior Web Designer at Bishop Interactive

Freelance

Anywhere .NET C# Web Programmer at MWI
London, UK God-like back end developer at Thisadwillchangeyourlife.com
New York City Senior Flash ActionScript Developer (Flex Experienced a Plus) at Magnani Caruso Dutton

Employers continue to find success with Authentic Jobs. Shannon Peterson of Shelf Reliance posted a full-time job and sent these remarks:

We got some very viable candidates! We didn't end up hiring from the replies from Authentic Jobs, but we were impressed with the resumes we got. In the end, we are glad we used your service.

Alec Rosen of Option4 Interactive posted a freelance job and offered this feedback:

We got excellent results and I do have enough contacts to build the entire web 3.0.

Post a job or find one at Authentic Jobs.

Excerpted highlights from How Designers Think

Posted: July 7th, 2008, 7:11pm CEST

I've not made it all through the entire book yet, but Byran Lawson's How Designers Think continues to impress me as I've given it an on/off reading the past few months. Though it's written with a slant towards architectural design, its content easily applies to designers of all disciplines.

Towards the end of chapter 7, "Problems, solutions, and the design process," I found myself underlining all kinds of stuff. Quoted here are a few excerpts.

There are no optimal design solutions

Design almost invariably involves compromise.... Rarely can the designer simply optimise one requirement without suffering losses elsewhere.... There are no established methods for deciding just how good or bad solutions are, and still the best test of most design is to wait and see how well it works in practice. Design solutions can never be perfect and are often more easily criticised than created, and designers must accept that they will almost invariably appear wrong in some ways to some people.

Design solutions are a contribution to knowledge

Once an idea has been formed and a design completed the world has in some way changed. Each design, whether built or made, or even if just left on the drawing-board, represents progress in some way.... Thus the completion of a design solution does not just serve the client, but enables the designer to develop his or her own ideas in a public and examinable way.

The process involves finding as well as solving problems

It is clear from our analysis of the nature of design problems that the designer must inevitably expend considerable energy in identifying the problems. It is central to modern thinking about design that problems and solutions are seen as emerging together, rather than one following logically upon the other.... [B]oth problem and solution become clearer as the process goes on.

Design is a prescriptive activity

[D]esign is essentially prescriptive whereas science is predominantly descriptive. Designers do not aim to deal with questions of what is, how and why, but, rather, with what might be, could be and should be. While scientists may help us to understand the present and predict the future, designers may be seen to prescribe and to create the future, and thus their process deserves not just ethical but also moral scrutiny.

Designers work in the context of a need for action

Unlike the artist, the designer is not free to concentrate exclusively on those issues which seem most interesting. Clearly one of the central skills in design is the ability rapidly to become fascinated by problems previously unheard of.... Not only must designers face up to all the problems which emerge they must also do so in a limited time. Design is often a matter of compromise decisions made on the basis of inadequate information.... Designers, unlike scientists, do not seem to have the right to be wrong. While we accept that a disproved theory may have helped science to advance, we rarely acknowledge the similar contribution made by mistaken designs.

On that note, I vote for celebrating "mistaken designs" much more than we currently do as a community. Who's with me?

Signed Limited Edition Letterpress Poster

Posted: June 30th, 2008, 4:02pm CEST

Update: More than half of the posters have been ordered in the first 24 hours. Consider buying now if you want one while they last.

Update II: All 50 posters have been ordered. Shop closed. (Thanks everyone!)

Poster available for purchase at Big Cartel

In January 2008, a team of 30 designers assembled at the Salt Lake City Library for their First Annual Design Review. Posters were designed in celebration of the event, and this is the one I designed.

I'm pleased to finally offer this artwork for public purchase, each signed, letterpressed, and shipped with care. Poster measures 16"x24" and is printed on Crane Lettra Pearl. Letterpressed by Bryce Knudson of BjÃ¸rn Letterpress in Provo, Utah.

~~Buy a copy~~ or view additional photos.

Architecture in Switzerland (Taschen)

Posted: June 24th, 2008, 5:10pm CEST

Architecture in Switzerland is a stunning collection of inspiring photographs, complemented by commentary from author Philip Jodidio. Published by Taschen, this book is one of several titles of its kind, and it was gifted to me for Father's Day.

The commentary on each building is brief and appears in English, German, and French. I just love this quote, speaking of architect Mario Botta's "Tour de Moron":

There is an intentional contrast with the natural setting here, as Botta says: 'In these mountains above the sweeping plateau, the helical tower -- like an arrow driven into the terrain -- comes across as an unexpected and somehow disquieting sign. Tourists and wayfarers seeking idyllic landscapes are thus drawn into the reality of austere, authentic beauty that can be found only in a place where, alongside nature, the mark of humanity is also visible.'

A few spreads from the book (click for larger photos at Flickr):

FAQ: When to use italics?

Posted: June 17th, 2008, 2:58pm CEST

Some time ago, probably two years now, I began archiving certain replies to emails with the label "FAQs." These were answers to common (or uncommon) questions, such as the "frilly bits" inquiry, that I received from readers. I figured these would come in handy some day if, and I stress if, I ever get around to a long-overdue makeover of this site.

In the meantime, why not post the questions and answers here? I figure I'll give it a go and see if I can't do it with some sort of semi-regular cadence in the coming months.

Q: I'm very discretionary when I use italics and rarely use it. However, I saw that you pull Warnock Pro off wonderfully in your An Event Apart slides. How do you determine the appropriate use of italics in headlines or copy other than grammatical purposes?

A: Boy, that's a tough question to answer. Part of it is merely personal preference, admittedly. However, when it comes to presentation material, I typically base the decision on the content. If it's a quote, I don't hesitate to use italics. To me, italics say "quote" much better than non-italics. And if you notice in my slides, most of the text in italics are quotes (in addition to a few definitions).

'I do not paint things, I paint only the differences between things.' -Henri Matisse

But at the end of the day, I have a fascination with italics and use them whenever I feel they're appropriate. Of all the ones I've used, Warnock Pro's are probably the most elegant. I really enjoy Epic's italics, as well, especially the ligatures (though the punctuation is a bit heavy). Of course, there are many others -- Mrs. Eaves, Garamond Pro, and the list goes on.

Mobile Web Design: iPhone 3G discount price

Posted: June 10th, 2008, 3:25pm CEST

Mobile Web Design pricing reduced to $10 PDF version and $14.95 print version

In light of yesterday's introduction of iPhone 3G, I remain convinced the mobile web's future is incredibly promising. So, for the remaining lot of you whom are still holding out to to embrace the mobile web, I'm offering special discount pricing on my book, Mobile Web Design.

Use these links to purchase a discounted copy for a limited time:

$10 - PDF version (41% off)
$14.95 - Print version (25% off)
$16.16 - Print version @ Amazon US (19% off) (at time of writing this was Amazon's price, which I have no control over)
Â£14.73 - Print version @ Amazon UK (5% off) (same thing I just said about Amazon pricing)

PLEASE NOTE: My book offers very little content on iPhone development and is instead device-neutral throughout much of the book. I intentionally wrote it that way to help the reader understand the opportunities and limitations of mobile in general and not that of a specific device, as there are many more phones in the market worldwide than just iPhone. (You can find iPhone-specific development guides here.)

Aaron Cannon's Web Accessibility Checklist

Posted: June 9th, 2008, 7:10pm CEST

I have the privilege of having several capable individuals on my team, one of which is Aaron Cannon, blind web developer and accessibility consultant. In his recent article, "The Accessibility Checklist I Vowed I'd Never Write", Aaron explains the problems with a "simple checklist that, when followed, will give you an accessible site without fail." No such checklist exists or likely ever will.

However, as Aaron, myself, and others have been wrestling with establishing in-house training material, we've found a one-page checklist to be a necessary supplement to our approach, in addition to workshops, design reviews, and so forth:

When I wrote the below checklist, I attempted to answer the question, 'What concise pieces of advice can I give to designers that will have the greatest impact on accessibility in the majority of cases?' Again, this list is not the perfect solution, nor is it the only solution, but I believe it is a good first step, and it gives our developers and designers a place to start from.

Available for download is Aaron's checklist (PDF):

You can also find these guidelines in text format in Aaron's article.

We're posting this publicly with the hope that 1) it'll be of benefit to the community and 2) you offer your critique and feedback. Please consume, print, and critique it.

Update: Video showing how Aaron Cannon uses the web.

On writing more betterer

Posted: June 3rd, 2008, 5:10am CEST

Months ago I was returning by plane from a conference, and in want of something to read I slipped the in-flight magazine out of the seat pocket in front of me and flipped to the back of the magazine. I stumbled on a pair of movie reviews that purported to be all about the newly released Happy Feet, but in turn were almost entirely about textbook examples of great and poor writing.

The first review was written by The New York Times' seasoned film critic A.O. Scott, filling in for Roger Ebert. The second was by Chicago Sun-Times' Richard Roeper of the Ebert & Roeper show. The two reviews side by side couldn't possibly contrast each other more appropriately, so much in fact that I tore the page from the magazine, stored it in my bag, and only yesterday did I find the yellowing page in a scattered pile of papers.

Here are the two reviews:

A.O. Scott (sitting in for Roger Ebert): Happy Feet is the new computer-animated spectacle directed by George Miller. Elijah Wood gives voice to an emperor penguin named Mumble, whose feet replicate the moves of the great tap dancer Savion Glover. The movements of the penguins in this move are beautifully rendered, as is their icy, watery habitat; there are some fine dance numbers and some thrilling action sequences. Happy Feet is an overstuffed stew of themes, plots, semiclever pop culture references, and familiar characters. And, I confess I'm a little worn out by all the cartoon pleas for interspecies understanding that we've been getting lately, but Happy Feet was made with enough skill and enough heart to get a thumbs up from me.

Roeper: I'm with you all the way on this one; I'd give it a mild thumbs up. I mean we see in this movie a lot of themes that we've seen in a million other animated movies about the kind of runt of the litter, from Nemo on down. In the last 15 minutes, they get into this whole man-vs.-nature thing. It's rendered OK, but it comes out of nowhere. All of a sudden we're seeing almost a different form of animation as well. I think kids will love it, because the penguins are cute. Also, I appreciate that at the beginning of the film they told us who some of the actors were.

Notice the contrast? A.O. Scott's review flows well. The tone of his piece is engaging. I get his point. Roeper's review, on the other hand, lacks any semblance of organization. It reads as if he just spit out terse remarks in response to a question about the movie. The last three sentences are totally disconnected, especially the concluding one. What's that all about?

Great writing doesn't typically come by chance. And in my mind, it's an art anyone of any trade should strive to master -- designers, marketers, developers, and yes, film critics.

I don't pretend to be an expert in the instruction of great writing, but I'm certainly no stranger to the application of it. So if you were to ask me what my guiding principles for authoring have been up to this point in my career, it would probably take me a while to come up with a list (it did for the one below). It might resemble something like this:

Lead with a question, story, or compelling one- / two-line summary
Transition logically from sentence to sentence, paragraph to paragraph
Use a thesaurus along the way to add flavor and variety
Write passionately throughout, keeping the reader (and yourself) engaged in the topic
Be casual in tone once in a while to break things up
Revise, revise, let it sit for a while, then revise again
End memorably, succinctly, summarily, or all three

That's it. No magic formula, just a few salient points. Of course, I'm making the practice of writing sound much simpler than it really is, but at the end of the day it isn't an elaborate science. It just takes practice, good editing, and passion about the topic at hand.

"Prose is architecture, not interior decoration, and the Baroque is over," wrote Ernest Hemingway in Death in the Afternoon. Go write a building -- as articulately, thoughtfully, and beautifully as an architect would.

25 resources for ornaments, fleurons, and "frilly bits"

Posted: May 19th, 2008, 5:26pm CEST

Among the how-to design inquiries I receive by email, the subject of this entry is (surprisingly) near the top of the list in terms of quantity. One reader asked the repeated question this way:

I noticed all the little 'frilly' bits (for lack of better word) around the site; I'm wondering whether you made these yourself, or if you found them somewhere else?

Perfectly put. "Frilly bits" seems to aptly describe what are typically called ornaments, fleurons, vignettes, embellishments, or in some cases, frippery. Type ornaments, also termed printer's ornaments, have been used in conjunction with type for literally hundreds of years. Of course, nowadays it's all too easy to abuse these design elements, adding them merely for decoration rather than communication. But in the hands of an accomplished designer who knows how to use them appropriately and in moderation, type ornaments can serve to beautify and enhance a design.

Frankly, I feel a bit sheepish posting about this as it seems so rudimentary, but if anything it gives me a resource I can point readers to when the question comes up again. So, what follows are 25 resources for ornaments, fleurons, and frilly bits.

(More after the jump.)

Type Embellishments One (also known as Type Ornaments One)

Nat Vignette One

Bickham Script Pro (see full character set)

Fleurons of Hope

Amazon: "design ornaments"

Type-Art Ornaments Collection (free; multiple collections)

Design elements, vol. I

Type Embellishments Two (also known as Type Ornaments Two)

Adobe Wood Type Ornaments

Floralissimo

Bangin' Borders Brush Set

Printer's Ornaments (free)

Floral Design Elements

Recent job listings

Posted: May 2nd, 2008, 2:50pm CEST

Last week following my session at An Event Apart, a gentleman stopped me in the hall to shake hands and say, "Thank you." His story, neither spectacular nor banal, was one of fulfillment: Having lost his job a year ago, he soon found employment in Georgia through a listing on Authentic Jobs. He's still at the company today, and shaking the hand of someone whom the site has positively affected is tremendously rewarding for me. (Is your next job in Georgia?)

Some recent listings are highlighted below.

Full-time (International)

South London Web Designer at Down2Earth
Stockholm Java-utvecklare at Unikum - Unikt lÃ¤rande AB
Rotterdam Senior Interactive Designer at Studio Dumbar

Full-time (U.S.)

Anywhere CSS Zen Master at SmugMug
Work from home Code Mechanic at EllisLab, Inc.
Cupertino, CA iCal Software Engineer at Apple Inc.
Cupertino, CA UI Engineer at Apple Inc.
Los Angeles, CA Web Designer / Client-Side Developer at Casting Networks, Inc
Los Angeles, CA User Interface Engineer at Synctree
Palo Alto, CA Graphic Designer at Facebook
Redwood Shores, CA Visual Designer / Production Designer at Navigenics
Jacksonville, FL Multimedia Design at City of Jacksonville
Laurel, MD Web Project Manager at LMD
Brentwood, TN--Near Nashville Flash Expert Wanted at DaveRamsey.com, Top 5,000 US ranked website
Chattanooga, TN E-Commerce / Social Networking Developer at MNDCreative, LLC
Brooklyn, NY Interaction Designer at HUGE
New York, NY Web Designer at Polar News Company
Provo, Utah Web Developer at BYU - Harold B. Lee Library
Bellevue, WA Social Application User Experience & User Interaction Designer at Livemocha

Freelance

FLEX Developer at TEKsystems
Senior Web Developer at Liquid Digital Media
Social job site needs web designer with emphasis on User Experience at BizFavors

Speaking of freelance listings, the very same day the gentleman stopped me in the hall, I received this email from Katrina McKinnon of Motive Media (Australia):

I posted a freelance position on your site yesterday for 75 bucks. Within these few hours I have received a hundred or so responses -- a few of them exceptional, most of them good and only a few absolute duds. That's quite possibly the best 75 I've spent for a while. Thanks for making the service you made. I appreciate it.

Post a job or find one at Authentic Jobs.

Craziest thing you've done for user research?

Posted: April 23rd, 2008, 5:29pm CEST

Me? I signed up as a full-fledged Tupperware rep for two months.

At a former company, we delivered web-based marketing tools to distributors and consultants of network marketing companies. One of our biggest (and best) clients was Tupperware, purveyor of all things plastic. We were in the midst of a major upgrade to the software they licensed from us, and I figured the best way to understand our/their users was to become one of them.

So, with the permission of the company, I became a part-time Tupperware rep. I sold product online, I attended a really wacky rally with women screaming wildly about Tupperware as adrenaline-infusing tunes such as "We Will Rock You" boomed loudly from on-stage speakers, and I even handled a return from a mildly disgruntled customer who found me merely because I was the nearest rep in town.

In the end, I can honestly say I understood the user much better than before -- even as embarrassing as it may have been for me. (Though I happily admit I safely escaped holding any Tupperware parties at home.)

You? Can you top that?

Techniques for designing with type characters

Posted: April 15th, 2008, 7:46pm CEST

After weeks of code speak, let's totally shift gears and talk exclusively about visual design in all its splendor and beauty.

Typography and typefaces, without a doubt, are two of the most fascinating aspects of visual design. Great designers can execute great designs with typefaces and nothing else, if required, and certainly if preferred. Design legends Saul Bass and Paula Scher have proved this many times over, and they comprise only a fraction of a very long list of luminaries who can wield type brilliantly.

Examples of great design using little more than typography are virtually numberless. Some of the favorites I've spotted recently include designs by John Arnor G. Lom, Coudal Partners, and NB:Studio, linked respectively:

But of all the work I've seen recently, few have captured my attention as much as that of Veer's Type City Prints. "Each portrays an urban facet, illustrated character by character with a typeface that evokes the image itself," Veer's website explains. "Illustrations are letterpressed onto archival, acid-free paper using brass dies mounted type high."

Absolutely stunning.

Inspired by Veer's work, I had the privilege of creating a Type City-esque design of my own for an in-house poster contest. Designed in tribute to one of the buildings that adorn the organization's headquarters (and one of the most compelling edifices in the state), the entire design was created solely with characters from the Bickham Script Pro and Engravers MT typefaces.

Illustration of an edifice designed solely with type

Detail shot showing edifice designed with type

I'll speak more about the design soon, but for now I wanted to share a few things learned during my first attempt to design with type characters. Luckily, in the course of my project, I was fortunate enough to correspond with Veer's Justin Lafontaine, the talented designer behind the Type City Prints. (Correction: Christina Huber's artwork is also featured in the set. Thanks Anders!) Below is shared knowledge from our experiences.

1. Use characters from the subject's description. What better starting point and technique for conveying meaning than to use characters from the name of the building, location, object, or person? "The first thing I did was spell out the phrase, such as locations for the buildings, and copied it a few times at varying sizes in both upper and lowercase," Justin explains. "This gives you a really good palette to start from which you can quickly grab different sizes depending on what you need." (Regrettably, I learned about this tip only after I had made substantial progress, and therefore my design uses random characters and lacks that extra bit of meaning I could have given it.)

2. Take advantage of symmetry for both speed and beauty. For objects or buildings that are symmetrical, use symmetry to your advantage for creating the design with less effort. As Justin describes, "I usually built one side, then flipped it to complete the building." As a result, symmetry also enhances the aesthetics of your work. "The symmetry in these can be pretty beautiful."

3. Scale the characters to convey perspective. Justin: "In lots of them I used the scale of the characters to give the illusion of perspective, like larger characters closer to you, and smaller as they become further away. That helped a lot!"

4. Repeat sections whenever possible. This is probably the most important tip. You'll find sections of the piece which you've meticulously built can be copied and pasted elsewhere in the design, and the duplicated section isn't really perceptible without closer inspection. This is a real time saver. "All you need to do is some minor swapping, and it looks like a totally new texture," Justin adds.

5. Don't attempt this in one sitting. I take it back -- this is the most important tip. Not only is type character designing extremely time consuming, it's also monotonous work that requires a constant zoom in, zoom out dance to get things right. My design required a total of about 16 hours to complete. That's just two full-time days worth of work, but don't even attempt to do it two days back to back. Spread it out over a couple weeks to allow adequate time for correction, detailing, and simply to give yourself a break. (Mine was spread over three weeks.)

In retrospect, type character designing isn't for the faint of heart, but it's extremely gratifying if executed well. (A big thanks to Justin Lafontaine for sharing his advice!)

Swissmiss, SimpleBits, Big Noob join Authentic Jobs

Posted: April 7th, 2008, 5:53pm CEST

I'm very pleased to announce Authentic Jobs has added three new partners: Swissmiss, SimpleBits, and The Big Noob, all of which now aggregate Authentic Jobs listings on their sites.

Swissmiss

If my header image is any indication, it should come as no surprise that I'm a fan of all things Swiss. (This is in part due to my being one-quarter Swiss, three-quarters Whoknowswhat.) However, selection for new partners isn't based on personal preference but instead quality of content. And Tina Roth Eisenberg's site has it in spades, with multiple daily postings covering an eclectic range of interestingness.

SimpleBits

Credentialed Dan Cederholm needs little introduction. Author, speaker, and occasional dodgeball superstar, I couldn't be happier to have Dan join the team.

The Big Noob

Proprietors of all things geek (and great design), Brad Smith, Ryan Sims, and Keegan Jones render it honorable for one to be labeled "Noob". Welcome aboard, guys.

Extensible CSS Interface IV: Testing for Extensibility

Posted: April 1st, 2008, 6:25pm CEST

This series is sponsored by Authentic Jobs, a freelance and full-time job board for web professionals.

This is the fourth and final article in the four-part series, "The Highly Extensible CSS Interface". Markup and images for this article:

Finally, we've arrived. This concluding article provides the full demo, as well as a bookmarkable site that gives you quick access to all resources mentioned throughout the series.

Additionally, what follows below are 8 benchmarks to measure the extensibility of your site or app. I certainly don't advocate that every site or app must comply with all of these benchmarks, but I do recommend trying to comply as best as possible with each of these when applicable to your project.

1. Translation The interface translated in Chinese

When I sat down to author this article, translation of all things was the first to come to mind. I suppose that's because it's been on my mind not only at work but increasingly as I realize just how global our economy is becoming.

Perhaps the easiest way to test for translation is to send your prototype through Google Translate. Here's what the demo looks like translated to Chinese (Simplified). Fortunately, a fringe benefit of bulletproofing is that elements containing text are inherently capable of accommodating changes to the length of the text that occur as a result of translation.

However, bulletproofing alone isn't always enough, as we must make smart choices about what will be image text and will not be as we design the layout. In the demo, only one phrase in the entire interface is image text -- the logo. The rest is HTML text. This was done specifically to make translation as easy possible, sparing ourselves from having to create a set of graphics with translated image text for every language our fictitious app may be translated into.

In the end, you'll have to decide on image text vs. HTML text based on the translation needs of your site or app, on how much typographic control needs to be retained through imagery and how much can be relegated to browser rendering, and so forth.

2. Text Resizing The interface with larger text

This benchmark is fairly straightforward: Make it work for low-vision users, whose default text size may be different than yours. A general recommendation is to accommodate up to two sizes larger. You can also accommodate text sizes smaller than the default, but my opinion is that if a user chooses to go smaller than default, he or she accepts that things may not be legible anyway.

Testing for text resizing is pretty easy: Command/Ctrl + (in most browsers), and then analyze how elements containing text accommodate changes in text size. And if you'd like to explore an interesting technique for having the entire interface resize (not just text elements), check out Jon Tan's Em & Elastic Layouts with CSS.

3. Resolution Dependence The interface at large and small widths

I've talked about resolution dependence extensively throughout the series, so I won't elaborate further other than to suggest you check out Richard Rutter's list of resolution dependence techniques, which he refers to as variable fixed width layout. 4. Images Disabled The interface with images disabled

This one's an easy step to overlook. Be sure to test how your layout renders in the absence of images, not only for reasons of accessibility but also to be sure background images have a supporting background color. In the example above, the Featured Member section is created with dark background images and white text. If I'd forgotten to add a dark background color, even though it's not visible when background images are present, I'd leave users with white text on white background when images are disabled.

5. Styling & Scripts Disabled The interface with styling disabled

Disabling styling and scripts tells us if we've separated presentation and structure properly, which yields a variety of benefits, not the least of which are accessibility and alternate device rendering (e.g. mobile).

As Dan Mall pointed out in Part II, the goal as it pertains to scripting is unobtrusive JavaScript, or the separation of JavaScript from the markup and CSS layers.

Two Firefox plugins for not only easily disabling images, styles, and scripts but also for inspecting and manipulating markup on the fly are the Web Developer Toolbar and Firebug. I recommend you install both. Additionally, there's the IE Developer Toolbar (IE 6 and 7) and Safari Web Inspector.

6. Color Contrast The interface showing a test for color blindness

When you consider roughly 8% of the male population is color blind, you quickly realize a significant chunk of your user audience may have difficulty using your site if color contrast isn't properly tested. (As an interesting aside, I've had at least one color-blind designer on my team for nearly the entire length of my career.)

The utility I prefer to use for quickly assessing how color-blind users will see my interface is Color Oracle. It's free, very lightweight, and allows you to test color blindness in any software or window on your machine. Also give Pabini Gabriel-Petit's thorough article a read: Ensuring Accessibility for People With Color-Deficient Vision.

7. Rebranding The interface with an alternate branding scheme

Those of you who develop software that is licensed to other companies who in turn rebrand your software as their own will know what I'm talking about here. Inherent in the practice of web standards -- and the practice of extensibility -- is the ability to "reskin" an interface fairly easily.

To see what I mean, uncomment the following line of code in the demo to see a simple rebranding of the interface:

<link rel="stylesheet" href="css/branding.css" type="text/css" />

Again, this rebranding is rather minimal, but the point here is that by properly separating structure and presentation, changing the skin of an interface is relatively easy. Of course, you can really reskin the same markup by changing the CSS rather wildly, as demonstrated by the css Zen Garden project. My example pales in comparison, but hopefully you get the point.

8. Mobile

Lastly, I'd be remiss to skip mobile when speaking of extensibility. Regrettably, this demo is not a stellar example of mobile extensibility, as I've not had time to create a mobile-friendly version of the interface. I got lucky with iPhone (picture above) only because of the resolution dependence built into the interface, which works surprisingly well on iPhone. But if I had the time, I'd explore options for mobile adaptation, context, and all the other stuff you can read about in my book.

Signing Off

And so the series comes to a close. Before leaving, it's worth stating these benchmarks are not all-inclusive. There exist other benchmarks that may be considered, but the ones I've presented here I feel summarize extensibility fairly well.

Thanks for participating in the series, either as innocent bystander or active participant. This is your last chance to call me out on anything that's wonky or misleading, so please do so. Otherwise, happy extensibilitying.

Extensible CSS Interface III: Adding Ajax Interactivity

Posted: March 20th, 2008, 2:07pm CET

This series is sponsored by Authentic Jobs, a freelance and full-time job board for web professionals.

This is the third article in the four-part series, "The Highly Extensible CSS Interface". Markup and images for this article:

This third article documents the underlying components of Ajax, examines a few examples of Ajax in the demo, and wraps up with a shout-out to resolution dependence.

Before we begin...

I repeat the disclaimers from last time: One, this interface is optimized for any browser that supports standards exceptionally well. Sorry, no IE6 support. I'm relying on you to make concessions on your own for IE6, thereby allowing this series to focus on what's possible with browsers that support standards exceptionally well without being bogged down in the mire of those that do not. (Again, consider conditional comments for IE6 concessions.)

Two, there are a few known “bugs” in the interface for which small inconsistencies will be seen from browser to browser. These will be documented as comments in the final markup (to be provided in Part IV). For this article, be aware that IE7 ignores the negative absolute positioning on the right corner image for the Latest Community Activity and Community Snapshot headings. I welcome any suggestions for fixing this.

Lastly, another hat tip to Aaron Barker who wrote a lot of custom jQuery and Ajax scripting for this demo.

Ajax

What was penned a couple years ago as a preface to describing Ajax design terminology is still relevant today:

The line between "desktop UI" and "web UI" is gradually blurring. Love it or loathe it, "Ajax", which originally referred to Asynchronous JavaScript + XML, has somehow become the catch-all term for describing "desktop-like" interaction on the web; more accurately, GUI interaction as seen previously only in native applications running in an operating system environment.

When I first spoke about Ajax in a workshop 18 months ago, few raised their hands when asked if they had experience developing sites and apps that employed Ajax. If asked that same question today, it's likely half of that same audience would raise their hands. Indeed, love it or loathe it, Ajax has weaved its way into high-profile sites and weekend projects alike as the de facto standard for producing rich interactivity on the web. (It's worth noting, however, Ajax's position as king of the hill is increasingly challenged by emerging technologies such as Adobe Flex and Microsoft Silverlight.)

Ajax implementation typically includes at least three components: 1) asynchronous server communication, which is most commonly accomplished via XM [HttpRequest,] 2) manipulation of the Document Object Model (DOM) for dynamic display and interaction, and 3) JavaScript to bind everything together. The 'x' in Ajax refers to XML, but Ajax can also also be accomplished with (X)HTML, the result of which is often termed AHAH.

Asynchronicity is the key component of Ajax -- or any rich internet technology, for that matter -- as it provides that "native app" feel within the web environment. Instead of the traditional request/response model that fetches an entire page with a full trip to the server, asynchronicity means we fetch data for only a select portion of the page, e.g. username availability when registering an account, "without interfering with the display and behavior of the existing page" (Wikipedia).

In the demo interface, we fake asynchronous server communication with a little JavaScript and by fetching data from a few static PHP pages:

activity.php for the Latest Community Activity section, which functions like Digg Spy with the help of jQuery Spy
ajaxStuff.php for mimicking the Ajax request for the bio's edit-in-place feature in Part II (adds a spinner image and a one-second delay to mimic server retrieval)
search.php and jquery.autocomplete.js for the search field auto-complete (Part II)
project.js for the Community Snapshot and Latest Community Activity sections, edit in place, and overall scripting wizardry

Faking asynchronicity merely allows you to download the code samples and open the interface on any machine running PHP, without requiring true server communication.

As an example of how these components come together, let's have a look at the Community Snapshot. For starters, we begin with markup: A div encloses the map as a background image, and styling sets the containing block to relative positioning:

<div id="map"></div>

#map {

  position: relative;

  margin: 0 auto;

  width: 277px;

  height: 155px;

  background: url(../img/map.gif) no-repeat center center;

  }

It's important that the positioning be set to relative as this will allow the "n members online" boxes that fade in and out to be positioned absolutely according to the map's containing div. To accomplish this effect, we use a list item with several elements and CSS properties:

<li class="l1" id="map1">
  <p><strong>North America:</strong> <span>n</span> members online</p>
</li>

#map li p {

  padding: 5px 0;

  line-height: 100% important;

  font-weight: bold;

  background: url(../img/maploc-bg.png) no-repeat;

  }

#map li strong {

  display: block;

  float: left;

  text-indent: -9999px;

  }

.l1 {

  background: url(../img/maploc-btm-left.png) no-repeat bottom;

  }

Let's break down each of these:

<p></p> - This is the wrapper for our content. While it'd be nice to keep our markup as lean as possible with just the li, in this instance we need to add an extra element to aid with extensibility (text resizing/translation) by breaking the box image into two, which I'll describe in a minute. A paragraph seems the most semantic solution rather than a meaningless div.
<strong>North America:</strong> - Notice that for sighted users, the region text ("North America") isn't shown in the yellow boxes that fade in. In the spirit of extensibility, we're considering sightless and alternate device users for whom the list item's location relative to the map isn't visible. Therefore, the idea here is that the location is provided in text rather than in geographical reference. So, we're effectively "throwing" the text off the page using the text-indent property and a negative margin great enough to put the text outside the visible area of even the widest screen. display: none would accomplish the same, but some screen readers will ignore any text hidden with display: none. Of course, it's questionable whether a screen reader would even pick up this text, as DOM refreshing isn't always rendered properly by screen readers. (Note: The span element is a hook for jQuery to insert the number dynamically.)
class="l1" - We construct each yellow box with two images (top, bottom) specifically to allow for text resizing and translation. The top, maploc-bg.png, is much taller than needed for the default text. This is to accommodate a larger font size or an increased character count caused by translated text. The bottom, maploc-btm-left.png or maploc-btm-right.png, creates a nifty comment bubble thing and aligns to the bottom of the paragraph element. Depending on the box's position on the map, class="l1" requests -left.png whereas class="l2" requests -right.png. Admittedly, class="l1", which is short for "location 1", is not the most semantic selector declaration, but it's arguably better than class="left" should the positioning be something other than left or right in the future. (Remember class="arial red 10" in Part I?)

Finally, markup that isn't shown here but is shown in the demo, we set the absolute positioning of each list item:

<li class="l1" style="position: absolute; top: 10px; left: 20px;">

Recall that we set the position of #map to relative. Any element that is a child of #map, in this case li, will be positioned relative to the containing block of #map rather than the body or other parent element. Therefore, this list item is positioned 10px from the top and 20px from the left of #map. (Note: I've set this style inline for the sake of instruction. Ideally, you'd want to dynamically insert the positioning as each yellow box is generated.)

Once the markup is in place, we begin adding scripting that allows for Ajax magic to make a graceful entrance. Ironically, the Community Snapshot section isn't a good demonstration of Ajax components because we're totally faking things here by randomly creating "members online" numbers rather than pulling them from a database. Let's shift our focus instead to the Latest Community Activity section to wrap up the discussion. But before we do, throw your mind back to Part II and take a look at the jQuery scripting we've added to fade the yellow boxes in/out:

function nextSnapshot(){
  ...
  $("#"+curID).hide("slow");
  ...
  $("#map"+curNum).show("slow");
  ...
  }

Look familiar?

So, the Latest Community Activity section is a better representation of Ajax as it fetches data asynchronously from a secondary source, activity.php, our pseudo database. As is the auto-complete for search (Part II), which fetches data asynchronously from search.php, another pseudo database. In both cases, we manipulate the DOM either by replacing elements in the document tree or by adding new ones. Finally, JavaScript in project.js and other files inside the /scripts directory bind everything together, rounding out the three components mentioned earlier.

I indicated in the series opener that a primary objective of this third article was the demonstration of judicious Ajax usage. While some of the interactivity demonstrated here could be discounted merely as eye candy, be aware the demo interface for this series was in fact derived from an actual project, the likes of which I'll mention at the conclusion of the series. Some of the ideas shown here are based on actual prototype UI features, the sum of which aimed to improve the flow and speed of the interface, while others aimed to provide a very real glimpse into what was happening at that moment within a given community. Thankfully, my former client and good friend has been kind enough to allow me to repurpose certain elements for educational purposes, for which I'm appreciative and hope you are, too.

Additional Ajax reading:

Resolution Dependence & Miscellany

This third article is much lengthier than I anticipated, so I'll try and wrap things up quickly. I can't conclude without revisiting resolution dependence mentioned in Parts I and II, as the interface in this demo tricks out the content based on browser width. Resize your browser and watch how the arrangement of Latest Community Activity and Community Snapshot completely changes to adapt to the available screen real estate. Values that allow for this adaptation are contained in 1024.css, and re-read Part I to understand how resolution dependence works.

There's also a couple child and adjacent selectors at play, and these are documented as comments in the HTML page and screen.css.

Finally, Mark James' Silk Icon Set is used throughout the interface, but there are many other icon sets you should consider purchasing for your project.

Done. Please pick apart the markup, code, UI, my grammar, you name it. I'm all ears.

Mobileness

Posted: March 19th, 2008, 4:28pm CET

I wasn't planning on posting another article prior to Extensible CSS Part III (which is scheduled to be published tomorrow), but there's been too much news in the mobile space to ignore speaking of it any longer. Following is a random summary of stuff I've spotted in recent weeks.

"Padded lampposts are being trialled ... in Brick Lane [London] after it was found to have the highest number of 'walking and texting' injuries in the country." Update: It was a publicity stunt...

Dave Shea has hand-crafted a mobile device detection script that includes iPhone and TV browser sniffing, among many other common devices. Available for public consumption.

MobileSafari is now the #1 mobile browser in the U.S. and #2 in the UK, claims Ireland-based StatCounter. (thanks, Clifton)

Google's visual inventory problem. "It's simple. As consumers shift to mobile devices, interface screens get smaller -- leaving less visible room for ads. Google, and other advertisers, run out of visual inventory."

Mobile Web Development by Nirav Mehta. Iâ€™m curious to see how the content compares to mine. I've got a copy on order.

dotMobi's DeviceAtlas, a comprehensive database of mobile device information. "Everything you ever wanted to know about every handset on the planet."

Abilene Christian University will be supplying all incoming freshmen an iPhone or iPod touch this fall. "Freshmen will use an iPhone or iPod touch to receive homework alerts, answer in-class surveys and quizzes, get directions to their professors' offices, and check their meal and account balances." Seems a little overly ambitious even from the perspective of a mobile zealot (ahem, me), but I applaud the initiative nonetheless. Related: acu.mobi.

Mobile applications, RIP. "The business of making native apps for mobile devices is dying, crushed by a fragmented market and restrictive business practices. The problems are so bad that the mobile web, despite its many technical drawbacks, is now a better way to deliver new functionality to mobiles." This was written prior to the iPhone SDK release, and the author acknowledges the impact it would soon have. That said, I have to agree with most of the arguments Michael Mace makes. (It should be noted Mace is former Chief Competitive Officer and VP of Product Planning at Palm.)

Sitepoint: Designing for the Mobile Web. If you've read any of my stuff this will no doubt be a review for you. In fact, much of the article's content seems strikingly similar to mine (series or book).

PEW Internet & America Life Project has published a report on Mobile Access to Data and Information (PDF) in the U.S. Among many other notable statistics is one I find pleasantly surprising: 9% of Blacks and 10% of Hispanics access mobile web content on a typical day, compared to 7% of whites.

The Nokia N82 promises sightless users the ability to "snap a picture of a menu, book, printed receipt or business card. Software on the phone processes the words on those items and reads the text aloud in a synthesized voice. The device can even let a blind person know if paper currency is a $5 or a $20 bill." Wow.

A plug for New Orleans

Posted: March 14th, 2008, 3:06am CET

Due to SXSW and travel, I'll be posting Part III of the Extensible CSS Series next week rather than this week.

This is a good time to pause and put in a plug for An Event Apart New Orleans, April 24â€“25. Join Jeffrey Zeldman, Eric Meyer, Jason Santa Maria, Aaron Gustafson, Jeff Veen, Dave Shea, Andy Clarke, Brian Oberkirch, Aarron Walter, Stephanie Sullivan, Robert Hoekman Jr., and myself for two full days of banter and enlightenment. (I'll be presenting a reprise of Good vs. Great Design. Use code AEAMOLL and you'll save $50 off the purchase price.)

For me, this particular conference is important for two reasons: One, after three years of speaking at nearly two dozen conferences nationally and internationally, I've scaled back my speaking in 2008 considerably. AEA New Orleans is one of just two major events I've chosen to speak at this year.

Two, the location couldn't be better for a gathering of individuals who share a special concern for the needs and wants of others. By "others" we typically mean "users," but for this event I hope we broaden that label to include members of the New Orleans community, as well.

Got any ideas for how I, and possibly the other speakers, and possibly even the attendees, might give back to the community during our stay?

Extensible CSS Interface II: CSS Selectors & jQuery

Posted: March 6th, 2008, 3:45pm CET

This series is sponsored by Authentic Jobs, a freelance and full-time job board for web professionals.

This is the second article in the four-part series, "The Highly Extensible CSS Interface". Markup and images for this article:

This second article provides an opportunity to dive deeper into markup and even a little scripting with the intent of educating the less experienced designer/coder, while furthering the knowledge of more experienced readers in the audience.

Before we begin...

Disclaimers! Of course. There are two. One, this interface is optimized for any browser that recognizes a reasonable number of the common CSS2 and CSS3 selectors supported among most browsers today. Yes, I'm speaking to you, IE6. You may kindly excuse yourself from this party. As I mentioned in a comment in Part I, I want us to explore newly supported selectors without inhibiting ourselves with IE6. All of you reading this are smart enough to make concessions on your own for IE6 as your audiences and projects demand. (For starters, consider conditional comments.)

Two, there are a few known "bugs" in the interface for which small inconsistencies will be seen from browser to browser. I'm okay with this and I hope you are, too. I've left these bugs in place because 1) I didn't have sufficient time to polish the interface perfectly when this was first created (nor since), and 2) I'm hoping you'll consider this a challenge to recommend ways to fix the bugs, thereby improving the final interface.

Moving right along, let's begin.

Selectors

So what about these newly supported CSS2 and CSS3 selectors I keep mentioning? Well, by "newly supported" I specifically mean IE7 (and now IE8), as Firefox 2.x or newer and Safari 2.x or newer have supported them for some time. Among the most notable are probably min-width and max-width, attribute selectors, adjacent sibling selector, child selector, and alpha-transparency in PNG images.

Lest you're confused which selectors are which, download a copy of this Selectors Cheat Sheet:

If you're at SXSW or An Event Apart New Orleans, come grab me for a finely printed copy free of charge.

I've made comments throughout the markup and CSS calling out selector examples in this and subsequent code downloads, but I'll take time here to point out just one of them.

The attribute selector eliminates the need to add a class or ID to an element by referencing any attribute used in the element as a hook: type=, title=, src=, etc. This comes in handy in a variety of situations, but probably the most useful is with forms. Styling elements in the CSS with input {} leads to all elements within the form being styled, when in most cases you're targeting text fields only, the submit button only, and so forth. You're then relegated to adding superfluous classes and IDs to do so.

The search field and button, shown in the first image at the top of this article, serve as our attribute selector example:

<form id="search" action="">
  <input type="text" name="search" id="search-query" title="Search" />
  <input type="image" name="submit" src="img/search.png" />
</form>

Here we'd like to modify the input image (search.png) so its vertical alignment is even with the input text field. Normally this would require adding a selector hook, but notice the absence of a class or ID selector within <input type="image">. This is because we can target the image using the type attribute, and we do so like this:

input[type="image"] {
  vertical-align: middle;
  }

Any input element containing the attribute type="image" will be vertically aligned in the middle. In this case, it's the search button. (Note: The search field requires an ID for the autocomplete plug-in. One could argue we skip the attribute selector altogether and just add the vertical alignment to the search field, as it already has an ID hook. But keep in mind I'm demonstrating possible uses for attribute selectors.)

The attribute selector is one of several CSS2 and CSS3 selectors to be explored, and the brevity of this article doesn't provide freedom to explore them all. Consider perusing "Newly Supported CSS Selectors in IE7" by John Gallant and Holly Bergevin, as well as this selectors example and accompanying slides (included in the .zip) in which you can uncomment styles in the HTML head one at a time and view the effect they have on the content.

jQuery

Back in December 2005, I predicted the following:

I've been able to get by the last few years with my measly JavaScript skills, you know where you just copy and paste existing scripts? Yeah, those skills. That'll change in 2006. The traditional role of "web designer/developer" will add JS/DOM to the existing XHTML/CSS mix. Those of us with sorry skills will expect to see a copy of Jeremy Keith's DOM Scripting under the tree this Christmas.

I was a year or two early with my prediction, but by now it's safe to say we're required to know at least a minimal amount of scripting as a designer or front-end coder. For those of us reluctant to fully embrace the art of writing JavaScript, say hello to jQuery.

Karl Swedberg and Jonathan Chaffer's very useful Learning jQuery describes jQuery as a "general-purpose abstraction layer for common web scripting." I like to think of it as "JavaScript for scripting noobs like me." jQuery enables you to do the following:

Traverse the DOM
Modify the appearance of a page
Dynamically alter the content of a page

And it allows you to do all this without writing lines and lines of JavaScript.

Let's pick apart a sample from the demo to understand the components of jQuery. We'll use the "Dismiss" button in the yellow disclaimer bar at the top of our demo.

Here's the code we add to the button's anchor tag:

$('#alert').slideUp('slow');

And here's a description of each component:

$() - The basic jQuery construct (or function) that's used to select parts of the document. In this example, we're selecting an element with the ID of alert.
.slideUp - A jQuery method, one of many. Methods are essentially a shortcut for lots of JavaScript. It's pretty obvious the method slideUp makes the element we're targeting (#alert) slide up.
('slow') - A pre-defined string that defines how the method functions. In this case, it tells the element to slide up slowly.

This code can be added either inline or in a separate .js file (or dynamically), the latter being the more optimal method. But here's the real kicker: I didn't have to come up with any of the code above on my own. The construct, method, and string came pre-built with jQuery. I just had to know I wanted the element to slide up slowly, and then I looked up the appropriate references in the jQuery library that corresponded with the animation and movement I was seeking. Boom. Done.

It's worth noting jQuery isn't merely a cheap tactic for adding bells and whistles to an interface, though unwise use of it can thwart its intended utility much like any technology. Rather, jQuery is intended to be a really easy way to add useful interactivity to a site or app. In fact, jQuery is used throughout the interface in this and subsequent demos: jQuery autocomplete plug-in for the search field, the bio's edit-in-place feature, and the slide up/down animation when clicking Your Toolbox. See project.js and jquery.autocomplete.js in the scripts folder included in the download. (Special thanks to Aaron Barker who wrote a lot of custom jQuery and Ajax scripting for this interface!)

Additional jQuery reading:

Official jQuery site
Visual jQuery (a list of jQuery methods)
Digital Web Magazine: jQuery Crash Course
Simon Willison: jQuery for JavaScript programmers
Web Designer Wall: jQuery Tutorials for Designers
Noupe: 50+ Amazing jQuery Tutorials

Extensibility

We couldn't close this article without highlighting the series' theme, that of adaptable interfaces. This article's demo demonstrates the power of text extensibility throughout the interface. Try increasing the text size (Command/Ctrl + in some browsers), and give it a pass through Google Translate by translating the interface to another language such as Chinese. I plugged Dan Cederholm's Bulletproof Web Design book in the series announcement, and I'll plug it again here: Many of the underlying techniques for "bulletproof" text shown in this interface are covered in Dan's book.

Pay particular attention to the Your Toolbox button. I won't take time here to break down the markup used for the button, but you can view a button sample and accompanying slides that describe how things work. (These files are also included in the .zip.)

Also demonstrated in this article is resolution dependence, a continuation from Part I. Notice how the width of the search field changes as the browser width expands and contracts. This is done to allow additional space for all text as the width contracts, while increasing the field size for those with larger resolutions. The next article will expose several tricks for resolution dependence that dramatically alter the content and presentation. (Search field width and other resolution-dependent values are specified in /css/1024.css.)

Whew, that was more than enough to cover in one article! Suzanne and I are headed to Austin tomorrow and will hopefully meet some of you in person, and we'll return to the series next week with Part III.

Designer, Coder: Separate roles or one?

Posted: February 29th, 2008, 2:17pm CET

Update: By "Coder" I mean front-end code.

Oblige me, if you will, and allow me to ask you a few questions. It's related to the Extensible CSS series but also to another topic I'm dealing with.

1) How is your current role defined: Designer, Coder, or both? Freelancer or part of a team?

2) Do you agree with the statement I've made on occasion, that those who can code as well as they design will always have an edge over those who do only one? (See #3.) Or do you believe it's better for designers and coders to specialize in one role?

3) Is it more "productive" -- a team can take on more projects, get projects done faster, or however you define productive -- to have a single team of designers/coders or one team of each? In which scenario are the resulting user experiences produced "better" (however you define better)?

Feel free to briefly answer any or all of the above questions.

Extensible CSS Interface I: The Foundation

Posted: February 28th, 2008, 4:11pm CET

This series is sponsored by Authentic Jobs, a freelance and full-time job board for web professionals.

This is the first article in the four-part series, "The Highly Extensible CSS Interface". Markup and images for this article:

Throughout the duration of this series, we'll be speaking extensively about markup -- XHTML, CSS, and a little scripting. Marking up a website is akin to speaking Spanish. There's more than one way say something, and there's certainly more than one way to code something. (¿Puerco, cochino, cual es?)

As you plumb through my code, I'm hopeful you'll see things that you might code differently or even improve upon. Or put more plainly, I expect you to call me out on things that deserve refinement or just plain suck. After all, we collectively better ourselves as a community by exchanging ideas and opinions for approaches to problem solving, and markup practices are certainly no exception. Fair enough?

Meaningful, Lightweight

When drafting markup, the factors I consider most important are that it be as 1) meaningful and as 2) lightweight as possible.

When we say "meaningful" we mean the HTML elements and selector names we choose appropriately represent the content in such a way that if we were to experience the web with all styling removed, the hierarchy and structure of the content would still make sense. Long gone are the days of spacer gifs and repeated br elements (with which some of you reading this may not even have experience), replaced with elements which logically, or semantically, represent the content:

An ordered list of top-selling items (ol)
The principal heading on a page (h1)
A quotation from a happy customer (blockquote and cite)

This approach requires that we remove presentational information from our thinking, a concept described comprehensively by Andy Clarke in his remarkable book, Transcending CSS. I still vividly recall my early experiences with CSS as we coded a rather large-scale web application, thinking we were cleverly creating a series of presentational class names that allowed us to mark up content with elegant clarity such as this:

<p class="arial red 10">

…only to endure a painful day of reckoning when the application required a redesign, whose 500 templates were to become anything but red Arial 10px type. I can has do-over?

When we say "lightweight" we mean marking up our content with the fewest parts possible for all things markup -- elements, attributes, and values for HTML; selectors, properties, and values for CSS. For example,

<a href=""><span class="icon">Map</span></a>

is minimized as

<a href="" class="icon">Map</a>

Also,

border-width: 1px; border-style: solid; border-color: #000;

becomes

border: 1px solid #000;

You'll see numerous examples of meaningful and lightweight markup throughout the series, few of which I'll pause to explicitly explain. So take time on your own to make note of these. (And again, call me out when you see things that can be more meaningful and lightweight.)

Finally, because the theme of this series is extensibility -- designing and coding in such a way that the interface is as adaptable as possible -- the beauty of a meaningful approach is that it inherently helps set the stage for creating an extensible interface.

Let's examine the demo example by diving into some of the foundational code.

reset.css

When I first began coding CSS-styled sites several years ago, it was common to declare a few "global" styles at the top of the master style sheet: body, a img, h1,h2,h3,h4,h5,h6 etc. What was done back then as a means of overriding the default styles of any given browser eventually evolved into today's practice of using a "reset" style sheet, typically named reset.css.

As stated by the team at Yahoo, a reset style sheet "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers…." If CSS frameworks such as Yahoo Grids or Blueprint are your thing, each of these come equipped with a reset style sheet built in. Alternatively, you can roll your own or use one written by others in the community.

I personally prefer Eric Meyer's Reset CSS, and this is the reset style sheet used in the demo for the series. (Note: The demo CSS was written before Eric's January 2008 version of Reset CSS and therefore uses the May 2007 version. I've not gone back to update the CSS to adopt his latest version. Notes about the subtle differences can be found here.)

I use a single style sheet, master.css, to "import" any number of style sheets for a site. I declare the reset style sheet first, thereby allowing any style sheets that come after to override the reset styles as needed:

@import url("reset.css");
@import url("screen.css");
@import ...

All styles for screen display are then listed in screen.css.

Resolution Dependence

Herein begins one of the first components of extensibility: An interface that adapts to different display sizes (or browser widths). Perhaps the easiest way to accomplish this is to create a fully fluid layout (width: 100%;), which can accommodate virtually any display or browser width. However, fluid layouts create wide, illegible line lengths on larger displays, among many other issues.

However, to reap the extensibility benefits of a fluid layout while accounting for issues such as line length, we need only to set limits for the maximum and minimum width of our layout. I first demonstrated this technique in the fictitious Tuscany Luxury Resorts layout created for CSS Mastery. Expand and contract your browser's width, and watch how the layout expands and contracts but stops at 740px and 1200px. This is accomplished using the max-width and min-width properties.

Because IE7 wasn't publicly available when this site was created more than two years ago, and because IE6 ignores the max-width and min-width properties, the markup required a nasty hack to target IE and force it to replicate max/min-width using a JavaScript extension.

Welcome to 2008. Although IE7 market share isn't dominant enough to write off IE6 entirely just yet, we can at least begin to explore interfaces that leverage the many CSS2 and CSS3 properties now supported by IE7. And of course, these newly supported properties include max-width and min-width -- no need for nasty JS hacks.

We'll talk more about resolution dependence in Part II, but for now we'll add a few lines of markup and a couple scripts to start the process. To do so, we'll use Cameron Adams's excellent Resolution Dependent Layout technique. First, we reference two scripts in the HTML <head>:

<script type="text/javascript" src="scripts/event_listeners.js"></script>
<script type="text/javascript" src="scripts/resolution.js"></script>

Second, we add an alternate style sheet which the above scripts will import as the browser width expands and contracts beyond 1200px and 750px, respectively:

<link rel="alternate stylesheet" href="css/1024.css" type="text/css" title="1024 x 768" />

Notice that this style sheet is added to the <head> rather than being referenced by master.css.

Also take note that you can do the max/min-width thing without the need for Cameron Adams's scripts. However, we'll leverage his technique extensively to do some pretty sweet tricks with the content and navigation elements in ~~Part II~~ Parts II & III. But for that, you'll have to wait another week. Peace out, yo.

The Highly Extensible CSS Interface ~ The Series

Posted: February 25th, 2008, 5:21pm CET

It's been nearly three years since publishing a series of articles on this site. I've got an irresistible yearning to publish anew.

Introducing "The Highly Extensible CSS Interface," a four-part series of how-to's and savvy conversation to be published in the coming weeks, with the first article debuting this week. The phrase "highly extensible" is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout. I hope you come to discover extensibility as being broader than just "bulletproofing," though bulletproofing is certainly a significant part of it.

Here’s what to expect:

Part One: The Foundation
This first article will briefly discuss the importance of producing visually rich interfaces with semantic, accessible, and portable markup underneath. We'll then dive into code with a reset stylesheet and structure for a resolution-dependent layout.
Part Two: CSS Selectors & jQuery
Shifting to a more intermediate discussion of code, this second article will present examples that demonstrate how to take advantage of the now-supported CSS2 and CSS3 properties previously ignored by Internet Explorer, such as min/max-width, child and adjacent sibling selectors, and others. We'll also take a look at jQuery, a lightweight scripting library for enhancing UI elements.
Part Three: Adding Ajax Interactivity
The third article will lightly cover Ajax implementation and its role within the interface. This won't be a highly technical discussion that covers such things as XM [HttpRequest,] but rather a demonstration of a few ways to leverage Ajax judiciously.
Part Four: Testing for Extensibility
Lastly, the final article will look back at the chunks of code presented in the three previous articles to assess how they combine to produce a completed interface. We'll then subject the interface to a series of "extensibility tests" such as translation, text resizing and browser width resizing, the addition of new content, and so forth.

Code samples will be available for viewing and downloading with each article. Much of the discussion will be based on material and a demo interface created for a recent workshop, the likes of which you can preview by clicking this screen capture:

See you back here in a couple days.

Sans iPhone: The debriefing

Posted: February 23rd, 2008, 12:55am CET

I survived. Although the wife pointed out that I "cheated" on a couple occasions by accessing information for a few contacts that weren't synced elsewhere, I managed to make do without my iPhone for a week, swapping it for less capable devices such as the Sony Ericsson K750 and Nokia 6680.

I'll be publishing something substantial here on an unrelated topic next week and therefore don't have adequate time to do a full write-up right now, but I promised I'd share a few things I learned from the experience. Herein I keep the promise -- unedited, unspellchecked.

Unless you're a text-savvy teen, texting is an absolute pain with a numeric keypad, even with T9 (predictive text) enabled. My texting activity dropped significantly the last week. QWERTY keypads -- iPhone or otherwise -- are a necessity in my book.
No music. None of my other phones are set up to do music, mostly because it's a pain to do so. I lugged around my video iPod as a replacement and it was apparent having a phone that also doubled as an iPod -- a veritable iPod and not a ROKR gadget -- was rather convenient.
iPhone's screen performs really well in direct sunlight. A couple of my other devices were hardly discernable in direct sunlight.
The ability to lock or sleep the phone with one button (the top one on iPhone) is really convenient. Most others require at least two keypad clicks, and it's usually a cryptic combination to try and remember.
I didn't actually miss the browsing experience as much as I expected I would, perhaps because most of my phones are set up with Opera Mini, and a number of the sites I visit with a handset are mobile-optimized anyway. I did, however, do considerably less browsing, which may very well contradict what I just wrote.
Surprisingly, I found that having all menu options available from the home screen is incredibly helpful. Most phones require you to click a "menu" button to see these options, and even on some phones the menu option is not always intuitive. Further, having a screen large enough to accommodate text labels beneath icons is really helpful.
Two big takeaways: One, the week-long experience was clearly a reminder that handset manufacturers have spent far too much time on hardware research and development, and far too little time on software & UI research and development.
And two, and I shamelessly admit this, the "cool factor" or whatever you might call it is unbeatable with an iPhone. There's nothing better than being in public, having white iPod earphones on, and suddenly taking a call only to see the other passengers on lightrail wonder why you're speaking to yourself. I occasionally slip the iPhone out of my pocket to end the call, even though this unnecessary, merely to ratify that I am indeed a sane, and unabashed, consumer.
Finally, while the overall experience was much less satisfactory compared to the iPhone, I was reminded that most consumers throughout the world carry handsets just like those I carried. This is a two-edged sword for someone who's both a consumer and a content provider. Consumers can expect the bar to be raised for all phone manufacturers since iPhone's inception, which excites content providers, but in the meantime these content providers must cater to a broad spectrum of devices.

Experiment concluded. iPhone utility unequivocally verified.

Scrutinizing the XO (OLPC) user experience

Posted: February 19th, 2008, 4:37pm CET

So, I've had my XO laptop for nearly two months now. Over this period, I've used a few apps, browsed the web occasionally, and watched my sons (ages 2-7) use it. This article is an attempt to compile a coherent, albeit brief, report about the overall experience -- form factor, interface, data input, and so forth. Let's begin with the good.

The Good

It's as intriguing as an iPhone. And by that I mean, whenever I pull it out, it seems to draw a crowd. Those who've heard of it are excited to see it. Those who haven't assume I'm carrying a Fisher Price toy but quickly show interest once they discover I'm toting a full-featured laptop.

The camera is quality. For a $200 device, the embedded camera, which functions as photo camera and video camera, is really impressive. I haven't exported any pictures yet, but the clarity and response time seem better than even embedded iSight cameras.

The Measure Activity app is a hit with kids. Measure Activity is an app that, among other features, provides a visual display of audio waveforms via mic input. This usually results in kids screaming as loud as they can to see as large a wave as possible. One evening I found myself teaching the boys about things such as amplitude and pitch by having them make a variety of sounds and seeing the resulting waveforms on screen.

The OLPC effort is truly laudable. I applaud Nicholas Negroponte and his vision of bringing educational tools to developing countries. Even if the XO doesn't stick, he's raised the bar of approaching and delivering higher learning for developing countries. As the Economist puts it,

Ultimately the OLPC initiative will be remembered less for what it produced than the products it spawned. The initiative is like running the four-minute mile: no one could do it, until someone actually did it. Then many people did.

Shifting to the less laudable, I present the not-so-good.

The Not-So-Good

Fitts' law is often ignored. I need not delve into a discussion about Fitts' Law, as I assume many of you are aware of its assertions. What's disheartening about the XO is that scrollbars, checkboxes, and a few other UI elements are terribly small and difficult to target with a trackpad mouse -- small fingers or big. Consider the browser scrollbar, easily less than half the relative width of scrollbars in Windows or OS X:

The only saving grace in the example above is that the scrollbar is always pinned against the right side of the screen, effectively increasing the virtual width substantially. However, the height isn't much larger, and it's still a difficult target.

More input mechanisms than necessary. Three trackpads and two mouse buttons? For children who've never used a laptop, no less? I can't understand this decision. The OLPC wiki describes the dual-mode potential of the trackpad, but the only part functional out of the box is the middle portion.

Further, there's no tactile feedback around the edges of the middle trackpad, and I find myself often leaving the center area to the left or right and wondering why the mouse no longer works -- until I glance down and see I've left the middle area. A subtle raised line on either side perceivable by touch would be enough to correct this.

As for the two mouse buttons, this is a fallacy attributable only to the experienced PC users who developed the hardware and software. Observe as my four-year-old son uses the XO for the first time and attempts first to use the trackpad as a giant button, second to click the left and right mouse buttons until discovering the correct one:

Did you catch me being thrown off by the two buttons, as well? The MacBook's single-button trackpad would have been the obvious model to follow here.

Whose idea was "hot corners"? Seriously, this was a downright terrible decision. Hot corners, or activating UI functions when moving the mouse into one of the four corners of the screen, interrupts the current screen display and presents new options to the user. Mac users will recognize this feature if they've activated screen corners for Exposé.

For experienced users, hot corners can benefit workflow greatly. However, for inexperienced users, it can disrupt workflow substantially. We've seen this as non-Mac user candidates have come in for interviews and we've lent them one of our Macs for presenting work, only to watch them stumble repeatedly whenever they inadvertently hit a screen corner. (We usually have to disable Exposé because of this.)

Watch the video above again. Around 1:07, while the camera is on Isaac's face, he activates a hot corner and the dock-like menu shows up at the bottom of the screen. He then struggles to return to the application he's in. You'll then see me struggle with it, as well.

Ajax chokes the browser. I can't access Ajax / JS-heavy sites such as Netvibes on my XO, as it usually kills the browser. This isn't a problem of the device per se, but rather of the content provider. It's a reminder to consider the limitations of the device requesting the content when developing web experiences for non-desktop machines. (Think mobile here, too.)

Conclusion

There's been plenty of acclaim and disdain in the press regarding the OLPC effort, and I don't know enough yet about the device or the organization to warrant taking sides. However, I share the woes of many who've not received their XO, having ordered a second shortly after the first and it still hasn't arrived. Thus, before we can overly concern ourselves with user experience, let's hope these devices are reaching the audience for which they were intended.

Sans iPhone for a week

Posted: February 14th, 2008, 5:02pm CET

Yesterday I announced I was giving up iPhone for a week, returning to a less feature- and experience-rich phone to see what I miss out on. Today I've got the Sony Ericsson K750, one of eight phones I own (pictured second from the top above).

I'll post a report sometime next week when it's over. In the meantime, anyone know where I can get an iPhone patch -- you know, one of those sticky things you put on your arm? I fear I'll begin trembling soon.

In other news, Nokia and Sony Ericsson are releasing devices that appear to be targeting would-be iPhone buyers, the Nokia N96 and Sony Ericsson XPERIA X1. Early Android prototypes are beginning to surface, Texas Instruments is testing in-device phone projectors in its labs, Best Buy is among the most recent of U.S. retailers to release a mobile version of its site, and so on and so forth.

Is 2008 finally the year of mobile, specifically mobile media? (Better begin studying if so.)

15 Feb: For the next few days I'm switching to the Toshiba 903T, a handset that was sold primarily in Japan after its release in 2005.

18 Feb: Today I'm pocketing the Nokia 6680.

19 Feb: Back to the Sony Ericsson K750 today.

22 Feb: The debriefing.

GTD with Netvibes

Posted: February 7th, 2008, 4:58pm CET

Seven years ago, David Allen penned his now best-selling book for time management and productivity, Getting Things Done (GTD). Something akin to a GTD cult has amassed since its publication, and a search for the acronym today yields literally millions of search results. (If you're not familiar with the book, read Roger Johansson's review.)

Last summer I grabbed an audio copy of the book in preparation for a three-hour road trip. I have to admit I wasn't immediately floored by the techniques Allen presents, at least not to the extent some GTD junkies led me to believe I would be. This is probably due in part to a long-standing love/hate relationship with to-do lists -- I find it's easy to become entangled in the numberless factions of to-do-ism, believing man exists solely to check items off a list. For this reason alone I may have initially suppressed any feelings of floored-ness.

Yet, I did take away a few points from the book, some of which include the following:

2-minute rule: If the task can be done in two minutes or less, do it now.
If it can't be done now, defer it (write it down somewhere) or delegate it.
It's okay to write down every to-do, action item, or desired outcome that comes to mind, even if many of them are never accomplished. By writing down these things, your mind is freed of what Allen calls "mental recall."

There's much more than this in the book, but honestly, I think I'd go nuts if I were to attempt to implement the entire GTD "system" as prescribed by Allen.

What I have managed to do, however, is implement my own version of GTD loosely based on some of Allen's principles. It's fair to admit one won't be floored by my approach either, but I've been using this process daily for about 6 months and share it here for the benefit of those fearing to-do-ism entanglement.

I use a lovely little web app called Netvibes to organize all my tasks. It's essentially equivalent to iGoogle or PageFlakes, where you can add/move/edit your own widgets, edit text right on the page like a Word document, and so forth.

Netvibes screen showing task organization

I've created several tabs, the first of which is The List, or my task management tab. The List tab includes three columns of note widgets. The left column includes Someday/Maybes (+3 months out) and a Sort Bucket. The middle and right columns are split into two categories of tasks: Work and Personal. The boxes in green are all known tasks I want to complete in the next few days or next few weeks. The boxes in red are things I want to accomplish today.

Each morning, I move usually 3-4 items from the green boxes into the red boxes, or add items to the red as they come up during the day and need to be addressed that same day. If something isn't done by end of day, it moves back to the green until the next morning when I repeat the process.

The process is far from perfect but has worked rather well, and it's the first I've stuck with for more than a couple weeks. On top of this, Netvibes is free (currently), and they have killer mobile versions (m.netvibes.com) -- one formatted for any mobile device, another formatted for iPhone. Coupled with the fact that it's web-based, this means I can access my lists at anytime from my work machine, my home machine, or my phone (and I do).

If you're curious about the other tabs shown in the screen, I also use Netvibes as my feed reader, again because of the cross-device benefits, and thus the second tab is full of feeds. The third tab contains work/team-related goals. The fourth tab is a conglomeration of all kinds of stuff, most notably a holding place for possible Premium Linkage URLs and notes for articles such as this.

Lastly, if the Netvibes recommendations here are mere child's play for you, check out Justin Kistner's Integrating Netvibes, Pipes, AideRSS, Dapper for an intelligence dashboard. (Thanks Sam.)

Recent job listings

Posted: February 5th, 2008, 5:27pm CET

FYI, a few housekeeping items: Upon popular request from many of you seeking gigs, we've decided to allow employers to choose a location for freelance listings, in addition to choosing "Anywhere". Look for the location now specified in some listings.

Additionally, we welcome CSS Mania to the Authentic Jobs advertiser network, and look for the Authentic Jobs print ad in the 2008 SXSW Interactive Program, designed by Drew Wilson.

Now, down to business -- some of the recent listings featured over at Authentic Jobs:

Full-time (International)

London, UK Software Developer (Python) at Gaming social networking startup
Zaltbommel, The Netherlands Front-end Developer at LECTRIC Internetoplossingen
Vancouver, BC Web Designer at Wallop Creative

Full-time (U.S.)

Anywhere Web developer at Bandzoogle
At your computer Site Mechanic, Creative Director, webmaster, page person at Cybration Inc.
San Jose, California Ruby on Rails Developer at M3iworks
Washington DC User Interface Developer at United States House of Representatives
DC Metro Area Flash Developer/Designer at Hirshorn Zuckerman Design Group
Indianapolis, IN Marketing Web Designer / Front-End XHTML-CSS Coder at Klipsch Group, Inc.
Brooklyn, NY Website Manager at Brooklyn Botanic Garden
New York, NY; Bristol, CT WEB DESIGNER at ESPN
New York , NY Technical Producer at ESPN
New York, NY Senior Art Director at HUGE
King of Prussia, PA Information Architect at GSI Commerce, Inc.
Memphis, TN Interactive Designer/Developer at Deluge Studios
Richmond, Virginia Web Designer/Front-end Developer at Cavalier Telephone
Seattle, WA UX Designer at Zillow.com

Freelance

Flash Developer/Designer at March of Dimes
Web Application Developer at Iterative Media, Inc.
Front-End (XHTML, CSS, JavaScript) Developer at MyBannerMaker

Post a job or find one at Authentic Jobs.

Randomness, round 2

Posted: February 4th, 2008, 5:05pm CET

Tide "Talking Stain" ad (video)

I caught only part of yesterday's Super Bowl, but of what I watched this was easily the funniest ad. To Tide's credit, the concept of a stain detracting from an important event is an excellent tie to the product advertised, whereas some Super Bowl ads seems to lack any direct tie to the product.

"Mac bag" by Studio Leung

Love the idea, but one question: Why not call it Airbag™?

Private Cloud

Beautiful. Not sure I'd enjoy rocking or sleeping at an incline, but I can imagine this would make for an incredible centerpiece in a master suite.

How to make fireballs you can hold in your hand (video)

No comment. Via Kottke.

Erractic Wisdom

Tom Fadial's latest design for Erractic Wisdom is solid on grid, fresh on creativity.

Tilly Moss MacBook sleeves

Nicely executed site, good product idea too. (Though the New Stock badge looks uncannily familiar.)

Reform & Revolution

The complete details on this site, from the 3/apostophe in the logo to the author photos sitting outside the content block, combine to create a pretty compelling design.

Disk Inventory X

In a recent tweet I asked if anyone knew of a good app or utility for viewing which files/folders were taking up the most space on my Mac hard drive. Within just a couple minutes I had several replies, most of which pointed to Disk Inventory X and WhatSize. (For the UI geeks in the crowd, this style of organization is known as treemapping, as seen on Newsmap.)

Lakai Footwear: "Fully Flared" (video)

Skateboarding. Music. Explosions. Bliss. (Special effects courtesy of Spike Jonze.)

Randomness

Posted: January 30th, 2008, 5:24pm CET

Obey Obama

Shepard Fairey enlists himself as Barack Obama supporter and offers a few posters in his signature style, pro-bono. Via Jeff Croft.

ESPN.com: Mobile visits briefly outpaced PC visits

I consider this big news for mobile, but not surprising the way mobile has been trending. A few weeks ago, ESPN.com saw more visits by mobile users than PC users during an NFL weekend:

ESPN declined to confirm the numbers, but an executive briefed on the data said that for one 24-hour period, ESPN's wireless NFL section, with 4.9 million visits, topped the PC NFL section's 4.5 million visits.

The History of Visual Communication

A succinct yet sufficiently thorough primer on visual communication from rocks and caves to the computer.

Scroll quickly to the top in Mobile Safari

Brilliant tip for getting to the top of a long scrolling page in Safari on your iPhone: Tap the top info bar (where the time and battery indicator are). Boom.

Managing design in eleven global brands

An in-depth study on the impact of design among major brands, conducted by Design Council, the UK's "national strategic body for design." Read online or download the PDF. (Thanks Gilbert.)

The work of Jacob Souva

Veerle interviews illustrator Jacob Souva, New York-based freelance illustrator.

Ma.gnolia Mobile

Mobile version of Ma.gnolia's social bookmarking service.

Eric Meyer resets his reset.css

Eric updates his global reset.css for minimizing inconsistencies between browsers. I'll speak more about this in a few weeks.

Light CMS "for web designers"

Methinks the promise of a "friendly CMS" is technically impossible give the inherent nature of CMS apps, but linked to FWIW.

Contracts for designers

A decently sized list of contracts, agreements, and forms for designers.

New March of Dimes campaign site

Love the ingenuity of this home page.

Forty's convincing one-pager home

It's a couple pages more than a one-pager, but from what I can tell this is a very effective home page for a small agency. You can get a feel for who Forty is, who they've worked for, pricing, and even links to competitors (which is a subtle way of saying, "Hey, we're on the same level as Avenue A | Razorfish, Happy Cog, etc.").

Mucking Up the Fireworks

Jason Santa Maria:

As a means to a website layout, Photoshop is woefully inadequate…. What we need is simply a dedicated and professional level UI design application, and Fireworks could still be it. And if Adobe can't get it done, surely the independent development community could answer the call.

Completed mix: Conference break music

Posted: January 26th, 2008, 11:09pm CET

Our First Annual Design Review has concluded, and it appears to have been a success. View the full list of songs that played in rotation during breaks in the Annual Design Review 2007 iMix (iTunes required).

Special thanks to those of you who commented. I now have a plethora of new songs as ambient backdrop to my daily routine.

Music you might hear during breaks at a conference

Posted: January 23rd, 2008, 1:16pm CET

I need your help. This Friday, the 30 designers of our team will assemble in the main auditorium of the stunning Salt Lake City Library for our First Annual Design Review. We've been planning this full-day event for a couple months now and I'm really excited to see how things turn out. I may blog about our approach at a later date.

For now, we're down to the wire, and I need your music suggestions. Picture this: You're at a conference. [Insert design or web rock star name] just delivered a killer session on typography or CSS5 (or both) and it's time for a break. What song(s) do you expect to grace the room in tribute to the moment?

Frankly, I'm not at all experienced with this sort of thing, and I'm probably the last person you'll ever find behind a turntable. I've started compiling a few tracks in this iMix (iTunes required). Concur, poke fun, or add your suggestions in the comments.

Update: The completed list is now available. Thanks for all your suggestions.

Overcoming blankcanvasphobia

Posted: January 16th, 2008, 5:49pm CET

Preparing to go over the edge with rope attached

I love rappelling. I don't go that often, but when I do, I'm like a kid in a candy store -- I can't get enough.

Funny thing is, I'm scared to death of heights. Merely the thought of standing atop a cliff looking down makes my palms sweat. (And they already sweat profusely as it is.)

Staring at a blank canvas in Photoshop (or your preferred graphics program) feels the same way as standing at the edge of a cliff waiting to go over. You're safely strapped in, but the idea of going from standing upright to lying on your back with feet planted on the side of a rock incline is terribly daunting. But once you've gone from vertical to horizontal, the rest is easy, and even thoroughly enjoyable.

With that in mind, following are a few pointers for getting over the design ledge, or as I phrase it for the sake of this article, overcoming "blankcanvasphobia."

1. Familiarize yourself with how others have solved the same problem you're solving. In his book How Designers Think, Bryan Lawson observes the following:

[D]esign is as much a matter of finding problems as it is solving them.

What you're ultimately trying to accomplish when filling a canvas is the exercise of solving a problem. In my experience, rarely have I designed an interface for the likes of which someone else hadn't already designed something similar. I find solace in scrutinizing how others have solved their design problems, and I also find it lends guidance for solving mine. Note that I'm not talking about finding influence among the litany of gallery sites on the web, but instead learning from the mistakes and successes of others.

2. Draw from previous work. In reality, if you're at least a semi-experienced designer, you never actually begin with a totally "blank" canvas. You've stored plenty of style, typography, interaction, and other design elements not only in memory but in the archives of your portfolio work. Don't hesitate to revisit elements that worked well in previous projects, as chances some of these same elements may work well in your new project.

3. Sketch it out. Fundamentally, a blank sketchbook page and a blank Photoshop canvas are equals: both are blank, and both can be intimidating. But in my mind, the difference between Photoshop and sketchbook is the difference between tool and creative space. When I'm in Photoshop, I feel obligated to act like a designer, as I'm surrounded by shapes, colors, guides, and so forth. In contrast, when I'm in a sketchbook, no tools are present, aside from the writing instrument in my hand. There's less pressure to design, more room to be creative.

4. Begin with a grid. Part of the reason a blank canvas can be menacing is, well, because it's blank -- it's empty, sans restrictions, no rules. One would think this freedom yields endless opportunities, but in my experience, it yields chaos more often than not. As ironic as it sounds, having a few rules in place can be incredibly liberating. Grids make beautiful design rules, as they force one to make conscious decisions about how the content should be honored long before worrying about the minutia of aesthetics, and they encourage creativity within given boundaries. For the record, I prefer a 960 px width grid for web work, but there are countless ways to utilize grids on the web. (Note that this recommendation somewhat contradicts the previous one about sketching. However, keep in mind this is not a sequential list, but instead a brief compilation of suggestions for getting over the edge.)

5. Begin in grayscale. I've done this several times lately, enough to validate the recommendation. Beginning a design monochromatically forces one to focus on three things: hierarchy, typography and the content these two design principles represent. I'm certainly not advocating color plays an insignificant design role, but that it is often supplementary rather than dictatorial. Pierre Bonnard, French painter in the early 20th century, describes it better than I:

Color does not add a pleasant quality to design, it reinforces it.

The easiest way to begin in grayscale is, not surprisingly, to set the image mode to grayscale (Image > Mode in Photoshop). From there, keep things low-fidelity, ignoring many of the design details you may add in later. Jason Santa Maria describes this approach in greater detail in his article, Grey Box Methodology.

6. Start with the "core." I've written before on designing the core actions of an interface first, as have 37signals. For example, note that this comp has no design in place for the masthead and some of the sidebar elements, as these are secondary to the "core" actions for the site (which, in this case, is the act of interacting with recipes).

7. If nothing sticks, come back later. I've also written before on the topic of unplugging one's self when faced with creative block. This especially holds true when wrestling a blank canvas. Of course, some argue walking away is merely avoiding the issue, but I find it hard to force myself to design something if I'm not mentally prepared to do so.

Hope this advice helps as you go from the figurative design vertical to the horizontal.

Mon sac de choix: STM Alley Case

Posted: January 9th, 2008, 4:40pm CET

Choosing the right laptop bag invariably becomes a lifelong endeavor for some, and I'm no exception. About a year ago I finally settled on a bag I absolutely love. I'm not entirely sure why, but I receive compliments at work and on the road about my bag pretty regularly, enough to prompt me to share my choix if merely to help others choose theirs.

The STM Alley Case 13" (Olive) is the bag pictured here. Manufactured in Australia, this model is a vertical messenger bag. I originally purchased it for travel, given I speak at conferences regularly. I figured the vertical displacement of weight and material would work better as a carry-on when pulling other luggage, making my way down the aisle on the aircraft, and stowing under the seat. Fortunately, I figured right, and the bag has stayed by my side ever since for everyday use.

My work machine is a 15" MacBook Pro, but this a 13" bag. However, the MacBook Pro still fits nicely inside. Plus, it allows me to carry my 13" black MacBook when traveling, as this is my "speaking" machine.

You'll note the bag is rather compact, and that's part of the reason I chose it -- I'm forced to travel light. And yet, I'm able to carry everything I need for daily work. (Click the final photo showing contents for additional mouseover notes on Flickr.)

So, for what it's worth, that's my bag of choice. What's yours?

DOS ain't so bad after all

Posted: January 7th, 2008, 4:26pm CET

Is it possible the web interfaces we construct today are occasionally less efficient than DOS interfaces of yesteryear?

Because I often don a suit and tie, I dry clean items nearly every week. When I drop off clothing by drive-through, the clerk zips through customer and product data with incredible speed.

Last Friday I found myself purchasing a La-Z-Boy chair to accompany a sofa of the same style. The salesperson sprinted through inventory and delivery data with similar speed.

In both scenarios, the interfaces enabling these quick experiences are DOS-driven. No gradients, no Ajax, no mouse. Fitts' Law isn't even of concern. Just alphanumeric characters and keyboard strokes.

Admittedly, what should be understood is that both of these scenarios are point-of-sale transactions. The primary users are experienced employees who have been trained specifically to use these systems, which may often have steep learning curves.

What's interesting, however, is that in both scenarios, there are secondary participants: me, the customer. For all intents and purposes, that makes me a secondary user; that is, I'm just as dependent upon the speed of the transaction (interface) as the primary user: the salesperson or clerk.

There's a lingering temptation among those of us in the industry to replace all so-called "antiquated" means of doing things with newfangled web interfaces. And rightly so, given the many benefits the web provides. Yet, I cringe when I think about these two satisfactory DOS experiences being replaced with point-and-click web interfaces.

Please keep me a DOS secondary user for the foreseeable future, point-of-sale citizens.

Authentic Jobs promotion: 50% off with code

Posted: January 3rd, 2008, 2:38pm CET

50% off Authentic Jobs listings. Use promotion code MOLL08. Expires 15 January.

If 2007 is any indication, all of us web people are in for another busy year. Should your plans include hiring or outsourcing, post a job listing or request for work by taking advantage of promotional pricing at Authentic Jobs: Use promotion code MOLL08 and receive 50% off the purchase price of a full-time or freelance listing. Offer expires January 15.

Of course, the money-back guarantee still applies, and others have found success, so toss in the discount and this is a great way to kick off the new year strong. And if you're on the other end seeking work in 2008, grab one of the available feeds, download the Mac OS X dashboard widget, or follow along in Twitter.

Happy new year, everyone. Here's to your continued success in 2008.

Unpacking the XO ($100) laptop

Posted: December 19th, 2007, 10:40pm CET

Mine arrived today, and I hope its companion arrived to a child in a developing country just as quickly. Below are a few pics I snapped as my boys and I unpacked it. Learn more at laptop.org (give one get one ends Dec. 31).

Larger pics available at Flickr.

First impressions:

It's a lot smaller than I thought it would be.
The keyboard is definitely made for small children. I had a difficult time typing letters. Isaac (pictured) seems to do okay.
The OS is a bit slow compared to systems we're used to, but given the extremely low manufacturing cost and the fact that most children in developing countries will have no reference point to our systems, this isn't an issue at all.
Lots of buttons around the fold-up portion of the screen, not sure what they do.
There seem to be three mouse keypads, not sure why. Perhaps if three kids are playing a game at the same time or something?
Can't figure out how to connect to wi-fi. Seems to be configured for "mesh" networks. (The Google page is cached, btw.)
The OS, keyboard, and mouse combination will be the make-or-break for this thing. I was a bit surprised to see that the three map to metaphors we (experienced computer users) are used to. There's something to be said about the years of research that have gone into those three elements, but at the same time I'm quite concerned the learning curve for someone who's never used a computer will be rather steep. For example, the power button looks like all the other buttons flanking the left and right sides of the screen. I would have made this one big and fat, centered, etc.
Update: Failed to say I enthusiastically applaud the efforts of Nicholas Negroponte and many others to bring this to market. To have one in my hands and see his dream become a reality is incredible.

Update: Finally got the web connection working...

Challenging the Apple archetype

Posted: December 19th, 2007, 5:15pm CET

It's that time of year, wherein many of us gaze with luminous eyes into crystal balls of foresight and attempt to predict trends for the coming year.

Right. So, I'll get to the topic of this article in a moment, but unlike bygone years, I refrain from offering predictions about aesthetics and techniques for the coming year. (Though as an aside, I find it sadly interesting the fieldset element still sees little usage today, more than three years after I expected we'd all be happily implementing them in our forms.)

Instead, I turn to a subject that's been receiving increased attention the latter part of 2007, that of creating exceptional experiences. I've heard the terms "experience" or "user experience" quipped incessantly in presentations, articles, and the like, more so this year than previous ones. For the most part, this is a good thing. It seems we're finally getting it as an industry -- that after all the design polish is crafted, the slick interaction developed, and the copy carefully penned, what matters most is the complete experience of consuming and interacting with whatever it is we've produced.

On that note, I return to the topic of this article. Perhaps more than any other brand, Apple is and has been the predominant archetype in nearly any conversation I've been privy to -- or fostered, for that matter -- regarding branding, identity, experience, etc. "Apple does it best" is the claim, and frankly I've rarely disagreed.

As appealing as Apple is, however, there's remains an aura about the brand that is undoubtedly Apple-centric, even Steve Jobs-centric dare I say. One cannot disagree iPhone offers one of the most enjoyable user experiences by any device on the market today. Likewise, one cannot disagree that the experience is undoubtedly a tightly controlled Apple experience. This isn't necessarily a bad thing, mind you. But it's expected from a company so concerned about its image.

What isn't always expected is an experience whose exceptionality is derived by the user rather than for the user. "You do it best" is the substitute claim, and it is this distinction that has left me seeking alternate archetypes. (Note: I'm not talking about social networking here, but instead great experiences created by individuals, whether or not those experiences involve more than one person.)

Admittedly, I'm still seeking these alternates. But one brand that has repeatedly come to mind as I've given this topic thought is LEGO. Those infamous Danish plastic bricks you used to play with as a kid (and probably still do)? Yeah, that brand.

As described on its site, LEGO is an abbreviation of the Danish phrase "leg godt" meaning "play well," and it so aptly describes what LEGO is all about. You, the person who plays well. In fact, a couple years ago, advertising agency Blattner Brunner created a brilliant advertising campaign that captured the essence of this LEGO/You experience:

Lego ad showing a simple block with life-like shadow

Deliberately simple block formations with high-fidelity shadows exaggerate the idea that one's imagination, not the blocks, creates the experience.

At this point, you're likely asking, "So, exactly how does this differ from Apple?" Ironically, in many ways it doesn't. Quality is just as much a concern for LEGO as it is for Apple, and just as vital to the experience (if you've ever played with LEGO knock-offs, you know what I mean). Elegant simplicity is just as much a concern too, as probably only 100 basic shapes account for 95% of all LEGO kits. Yet, in the end, you create the experience from start to finish, and you're free to modify that experience however you choose.

Think of it this way: We spend weeks, even months trying to figure out user needs and develop features to meet those needs. We often have to shoot for the middle or aim for the lowest common denominator to meet a widely varying set of needs for a given audience. What if instead, the individual user, who presumably knows his/her needs best, could create his/her own experience within a framework we provide?

Say you work for a bank and you're tasked with building the online extension of your bank's business. You'd probably start by providing the "basic blocks" such as account balance showing credits and debits, bill pay, and options for printing and downloading statements. What if that were all you provided, and then you allowed each user to extend and customize the capabilities of your system to their liking by merely providing a few plain-English commands:

"Text me whenever my account balance nears $500."
"Transfer $1,000 to savings anytime I receive a direct deposit from my employer."
"Send me a Quicken file with expenses for gas and groceries at the end of each month."

Your app, therefore, does nothing more and nothing less than it needs to for each individual user. In essence, your app offers an exceptional experience derived by the user rather than for the user -- or for one type of user, that is.

Do I expect this to happen in 2008? Certainly not. Probably not even in the next couple years. Is it economically and technically feasible to pull off? That remains to be seen. But I do I believe we should at least consider working towards this approach? Yes.

And don't get me wrong, we definitely need the Apple archetypes among us. I just think we need a few more LEGO archetypes, too.

Posted: December 7th, 2007, 2:47pm CET

Yesterday, after months of resisting the call to join the ranks of Twitter including profound pleas from peers, my formidable will to withstand broke down, and the following was recorded in the annals of Twitterdom:

After months of actively avoiding it, my first tweet. Feel like the guy who started blogging in 2007. Fingers crossed I won't regret it.

I really do feel like the guy who started blogging four years after everyone else. And I really do hope I don't regret it. After all, I'm having a hard enough time staying current with email and RSS feeds. I can't imagine how I'll stay current with this.

Oh well. Here goes... Tweet.

Recent job listings

Posted: December 3rd, 2007, 4:20pm CET

Full-time (International)

Amsterdam Web Designer (Amsterdam) at Mediamatic Lab
London or Leamington Spa Front-end Web Developer at Scholastic
London AJAX Lead at Airlock
Stockholm, Sweden Standards-aware ASP.NET developer at NetRelations

Full-time (U.S.)

Palo Alto, CA Ruby on Rails & Flex Designer/Developers at Manhattan Project
San Diego, CA Senior Web Designer at Positive Digital Solutions
San Francisco, CA Web Designer at EDAW Inc.
Boulder, CO / San Francisco, CA front-end designer/developer at DCI
Boston Web Developers at WGBH
Boston, MA Online Communications Manager at Dana-Farber Cancer Institute
Bethesda, MD Interactive Designer at BrowserMedia
New York, NY Interaction Designer / Developer at Boliven, LLC
New York, NY Online News Designer at NYTimes.com
New York, NY Web Designer with Aspirations at The Open Planning Project
Okemos, MI Web Designer - Senior Level at TechSmith
Provo, UT Manager of Web Development at Brigham Young University

Freelance

Part-time User Interface/Web Designer at OutDash Development
Front-End Web Designer/Developer at ZoeCity
E-Commerce Developer - PHP/CakePHP/MySQL at English360

Michelle Robbins, Director of Technology at Third Door Media, Inc., posted a freelance listing at Authentic Jobs only to request it be pulled just three days later:

I have to tell you how pleasantly surprised I am at the sheer volume of extremely qualified candidates that have responded to the listing. I'm getting buried :-) I've already sorted through and have a list of more than 10 candidates I want to follow up with.

Post a job or find one at Authentic Jobs.

Noted without comment: iPhone vs. Windows PDA

Posted: November 27th, 2007, 4:11pm CET

A letter to the editor from Eagle Bear Morgan of Seattle, in response to Time Magazine's November 12 U.S. issue, "The Best Inventions Of the Year":

In naming the iPhone the best invention of 2007, you forgot about Windows-based PDA phones. They've been out for years. Touch interface? Big deal. As you noted, it's been done before. A miniaturized operating system? Done. Windows-based phones are everything the iPhone is and more. The phones can text, MMS, e-mail (through POP, IMAP, Exchange), surf the real Web at broadband speed on EVDO networks and open, edit and save documents. The iPhone is for kids. Windows Mobile PDA phones are for adults who need to do real work.

Mobile Web Design: Holiday discount price

Posted: November 19th, 2007, 3:48pm CET

Screen showing Mobile Web Design holiday discount pricing

Looking for a unique gift for the digerati in your life this holiday season? Gift them a copy of Mobile Web Design and grab an extra for yourself. Now through December 15, take advantage of discounted holiday pricing: $17.95 for the print version ($5 off) and $15 for the PDF version ($4 off).

Be sure to order the print version early. Because Lulu prints on demand, it typically takes a week to process and print the order and then 3-7 days to ship (depending on the shipping you choose).

Happy holidays to you and your loved ones as we welcome the holiday season.

Randomness

Posted: November 16th, 2007, 11:20pm CET

XO Laptop "Give One Get One"

Empower children of developing countries by ordering an XO Laptop (formerly the "$100 Laptop") for one child and get a second for yourself. Offer expires November 26. It's incredibly inspiring to see this come to market, not to be stranded as yet another "nice idea" along the roadside of global change.

"Type Means Never Having To Say You're Sorry"

An essay on typography by Jessica Helfand, this is easily the best design commentary I've read in weeks.

'What made you choose this typeface?' I inquired of a lovely young woman whose senior project involved a series of book jackets for Sigmund Freud's Interpretation of Dreams. 'I liked how modern it was,' she replied. 'Did you read the book?' She blushed, shook her head no, and looked down at her lap.

Honestly, stop what you're doing now and read.

Feel Script, a Veer Exclusive

I don't know that I've got a project coming up anytime soon for this typeface, but lovely nonetheless. Beautiful slideshow, too. (Speaking of Veer, you knew they were just acquired by Corbis, didn't you?)

Introducing FF Meta Serif

Admittedly, I've never bought into Meta (Sans), but this I like.

Free chapter: “Beyond Simple XHTML Pages”

Another exclusive chapter from the good folk at mTLD (dotMobi). Read a free chapter from Mobile Web Design covering techniques that exploit mobile beyond just XHTML and CSS.

Dictionary: gesticulate

I often gesticulate whilst speaking.

Vintage ephemera using deli sandwich paper

Artist D J Pettitt's unique layered technique uses inket transfers and deli sandwich paper to create stunning artwork. And don't miss the excellent tutorial.

iPhone web development samples

Great collection of iPhone web dev samples. Would be nice if the code were more easily accessible, but a solid resource regardless.

Ambient Umbrella

Nice. Notifies you to bring the umbrella before it rains.

The new msnbc.com: Designs we left behind

Posted: November 14th, 2007, 2:27pm CET

UPDATE: Upon request, I've linked the image showing my notes and the screen that followed.

If you haven't paid it a visit already, the new msnbc.com is worth a look. Nearly two years of research, planning, iterative design, and development went into this behemoth overhaul. It isn't merely a redesign with a more lively, vibrant brand, but a genuine realign that thoroughly repositions the website as a separate entity from the cable channel, among other things.

This redesign is of particular interest to me as I had a minor role in shaping the outcome. Creative director Ashley Wells offers an in-depth, behind-the-scenes debriefing of all things design in his post-launch commentary titled "Designs we left behind," in which he mentions my role as well as that of Greg Storey and JD Hooge. I won't reiterate Ashley's account, but I will offer a few details about the role I played.

Ashley approached me nearly a year ago with an offer to fine-tune a design his team had been working on. Seeing how I almost took a position with them (more about that here), I've maintained a working relationship with Ashley's crew and therefore jumped at the opportunity.

When I'm given the chance to offer design critique and enhancement, I do my best to become cognizant of every detail, knowing a body of work is undeniably greater when each individual element is at its best. I've said before details a great designer maketh, but I'm certain we can all agree details a great design maketh, as well.

To assess the details of the design I was provided with, I spent time pouring over the Photoshop template, eventually printing a copy and filling the margins with notes regarding improvements to the hierarchy, typography, and iconography -- all of which were minor enhancements to what I felt was already a very solid design.

My enhancement, therefore, doesn't appear to be earth-shatteringly different. A few aesthetic adjustments and type changes were implemented, while the largest changes altered the lower fold to improve hierarchy and to create a better snapshot of the day's content higher on the page.

Obviously, the new version published last week is a good deal different than the original design, but such is the path of a year-long iterative design process influenced by new thinking, a major media campaign, and so forth. I really like what I see. The new version is an incredible improvement and an impressive body of work, to boot. Further, aside from all the embedded scripting and CSS, which is likely a result of the CMS or other three-letter curse word, the code under the hood is pretty clean. (Although a DOCTYPE might help, guys.)

Compliments to Ashley Wells et al on a stunning makeover.

The Accessibility Cookbook: A Recipe for Disaster

Posted: November 12th, 2007, 8:40pm CET

It's one thing to lecture on and study the topic of accessibility, but it's an entirely different thing to see it first hand.

Aaron Cannon, blind since birth, is an interaction designer with whom I have the privilege of working. Not only is Aaron witty and intelligent, he's also pretty knowledgeable about accessibility and even kicks out some pretty good code, too. True, Aaron is probably more adept than the average blind web user, but his first-hand experience with accessibility and the web puts him in a position to offer practical advice for welcoming disabled users.

It is this very idea of practical accessibility about which Aaron writes in his article, The Accessibility Cookbook: A Recipe for Disaster. Drawing parallels between cooking bread and creating accessible websites, Aaron reminds us that things aren't as convoluted (or ideal) as we make them out to be:

And so, the myth is perpetuated that bread making is a very complex process, the inner-workings of which can only be understood by those bakers with a doctorate in breadology. They forget that our ancestors (a few of whom had to be at least slightly dumber than they are) made bread on a regular basis with no problems.

He continues:

It has been my experience that many people who learn about accessibility are led down a similar path as would-be bread bakers. They are handed a recipe and told, 'This is what you are to do, and if you don't do this exactly, those crazy disability advocates will come after you with their blood-thirsty lawyers.' They are told things like, 'mark headings up as such,' and 'put skip-to-content links at the top of pages.' What all too often is not mentioned is why.

Just last week Aaron dispelled a common misperception for me personally as he reviewed my code from a recent project, finding I had provided alt text for nearly every image and icon on the page. What Aaron articulates in his article is roughly the point he articulated with me:

... it is a common misconception that every image on a page should include an alt attribute with a verbose description. In actuality, only images with important information should be provided with descriptions, and those should be as brief as possible. For example, if there was an image which said '50% off this week on all orders over $50', then that should clearly be provided with alternative text. However, if there was a picture of a man using a particular product, I'm really not interested in hearing 'picture of a man looking pleased as punch to be using the new ultra-lite USB hair drier,' or worse, 'picture of a man.'

Yes, every image should include the alt attribute (even if the value is blank), but Aaron's point is that he need not hear attribute values read by his screen reader if it doesn't add value to the experience or content.

At any rate, the real takeaway for me from Aaron's article is to be practical when addressing accessibility, bulletproofing, SEO, or any other technique we read about or hear at conferences:

So, in short, learn all you can about the why of accessibility, and then go do your best. Most of the time, it will probably be good enough, and almost certainly better than if you just blindly follow a recipe.

(In addition to the book Aaron recommends, also consider Just Ask: Integrating Accessibility Throughout Design by Shawn Henry, which is replete with first-hand knowledge and recommendations.)

A wish to learn

Posted: November 7th, 2007, 4:52am CET

Sunday evening, as I packed clothing in a suitcase, my oldest son's voice traveled upstairs bearing words that brought solace to a departing father.

"Dad, can you help me build a website?"

No coaxing or insisting on my behalf led to this earnest request. One hour and one iWeb later, my seven-year-old's first website was published.

Tomorrow I'll be spending the entire day with 80 people from a variety of organizations and countries, teaching these outstanding individuals what I know about building websites. Yet, as enjoyable as eight hours of instruction and group discussion will no doubt be, the hour spent on Sunday was of far greater importance in the grand scheme of things.

"The important thing is not so much that every child should be taught, as that every child should be given the wish to learn." â€“Sir John Lubbock, The Pleasures of Life

SharePoint 2007: Pointedly unskinnable

Posted: October 24th, 2007, 5:19pm CEST

Remember all that clamor about skinning SharePoint with standards?

Well, it turns out SharePoint 2007 isn't nearly as customizable as I (and others) were led to believe. Not even close in some cases. Given the amount of exposure my original article garnered, I feel obligated to share what I've learned since.

There is a fundamental distinction that must be understood when implementing SharePoint: SharePoint can be used primarily as a CMS or primarily as a collaboration tool. However, try to use it as both in a single implementation and you'll entangle yourself in a strenuous skinning effort.

Let me attempt to explain why.

At its core, SharePoint is a robust content management system (CMS). Just about any flavor of web content can be built and maintained by it -- public or internal, small scale or large. One site referenced often throughout our initial skinning effort was the public site for Hawaiian Airlines, powered by SharePoint. In this scenario, typically one or very few individuals access admin screens, while the majority of users merely consume published content.

Complementary to its core, SharePoint is a massive collaboration tool. It can facilitate the many activities common to any workplace -- intranets, document sharing and versioning, project tracking, and much more. The most common of these is probably "team sites." In this scenario, you have many site owners accessing admin screens. In reality, nearly every user can simultaneously be a site owner and consumer of content.

Here's where things fall apart: Any changes made to Master Pages (i.e. templates for the CMS) will not carry over to the admin screens. Apparently this is intentional, but I consider it a major UI flaw. (See comments #56 and on from the original post for more info.) This is all perfectly fine in the CMS scenario, as only an infinitesimal fraction of your users will switch between published screens and admin screens. However, in the collaboration scenario, nearly any user can, and will, switch between published screens and admin screens to complete tasks. Because your skinning won't be reflected in the admin, what should otherwise be a continuous visual flow for users instead becomes a jarring transition from your beautiful theme to SharePoint's vanilla theme and back again.

No one ever made the above distinction, and thus "Hawaiian Airlines did it, so can we!" became our rally cry, not realizing the difference between CMS skinning and collaboration skinning. The ensuing deep dive into customizing images and markup for our team sites led to an unsuccessful skinning effort that was eventually scrapped. This inevitably begs the question: Is SharePoint completely unskinnable when used as a collaboration tool? No. It's still possible to skin the interface using CSS overrides, but not to the extent which we were customizing it.

In summary, if your organization plans to use SharePoint 2007 primarily as a CMS, evaluate it as you would any other CMS. I think we can all agree that pretty much all content management systems are crippled, but at least you'll be able to customize the entire experience -- interaction, design, markup, and so forth.

If using it as a collaboration tool, treat it as licensed software with minimal branding customization. Or better yet, avoid it like the plague and convince your organization to go with Clearspace or even Basecamp.

Lastly, and most importantly, my greatest concern for customizing SharePoint was the hope that I'd not only be able to paint the app but customize the interaction workflow, as well. Not a chance. In fact, I feel it worth your time to warn you that the out-of-the-box user experience is downright horrible in many areas. Sally User needs to change the logo on her SharePoint team site? No problem. She'll just need to navigate away from the site customization screen to find the image gallery, locate the image she wants, click it, copy the URL in the address bar, navigate back to the customization screen where it asks for a customized logo

Gregarius » Authentic Boredom

Feeds

Authentic Boredom (100 unread)

Posted: June 18th, 2009, 5:45pm CEST

Posted: June 4th, 2009, 5:39pm CEST

Posted: May 19th, 2009, 5:09pm CEST

Posted: May 7th, 2009, 3:52pm CEST

Posted: April 24th, 2009, 3:28pm CEST

Posted: April 23rd, 2009, 6:35pm CEST

Posted: April 21st, 2009, 5:16pm CEST

Posted: April 9th, 2009, 5:57pm CEST

Posted: April 6th, 2009, 5:33pm CEST

Posted: April 1st, 2009, 7:11pm CEST

Posted: March 19th, 2009, 6:00pm CET

Posted: March 5th, 2009, 5:12pm CET

Posted: February 25th, 2009, 5:17pm CET

Posted: February 19th, 2009, 4:51pm CET

Posted: February 16th, 2009, 6:05pm CET

Posted: January 29th, 2009, 5:01pm CET

Posted: January 27th, 2009, 4:34pm CET

Posted: January 14th, 2009, 6:15pm CET

Posted: January 12th, 2009, 2:15pm CET

Posted: December 29th, 2008, 3:33pm CET

Posted: December 24th, 2008, 5:15pm CET

Posted: December 23rd, 2008, 4:33pm CET

Posted: December 15th, 2008, 6:17pm CET

Posted: December 11th, 2008, 4:32pm CET

Posted: December 11th, 2008, 12:53am CET

Posted: December 10th, 2008, 4:03pm CET

Posted: December 8th, 2008, 4:31pm CET

Posted: December 4th, 2008, 3:57pm CET

Posted: December 3rd, 2008, 11:28am CET

Posted: November 12th, 2008, 3:53pm CET

Posted: November 7th, 2008, 10:03pm CET

Posted: October 23rd, 2008, 9:19pm CEST

Posted: October 23rd, 2008, 5:16pm CEST

Posted: October 20th, 2008, 5:27pm CEST

Posted: October 16th, 2008, 6:36pm CEST

Posted: October 2nd, 2008, 3:55pm CEST

Posted: September 26th, 2008, 5:16pm CEST

Posted: September 23rd, 2008, 6:27pm CEST

Posted: September 19th, 2008, 10:08pm CEST

Posted: September 17th, 2008, 6:55pm CEST

Posted: September 17th, 2008, 6:55pm CEST

Posted: August 28th, 2008, 4:54pm CEST

Posted: August 20th, 2008, 4:57pm CEST

Posted: August 12th, 2008, 3:19pm CEST

Posted: July 31st, 2008, 5:41pm CEST

Posted: July 29th, 2008, 5:31pm CEST

Posted: July 22nd, 2008, 5:34pm CEST

Posted: July 21st, 2008, 5:52pm CEST

Posted: July 11th, 2008, 4:21pm CEST

Posted: July 9th, 2008, 5:06pm CEST

Posted: July 7th, 2008, 7:11pm CEST

Posted: June 30th, 2008, 4:02pm CEST

Posted: June 24th, 2008, 5:10pm CEST

Posted: June 17th, 2008, 2:58pm CEST

Posted: June 10th, 2008, 3:25pm CEST

Posted: June 9th, 2008, 7:10pm CEST

Posted: June 3rd, 2008, 5:10am CEST

Posted: May 19th, 2008, 5:26pm CEST

Posted: May 2nd, 2008, 2:50pm CEST

Posted: April 23rd, 2008, 5:29pm CEST

Posted: April 15th, 2008, 7:46pm CEST

Posted: April 7th, 2008, 5:53pm CEST

Posted: April 1st, 2008, 6:25pm CEST

Posted: March 20th, 2008, 2:07pm CET

Posted: March 19th, 2008, 4:28pm CET

Posted: March 14th, 2008, 3:06am CET

Posted: March 6th, 2008, 3:45pm CET

Posted: February 29th, 2008, 2:17pm CET

Posted: February 28th, 2008, 4:11pm CET

Posted: February 25th, 2008, 5:21pm CET

Posted: February 23rd, 2008, 12:55am CET

Posted: February 19th, 2008, 4:37pm CET

Posted: February 14th, 2008, 5:02pm CET