In Issue No. 245 of A List Apart, for people who make websites: Sarah B. Nelson of Adaptive Path shows how to create collaborative work sessions that actually work, and Iconfactory’s Craig Hockenberry concludes his remarkable two-part series on designing and coding with the iPhone and its new brethren in mind.
Event Apart Chicago wrap-up
The sights, sounds, and sense of An Event Apart Chicago 2007. Thank you, Chicago. You rocked. (Literally.) An Event Apart San Francisco is our next and final show of the year.
One track continues to rule. It rules because you don’t have to decide where to go and what to miss. But it also rules because the conversations in the hallways and pubs can be centered around the same sessions. There’s no “ah, I missed that one because I saw ______ instead”. There’s a complete shared experience between all attendees, and that’s a very good thing.
Slides from the powerful and incredibly useful talk by Luke W. “I walked through the importance of web forms and a series of design best practices culled from live site analytics, usability testing, eye-tracking studies, and best practice surveys. Including some new research on primary and secondary actions, and dynamic help examples.”
Luke W: “Liz Danzico’s talk at An Event Apart dissected seven often-cited information architecture rules and highlighted counter examples that exposed why these rules might be better suited as design considerations.”
Dwayne Oxford: “It’s difficult to walk away from an event like this without a fresh perspective on CSS and the DOM, a head-full of elegant design techniques, and enough inspiration to catapult our work to the next level.”
In Issue No. 244 of A List Apart, for people who make websites, father of CSS Håkon Wium Lie advocates real TrueType fonts in web design, while Iconfactory’s Craig Hockenberry (developer of Twitterific) describes in detail how to optimize websites for iPhone.
Web content is mostly text. Web interfaces are text-based. Design consists chiefly in arranging text to aid communication—guiding readers to the words and experiences they seek. Better typography means better web experiences. Improving typography without resorting to image or Flash replacement and their attendant overhead is a consummation devoutly to be wished. Will browser makers rise to Håkon’s challenge?
Apple’s iPhone is the new frontier in interface design, offering rich computing experiences while dumping established techniques like mouse use and copy-and-paste. Its browser component, by contrast, pretty much provides a normal desktop experience via the standards-compliant Safari browser and small but high-resolution screen. For the most part, then, designing web content for the iPhone simply means designing web content. Ah, but there are tricks that can help your site more smoothy accommodate Apple’s new device. Some can even improve the web experience for all users.
Craig Hockenberry seems to have found them all, and he shares what he knows in a two part series that begins in this issue. I have known Craig since 1996; we collaborated on web-oriented Photoshop filters before Adobe figured out the web. He is a brilliant, funny, and modest man, and now you can get to know him, too.
Both articles are bound to produce thought and argument. Both are at least somewhat controversial. I love them both, and admire both writers. It is a pleasure to share this issue with you.
This issue of A List Apart was produced by Andrew Fernandez, technical-edited by Aaron Gustafson and Ethan Marcotte, art directed by Jason Santa Maria, and illustrated, as always, by the amazing Kevin Cornell. Krista Stevens is acquisitions editor. Erin Kissane edits the magazine.
Danged if Eric Meyer hasn’t launched a product. Eric Meyer’s CSS Sculptor, created in collaboration with WebAssist, makes it drop-dead easy to create standards-compliant, two- and three-column CSS layouts in Adobe Dreamweaver.
As a close friend of Eric Meyer’s, I found out about the product yesterday.
It’s a template-driven, “choose, then customize” application. CSS Sculptor includes 30 of the most common web page layouts—fixed-width, liquid, elastic, and combinations thereof—coded the way Eric Meyer would code them.
Once you choose a layout, you can change any aspect of it, including page width and browser window position. Add background images to any component. Rename elements and restyle at will. Additional columns can be added to the left or right of the main content area; headers and footers can be included or omitted with a click.
A nifty tree view visualizes how your style sheet is working, and lets you quickly select and edit any component of your layout. CSS Sculptor even creates a fully customizable print style sheet for every design—automatically. That’s cool.
I test-drove CSS Sculptor yesterday. It’s powerful and fun to use. I can see this application appealing to three audiences:
The power coder who knows CSS inside, outside, and backward, and will never cease hand coding—but wouldn’t mind working faster by off-loading some of the more tedious tasks of CSS layout development.
The professional designer who wants to use CSS, but is daunted (and sometimes frustrated) by the complexities of advanced CSS layout.
The non-full-time web person, responsible for maintaining their organization’s website in addition to other responsibilities, who believes in web standards and accessibility but will never be a CSS Jedi. Now you don’t have to be.
CSS Sculptor is compatible with Dreamweaver CS3 and Dreamweaver 8 on Windows and Macintosh. It will retail for $149.99 but is can be had for $99.99 through 6 September 2007. I don’t get anything for telling you about it except the warm glow of sharing.
In BusinessWeek, senior writer for Innovation & Design Jessie Scanlon has just published “Jeffrey Zeldman: King of Web Standards.” By any standards (heh heh), it is an accurate and well researched article. By the standards of technology journalism, it is exceptional. It might even help designers who aren’t named Jeffrey Zeldman as they struggle to explain the benefits of web standards to their bosses or clients. At the least, its publication in Business Week will command some business people’s attention, and perhaps their respect.
Avoiding the twin dangers of oversimplification that misleads, and pedantry that bores or confuses, Scanlon informs business readers about the markup and code that underlies websites; what went wrong with it in the early days of the web; and how web standards help ensure “that a Web site can be used by someone using any browser and any Web-enabled device.”
Scanlon communicates this information quickly, so as not to waste a business reader’s time, and clearly, without talking down to the reader. This makes her article, not merely a dandy clipping for my scrapbook, but a useful tool of web standards evangelism.
Contributing to the article with their comments are Jeff Veen, manager of user experience for Google’s web applications and former director of Hotwired.com; NYTimes.com design director, subtraction.com author, and grid-meister Khoi Vinh; and Dan Cederholm, founder of SimpleBits and author of Bulletproof Web Design. Dave Shea’s CSS Zen Garden features prominently as well, and rightfully so.
Great, straightforward how-to by brilliant author/developer Mark Pilgrim walks you through the process of setting up HandBrake, a free, open source app, to rip DVDs to your iPod. Last updated in 2005, several versions of HandBrake (not to mention several generations of iPod) ago, so screen shots will not always match current versions. But the settings advice is still accurate, and even applies to the iPhone, with its giant wide screen.
Ripping even a short movie you own takes a long, long time. I tested Pilgrim’s advice on a flick our toddler loves, so my iPhone could double as a parental aid during family trips. It took over five hours to burn an 86 minute film, but the results were beautiful.
For more video conversion advice, see the 12 December 2005 Macworld Secrets column, Convert video for the iPod. Summary: Upgrade to QuickTime Pro and export for iPod. Works great and works fast. One’s iPhone now sports Charlie the Unicorn and will soon host short home movies shot on a point and shoot digital camera and formatted by that camera as AVIs.
We are still crunching numbers on the Web Design Survey—with over 32,000 responses to 36 questions, there’s a lot to crunch. But in one area, preliminary data supports what anecdotal experience led us to expect: almost no one who makes websites works in their company or organization’s web division. That’s because almost no company or organization has a web division. And that void on the org chart is one reason we have so many bloated, unusable failures where we should be producing great user experiences.
Ponder. No matter how critical the web experience may be to the organization’s mission, the people who design and build those mission-critical sites work in divisions that have nothing to do with the web, and report to leaders whose expertise is unrelated to web design and development.
It’s a startling fact with profound implications—and as such has gone unnoticed by the business community and press.
IT or marketing
From law firms to libraries, from universities to Fortune 500 companies, the organization’s website almost invariably falls under the domain of the IT Department or the Marketing Department, leading to turf wars and other predictable consequences. While many good (and highly capable) people work in IT and marketing, neither area is ideally suited to craft usable websites or to encourage the blossoming of vital web communities.
Competent IT departments handle a dazzling array of technical challenges requiring deep, multi-leveled expertise. But tasks such as equipping 20,000 globally dispersed employees with appropriately configured PCs, or maintaining corporate databases and mail gateways, don’t necessarily map to the skills required to design great user experiences for the web.
Large-scale systems expertise takes a different mindset than what’s needed to write usable guide copy, finesse markup semantics, or design an easy-to-understand user interface employing the lightest and fewest possible graphic images. Moreover, nimble development and support for open standards are not the hallmarks of large IT departments (although undoubtedly there are noble exceptions). Additionally, developers with a background in IT (again, with some exceptions) tend to create from the point of view of technology, rather than that of the user.
What about Marketing?
Organizations that don’t entrust their website to IT tend to hand it to Marketing. The rationale for doing so is easy to see: Marketing has been briefed on the organization’s business goals (at least for the next quarter), and the division is staffed by communications specialists who know at least something about writing and art direction. If nothing else, they know who to hire to write their copy, and they are comfortable telling the in-house graphic designers to make the logo bigger.
Like IT, Marketing has valuable organizational knowledge (plus certain skills) to contribute to any serious web enterprise. The leaders of Marketing, like the leaders of IT, should be frequently consulted in any web effort. But the skills of Marketing, like the skills of IT, don’t necessarily map to what is needed to create great web experiences.
For one thing, as anyone reading this knows, the web is a conversation. Marketing, by contrast, is a monologue. It can be a great monologue—for examples of which, see The One Show Winners or the AIGA Design Archives. But a monologue and conversation are not the same, as an hour spent with your windy Uncle Randolph will remind you.
And then there’s all that messy business with semantic markup, CSS, unobtrusive scripting, card-sorting exercises, HTML run-throughs, involving users in accessibility, and the rest of the skills and experience that don’t fall under Marketing’s purview.
If not them, then who?
Business and non-profit decision makers, for your users’ good, consider this request. Stop separating the members of your web team. Cease distributing them among various (often competitive) divisions led by people with limited web expertise. Let the coders, designers, writers, and others charged with creating and maintaining your web presence work together. Put them in a division that recognizes that your site is not a bastard of your brochures, nor a natural outgrowth of your group calendar. Let there be web divisions.
[tags]webdesign, webdevelopment, design, development, web divisions[/tags]
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!