AnEventApart San Francisco Day One

Posted by Sigurd on 4 October 2007

A day into Alistapart's intimate web conference, AnEventApart San Francisco 2007, and its clear where the industry is focusing: with the battle for web standards now entrenched, consideration can go into content (aka copy) strategy, as well enlightening the rest of us busy souls of some interesting coding and design tricks.

A big thanks to Eric Meyer and Jeffry Zeldman for organising a quality-over-quantity conference held at the beautiful Palace Hotel. A stark contrast to the 18+ tracks of OSCON, AEA had only a single lineup of speakers, making it a very  palettable way to deal with the effects of a 12 hour flight from New Zealand, and a lovely way to prepare for the Google Summer of Code Summit, that SilverStripe was involved with.

Eric Meyer: Secrets of the CSS jedi

Eric woke us up by demonstrating CSS genius which has long been possible: turning a <table> into a pretty bar graph (Read explanation and see demo or download source). Why bother? Because a table of say, financial data, especially with proper headers, is the best, most semantic HTML possible, meaning that Google, other websites, and blind-readers can interpret it perfectly. It also prevents you from duplicating the code for both semantic meaning and artistic flair.

The epiphany Eric had back in 2005 (yep, it's been under the radar that long) was discovering that the CSS display attribute for the <table> element is neither display:block or display:inline, but display:table. You then set a table to display:block, then position the table headers, rows and cells into a pretty graph that even works in Internet Explorer 6. 

Amoung the other tricks Eric pointed out was how Firefox's default styles reside in actual, standard css files that you can read, interpret, and edit. Want to see exactly what the size, padding and line-height your H1 is in an "unstyled" document?

E.g. On your mac, go to Finder > Applications > Firefox (right-click to "Show Package Contents") >  Contents > MacOS > res, and you'll notice half a dozen CSS files....

For instance, quirks.css illustrates all of the "quirks" of FireFox, which are primarily deviations from "correct" behaviour to mimic Internet Explorer.

The last time I saw Eric speak he was out-battled by very charismatic speakers with idealogical topics, so I was delighted by his confidence and how engaging the talk was, given I have a lot of respect for Eric's life-long work. 

Jason Santa Maria: designing your way out of a paper bag

Jason then gracefully guided the conference tone from Eric's edifying dispersal of geeky tricks, to a calm, beautifully illustrated narrative: imparting wisdom on what designers can do to be more creative, motivated, and satisfied in themselves, and additionally; how to produce astute work.

• Horde anything that is inspiring, whether it be webpages, photos, typefaces, magazine pages, or your own sketches. Use these as cues to reawaken inspiration.
• Give yourself time for research, as Jason managed to do in Ireland!
• Begin your design process with broad strokes, focusing first on form, devoid of colour. If something looks good in black and white, you then have a basis for adding colour, much like photography.
• Be clear on the brand and ensure it speaks through each decision you make in the design. It helps to think of branding simply as your gut feeling about a product, service or company, rather than overintellectualising the concept.
• Base your design on a grid; then break out of it with careful, artistic license. Anyone who's navigated large cities appreciates the predictability formed by town planning, because you can travel efficiently without getting lost. So be it with your website.  It is convienient to form your page around 12 vertical sections, so your content and photos can be half, quarter, third, one-sixth, or a twleve of the page width, and look tidy.
• Simplify your work through focusing on whitespace, heirachy of objects, and focal points, and polish, polish, polish...

In the Q&A section, he reminded us that large ads in news articles can destroy your hard design work and it is up to us to educate clients and managers to ensure ads don't dilute  your site and therefore your brand. 

Jason led us through his workflow on rejunvenating both Alistapart and and his own company's site, and Happy Cog, demonstrating both his speaking and design prowess--We look forward to him coming over to New Zealand early next year for Webstock!

Jeffrey Zeldman: Writing the user interface

The difficult timeslot leading up to lunch was given to Jeffrey Zeldman, who is responsble for both AnEventApart and Happy Cog's existance. Fortunately, given the distraction of our stomachs, he was entertaining, and his premise was pretty simple: with few exceptions, content is actually more important than design, so find a budget for it. If news websites like slashdot were twice as pretty, but half as interesting to read, they'd be considerably less successful. 

Jeffrey provided a great number of anecdotes, but should have pushed harder at how foolish the industry has been to give such prominence to graphic design and other aspects of website building. In other words, it would seem a travesty to reduce the importance of  design like this:

"Well, let's come up with three broad-stroke ideas for the content of the homepage, get your feedback, then work for days while we refine it to a final polished masterpiece. Oh, and if we have time on the last day, we'll come up with a rushed design, or while I think of it, what do you reckon about just directly reusing the design of the old site?"

Yet we often treat content as the poor cousin of design. Design is still useful; it's just generally pointless without good content. Once you have good content, people like Jason can then use artistic mastery to elevate your site to a truely outstanding success.

So Jeffrey subtly guided us along a walk through the hall of content appreciation, stating;

• Your site is supposed to be read (by humans, no less)
• Use design to help people read less
• Every word must be useful. Not only must it contribute, tie it back to the desired tone, audience, and brand.
• Rewriting copy is cheaper than overhauling design and code and often more effective
• If you can't budget it, absorb the serious effort of content-writing into other project areas, like usability report writing.
• When editing wordy content, don't think of dumbing it down. You'll do harm if you are condescending. Instead, abbreviate to make it easier to understand.

Joe Clark: Why I hate online captioning

After an entirely delcious lunch, Joe Clark bemoaned how the situation for deaf viewers to interpret video on a computer was in a complete shambles, and was  seeking personal funding to help research to fix it.

Technology on televisions has for years allowed viewers to see captions on TV (it's been mandatory in the USA for years), he suggested how we can take these lessons online.

The vocabulary lessons of the day included captioning, or a full description of all audible sounds, including speach, the phone ringing and the dog barking. This is a huge improvement on transcription, which lacks the non-speach parts, or worse, subtitles, which give deaf viewers even less understanding by editing down and summarising the speach.

Joe listed doznes of problems with online captioning, with a critical obstacle being there are too many captioning formats, and that the different video viewers don't support them with any degree of reliabilty. Naturally, big companies like Microsoft are pushing for closed, proprietary "standards" which will not let the proliferation of online video content ever be understood by deaf (or other-language) viewers...

This meant that closed captioning, where captions are hidden inside the video content but can be enabled for viewers who want it, is inherently broken.

Being someone who always strives for a technically elegant solution, I found his solution hard to accept: Accept failure somewhat and use open captioning, i.e. render captions into the picture itself. Then for every video you post online, have one without captions, and one with.

• More on Joe Clark's site 

Erin Kissane: Content Strategy to the rescue

Erin, editor of Alistapart, continued Jeffrey's theme on content. While not as forceful as him she underscored the importance of content. This time, she defined content strategy (a narrow and deep relation to brand strategy) and explained the process for coming up with the copy, and that everyone involved in making a website is responsible for ensuring its good.

Not only should content be given its budget, it needs to be fleshed out while design and development are being conceptialised, because they all affect and embellish each other.

She pointed out that designers and developers often get content requests or work that affects how well content will work, and need to step up to think strategically about content. No more will a desiger make menu labels that only fit 8 characters, or page designs that don't allow an extra menu item. Project managers will also talk with clients so that uninformed questions like "Can we have a blog with a wiki" don't pop up half way down the development path.

Just as Rataouilli saved the day by stepping in to add the missing ingredient to the soup, Erin pleeded with anyone involved in building websites to speak up when noticing poorly made content decisions.

Salient points which resonated with me;

• Ignoring content strategy causes problems which pervades all parts of the site team (designers, developers, etc). Content is a deadline killer, as you can't repurpose old site content.
• Anyone can do it. Just think through the content needs stategically, before you get entreched with development or graphic design work.
• Define the level of informality, humor and the person behind who is writing the content. Also consider accesibility and SEO, or in using words that people will type into Google to find your website.
• Come up with agreements like "this box should describe product X in 30 words, conveying idea a, b, & c"
• You will be asking busy people for content. How do you make it happen? (Ask for it early, and give templates/examples/guides, like one perfect product description, for them to emulate

I shouldn't need to tell you that Erin's articles on Alistapart provide substantial further reading... 

Jarod Spool: Why good content must suck

Jarod Spool finished the day on a very humerous note with his premise that Good Content Must Suck.  As in, pull people in, that is.

As raised by Peter Perolli you can link people navigating websites (as "informivores") to a fox hunting a rabbit. Both are looking for a scent, and we need to ensure that the trigger words we use in menus, titles, graphics, headings and buttons are very carefully chosen to be what the visitor is looking for.

In other words, design your content for scent; and your content will suck.

Going further you can also design your content to suck down the page. (Eliminate horizontal rules, left and right columns ending together, etc, and people will happily scroll down the page to find what they want. Just give them the cue on what is below the fold). 

Jarod worked in a study claiming that the optimal number of words in a link is around a dozen, because it meant the word or phrase the user was looking for, is most likely to be in it. This represents a big problem with menus and navigational panels, and means you really need to work hard on your menu naming scheme. The worst thing you can do is have two or more menu items that overlap in meaning, or are meaningless: make each item explicitly different, clear to understand, and what the users are looking for!

Jarod left us with a funny quote (Comparing someone we can't mention, as a "Monacle and persion cat away from a badie in a james bond movie") and a challenge: Replace your homepage with the sitemap page and see how promptly customers remark on how your site overhaul is great...

• Read Day Two of AnEventApart ...