Hot dang! Use fluid grids, flexible images, and CSS media queries to create elegant user experiences that fit any browser or device’s viewport. By Ethan Marcotte, co-author of Designing With Web Standards 3rd Edition.
WHEN MANDY BROWN, Jason Santa Maria and I formed A Book Apart, one topic burned uppermost in our minds, and there was only one author for
Nothing else, not even “real fonts” or CSS3, has stirred the standards-based design community like the imminent arrival of HTML5. Born out of dissatisfaction with the pacing and politics of the W3C, and conceived for a web of applications (not just documents), this new edition of the web’s lingua franca has in equal measure excited, angered, and confused the web design community.
There are other books about HTML5, and there will be many more. There will be 500 page technical books for application developers, whose needs drove much of HTML5’s development. There will be even longer secret books for browser makers, addressing technical challenges that you and I are blessed never to need to think about.
But this is a book for you—you who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it your user guide to HTML5. Its goal—one it will share with every title in the forthcoming A Book Apart catalog—is to shed clear light on a tricky subject, and do it fast, so you can get back to work.
The present-day content producer refuses to die.
And don’t miss…
And so do my iPhone and your iPad. All it took was a bit o’ the old Richard Fink syntax and a quick drive through the Font Squirrel @Font-Face Kit Generator (featuring Base 64 encoding and SVG generation) to bring the joy and wonder of fast, optimized, semi-bulletproof web fonts to Safari, Firefox, Opera, Chrome, iPhone, and Apple’s latest religious device.
Haven’t checked IE7, IE8, IE9, or iPad yet; photos welcome. (Post on Flickr and link here.)
What I learned:
☛ Even if manufacturer supplies “web font” versions with web license purchase, it’s better to roll your own web font files as long as this doesn’t violate the license.
Greetings, web design fans. I’m in Seattle doing the final prep for three days of kick-ass design, code, and content. Starting Monday, April 5 and running through Wednesday, April 8, An Event Apart Seattle 2010 features 13 great speakers and 13 sessions, and has been sold out for over a month. A Day Apart, a special one-day learning experience on HTML5 and CSS3, follows the regular conference and is led by Jeremy Keith and Dan Cederholm.
The all-star cast includes …
- Nicole Sullivan on object-oriented CSS;
- Dan Cederholm on “the CSS3 Experience;”
- Luke Wroblewski on the three reasons web applications should be designed for mobile first;
- Aarron Walter on emotional interface design;
- Jared Spool on the five styles of design decisions;
- Microsoft’s Pete LePage asking your help to kill IE6 (yes, really);
… And that’s just the first day.
There are also two parties (sponsored by our good friends at Media Temple and MSNBC) and seven more great speakers with topics of interest to all standards-based web designers.
If you can’t be with us, follow the Twitter stream live on A Feed Apart.
Web designer Joshua Lane, currently best know for doing fancy web stuff at Virb.com, has overhauled his personal site in ways that are aesthetically pleasing and visually instructive.
Like all good site redesigns, this one starts with the content. Whereas the recent zeldman.com redesign emphasizes blog posts (because I write a lot and that’s what people come here for), Lane’s redesign appropriately takes exactly the opposite approach:
There is a much smaller focus on blog posts (since I don’t write often), and a much larger focus on the things I do elsewhere (Twitter, Flickr, Last.fm etc). Individually, I don’t contribute a great deal to each of those services. But collectively, I feel like it’s a good amount of content to showcase (as seen on the home page). And something that feels like a really good representation of “me.”
Not one to ignore the power of web fonts, Lane makes judicious use of Goudy Bookletter 1911 from The League of Movable Type, an open-source type site founded by Caroline and Micah, featuring only “well-made, free & open-source, @font-face ready fonts.” (Read their Manifesto here.)
The great Barry Schwartz based his Goudy Bookletter 1911 on Frederic Goudy’s Kennerley Oldstyle, a font Schwartz admires because it “fits together tightly and evenly with almost no kerning.” Lane inserts Schwartz’s open-source gem via simple, standards-compliant CSS @font-face. Because of its size, it avoids the secret shame of web fonts, looking great in Mac and Windows.
But considered type is far from the redesigned site’s only nicety. Among its additional pleasures are elegant visual balance, judicious use of an underlying horizontal grid, and controlled tension between predictability and variation, ornament and minimalism. Restraint of color palette makes photos, portfolio pieces, and other featured elements pop. And smart CSS3 coding allows the designer to play with color variations whenever he wishes: “the entire color scheme can be changed by replacing a single background color thanks to transparent pngs and rgba text and borders.”
In short, what Lane has wrought is the very model of a modern personal site: solid design that supports content, backed by strategic use of web standards.
Another generation of technology has passed and Unicode support is almost everywhere. The next step is to write software that is not just “internationalized” but truly multilingual. In this article we will skip through a bit of history and theory, then illustrate a neat hack called accent-folding. Accent-folding has its limitations but it can help make some important yet overlooked user interactions work better.
Accent Folding for Auto-Complete by CARLOS BUENO in A List Apart Issue No. 301
Illustration: Kevin Cornell for A List Apart
In Issue No. 297 of A List Apart “for people who make websites,” Erin Scime explains how the principles of museum curatorship can inform and shape how we approach content on the web: “The Content Strategist as Digital Curator.” And Bjørn Enki describes how electronic contracts can speed workflow and acceptance, and tells how to create just such a contract with a little time and PHP in “Letting Go of John Hancock.”
A List Apart illustrations are by Kevin Cornell.
Short URL: zeldman.com/?p=3234
Bonne journée du chapeau bleu! Now you know how to say “Happy Blue Beanie Day” in French.
Monday 30 November is International Blue Beanie Day in support of web standards. Get your toque on, post a photo, and pop a beanie on your Twitter, Flickr, and Facebook avatars to help spread the word. Let’s take this viral, kids!
Short URL: zeldman.com/?p=3142
For those who couldn’t be there, and for those who were there and seek to savor the memories, here is An Event Apart Chicago, all wrapped up in a pretty bow:
- AEA Chicago – official photo set
- By John Morrison, subism studios llc. See also (and contribute to) An Event Apart Chicago 2009 Pool, a user group on Flickr.
- A Feed Apart Chicago
- Live tweeting from the show, captured forever and still being updated. Includes complete blow-by-blow from Whitney Hess.
- Luke W’s Notes on the Show
- Smart note-taking by Luke Wroblewski, design lead for Yahoo!, frequent AEA speaker, and author of Web Form Design: Filling in the Blanks (Rosenfeld Media, 2008):
- Jeffrey Zeldman: A Site Redesign
- Jason Santa Maria: Thinking Small
- Kristina Halvorson: Content First
- Dan Brown: Concept Models -A Tool for Planning Websites
- Whitney Hess: DIY UX -Give Your Users an Upgrade
- Andy Clarke: Walls Come Tumbling Down
- Aaron Gustafson: Using CSS3 Today with eCSStender (not captured)
- Simon Willison: Building Things Fast
- Luke Wroblewski: Web Form Design in Action (download slides)
- Dan Rubin: Designing Virtual Realism
- Dan Cederholm: Progressive Enrichment With CSS3 (not captured)
- Three years of An Event Apart Presentations
Comment posting here is a bit wonky at the moment. We are investigating the cause. Normal commenting has been restored. Thank you, Noel Jackson.
Short URL: zeldman.com/?p=2695
Designed by Happy Cog and launched today, The Amanda Project is a social media network, creative writing project, interactive game, and book series combined:
The Amanda Project is the story of Amanda Valentino, told through an interactive website and book series for readers aged 13 & up. On the website, readers are invited to become a part of the story as they help the main characters search for Amanda.
The writing-focused social media network is designed and written as if by characters from the Amanda novels, and encourages readers to enter the novel’s world by joining the search for Amanda, following clues and reading passages that exist only online, and ultimately helping to shape the course of the Amanda narrative across eight novels. (The first Amanda novel—Invisible I, written by Melissa Kantor—comes out 22 September.)
The site developed over a year of intense creative collaboration between Happy Cog and Fourth Story Media, a book publisher and new media company spearheaded by publishing whiz Lisa Holton. Prior to starting Fourth Story, Lisa was was President, Scholastic Trade Publishing and Book Fairs; managed the publication of Harry Potter and the Deathly Hallows; and oversaw development of The 39 Clues. Before that she spent nearly a decade developing numerous bestselling, franchise-launching series at Disney.
Happy Cog‘s New York office developed this project. The team:
- Aaron Gustafson, front-end development (blog, articles, Twitter)
- Liz, Danzico, user experience (blog, MFA program, Twitter)
- Matthew Goldenberg, project management
- Whitney Hess, user experience (blog, Twitter)
- Erin Kissane, content strategy (articles, blog, Twitter)
- Kelly McCarthy, project manager
- Jason Santa Maria, design (website, Twitter)
- Jeffrey Zeldman, creative director
Equally vital to the project’s success were Fourth Story’s leaders and partners, including:
- Lorraine Shanley, Principal Advisor
- Ariel Aberg-Riger (website, Twitter), Creative Development & Marketing Manager
- JillEllyn Riley, Editorial Director
- Dale Robbins, Creative Director
- David Stack, Director, Digital Partnerships
- Melissa Kantor, Writer
- Peter Silsbee, Writer
- Polly Kanevsky, Art Director
- Sam Gerstenzang, Technology Consultant
Today’s launch is not the end of our relationship with Fourth Story Media. The Amanda Project will continue to evolve, and Happy Cog will remain an active partner in its direction and growth. We thank our brilliant collaborators and congratulate them on today’s milestone.
- Blissbat.net: The Amanda Project Wants You
[tags]amanda, amandaproject, theamandaproject, TAP, happycog, design, webdesign, contentstrategy, userexperience, publishing, books, aarongustafson, lizdanzico, erinkissane, whitneyhess, mattgoldenberg, kellymccarthy, jasonsantamaria, jeffreyzeldman, lisaholton, dalerobbins, davidstack, JillEllynRiley, ArielAberg-Riger[/tags]