Categories
Design development

bgcolor follies

Yahoo! in magenta. If you forget to set your site's background color, your visitors may do it for you.

A reminder for people who make websites: if you forget to set your site’s background color, your visitors may set it for you.

In three minutes, I found three sites that forgot this basic rule of web design. Set your browser’s background color to something heinous (I chose magenta) and click around the web. You may be surprised. Don’t forget to check your own site!

[tags]bgcolor, webdesign, color, yahoo!, segura-inc, 800flowers[/tags]

Categories
Design HTML mail industry Standards work

Eight points for better e-mail relationships

Campaign Monitor has taken me to task, and I find it hard to dispute their primary contention:

To say as a blanket statement that HTML email impedes communication is an extraordinary generalisation. There are many times when a well designed, and well laid out HTML email can be a lot clearer, easier to scan and overall better experience than the equivalent in plain text.

They’re got a point. Having read and considered Campaign Monitor’s comment and other sensible responses to my 8 June post, I agree that my brush was too broad.

A few well-designed, well-considered, communicating visual elements, in the context of a well-written, time-respecting, communicating HTML e-mail message, sent only to people who have asked to receive it, and formatted to work across applications and platforms, can indeed enhance communication.

Yet unsolicited mail, as all internet users know, makes it hard to use e-mail to communicate with friends, family, and work mates. Trying to defeat spam, we miss messages from business partners and loved ones. Add unsolicited graphics and broken formatting to that mix; send tons of it to a business person who is trying to check e-mail while out of the office, and you have a recipe for road rage on the information superhighway.

Perhaps reasonable people could agree to the eight notions put forward below.

Note: As in my previous post, I’m about to preach to the choir. Designers reading my site and using Campaign Monitor or other fine mail services (such as Deck advertiser MailChimp, cough) already know and practice ’most everything I’m about to recommend. The following is not a pledge. Pledges don’t work. People don’t change their behavior or business practices because someone with a blog asks them to be nice. Okay? So this is not directed at my readers or Campaign Monitor’s customers, who, I believe, will agree:

  1. Unsolicited HTML mail (like unsolicited mail generally) is an abuse. Send HTML formatted mails only to those who’ve opted in. Always offer a text mail version.
  2. Consider making text mail the default, and HTML mail the optional opt-in. Typically, where choice is provided, the HTML option is checked by default. Many users—because they assume the experts who created the web service are looking out for their best interests—don’t change defaults. This doesn’t mean they all actually want HTML mail. If the default switches to text, then you can be reasonably sure that those who opted for HTML mail probably want it.
  3. On your website, provide a sample of your HTML newsletter so people can judge for themselves if it’s something they want to receive.
  4. As in all design, consider every element before adding it. Remove everything that does not help you communicate.
  5. Test. I can’t count the number of banks, e-commerce and travel services that send me HTML-formatted transaction records, receipts, itineraries, and other jim-jams that do not work in my mail platform. These businesses never offer a plain-text version, let alone an opt-in choice with a test link to see if I like what they have to offer and verify that my mail client likes it, too. Broken mail doesn’t win friends and influence customers (except to change vendors). I am likelier to switch travel services than e-mail clients.
  6. Never send bulk e-mail to a list of people who haven’t agreed to receive messages from you. (This, of course, will never happen, but it belongs in the list anyway.)
  7. E-mail blaster product providers, please offer a streamlined option for those who choose to send their subscribers text-only. Don’t make us design HTML mail templates we have no intention of using, and jump through hoops to make sure our users never see the dummy HTML mail format you asked us to create. (Not directed at any company in particular; suggested as a product differentiator slash best practice.)
  8. Learn how HTML mail works (or doesn’t) across as many platforms as possible, and work with the manufacturers to improve support for web standards. This is not my job. I did my job where web standards are concerned (you’re welcome!), and turned over The Web Standards Project to a new generation of leadership. And as I never send HTML formatted mails, not only is it not my job, I wouldn’t even be qualified to do it. But standardistas who are compelled by their clients to create HTML mails (or who choose to do so) are gently urged to do their part in diminishing wasted bandwidth and enhancing semantics.

Related posts

When is e-mail like a bad website?

Nokia sent a friend an HTML e-mail message. I’ve broken it into five screen shots, because it won’t fit on one. E-mail, as a medium, really doesn’t want to carry all this freight.

E-mail is not a platform for design

ASCII means never having to say you’re sorry.

[tags]HTML mail, e-mail, marketing, internet marketing, design[/tags]

Categories
Accessibility An Event Apart Design development events Standards

An Event Apart Chicago 2007

Tickets are now available for An Event Apart Chicago 2007, August 27–28, at the Chicago Marriott Downtown. It’s two days of web standards, best practices, and creative inspiration with…

Plus your hosts:

  • Eric Meyer, author, CSS: The Definitive Guide, Eric Meyer on CSS
  • Jeffrey Zeldman, publisher and creative director, A List Apart, author, Designing With Web Standards

Jam-packed with education and inspiration

On the agenda:

  • Search analytics for fun and profit
  • Secrets of the CSS Jedi
  • Using JavaScript and the DOM without feeling dirty
  • “The seven lies of information architecture”
  • Best practices for form design
  • Writing the user interface
  • Designing your way out of a paper bag

Learn how to use data you didn’t even realize you were collecting, to find out what your users really want. Discover how different forms, fields, and labels make or break interactions. How color, typography, and visual metaphors influence perception of your site and brand. How to make personal projects more successful and daily work-for-hire more fulfilling.

Register early and save

Your Conference Pass includes admission to all sessions at the two-day Chicago conference, snacks and lunch on both days, access to all social events, and a bag of swag. If you register by July 27, it’s yours for $795 ($100 off the standard pricing). Frequent Apartniks (those who’ve attended a previous Event Apart event) save an additional $100. More information is available at aneventapart.com.

[tags]aneventapart, an event apart, chicago, aeachicago07[/tags]

Categories
Accessibility An Event Apart Boston cities Design development events Standards

From Bulgaria With Love

An Event Apart Boston 2007 was the best attended show since Mr Meyer and I founded our design conference scarcely sixteen months ago. Attendees came from as far away as Singapore and India. They hailed from Bulgaria (2), Canada (12), Estonia (1), Finland (2), India (1), Ireland (1), Latvia (1), Singapore (1), Sweden (1), the UK (3), and the US (510).

In all, 546 web artisans descended on Boston for our two-day event. The engagement and commitment of this audience were electric. Rather than waste pixels on my impressions of the show, I submit these third-party posts and artifacts:

Photos and slide shows

Flickr Event Apart Boston 2007 photo pool
Featuring swag, special effects, and the elusive decopus.
Ethan Marcotte’s Event Apart slides
Viewing slides without seeing the speaker’s live presentation is like trying to understand world events by looking at a photo of Mahmoud Ahmadinejad. Nonetheless, here are the slides from “Web Standards Stole My Truck!”
Dan Cederholm’s Event Apart slides
Beautiful slides (same disclaimer applies) plus a nice little post.

Posts and commentary

Pelennor Fields Day One
Pelennor Fields Day Two
Matt Winckler’s quick summaries and reviews of the presentations. “The goal is to provide a few-sentence summary of each talk, followed by my quick rating on a scale of 1 to 10, followed again by my brief explanation of the rating.”
stevekarsch.com: An Event Apart, Day One
stevekarsch.com: An Event Apart, Day Two
Steve Karsch’s notes make you feel as if you were there.
Chausse.org: Thoughts from An Event Apart
“An Event Apart Boston was a great experience. Whenever I’m at a conference, I get an insatiable urge to drop whatever I’m doing with my life and become an expert at whatever the speaker’s talking about. Anyway, a few notes.”
An Event Apart Boston – from the Aten Blog
Justin Toupin, co-founder and design lead for Aten Design Group, reviews the show: “The conference was amazing. Nine expert speakers presented on a range of topics from the conceptual to the practical. I’ve never been so happy to sit in one place for so long.”
Ed’s Development Blog: Back from AEA
Ed Higgins: “It was the first conference I’ve been to that I’ve been sad about it ending. Typically the last day of most conferences just drags… At AEA, every session was gold and I wish it could’ve lasted longer.”
AEA Boston, Day One: Jeffrey Zeldman’s Writing the User Interface
Cromulent Code: write-up of “Writing the User Interface,” my talk on Day One of An Event Apart Boston 2007. “How text contributes to a site/s usability and branding.”
Grapefeed: An Event Apart
Grapefeed’s experiences at An Event Apart Boston included a nerve-grinding, last-minute scramble to an alternate train station when the Back Bay station was sealed off because of a gas leak. (Same thing happened to me.)
ivantohelpyou: Notes from An Event Apart, Boston, Day
Blow by blow impressions.
impending post explosion
Stellargirl: “Just got back from An Event Apart Boston… I totally feel like the kid in that Far Side cartoon who says, ‘May I be excused? My brain is full.’”
days without a job: An Event Apart – Boston
“First day of a two day conference was great. We were told that there were more than 500 attendees!”
Zeldman Gem of the Day
Hardly a gem, but this excerpt captures part of the thrust of my talk on “Selling Design.”
Cameron Moll: AEA Boston
Highlights from the perspective of a (great) speaker.
Adobe’s Scott Fegette: CS3 Launch at An Event Apart
“I’ve been answering questions all day at An Event Apart about the new CS3 products. Even better, I gave away … three advance copies of CS3 Web Premium to three lucky attendees. An Event Apart is a really great mix of disciplines all centering on site design and development. I’ve talked to educators, government developers, indie web production shops, animators and video pros- just in the last hour alone.” (Adobe was a sponsor of An Event Apart Boston.)
Meyerweb: After Boston
Event Apart co-founder Eric Meyer: “I see the attendees at AEA as the craftsmen and women of the web. Sure, there are shops mass-producing sites, the way a factory churns out cheap clocks. That’s fine if you just want something to put on your nightstand. But if you want an elegant, finely tuned work of art that you’d hang in a prominent place, a clock that is as much a point of pride as a timepiece—you find a craftsman. And that’s who came to Boston. That’s who comes to An Event Apart.”

[tags]aneventapart, aeaboston07, aeaboston2007[/tags]

Categories
An Event Apart Design events industry people Standards

Eric Meyer, 1:00 a.m.

…As the cover band upstairs kicks off its fourth set. Good times. The Boston Marriott Copley Place lobby, Saturday March 24, 2007. An Event Apart Boston begins Monday March 26th.


[tags]aneventapart, aneventapartboston, ericmeyer[/tags]

Categories
Design development Happy Cog™ work

Happy Cog Philadelphia is Hiring

Fresh on the Job Board:

Happy Cog Philadelphia is looking for an experienced freelance front-end (presentation layer) developer with strong design sensibilities. You must live and breathe semantic XHTML and CSS and understand how design and layout decisions manifest themselves in the world of markup. It helps if you’ve worked with Content Management Systems like EllisLab’s ExpressionEngine and can integrate templates within this environment. You must be in the Philadelphia area and be able to work with us on site. Details are available on the Job Board posting.

[tags]happycog, hiring, webdesign, markup, css, expressionengine[/tags]

Categories
A List Apart Design Flash Standards Tools

ALA 233: Semantic Flash, Valid Arguments

In Issue 233 of A List Apart, for people who make websites:

Semantic Flash: Slippery When Wet
The love that dare not speak its name gets its due as Happy Cog’s Dan Mall explores some of the ways Flash can enhance semantic, standards-based site designs. Part One of a series. Includes do-it-yourself, “shiny floor” project built with web standards and, yes, Flash (there, we said it).
Where Our Standards Went Wrong
No, they didn’t go wrong by using Flash. A List Apart’s Ethan Marcotte weighs the pros and cons of rigorous validation. Re-examine your assumptions. Discover the silent weight of invalid markup. Consider how to better educate clients on the benefits of web standards.

This issue goes out to our friends at SXSW Interactive.

Edited by Erin Kissane. Produced by Erin Lynch. Tech-edited by Aaron Gustafson and Ethan Marcotte (is that fair?). Illustrated by Kevin Cornell. Art directed by Jason Santa Maria. Published by Happy Cog. It’s shake and bake and I helped.

[tags]webstandards, flash, design, webdesign, alistapart, validation, ethanmarcotte, danmall, danielmall[/tags]

Categories
Accessibility An Event Apart better-know-a-speaker Boston business cities Community Design development events industry Redesigns Standards Tools

Register for An Event Apart Boston

Registration is now open for An Event Apart Boston 2007. Enjoy two amazing days of design and code plus meals, a party, and a bag of swag for a mere $795 (reg. $895) while early bird savings last. Attend for as little as $745 with a discount code exclusively for zeldman.com readers.

Learn by day, party by night

On An Event Apart’s website, you’ll now find a detailed schedule describing the presentations with which our superstar speakers hope to entertain and enlighten you. From “Web Standards Stole My Truck!” to “Redesigning Your Way out of a Paper Bag,” it’s two stimulating days of best practices and fresh ideas in design, usability, accessibility, markup and code.

Check out that schedule. I’ll wait.

Lest you be overwhelmed by learning too much too soon, we’ll help you unwind (and do a little networking) at the Opening Night Party sponsored by Media Temple. You might even win a prize, courtesy of Adobe, New Riders, or Media Temple.

Hotel savings

Our Boston Events page also includes notes to help you book your hotel room at a specially negotiated discount price.

Located in beautiful and historic Back Bay, the Boston Marriott Copley Place provides in-room, high-speed internet access; laptop safes and coolers; 27-inch color TV with cable movies; luxurious bedding and linens, and more. Best of all, it’s the site of the conference. You can walk out of your room and into the show!

Save more with discount code

During the early bird period, the price for this two-day event is $795. But you can nab an extra $50 off with this discount code exclusively for zeldman.com readers:

AEAZELD

Just enter AEAZELD in An Event Apart’s shopping cart to enjoy those savings immediately. During our early bird period, you’ll pay just $745 for the two days and everything that comes with them.

After February 26, 2007, when the early bird savings ends, the price goes up to $895, and you’ll pay $845 with the discount. Still pretty good for two days with some of the sharpest minds and greatest talents in web design. But why pay more? Book An Event Apart Boston as soon as you can.

Unlimited creativity, limited seating

An Event Apart Boston will be the best conference Eric Meyer and I have yet put together. It will also be this year’s only East Coast Event Apart. Don’t miss it.

Join Eric and me, along with Steve Krug, Andrew Kirkpatrick, Molly Holzschlag, Cameron Moll, Dan Cederholm, Ethan Marcotte, and Jason Santa Maria, for what we modestly believe may be the most exciting and enlightening show in modern web design.

Hurry! Seating is limited and early bird savings end Feb. 26, 2007.

[tags]aneventapart, boston, aneventapartboston07[/tags]

Categories
A List Apart Design Publishing Standards

ALA 230: Make the logo smaller

Happy Cog starts its publishing year with a great little issue of A List Apart, for people who make websites:

Whitespace

by Mark Boulton

So you think you know all about whitespace. You may be surprised. Mark Boulton, type expert to the stars, shows how micro and macro whitespace push brands upscale (or down) and enhance legibility in print and online.

How to Grok Web Standards

by Craig Cook

For designers who find web standards as easy to grasp as a buttered eel, Craig Cook shows how to stop the hurting and turn on the understanding. Learn how web standards work, and why they are more than simply an alternative means of producing a visual design.

[tags]design, typography, whitespace, webdesign, webstandards[/tags]

Categories
Accessibility Browsers Design development events Ideas links music Standards writing

Monday breakfast links

Berners-Lee: reinventing HTML

Tim Berners-Lee, inventor of the web and founder of the W3C, announces reforms:

It is really important to have real developers on the ground involved with the development of HTML. It is also really important to have browser makers intimately involved and committed. And also all the other stakeholders….

Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work.

9 to 5 = average
To be great in design takes passion and work.
Sending XHTML as text/html Considered Harmful to Feelings
I love this.
Web Directions North
Our Australian friends set up camp in Vancouver, for what looks like a great two-day conference on standards-based design and development (Vancouver Canada, February 6-8 2007). Speakers include Kelly Goto (Gotomobile), Andy Clarke (malarkey), Adrian Holovaty (Chicago Crime, Washington Post), Douglas Bowman (Google Visual Design Lead), Dan Cederholm (SimpleBits), Joe Clark (joeclark.org), Dave Shea (CSS Zen Garden), Cameron Moll (Authentic Boredom), Molly Holzschlag (Molly.com), Veerle Pieters (Veerle’s Blog, Duoh!), Kaitlin Sherwood (Google Maps US Census mashup), Tantek Çelik (Technorati).
Web Accessibility: Web Standards and Regulatory Compliance
By Andrew Kirkpatrick, Richard Rutter, Christian Heilmann, Jim Thatcher, Cynthia Waddell, et al. Don’t let the unsexy title fool you. Vast and practically all-encompassing, this newly updated classic belongs on every web designer’s shelf. (Better still, open it and read.)
I Cannot Possibly Buy Girl Scout Cookies From Your Daughter at This Time
By Charlie Nadler in McSweeney’s.
Gemini Girl
New women’s blog elegantly designed by Ray McKenzie.
eMusic: 33 Folkways LPs
Thirty-three important Folkways Recordings for download. Louis Bonfa, Mighty Sparrow, Woodie Guthrie, Henry Cowell and more.
On having layout – the concept of hasLayout in IE/Win
Technical but reasonably easy to follow discussion of why Internet Explorer’s rendering of your design may suck differ from your expectations
“Apple’s Backup App is Shit”
God bless SuperDuper.

[tags]W3C, webdirections, accessibility, haslayout, browsers, mcsweeney’s, folkways[/tags]

Categories
Browsers Design Standards

IE7 CSS tweak show and tell

Partly because the beta was carefully rolled out over many months, the release of Microsoft’s Internet Explorer 7 has largely been a non-event, for developers as well as journalists. While not at the level of Mozilla Firefox, IE7 is far more standards-compliant than IE6, which was way more compliant than IE5.5, which beat the pants off IE5. To make IE6 render standards-compliant pages correctly, web designers came up with a Wikipedia’s worth of hacks. In IE7, those hacks aren’t necessary; some actually cause problems.

(Here’s a tip from Dan Cederholm, who created the CSS for Happy Cog‘s redesign of Advertising Age: “inline-block is the new-and-improved method for auto-clearing floats.” Use it to replace display: inline-table;.)

IE7 is also the first Microsoft browser to permit user scaling. It does this the same way the Opera browser does it (which is the same way Microsoft Office does it): if text is too small, the user scales the entire page. By contrast, Safari and Firefox use Text Zoom, originally developed by Tantek Çelik for IE5/Mac. In those browsers, if text is too small, the user scales the text size—and nothing but the text size. Images, column widths, and so on, typically do not scale (unless the web designer is doing something really tricky).

There’s a huge difference between Text Zoom and Page Zoom, and it will affect the way designers spec type sizes for the web. It didn’t matter much when only Opera scaled the page. It was a neat feature of Opera; but Opera’s neat feature didn’t affect the way standards- and accessibility-oriented designers approached text size. But market share matters. Once IE7 gains critical mass, a lot of our current thinking about ems and pixels and such will go out the window. I’ll write about that soon, probably on A List Apart.

Meantime, developers are focused on the persnickety stuff: Ajax and JavaScript compatibility problems, CSS bugs that didn’t quite get fixed, and CSS hacks that no longer work.

Like me, you may have heard from a client whose site you designed before IE7 existed. What problems have you encountered? What hacks have you jettisoned, and with what have you replaced them? (Please include URLs.)

[tags]css, IE7, bugs, hacks, workarounds, design, webdesign, tantek, dancederholm[/tags]

Categories
Browsers Design Standards

IE7 Bugs and Fixes, Part I

Reader Adam Engelsgjerd writes:

I develop and maintain websites for the University of Arizona Library. We make use of the “Holly Hack” to avoid the IE6 peek-a-boo bug for our intranet site (God bless Holly). In the course of testing our sites against IE7 I noticed that the bug was rearing its head again‚ despite claims that this latest version has fixed it.

Further investigation revealed that while IE7 really does seem to have fixed this peek-a-boo bug the Holly Hack has, with decidedly sardonic irony, reintroduced the very problem it was created to circumvent.

This morning I tested and just implemented a fix that seems to work for us: the removal of the universal selector, “*‚” before the “html” selector. So the traditional Holly Hack is:

/* Hides from IE5-mac \*/
* html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */

Our new code is now:

/* Hides from IE5-mac \*/
html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */

I’ve tested this against the following browsers on Windows XP SP2:

IE7
IE6 (SP1 standalone install from evolt.org and SP2 full install)
IE5.5 (standalone install from evolt.org)
Netscape 7.2 and 8.1
Opera 7.11 and 8.54 and 9.00
Firefox 2.0

And on Windows 2000 SP4:

IE6

Hopefully this can be of some use should others be running into this same problem.

[tags]css, browsers, IE7, bugs, hacks, workarounds, holly hack[/tags]