m.nicewebtype.com is a light yet essential mobile site for people who design websites, love type, and struggle to keep up with the dizzying world of web fonts. In it, Tim Brown, author of Nice Web Type, creator of Web Font Specimen (what’s that?), and latterly type manager for Typekit, curates the Design Twitterverse to share the latest insights, innovations, quips, and controversies regarding everyone’s favorite new web design fetish.

Don’t leave home without it.

Filed under: Web Design, Web Standards, Websites, links, webtype

The new mini-site for the 3rd Edition of Designing With Web Standards has been updated, with additional information about the substantially revised web standards guidebook, and with tweaks to the CSS which, one hopes, now bring embedded web font goodness to Internet Explorer users, as well as our friends on Safari, Firefox, and Opera. We love the smell of Franklin in the morning.

Short URL: zeldman.com/x/60

Filed under: 3e, Announcements, DWWS, Design, Franklin, Web Design, Web Standards, Websites, Zeldman, webfonts

Among the pleasures of running an independent personal site is the accidental discovery of an ancient page, such as the version of this site’s contact page from the 1990s that I stumbled onto this morning.

“We’ve got mail!” the old site cheerfully announces, complete with a meaningless header image. The image, like the header and navigation typography, is pixellated to convey “webbiness”—in case you forgot that you were looking at a website in a browser, I guess. “Got mail” is a play on America On-line (kids, ask your parents). “We” is the royal first person plural with which I used to write this site, despite being its sole author. I’d gotten into the habit of “we” from writing copy on entertainment sites for clients like Warner Bros. It made their sites, and mine, seem bigger. It was also an ongoing, self-deprecating joke, although not everyone got it.

As I look at this old page, the copy still feels like me, and it also, if I may say so, anticipates the playful directional body copy of Web 2.0 sites like Flickr by about a decade. (Could be coincidence. Derek Powazek and Heather Champ also wrote jovial instructional copy at the time. Others may have done so as well.)

I’m a lot more ashamed of the design. I’m particularly abashed at:

• My abysmally stupid effort to straddle the “liquid layout” and “fixed width layout” genres by designing a page that doesn’t work as liquid or fixed. Possibly the only web design ever to put peanut butter and bicycle chains together and call it a sandwich. It should have stayed fixed, and the text and input fields should have matched the width of the illustration and header.
• Alignment, alignment, alignment.
• Tiny type with seemingly random hierarchy. In my defense, remember that in those days all type was pixellated. I picked 11px Georgia and 9px Verdana because those sizes looked great in that pixellated world. Still. Feh.

If your old work doesn’t shame you, you’re not growing.

It’s nice to look back and feel that you’ve made progress. When you look at old work, it should suck glaringly and you should cringe painfully. But there should also be some germ within it that you’re not ashamed of—some spark of talent or inspiration that connects to what you do now.

Filed under: Design, Web Design, Websites, Zeldman, work, zeldman.com

In Issue No. 289 of A List Apart, for people who make websites: 90% of web design is redesign. The hardest redesigns are the ones you do for yourself. In this special issue, we look at how two of the great ones handled the challenge of redesigning their own sites.

Erskine Design Redesign

by SIMON COLLISON

In a mere two years, Erskine Design grew from two people working at home into a full-fledged agency of eight, working with major clients. Their website needed to better reflect their achievements, abilities, and team strengths. They also sought to improve the quality of data collected during client inquiries. Simon Collison explores the agency’s thought processes, and the decisions they made as their own client.

Redesigning Your Own Site

by LEA ALCANTARA

Redesigning your freelance website is an exercise in masochism. There are no colleagues to share the pain: It’s just you. As the designer who wrote The Art of Self-Branding, freelancer Lea Alcantara knew her site had to be just right. People were bound to scrutinize any update to the design, and she couldn’t afford to damage her credibility. Follow her process and decide for yourself if she succeeded.

Tags: design, redesign, self-branding, webdesign, alistapart

Filed under: A List Apart, Design, Redesigns, Web Design, Websites

Comments off.

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.

Read more

• 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

Filed under: Applications, Code, Community, Design, Happy Cog™, Publications, Publishing, Web Design, Websites, architecture, art direction, books, business, client services, content, creativity, development, editorial, launches, links, people, social networking, software

The Happy Cog-designed social network for Brighter Planet is now in public beta. Come on down and kick the tires. Brighter Planet helps you take control of your environmental footprint: measure your climate impact, discover simple ways to reduce it, track your progress, and share your experiences with other people who who want to make a difference.

Happy Cog’s New York office developed this project. The team:

• Aaron Gustafson, front-end development (blog, articles, Twitter)
• Naz Hamid, design (website, Twitter)
• Whitney Hess, user experience (blog, Twitter).
• Erin Kissane, content strategy (articles, blog, Twitter)
• Kelly McCarthy, project manager
• Jeffrey Zeldman, creative director

This truly collaborative project could not have been conceived or completed without the brilliant and generous work of Brighter Planet team members including:

• CTO Adam Rubin (bio, blog, Twitter)
• Co-founder and Product Design Director Andy Rossmeissl (Twitter, bio)
• Senior Systems Engineer Seamus Abshere (bio)
• Rails developer Rich Sturim (Twitter, bio)

Not only is this young, passionate team dedicated to reducing climate change and all things green, they are also marketing kingpins, shrewd user experience designers, and badass developers.

We love our clients. These folks and this project are dear to us. And it’s a fun way to make a difference. I hope you’ll check out Brighter Planet’s new beta social network.

Tags: brighterplanet, climatechange, beta, site, launch, launches, webdesign, projects, work, happycog

Filed under: Code, Community, Happy Cog™, UX, User Experience, Web Design, Websites, Working, Zeldman, climate change, social networking, work

The earliest websites were minimal in the extreme, but without the style and flair to make a virtue of their simplicity. 37signals and Kottke pioneered the combination of simplicity with deft design sense. Cardigan made it art.

Although it is never popular, never the dominant trend, rarely wins design awards, and almost never earns acclaim from designers, design stripped down to its essentials is always a good idea, and especially on the web, where every byte counts. We salute the old and new practitioners of minimalist web design, and solicit your thoughts on pioneers or present practitioners who combine a minimalist aesthetic with significant design chops.

• 37signals home page, 27 November 1999
• 37signals detail page (first signal), 27 November 1999
• Kottke.org, home of fine hypertext products, 9 March 2000
• Kottke.org, home of fine hypertext products today
• Drudge Report, 10 December 1997
• Drudge Retort
• cardigan.com by Dean Allen (abandoned 2001)
• Wilson Miner
• Subtraction.com by Khoi Vinh
• WordPress Neutica theme designed by Allan Cole (Hat tip: Oliver Lorton)

Tags: design, webdesign, minimalism, history, web design history

Filed under: Design, Web Design, Web Design History, Websites, links, style

Here’s a little something for a Wednesday evening. (Or wherever day and time it is in your part of the world.)

The body and bottom of the next zeldman.com design are now finished. Tomorrow I start working on the top.

Have a look.

Looks extra sweet in iPhone.

I’m designing from the content out. Meaning that I designed the middle of the page (the part you read) first. Because that’s what this site is about.

When I was satisfied that it was not only readable but actually encouraged reading, I brought in colors and started working on the footer. (The colors, I need not point out to longtime visitors, hearken back to the zeldman.com brand as it was in the 1990s.)

The footer, I reckoned, was the right place for my literary and software products.

I designed the grid in my head, verified it on sketch paper, and laid out the footer bits in Photoshop just to make sure they fit and looked right. Essentially, though, this is a design process that takes place outside Photoshop. That is, it starts in my head, gets interpreted via CSS, viewed in a browser, and tweaked.

Do not interpret this as me dumping on Photoshop. I love Photoshop and could not live or work without it. But especially for a simple site focused on reading, I find it quicker and easier to tweak font settings in code than to laboriously render pages in Photoshop.

If you view source, I haven’t optimized the CSS. (There’s no sense in doing so yet, as I still have to design the top of the page.)

I thought about waiting till I was finished before showing anything. That, after all, is what any sensible designer would do. But this site has a long history of redesigning in public, and the current design has been with us at least four years too long. Since I can’t snap my fingers and change it, sharing is the next best thing.

A work in progress. Like ourselves.

Tags: zeldman, zeldman.com, redesign, webdesign, css, code

Filed under: Appearances, Browsers, CSS, Design, Fonts, HTML, Layout, Web Design, Web Standards, Websites, Working, XHTML, Zeldman, content, creativity, wordpress, work, zeldman.com

Rated Five Stars at Amazon.com since the day it was published, “Taking Your Talent to the Web” is now a free downloadable book from zeldman.com:

• Download the front cover! (TIFF image, 1.8 MB)
• Download the book! (PDF, book galley, 9.5 MB)

I wrote this book in 2001 for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.

Here we are in 2009, and print designers and art directors are scrambling to move into web and interaction design.

The dot-com crash killed this book. Now it lives again. While browser references and modem speeds may reek of 2001, much of the advice about transitioning to the web still holds true.

It’s yours. Enjoy.

Update – now with bookmarks

Attention, K-Mart shoppers. The PDF now includes proper Acrobat bookmarks, courtesy of Robert Black. Thanks, Robert!

Tags: design, webdesign, TYTTTW, takingyourtalenttotheweb, zeldman, jeffreyzeldman, book, instruction, artdirection, printtoweb

Filed under: CSS, Community, Design, Free, HTML, Happy Cog™, Ideas, Information architecture, Layout, Publications, Publishing, State of the Web, The Profession, Tools, Typography, UX, Usability, User Experience, W3C, Web Design, Web Standards, Websites, Working, Zeldman, art direction, books, content, creativity, downloads, industry, jobs, reprints, writing

Joshua Schachter explains how URL shorteners like TinyURL, bit.ly, etc., originally created to prevent long URLs from breaking in 1990s e-mail clients, and now used primarily as a means of monetizing someone else’s content, are bad:

• They “add another layer of indirection to an already creaky system, [making what] used to be transparent … opaque,” slowing down web use by adding needless lookups, and potentially disguising spam.
• Shorteners “steal search juice” from the original publishers. (For example, with the Digg bar and Digg short URL, your content makes Digg more valuable and your site less valuable; the more content you create, the richer you make Digg.)
• “A new and potentially unreliable middleman now sits between the link and its destination. And the long-term archivability of the hyperlink now depends on the health of a third party.”

And more. Via Merlin Mann.

Anyone who creates web content should read Joshua’s post. I’m sold and will dial way back on my use of the zeldman.com short URL. The question remains, what to do when you need to paste a long, cumbersome link into a 140-character service like Twitter. (If you do nothing, Twitter itself will shorten the link via TinyURL.)

Tags: URL, URLshortener, JoshuaSchachter, redirect, abstraction, Digg, findability, searchjuice, SEO

Filed under: Blogs and Blogging, Design, HTML, Ideas, Information architecture, Publications, Publishing, Respect, Standards, State of the Web, UX, Usability, User Experience, Web Design, Web Standards, Websites, architecture, business, findability, industry, links, twitter