Four Common Web Print Problems

Unstyled content. A page prints out with zero formatting: big, chunky Times New Roman letters spit out of the printer. The font is the least vexing problem. The bigger issue is that a raw, unstyled web page printout often includes a lot of stuff that users don’t need: navigation elements, social networking links, archive links, and blogroll items that are useless to someone reading on paper. With all this unstyled, useless text preceding and following an article, a three-page blog post can become a sixteen page, tree-killing mess.

For example, here’s what Paul Krugman’s NYTimes.com blog looks when viewed online in late-2009:

If I want to print his entire blog — not just a single entry — how do I do it? Hmmm… I can’t.

So if I hit print on my browser (without hitting the small, designated “print” icon), I get this mess:

It’s 26 pages of unstyled content, a third of which is messy sidebar and navigation stuff I don’t need, an ugly waste of ink and paper.

Some web pages need two or three pages to print unstyled navigation and header junk before getting to the actual content on a page. The navigation links are worthless to someone reading this on the plane, let alone the five pages of sidebar clutter, ads, and footer content.

Endless comments. I notice a popular, useful article in my feed reader, go to the page, and print it out. When I go to the printer, I see a 60-page stack of paper waiting for me? Why? Because I got a two-page article, followed by 58 pages of user comments.

For example, this popular post on Copyblogger, is five pages long.

Or so you’d think. Print it out and it runs 57 pages:

Most of us would prefer to just get the original article, not all the chatter that followed it. A user could preview the printout in his browser, and tell it to only print the pages before the comments, but this work-around is inconvenient, and something most won’t think to do until they waste half a ream of paper.

One page only. This common printing problem with web sites occurs most commonly for Firefox users. When you print a five-page story, the first page prints, and then anything that would have appeared after that page just vanishes. So instead of getting the whole story, you get the first page worth of content, then maybe a page with the footer on it. If you’ve printed out several articles from a site, then go to your printer to grab the articles, it’s maddening to discover all you have is the first page of each.

Here’s an example from the blog of author Dan Baum:

This article is nearly 2000 words long. If I print it in Safari, I get every page of it, plus all the comments, nine pages total.:

But if I print it in Firefox, I get the first page, and the rest vanishes. Poof!

Few users would know to try another browser to make the page print correctly. Since Firefox users make up at least one in four people on the Internet, this kind of problem is unacceptable.

Prints too skinny. A final problem is when a web page or blog prints with the correct style, but in doing so, is formatted too small for the printed page, leaving close to half the page blank. The result, often, is small, hard-to-read text and more pages than would be necessary. Usually the culprit here is a design with lots of sidebar clutter that squeeze all of the content into a skinny middle column that runs long when the page is printed.

The Solutions

First, a general rule: every page should print well

Many sites feature a print icon that triggers some kind of printable version of a web page. And users often look for that icon, so you should offer it. That said, every page should print well, with our without someone hitting a print icon. In other words, you shouldn’t need to go to a “printer-friendly version” of a page to get a reliable printout. If someone hits print on their browser, the output should printer well. Many blogging tools and content management systems offer options for printer-friendly pages and “print templates.” These are great, but they aren’t the only places that you should focus on printer-friendly design.

A print style sheet

The first and most fundamental thing anyone should do to make site content more print-friendly is to set up a proper print style sheet. There are plenty of tutorials and guides to print style sheets (see below), but here are the three key fundamentals:

1. Set up a separate print style sheet., i.e. “print.css” that overrides the default screen styling when a page is sent to the printer. Your main CSS file should be set to media=”all”. What your print style sheet will do is override elements from your primary stylesheet when pages go to print. All you need is this:

<link rel=“style sheet.” href=“print.css” type=“text/css” media=“print” />

Be sure to put it AFTER the main CSS link in your header, not the other way around.

2. Take stuff away. So what’s IN this print style sheet.? Basically, the idea is that the print style sheet. should remove unnecessary elements that aren’t useful for print readers, and format the content to better fit a 8.5” by 11” page.

Removing elements is easy if you’ve done clean, accessible markup. Identify DIV’s that you won’t need on a print edition of your page and use the DISPLAY property to render them invisible. For example:

#sidebar, #navigation, #toolbar {display:none}

Another trick is to apply a “noprint” class to specific elements in your markup that are clearly for screen use only, and adjust the display element. For example, lets say you have a video in a blog post. Obviously the video won’t be of any use in the printed version of this post, so you can apply the “noprint” class to that embed code.

<object class=”noprint” width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/-Sgj78QG9Bg&hl=en_US&fs=1&”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/-Sgj78QG9Bg&hl=en_US&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>

And then add “noprint” as an element not to display:

#sidebar, #navigation, #toolbar, .noprint {display:none}

3. Let the content fill the page. So now you’ve stripped away the elements a printed page reader doesn’t need or want to see, let’s reformat the content to play nice with their printer.

Let’s say your page content is wrapped in a #content DIV. On the live site, you might have it defined to a certain width, something like this:

#content {display:block; width:620px; padding:1em;}

What you’d want to do is take away the styling that locks the content into a certain width or shape. Unleash that text — that means lose widths, margins, padding, and flow it all as inline text. The browser will take it from there and print it to fit the page. So with the above #content div, you’d change it to something like this:

#content {display:inline; width:100%; padding: 0}

For more on using and applying print style sheets, check out the following:

• Print style sheet. – the definitive guide (Web Credible)
• CSS Design: Going to Print (A List Apart)
• Creating a Basic Print Style sheet. (Exploding Boy)
• A Useful Print Style sheet. (Kilian Valkhof)
• Little CSS print style sheet. tip (37 Signals)

Fix the one-page printing glitch.

One reason this can happen is that a designer uses tables or iframes to create their layouts, which can lead to printing problems. But as most designers have moved on to modern, more accessible design, this is less common. Still, if you’re trapped in 1999 web design techniques of laying out web pages with tables and frames and graphic “shims,” this may be the problem. Knock it off, read a good book on modern web design, and this problem will often disappear.

Still, as noted above, some CSS-driven web pages get cut off when the print (most often in Firefox) because a containing DIV can’t “break” across pages. It’s complicated but the problem is rooted in nested “block” DIV’s. Newer browsers seem to be handling this problem better, but this issue still affects a segment of visitors, so don’t ignore it. What happens is that the browser gets confused when it renders the page for multiple pages and instead of breaking the text over a number of pages, prints it as if the text would continue to flow from the bottom of a single page, which means that it doesn’t print at all. It wants to print to an 8.5” x 12-foot sheet of paper, but since it can’t, it just prints the first eleven inches of content.

The fix for this is surprisingly simple. If your containing DIV is truncating when printing make sure that its CSS declares it to be “display:inline.” If you need a DIV around it to define a block element, fine, but the immediate “container” should be rendered as “inline” for the print CSS.

Check out Ben Nadel’s excellent article for a more detailed explanation of this problem and how to fix it.

Default to printing without comments, but consider offering a “print with comments” option

Some readers might like to read all the comments that accompany and article, but most won’t specially if there are dozens of pages of comments. So as a matter of rules, stick to printing without comments as a default. Some sites offer two options: a link to “print with comments” and one to “print without comments.” You can offer that option as a choice for users. But again, make the default print style simple, useful, and readable for users on the move.

Follow those three fundamental solutions and you’ll eliminate 90% of the problems users might encounter printing your web pages.

A few final tips:

Set up a mini-logo or mini-masthead. Many sites use a miniaturized version of their logo or banner for the print edition to anchor the page. You can set it up with a “.print-only” class that shows up in print-styled version of the article, but not the screen-viewed pages. Or some CMS plug-ins allow you to select and provide a print-version logo. Either way, consider an economically-sized version of your logo for the printed to maintain your brand, but in a quiet, printer-friendly manner. This printed page from Salon is a good example:

Make text a readable size. Since you’re printing to a page, feel free to bump up your base font to a more readable size. Often, what works on-screen appears a bit small for many readers on the page. For the print.css, you can define your base font in points, not pixels, and go for something larger, like 12pt.

Set text to black. Web designers often set base fonts to a dark gray rather than a pure black. Don’t ask me why. We just do. That’s fine, but when gray goes to print on many printers, it tends to look fuzzy and often hard to read. When you set up a print style sheet, reset those colors to a pure black, and your printed pages will be cleaner and more reader-friendly.

Don’t use ads… but if you must, be discrete. I understand some publishers feel the pressure to generate revenue, even in print pages, but if you do so, try not to create huge, messy printout that users don’t want. The New York Times has a good example of small, unobtrusive advertising in their printouts:

Finally: remember, users are printing content, not sites. Most readers just want your content, not all the extra sidebar stuff, background graphics, navigation links, and promotional elements. They just want your essential content to go seamlessly from the screen to their printer in a easy-to-read format.

With that in mind, take the time to set up your web sites right so that when users hit “print,” they get what they want.

If you want to check out stuff in depth, here’s "a feed apart," a collection of real-time tweeting going on at the conference and my own rough notes (day one | day two) from the individual sessions. But for a quick skim, here are twelve of the most interesting take-aways from the conference:

Photo: FLICKR / John Morrison

Zeldman doesn’t see the point of your redesign

2. Zeldman’s tips on design for non-designers: Limit the number of colors, type styles, type sizes, and use a simple layout. Do that, he says, any almost anything will look somewhat cohesive visually.

3. Along the same lines, Jason Santa Maria offered his "drop-dead guide for not making ugly stuff with type":

• don’t use two scripts
• don’t use two display typefaces
• don’t use two sans serif faces
• rule of thumb: ONE OF EACH (the key is contrast)
• if possible, pair fonts from the same designer
• look for contrast, not similarity, between fonts in use

4. Jason Santa Maria also suggested that when it comes to design, it’s better to think first and sketch out your ideas before sitting down at a computer. Let the computer be “a tool of refinement,” not the starting point for thinking through ideas for a design concept.

5. Kristina Halvorson said that the biggest reason for delays in web projects is content: people don’t plan for it, wait too late to create it, and don’t think through all the different types of content they will need to launch. She argued that web projects should START with a content strategy before a design strategy. And, perhaps most alarmingly to designers everywhere, she pushed a bold rule: “never use lorem ipsum.” (dummy text leads to mock-ups and design concepts that are removed/detached from the real site that will be delivered)

6. I didn’t love Dan Brown’s presentation (a bit too abstract and high-concept for my liking), but I loved — and totally agree with — this quote: “the curse of being a designer is you are perpetually unsatisfied with your work.”

Photo: FLICKR / John Morrison

Whitney Hess just called you a wimp.

8. Andy Clarke urged designers to shut off Photoshop and Illustrator and start designing “in the browser.” He argued that Photoshop mockups create static, unrealistic, flat model of a design for something dynamic. “We’re designing web pages, not a photo of a page.” Echoing many of the speakers, he advocated a “content-out approach.” He also argued emphatically that web pages don’t need to look the same in every browser — they just need to WORK in every browser. Experiences can vary.

Photo: FLICKR / John Morrison

Eric Meyer: Pro-JavaScript, Anti-Haircut

10. Luke Wroblewski talked about web forms and how they are almost all terrible. His pitch, in short: Nobody likes forms. Forms get in the way. Make them easy for your users. He provided a lots of examples and best practices (too much to summarize here), but his book covers it all in detail.

11. Dan Rubin’s talk was a bit all over the place, but he argued a simple, important principle: “If your design needs instructions, it probably needs to be redesigned.”

12. Dan Cederholm demonstrated lots of ways to use “progressive enrichment” in web design by using CSS3 today. His new book goes into detail. Lots of this will only be visible to people using newer browsers, but since most of it presentational, people with older browser won’t know what they’re missing. He refers to a Shaker design philosophy quote that applies well to web design: “Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.”

I found the explanations in the WordPress codex confusing and unhelpful. I searched around for some other solutions and didn’t find much to help me sort this out. Most articles or posts on the matter were knee-deep in code and long scripts. Finally, I found this post by Lorelle on "Creating Multiple Single Posts for Different Categories" which was tremendously useful. However, I still found the explanation a bit fuzzy. I sorted it out, but think a clearer take on this might help other similarly baffled WordPress users:

Step 1: Design two (or more) custom templates. A good way to start is to copy the "single.php" file from the default templete and modify it to suit your needs. In my case, I set up one template called "blogpost.php" and another called "article.php." I prefer to have descriptive template file names. Need more help? I’ve found Ben Gillbanks’ short tutorial on creating custom templates useful. Ok, so once you’ve got your custom templates worked up, copy them into your theme directory.

Step 2: Back-up your single.php file. Since the next step will destroy your single.php file as it currently exists, take a few seconds and make a copy of your working file, just in case something goes wrong. You can always replace your modified single.php file with the original to change everything back to the way it was before you started tinkering. Better safe than sorry, right?

Step 2: Turn the "single.php" into doorway to your custom templates. In a normal WordPress theme, the "single.php" file, also known as the "Single Post" template, takes a post and styles it with this basic template. But if you want to use multiple post templates, you can use this file to help WordPress understand which one to use. The WordPress engine looks at the single.php file to style your post’s content, but since it is a PHP file, you can use it to redirect it to your custom templates.

So what we’re going to do is replace the single.php file with some very short code that tells WordPress to check the category of a post and then load the appropriate template. You use the categoryID number from the Manage | Categories tab to identify the correct category. Here’s how the code would look:

<?php
$post = $wp_query->post;
if ( in_category(’5′) ) {
include(TEMPLATEPATH . ‘/article.php’);

} else {
include(TEMPLATEPATH . ‘/blogpost.php’);
}
?>

So let’s break this down. the first two lines set up a query. The second line tells WordPress that if a post matches category 5 (which happens to be the ID for my "article" category… your number would vary, obviously), load the template "article.php". The next lines say, basically, "ok, so if this isn’t an article, it’s a blog post, so go ahead and load "blogpost.php".

But what if you have more than two category-based templates? No problem. Your new best friend is a little conditional tag called “elseif.” Here’s how that would work:

<?php
$post = $wp_query->post;
if ( in_category(’5′) ) {
include(TEMPLATEPATH . ‘/article.php’);

} elseif ( in_category(’6′) ) {
include(TEMPLATEPATH . ‘/column.php’);

} else {
include(TEMPLATEPATH . ‘/blogpost.php’);
}
?>

So this three-way query tells WordPress, "if a post is category 5 (an article), load the article.php template, if it’s not category 5, then check to see if it is category 6 (a column) and load the column.php template if it matches that, otherwise, it must be a post, so load the blogpost.php template." You can set up as many “elseif” statesments as you need to match the number of custom post templates you want to use.

Go ahead and save your single.php file. That short snippet of code is all you need. You’re almost done.

4. Give it a test. If you did everything right, the single.php should act like a traffic cop and direct posts to the correct template, depending on their category. Test posts by category and see how they display. If the templates seem broken or no post shows up, you may be missing a bracket or semicolon someplace in your single.php file. Go back and double check it. Conditional statements (if, else, and elseif) can be a bit confusing, so it can help to check the syntax here. You might also need to make sure your custom templates don’t have any odd code that might mess up the display.

Hope this helps. Drop me a line if you have questions or comments…

The problem is that not only do different desktop email clients like Outlook or Thunderbird render HTML email messages differently, popular webmail tools like Hotmail, Yahoo Mail, and Gmail all rewrite, change, and alter your code to fit it within their web-based email application. Some disable CSS styles, some break any links to external stylesheets, and almost all of them will pick and choose between which CSS elements they will support, and which they will ignore.

But wait, it gets better — increasingly, thanks to Spam and security concerns, the default mode of many webmail clients is to block images from new recipients until a user opts to allow them.

So let’s review: there are countless email readers and applications out there. All of them will render your HTML email differently, supporting all or none of your CSS. In varying degrees they will all rewrite your code. And, quite often, your images won’t be viewable to the end user. Swell.

One solution might be to take Zeldman’s advice and stop using HTML email altogether. After all, email isn’t the web, so why try to treat it as if it were? Save design for web pages and keep email light, text-only, and simple.

But most of us have clients or bosses who already receive slick, cool-looking HTML email in their in-boxes. As consumers, they already see that some people are generating pretty, polished, stylized emails. They don’t care about coding and compatibility problems — they just want something cool, too. “Hey, if Apple can do it,” they say, not unreasonably, “why can’t we?”

Moreover, from a marketing perspective, many organizations find that well-designed HTML emails get higher open and click-through rates than text-only email.

So, it seems, the solution for designers who need to design HTML email is to create designs that work relatively consistently across platforms and email clients. Here are eight tips for making that happen:

1. Make Nice with Tables.

Most good web designers these days have turned away from the use of tables on layout, opting instead for usable, accessible CSS-based presentation and layout. However, with HTML email, a lot of these approaches won’t work. Almost every web-based email client will ignore or mangle CSS-based layout. Those carefully floated and positioned elements will wind up in entirely different places than you intend. The only way to ensure that things line up the way you want them to across the wide range of email clients is to use tables.

Yes, tables. It’s tough to accept, but tables are a necessary evil for HTML email. You don’t have to don’t go back to the worst of table-based layout techniques — spacer images, hacked up artwork, and endlessly nested code. But tables can provide basic structure, columns, and grids for laying out HTML email. It may be a bitter pill to swallow, but if Rocky could team up with Apollo, if Sarah Connor could learn to trust a Terminator, if Johnny Damon could play with the Yankees, you can learn to get along with tables again. You may feel dirty, but you’ll get over it, I promise.

2. Use CSS… just not too much.

Here’s the good news: you can use CSS to style content in HTML emails. But the bad news: you can’t use it too much. Campaign Monitor has an essential, comprehensive guide to which CSS elements work in various email clients, but here’s the Cliff Notes version: generally speaking, you can use CSS to format content, but don’t rely on it for layout. Use CSS to style font sizing and color. Use CSS for basic border and background background color effects. Use CSS to apply some simple padding and margin effects. Beyond that, you’re starting to ask for trouble. When I design an HTML email template, I generally use CSS to handle the presentation of body fonts, headers, and simple alignment and spacing.

3. Ignore the HEAD, focus on the BODY

An important rule to remember is not to link to an external stylesheet. Many email clients, desktop and web-based alike, are suspicious of an email linking to an external file. Some will completely ignore the attempt to import or link to an external CSS file. Moreover, many webmail clients will disregard any code put above the BODY element. So the key is to not only put your CSS style inline in your HTML, but to put it in the BODY of the email, not in the HEAD. With the annoying exception of Gmail, almost every email client will understand and render your inline CSS for basic styling, as long as you put it all in the BODY element.

4. Be smart with images.

Some rules of thumb to remember with images:

Always give images absolute, not relative, paths. Because your message is going to places you can’t predict, all of your images need to be linked with fixed, absolute paths.

Always use ALT tags. They’re not just for good usability and accessibility practices. If an email client has images turned off (and increasingly, email clients turn images off by default) you want them to be able to read a description of the image.

Always provide size attributes for images. If you specify HEIGHT and WIDTH for images, your layout will stay more intact, whether or not someone can see your images.

Before sending out an HTML email, always test it with images turned off. When you try to read the email without any images, does it still make sense? Can a reader still understand your message without the images showing up? If not, go back and rework the design so that, in a worst-case scenario, a reader won’t miss anything important if their reader refuses to display your images. A great tool for testing this is the Web Developer plugin for Firefox. If you don’t have it already, get it now.

5. Go Skinny and Top Heavy.

These days, web sites are getting wider, thanks to the popularity of big monitors and supertanker-sized laptops. But emails can’t afford to get so big. Most people still see email in smaller windows on their desktops. And many only see the top parts of emails, if they skim them through a “preview pane” in their email client. So when you design an email, it needs to be more narrow than many web pages, and it needs to have the most important stuff at the top. Generally-speaking, stick to a width 600 pixels or less when building an email. Anything wider, and a lot of readers will never see the right side of your design.

And if you want readers to see anything more than your logo or some big, pretty image at the top of your email, be sure to get to some real content within the top 200 or 300 pixels from the top of your email. The “preview pane” in Outlook, for example, might only let readers see the a 600 x 200 pixel preview of your message. If you don’t design well for that space, your readers may hit delete before ever bothering to scroll down and find out what you had to say.

6. Design for the Worst-Case Scenario.

Take time to design your email for situations where images or CSS may be turned off. If you haven’t already read Dan Cederholm’s Bulletproof Web Design, order it now. Cederholm provides excellent techniques and methods for making design that is “bulletproof” to most potential problems. While of some Cederholm’s approaches won’t work in HTML email, his general principles are applicable. For example, if you have an image that might be blocked, be sure that there is a background color behind it that will maintain the general look of the page. Plan ahead.

Here’s another example. For one email template I built, we had a sidebar with a special header. To match a non-standard font from their branding, I used a graphic. But since I can’t guarantee that everyone will see this image, I need to make sure that an image-less or unstyled version of the same email will still convey the same basic information. I do this by wrapping an H5 tag around the image. Here’s the HTML:

<h5><img src=”[absolute path to image]/head-goodnews.gif” alt=”GOOD NEWS” width=”140″ height=”20″></h5>

The H5 has the following CSS applied to it:

h5 { font-size: 120%; color: #990000; margin: 0 6px 6px 0;font-weight:bold; border-top:solid #cccccc 1px; line-height: 1.8em;}

Viewed normally, all the H5 does is add a light gray line above the image. Since there’s no text there, it doesn’t need to apply font-sizing or color to anything. Interestingly, though, if the image is turned off, and it will still style the ALT text according to the H5 CSS. So, as you can see below, it will still make the header the right size and the right color. It won’t match the font I used in the image, but at least it will be a close approximate match, and it will still style the line above the header. Finally, if I turn off both the image and the CSS, the H5 still gives the ALT text the standard H5 styling, which is at least better than nothing:
This is just one example, but hopefully I’m making my point. The email should “gracefully degrade” by building it to communicate effectively, even if the CSS or the images get blocked.

7. Provide alternatives.

Your HTML email should always offer prominent links to two alternate versions of your message — a web-based version of the email and a text-only or mobile edition. If you want to make mobile web enthusiasts happy, offer a “mobile edition,” which is just simple HTML with basic content, links, and simple formatting (bold and italic). Yes, it’s more work, but you always want to give your audience a choice. Some people want no-frills text in their in-box, some will never unblock images in their email, but might click on a link to a web-based version of your message instead. And there are always blackberry-addicted readers out there who want to read your message, but need a cleaner, simpler edition. With a little extra effort, you maximize the chances that your audience will see your message. It’s OK if they decide how pretty it looks. Don’t write off any part of your audience because you demand they view your message in a certain way.

8. Test obsessively.

You can design an HTML email that looks wonderful on your screen and in your own email in-box, but that’s just the starting point. You can’t possible test for every email appication in existence, but you should definitely test as many of the major email applications as possible. If you don’t already have accounts with Hotmail, Yahoo Mail, and Gmail, take a few minutes and set up test accounts. If you use Outlook primarily, download Thunderbird or another free email client as a secondary email application to use for testing.

One method I use is to make this simple is to set up a email group that includes all of my test accounts. When I have a draft, I send a test email to that group in one blast and lets me quickly check how everything looks.

Don’t be alarmed if Gmail looks the worst. Gmail, my email client of choice, is sadly weak in terms of supporting HTML emails and often ignores CSS styling that every other email reader handles beautifully. I hold out hopes that Google may improve on this in the future. But for now, I find that you can use the techniques listed above to get Gmail close to matching the design that other readers will see, but it can be tough to get it to match exactly without doing endless inline styling with font tags.

Finally, if you design on a Mac, be sure to test how things look on a Windows machine — fonts appear smaller on a Mac, so you don’t want to be surprised at how it looks on a PC. Macs are great, but they still make up less than 5% of the overall home computer market. It’s flat-out irresonsible and arrogant not to test on the platform that the vast majority of recipients will use when they get your email. There’s simply no excuse for not testing on a PC.

That’s it for now. This is really just scratching the surface, but hopefully it will save you some time trying to figure out why your HTML email design looks terrible in Hotmail or Yahoo. For more on HTML email design, including best practices and tips on marketing, check out the following:

• Campaign Monitor: Email Design Guidelines for 2008
• MailChimp: Email Marketing Guide
• Loren McDonald: 20 HTML Email Tips

In the meantime, let me know if you have any additional tips and suggestions if your own… HTML email design is an ever-evolving and changing practice. Start with best practices now and you’ll be ahead of the curve.

We’re immersed in a logo-rich environment, which makes it all the more baffling how major organizations and companies can have awful logos as their visual symbol.  It’s not like there aren’t plenty of examples out there for good logos.

Here are eight well known logos that bug the hell out of me:

Amazon.com.  I actually like Amazon’s primary logo. It’s kind of cool – “Amazon,” with a swooshy arrow going from the A to the Z.  So I get it: I can get everything from A to Z at Amazon.com.  And it kinda looks like a smile, which makes me happy when I buy something.  But my beef with Amazon’s logo is the abbreviated, swooshy-arrow logo they put on the side of any box you get from them:

Without the words, it’s just a huge, curved phallic symbol on the side of a box. Not so good. Once you notice that, it’s hard to look at a box from Amazon and not be a little freaked out.

American Lung Association. The American Lung Association does fine and noble work, existing to promote lung health and fight lung disease. But why the outdated, religious-looking logo? I suppose it has to do with tradition. The ALA was founded in 1904, primarily to fight tuberculosis. It adopted the Cross of Lorraine as its symbol, representing their "crusade" against tuberculosis. In 1904, I’m sure this symbol may have had wider appeal and meaning at the time, but that was 103 years ago. Their logo predates radio, television, and the Internet. Most people still had horses instead of cars when someone sketched out this logo, and he probably drew it with a quill feather pen in a log cabin, lit by a beeswax candle.

Today, if you look at their logo, it suggests that the organization is a Christian group, not one of the leading nonprofits in the fight against cancer. It’s a bigger, more influential group than it was at the turn of the last century. And just as it changed its name in from the National Association for the Study and Prevention of Tuberculosis to the American Lung Association, it makes perfect sense to change the logo to suit modern times.

The Buffalo Bills. Poor Bills fans: not only did they have to suffer through four Superbowl defeats in a row, but they now have to live with Dick Jauron as their head coach.  Worse still, they’re stuck with this stupid logo.

Seriously, what gives?  It’s a big blue buffalo, but there’s also some huge red laser beam coming out of its head. Or wait, did someone impale the buffalo with a huge red spear?  Perhaps this buffalo is already dead, and the logo is a top-down view of its carcass, spiked through the skull by red javelin? Come to think of it, that’s not really a bad visual metaphor for the state of Bill franchise. However you interpret the Bills logo, it’s not exactly an inspiring symbol for one of the NFL’s worst franchises.

The Cleveland Browns.  Let’s stick with the NFL for a moment.  As bad as the Bill’s logo is, at least someone made an effort at some point and decided to add the big red laser beam to the side of the buffalo.  They tried to create something. But what’s Cleveland’s excuse for this?

Their logo is a plain orange helmet. Correction, it’s not a logo, so much as it is an illustration of the Cleveland Browns actual helmet. Not even an effort to stylize a “C” or “B”.  Hell, they could have put a drawing of an angry-looking Jim Brown on the side of the helmet and it would be an improvement.  But no, it’s just a football helmet. And it’s orange.

Now if they put the image of the helmet/logo on the actual helmet, now THAT would be cool. It would be like one of those picture-in-a-picture that’s in a picture-that’s-in-a-picture illusions. Something like that might utterly confuse and distract an opponent. But it’s the lack of this kind of out-of-the-box thinking that had made the Browns one of the most pathetic teams in NFL history.

Radio Shack.  It’s bad enough you’re a technology store, supposedly promoting the newest, hottest gadgets and tech products. Yet you’re still saddled with the strange name “Radio Shack.”

Hmmm. Let’s unpack that a bit. Nobody really buys radios anymore and a shack isn’t the kind of place you’d go for the latest in high-tech gadgetry. So your brand name doesn’t suport your product or corporate identity. Ok, so maybe your logo can help express your modern, cutting edge hipness? Maybe not. Your logo is just thick, slabby letters with a red “R” to the right in a circle. Nothing that conveys sophistication, new ideas, or forward-thinking products. Ideally, Radio Shack would rethink it’s entire corporate identity, but barring that, they could at least re-work their logo to convey a better sense of cutting-edge, hip technology, rather than the place you go to get a power adapter

Toshiba.  Let’s stick with technology companies. Toshiba puts itself out to the world as a "world leader in high technology products." They make everything from computers to DVD players to high-def televisions. They boast more than 8000 employees in America alone. And yet, just look at that logo. It looks like an industrial warning sign. Here’s a company fighting for marketshare with Apple, Sony, and Dell, and their branding looks like it was left to someone with five minutes and Arial Black? If you’re trying to sell comsumers on the notion that you’re an innovator of high technology, it might help if your logo didn’t look like something worked up during the Nixon Administration.

Washington Wizards. I’m not going ot get into the sordid history of how the Washington Bullets became the Washington Wizards (ridiculously rigged contest), or even how the beloved mascot "Hoops" was replaced by the forgettable G-Wiz (an injustice I’ll never forgive), but the logo is probably the worst aspect of the Bullets/Wizards re-branding in 1995. It’s busy, complex, and it doesn’t make much sense. The "wizard" appears to be wind-surfing on a crescent-shaped basketball while clearly palming the ball — turnover, Washington. Meanwhile, he’s zapping himself in the head with some magical spell that’s shooting out of his right hand.

Northwestern. It saddens me to put the logo of my undergraduate alma mater on this list, but I have no choice. Just look at that thing. It’s been nearly two decades since I first stepped on the beautiful campus of Northwestern, and that logo looked cheesy and outdated then. And mind you, I was wearing pegged jeans, kung-fu shoes, and poofy over-moussed ’80s hair at the time. Styles change. The Northwestern logo is the design equivalent of a skinny leather tie or a oversized neon-yellow sweatshirt.

For some reason, the school won’t acknowledge that the goofy, space-age, blocky-modern “N” was never a very good concept to begin with. It looks like typeface that someone at Epcot Center would have picked to convey the “fantastic world of tomorrow.”

And then there’s the matter of the angry, four-fanged wildcat who appears to be upset and suffering due to the fact that it got its neck stuck in the bottom part of the N. It’s been at least two decades, and still, no animal control specialist has come to help him get out of that thing. Quite cruel, and quite sad.

Think Iron Chef, but for web designers, and with considerably less killing of live fish.

In essence it’s a geek Olympics!

The concept is simple. Web teams take each other on, at the same location, to build a complete website in 24 hours. No excuse, no extensions, no budget overruns…

Each competition will see a charitable organization selected to be the recipient of a fully functional website at the end of 24 hours. Emphasis will be placed on ensuring that, as far as possible, the charity will be able to leave with a website they can use immediately.

I love this concept.

The kickoff competition will pit Team Australia vs. Team New Zealand. Sounds like this may be the first of many Full Code Press competitions. Very cool idea.

We’ve asked five questions. One single text line would have sufficed.

• 1 aspect of design you give the highest priority to.
• 1 most useful CSS-technique you use very often.
• 1 font you use in your projects very often.
• 1 design-related book you highly recommend to read.
• 1 design magazine you read on a daily/weekly basis (online or offline).

1 aspect of design you give the highest priority to.
Hierarchy of information. I’m amazed how often designers focus on the little details of design — typography, spacing, color — and lose sight of what their design is supposed to help communicate. All of those elements matter, of course, but often, designers lose track of a what reader or viewer needs to take away from the design — what key ideas or message they should remember from looking at a design. If a design leads a reader to focus on the wrong thing, or miss the most important piece of information on a page, than it’s an abject failure.

1 most useful CSS-technique you use very often
Sliding Doors. Gotta love elastic, accesible, stylized design elements.

1 font you use in your projects very often
Verdana. Give Verdana some love. Not fancy, not slick, but it’s universal, readable, and clean.

1 design-related book you highly recommend to read
Bulletproof Web Design. If I had to recommend one book to a web designer trying to learn the fundamentals of clean, accessible design, this would be it.

1 design magazine you read on a daily/weekly basis (online or offline)
Smashing Magazine. Every time I visit, there’s something new that’s either useful or inspirational. Great stuff.

Anyway, I highly recommend the site and the interviews. Meanwhile, somehow the panel organizers forgot to include your favorite friendly-neighborhood poker-playin’, mashup makin’, dog-walking designer. No worries. Here’s the “missing” Matt P answers to the “Design Workflows” questionnaire:

What are some things you do to help yourself into the state of mind necessary for creative work?
I need three things: a clean, tidy desk (random clutter really distracts me), some music (generally uptempo stuff like trance, club music, or film scores), and something to drink. I don’t smoke, so the drink gives me something to fiddle with when I’m thinking.

Do you follow a strict daily (or weekly, etc.) routine with regard to workflow, or is every day (or week) different?
I’m not very good with keeping a strict routine, but I generally try to tackle email, small design tasks, and relatively simple stuff at the start of the day, then focus on the bigger-picture items the rest of the day. Of course, deadlines and panicky people don’t always allow me the luxury of keeping to this routine.

Do you prefer to work in a closed, private environment free from other people and distractions, or in a more open, collaborative environment?
I’m kind of like Shrek. I vastly prefer to work alone, in my own quiet spot. I find the whole concept of an “open, collaborative environment” in the workplace to be an excuse for a lack of sufficient office space. I find it much harder to focus on a big project, especially one that demands creativity, with lots of other conversations, interruptions, and distractions. Collaboration is great, even essential, in creating most good design work, but working in a noisy, crowded workspace isn’t the same thing. I’m a bit of an introvert, too, so I tend to get a lot more done in quiet, private space than in an open workspace where there’s so much more traffic and interaction with other people.

What do you do to get your day(s) started in the right direction?
It’s hard for me to just sit down and be creative. I tend to work better at night, so for me it’s not as natural to have good, original, or creative ideas first thing in the morning. I like to have some “wake up” time before starting a day — walking the dog, listening to an uptempo playlist on my ipod, reading the newspaper, watching TV — letting my senses react to things that have nothing to do with design or work. By the time I get to my desk in the morning, my brain should be warmed up and buzzing with lots of other stimuli.

More importantly than all that, I also start almost every day with a cold blue Lo-Carb Monster. Coffee is lame.

What task management technique do you use?
I keep a to-do list in Basecamp. Each morning I update it, print it out, then highlight the priority items for that day. Sounds good, but I find that the less-urgent items on that list languish for long stretches at a time. Balancing short-term rush projects with long-term big-picture projects is always a challenging balancing act. With high hopes of establishing a more efficient task-management system, I’m reading Getting Things Done and Lifehacker right now.

What things tend to disrupt your workflow?
The usual suspects: non-essential emails, random office pop-ins, espn.com, other people’s phone calls and conversations, IM’s from co-workers. I also have to fight off my urge to check news sites and catch up on what’s going on in the world. As an information junkie, as well as a news, politics, and pop culture geek, it’s hard to fight the urge to check the latest headlines every hour.

What previous experiences have influenced your workflow?
Sometimes I’ve worked like hell on a project for months, and it ultimately got killed. Other times, I have spent two hours on something that I wasn’t totally sold on, but that other people loved and re-used in dozens of different ways. The lesson I’ve learned from this is that the quality and impact of a design isn’t always correlated with the total time you put into it. So often when it comes to design, you have to do the best you can on a project within a limited timeframe and budget and live with it. I’ve never finished a project and thought it was "perfect." But more often than not, I’ve worked on something to the point where I can feel generally positive about it and say "hey, that’s pretty good." Usually, when I get to that point, it’s time to shift focus to the next thing.

What other disciplines influence the way you work?
As a writer, I learned early on the value of being clear and concise, and the importance of stripping away nonessential junk. My high school journalism instructor relentlessly crossed out needless words in my writing. She eliminated almost every adverb I used. She hammered into me the concept that more isn’t better. I apply a lot of that to my approach with design. I hate graphics or visuals that exist only as ornaments. Every element of a design should be meaningful in some way and should help communicate information. If it doesn’t, why is it part of the design?

Is there anyone in particular you have learned from?
I’ve probably been influenced by more designers than I can possibly remember. I always notice great magazine ads, cool movie posters, clever TV spots, or an interesting logo. But as far as specific influences go, early on, I learned a lot from the work of designer Robin Williams. I learned half of what I know about Flash from the gurus over at Kirupa.com. More recently, I’ve been deeply in debt to the work of Dave Shea, Dan Cederholm, Charles Wyke-Smith, and Andy Clarke, whose books really helped open my eyes to the possibilities of CSS web design. Someday, I hope someone can say they learned a lot from some of the things I designed or wrote.

What things help keep you focused on the work at hand?
A strong, deep, irrational idea that I’m fooling everyone and need to prove myself all over again with my next project.

Technically, the piece is very well done. The video clips on the monitors, taken directly from the Hillary Clinton’s campaign web site, are desaturated to give them a bleak, ominous look. Her voice is echoed to make it sound broadcast from loudspeakers. Phrases from her speech are overlaid on the screen like lines of propaganda — “we are having a conversion” suddenly seems like an ominous piece of Orwellian doublespeak. The Obama logo on the woman’s shirt curves and folds naturally with the fabric as she runs.

Thematically, it has a simple message — Obama is to Hillary what the Mac was to the PC in the ’80s: different, innovative, and liberating. Obama, the ad suggests, stands for big changes, while Hillary stands for more of the same.

So it came a bit of a surprise to me to hear that the creator of the ad, Phil de Vellis, previously anonymous, was fired from his job at Blue State Digital last week.

de Vellis, who did the ad privately, on his own time, had a clear conflict of interest, since his company was also responsible for building Obama’s campaign web site. Still, the reaction of all seemed a bit out-of-proportion to the impact of the ad. Blue State digital publicly disavowed itself from the ad and de Vellis, as did Obama’s campaign.

After being fired from Blue State Digital, de Vellis defended his work on the Huffington Post, arguing he was proud of the ad and its message that “Obama represents a new kind of politics, and that Senator Clinton’s “conversation” is disingenuous…. The underlying point was that the old political machine no longer holds all the power.”

I’m familiar with the tricky spot de Vellis faced. My day job in Washington D.C. is political. I design for a high-profile nonprofit organization that takes a variety of political positions, but does not expressly advocate for any particular candidates. Every employee is given training and instruction on how to keep our work within the boundaries of election and tax laws. Almost everyone I know in D.C. that works in the political realm has to to be aware of the thin line between what’s allowed and what isn’t. Even if he did this ad on his own time, without the knowledge of his co-workers, surely he had to have some inkling that it might spark a bit of controversy, given his day job.

“Vote Different” is many things — clever, polished, irreverent — but it’s not an “attack ad.” But three things still trouble me about de Vellis losing his job over doing a great ad in his own time.

First, even for those of us who work in Washington D.C. and have political jobs, outside of our careers, we’re still citizens. We still have the right of free speech. We still have the right to express ourselves politically. de Vellis created a clever, memorable video that conveyed his sense about the state of the Democratic Party’s nomination race, and for doing a great job and creating something that got millions of people’s attention, he wound up without a job.

Secondly, the “Vote Different” mock ad wasn’t a vicious smear like the Swiftboat Veterans ads. “Vote Different” is many things — clever, polished, irreverent — but it’s not an “attack ad.” It associates Obama with the novelty and “coolness” of the Mac brand, and the notion of change, while tying Hillary to the cold, gray politics of the past and present. It certainly does not show Hillary in a flattering light, but neither does it demonize her in the manner of typical political ads. In too much of the media and buzz surrounding this video, like this article on NPR, the ad is described as if it was a hatchet job on Hillary. Every two years, airwaves are filled with crass, misleading, distorted political attack ads — this wasn’t one of them and shouldn’t be discussed as if it were.

Finally, there was just something disappointing about how quickly the establishment ran from this ad as fast as it could. Within a day of the ad’s creator being exposed, Blue State Digital fired the creator and Obama’s campaign disavowed it.

I suppose they had to, for a variety of reasons, but it would have been refreshing — “different” maybe — if Obama or Blue State would have just said, “we didn’t know about this ad, but now that we do, we think it’s cool as hell and we love it.”]]> http://mattmedia.net/2007/03/24/cool-ad-youre-fired/feed/ 0 http://mattmedia.net/2007/03/07/five-thoughts-about-the-usa-today-redesign/ http://mattmedia.net/2007/03/07/five-thoughts-about-the-usa-today-redesign/#comments Wed, 07 Mar 2007 14:27:33 +0000 Matt http://mattmedia.net/blog/2007/03/07/five-thoughts-about-the-usa-today-redesign/ USA Today relaunched it’s site this week with a new look and a new set of interactivity and community-building tools. Yep, someone poked USA Today with the Web 2.0 stick.  But does does it work?

Here are my five quick takes:

1. A Newspaper as an interactive community?  On the new USA Today site, the biggest change is the addition of a host of interative, community-building tools.  Readers can not only post comments on news pieces, recommend stories, and rate other people’s comments.  Moreover, you can set up a profile, post your photo, keep track of other readers, and even blog on the site itself.

There’s nothing wrong with any of these things, but do most users that come to a news site want to read what other readers have to say about a news story?  Do most readers really want to create buddy lists of other readers on a given site?  Is it worth re-arranging the whole design and layout of your site to make interaction the central focus of your site?  Ultimately, shouldn’t a newspaper’s web site should be about delivering its professionally-written content to the widest possible audience?  All the extra gadgets and features are cool, but if they interfere with easy navigation, reliable content, and access to good content, why bother? Yahoo News is just a click away…

All the extra gadgets and features are cool, but if they interfere with easy navigation, reliable content, and access to good content, why bother? Yahoo News is just a click away… 2. Thumbnails as navigation?  Prior to the redesign, USA Today’s design was simple and effective — clear navigation, color themes by section, and a rotating multi-header for top stories.  In the new design, they top story space has been replaced with a odd experiment of image-based links.  To the left of the top story, there are four thumbnail images that a user can hover over to preview one of the other top stories. But there is no text to help the user understand what the preview is about, or what the link goes to. A reader has to guess what a postage-stamp sized thumbnail is about and hover over it to get more of a hint.  Is this really a step forward in navigation?  Is USA Today really trying to make finding stories a game?  Cute idea, but not really a design change that benefits readers.

3. Comments above all?  As part of USA Today’s new embrace of reader interactivity, the redesign took a prominent spot at the very top of the page that previously linked to a rotating series of stories and replaced it with a box that highlights, in big text, excerpts of comments from readers.  Visually, it is saying that user comments are as important as any of their stories. The decision to use valuable “above the fold” pixel space for glorifying random comments is a questionable one to begin with, but it’s poorly executed, either way. The widget of rotating quotes shows part of a comment and identifies the author, but doesn’t show what article they are referring to.  Again, you have no idea what it links to. You have to guess what something like “beware of the channels you use to share ideas” means.  Of course, if you click on the comment quote, it will take you to the story in question.  But again, is navigation by guesswork and curiosity really an improvement in design?

4. Icons overload? On the new site, every story now sports icons and numbers that show the number of comments and recommendations for a given article.  It’s a lot of visual clutter.  Seems like USA Today really wants to be the mainsteam media’s Digg or Fark.  But is that their real audience?  My guess is that unlike the tecnho-geeky audience of many news-aggregator sites, USA Today has a lot of older reader who will be a bit baffled by all the funny-looking icons and numbers near every headline. 

5. “A” for effort, “D” for Delivery.  As you can tell, I’m not sold at all that a newspaper should try to fashion itself as some kind of massive, mainstam blog.  But give them credit, they didn’t go at this half-heartedly — it’s clear from the redesign that USA Today now sees reader interactivity as the biggest function of its web site.  In the long run, maybe this will boost USA Today’s traffic and it will become a model for other online magazines and newspapers. 

Or maybe not. 

Ultimately, whether  or not the new focus on reader participation is a good idea, design-wise, I think it’s a mess.  They’ve taken a clean, easy-to-navigate site and made it harder to use. They’ve made such a push for comments, that they’ve buried some of their content to make room for quotes from random readers. If they really think readers are coming to their site to see what other readers are saying, great.  But if most readers are coming to read professional journalism, they’ve done those readers a disservice in the name of “progress”. 

Here’s what I love. Fundamentally, the logo is clean, simple and modern. It has obvious visual references to classic American flag imagery, but I think it goes beyond that.

The icon is an “O” for Obama, but it’s a rich symbol, with an arch of blue that curves over a red-striped base. In the middle, the white space of the “O” has a slight glow around it. Is is a sunrise? Is it bright light shining over the horizon of red-striped land below? The symbol suggests a positive, hopeful coming together of “red” and “blue”, evoking a famous passage from his 2004 DNC speech:

The pundits, the pundits like to slice and dice our country into red states and blue States: red states for Republicans, blue States for Democrats. But I’ve got news for them, too.

We worship an awesome God in the blue states, and we don’t like federal agents poking around our libraries in the red states. We coach little league in the blue states and, yes, we’ve got some gay friends in the red states…

We are one people, all of us pledging allegiance to the stars and stripes, all of us defending the United States of America.

Usually, a campaign icon is a dull, generic graphic — some red or blue, a few stars, and maybe some big, slab serif typeface to suggest strength and power. Obama’s logo is warm, bright, and uses a simple, effective symbol to convey some of the core ideas his campaign represents.

Not bad for starters….]]> http://mattmedia.net/2007/03/02/obamas-logo/feed/ 0