Jeffrey Zeldman

Syndicate content
Web design news and insights since 1995
Updated: 50 min 5 sec ago

My other iPad is a Kindle

Thu, 09/02/2010 - 10:29


The new Kindle has a lot going for it. It’s inexpensive compared to a full-featured tablet computer like the iPad; you can slip it in your back pocket, where it’s more comfortable than an old-style paperback; and it includes a Webkit browser. This last point is where folks like us start to give a hoot, whether we’re fans of epub reading or not.

The flavor of Kindle’s browser concerns us because it affords us the ability to optimize the mobile viewing experience with a single line of markup. You can see this in action in the photo at the head of this article (published and discussed on Flickr).

I made no tweaks for Kindle per se; the Kindle is simply responding to a line of markup I’ve been putting into my web pages since 2007—namely, the viewport meta element, which controls the width of the viewport, thus enabling mobile devices with a limited number of pixels to focus all available pixels on your site’s core content (instead of, for instance, wasting part of the small screen on a background color, image, or gradient). The technique is as simple as web design gets:

meta name="viewport" content="width=770"

(Obviously, the value of “width” should be adjusted to match your site’s layout.)

I learned this little trick from Craig Hockenberry’s Put Your Content in My Pocket (A List Apart, August 28, 2007), which I naturally recommend to any designer who hasn’t seen it.





Categories: Web Design

Episode 18: Roger Black on web type and templates

Wed, 09/01/2010 - 14:18


Legendary art director Roger Black guests on tomorrow’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped in front of a live internet audience.

Roger co-founded the following new companies: Webtype, creators of high-end fonts for online typography; Treesaver, a platform that uses CSS, HTML, JavaScript, and the principles of responsive design to publish beautifully formatted content on any device with a web browser; Ready-Media, which designs templates for newspaper and magazine publishers (and attracts controversy); and Nomad Editions, a series of digital weeklies designed directly for mobile devices.

Roger is also a founding partner in Danilo Black, an international design agency he co-founded with Eduardo Danilo, and The Font Bureau, a leading type foundry he co-founded with David Berlow.

“He pioneered the use of computers in design, cut the best deals, and made himself synonymous with the modern magazine,” wrote Michael Wolff in a New York Magazine profile of Roger back in the 1990s, when Roger was the best-known magazine art director in the world. (Among many others, he designed Rolling Stone, The New York Times Magazine, Newsweek, The New Republic, Fast Company, Advertising Age, and Esquire.)

He also co-founded Interactive Bureau, one of the biggest and most successful web design agencies of the dot-com era.

In his free time, Roger putters around in his award-winning West Texas vacation home made of recycled shipping containers.

Roger Black is an astoundingly prolific creative force; we hope you can join us for this Episode of the show.

The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.

Photo of Roger Black at Happy Cog by Jeffrey Zeldman.





Categories: Web Design

HTML5 For Web Designers: The eBook

Tue, 08/31/2010 - 11:37


Jeremy Keith’s HTML5 for Web Designers is now available as an epub at books.alistapart.com.

If you bought the paperback, watch your inbox for a special discount on the ebook. (To take advantage of this offer, enter the discount code in page 2 of the shopping cart’s checkout process, after you put in your billing information.)

Also, be on the lookout for our second book, CSS3 For Web Designers by Dan Cederholm, forthcoming this Fall. Upcoming A Book Apart topics include progressive enhancement, content strategy, responsive web design, and emotional design by industry-leading authors Aaron Gustafson, Erin Kissane, Ethan Marcotte, and Aarron Walter.





Categories: Web Design

Announcing Lanyrd

Tue, 08/31/2010 - 07:14


No, it isn’t a Happy Cog project (it’s by Simon Willison and Natalie Downe) but we couldn’t love Lanyrd, the social conference directory any more if we’d created it ourselves.

Lanyrd uses Twitter to tell you which conferences, workshops and such your friends are attending or speaking at. You can add and track events, and soon you’ll be able to export your events as iCal or into your Google calendar (the site is powered by microformats). Soon, too, you’ll be able to add sessions, slides, and videos.

The site’s not for everyone. It’s for people who attend web/UX conferences, and as it was created by inhabitants of the UK, it presently focuses mainly on Western European and North American events, but that will change as more people use it.

Congratulations and thank you, Natalie and Simon.



Categories: Web Design

HTML5 Pour Les Web Designers

Thu, 08/26/2010 - 15:42


Sacrebleu! The French edition of the ebook of Monsieur Jeremy Keith’s HTML5 For Web Designers is in the top five sellers in the iTunes Store Français.

To answer your other questions: an eBook version in English is coming to books.alistapart.com next week, will soon thereafter also be sold via the iTunes Store, and will be followed by a PDF version. Get those downloading fingers in shape now!



Categories: Web Design

Episode 17: Web Meritocracy

Tue, 08/24/2010 - 14:36


Bay area designer Tracy Osborn (@limedaring) is our guest on Thursday’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped in front of a live internet audience.

Tracy is the kind of young entrepreneur who bears watching, and an exemplar of the empowering energy of the web. In virtually every other sphere of industry, even can’t-miss notions demand tremendous financial backing to attain the merest chance of success. But on the web, quite often, all you need is a strong idea and the willingness and ability to work.

Tracy’s latest idea is to launch a startup that’s likely to shake up the wedding invitation industry:

In wedding invitations alone, there are two options: spend hundreds of dollars for custom designed invitations (expensive but pretty), or do-it-yourself (cheap but ugly). I want to build a web application catering to … price sensitive couples who have an aversion to Comic Sans.

We’ll discuss the ins and outs of networking when you’re not well known; where ideas and inspiration come from; how to recognize and develop your best ideas and persuade others to believe in them; and more.

The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.





Categories: Web Design

A most unfortunate company name

Sat, 08/21/2010 - 11:29
Categories: Web Design

Pick a Peck of Panels

Sat, 08/21/2010 - 10:36


Voting is underway for next year’s SXSW Interactive Festival in Austin, TX, and members of Happy Cog have proposed eighteen panel ideas shown here. Follow the links to vote for your favorites, increasing the likelihood you’ll see them on the schedule in March 2011. Voting ends 11:59 PM CDT on Friday, August 27, 2010.

Project Management
  1. Project Management for Humans (No Robots Allowed)
  2. Panelists:

    • Brett HarnedHappy Cog Senior Project Manager
    • Dave DeRuchieHappy Cog Project Management Director
    • Sam Barnes
    • Pamela Villcorta
    • Rob Borley
  3. Your Meetings Suck and It’s Your Fault
  4. Presenter: Kevin HoffmanHappy Cog User Experience Director

User Experience
  1. Critical Thinking for UX Designers (Or Anyone, Really)
  2. Dual Presenters:

    • Russ UngerHappy Cog User Experience Director
    • Stephen Anderson
  3. Guerrilla Research Methods — Live!
  4. Dual Presenters:

    • Todd Zaki Warfel
    • Russ UngerHappy Cog User Experience Director
  5. Inside-Out UX: Clients, Expectations, Politics, Personalities
  6. Dual Presenters:

    • Whitney HessHappy Cog Senior Experience Designer
    • Tom Daly
Design
  1. Can Design Save Philadelphia? Happy Cog vs Cliches
  2. Presenter: Christopher CashdollarHappy Cog Creative Director

  3. My Title Is Web Designer, Now What?
  4. Panelists:

  5. Nontent: Is Smashing Magazine Helping or Hurting Design
  6. Panelists:

    • Kevin SharonHappy Cog Senior Designer
    • Mathew Smith
    • Aex Giron
Development
  1. Developers: Saving the Web From Your Dick Move
  2. Panelists:

    • Jenn LukasHappy Cog Interactive Development Director
    • Mark HuotHappy Cog Technology & Development Director
    • Kenny Meyers
    • Noah Stokes
    • Paul Irish
  3. Digital Bookmaking for Designers & Developers
  4. Panelists:

    • Brian WarrenHappy Cog Senior Designer/Developer
    • Scott Boms
    • Grant Huchinson
Personal Development
  1. Jeffrey Zeldman’s Amazing Panel
  2. Presenter: Jeffrey ZeldmanHappy Cog Founder & Executive Creative Director

  3. Company Culture: It’s All Your Fault
  4. Presenter: Greg HoyHappy Cog President

  5. Panel Title: [ INSERT PANEL TITLE HERE ]
  6. Dual Presenters:

  7. GeekFit: How to Embrace Technology and Healthy Lifestyles
  8. Presenter: Robert JollyHappy Cog Client Services Director

  9. Breaking Taboos: Pros Get Real About Money Matters
  10. Panelists:

    • Mark Hemeon
    • Daniel Burka
    • Joe Stump
    • Whitney HessHappy Cog Senior Experience Designer
  11. Maintaining Your Humility While Enjoying Your Success
  12. Presenter: Whitney HessHappy Cog Senior Experience Designer

  13. Bridging The Generation Gap: Or Is There One?
  14. Panelists:

  15. Making Memories Capturing Your Awkward Social Media Years
  16. Panelists:

    • Kenny Meyers
    • Luke Dorney
    • Greg StoreyHappy Cog President





Categories: Web Design

Help content, iPad apps

Tue, 08/17/2010 - 11:01


In Issue No. 312 of A List Apart for people who make websites: Twitterific’s Craig Hockenberry compares web apps to iPhone apps,and tells iPhone app developers what they need to know to succeed, in Apps vs. the Web. And Lyle Mullican shows how to convert frustrated users into loyal customers by strategizing, writing, and maintaining better help copy in Good Help is Hard to Find. (Plus: possibly the best Kevin Cornell ALA illustrations yet.)





Categories: Web Design

iPad Fonts Petition

Mon, 08/16/2010 - 06:50


Dear Apple: It is a triumph of engineering and marketing and general cause for joy that Apple provides highly functional iPad versions of Keynote, Pages, and Numbers for a mere $9.99 apiece. Alas, the iPad versions’ inability to import or transfer fonts diminishes the apps’ value and utility.

You, Apple, have done much to foster today’s design culture, so it is no surprise to you that we designers are particular about the fonts we use. One font is not the same as another. Helvetica is not the same as Franklin or Gotham. You know this as well as we do. Which means you also know that, in transferring Keynote presentations and Pages layouts between the Macs and iPads you sell us, our joy gets dented when the iPad replaces our fonts with “a close match” or Helvetica.

And it’s not just a matter of joy. I sometimes spend weeks on a Keynote presentation, and so do my colleagues. We’d love to be able to work on them whether we have a Mac or an iPad at hand—that, after all, is the promise of the devices we buy from you; frankly, it is the promise of all computers. But when the iPad loses my fonts, it loses me. A Keynote presentation with substitute fonts is of no use to me, except perhaps as a rehearsal tool—and I can just as easily rehearse with a PDF.

Please either add the ability to retain fonts (and all their settings) when importing Keynote, Pages, and Numbers documents from computer to iPad, or else please create a simple font management tool for the iPad that allows us to import a reasonable subset of our fonts to the device.

Sincerely,

Jeffrey Zeldman
and…



Categories: Web Design

How to use TextMate

Fri, 08/13/2010 - 16:48


For nearly 13 years, I created websites with PageSpinner, a charmingly old-fashioned HTML coding environment from the days of Netscape 1.0. But two years ago, seeking updated web page encoding and other modern conveniences, I switched to TextMate, “the missing editor for MacOS X.”

PageSpinner greatly helps coders (but offends the aesthete’s eye) with Microsoft-Word-like menu bars containing buttons that let you instantly create paragraphs, list items, and so on. In contrast, TextMate has no UI chrome whatever. A screenshot of the TextMate interface is like a photograph of snow.

For two years, I’ve created web pages in TextMate, hand-coding every entity with no help from the application because I didn’t know it offered any. But my friend Ethan Marcotte knew, and today, responding to my cry for help, he sent the following info:

I highly recommend starting here. (If you only read one thing in this email—and who could blame you?—make it that link.)

Moving on! Here’s a more exhaustive “getting started” tutorial.

Random feature blogs:

Macromates has some helpful screencasts (most of which could use a good editor, but they might be good train fodder):

Because I have no life, I’ll occasionally trawl through Vimeo to find random tips.

And here’s Dan Rubin’s macro to convert multi-line CSS to single-line (or vice versa).





Categories: Web Design

Like a prayer

Fri, 08/13/2010 - 11:58


An essay in three tweets:

Morality isn’t how you think, it’s what you do about your violent carnal greedy cowardly natural impulses. #

Good religion attempts to explain our deep connection to others. Bad religion scares us out of being monkeys. #

God loves my sin more than it shames me. Ladies. #



Categories: Web Design

Social Network Creep

Fri, 08/13/2010 - 11:42


If you’re intrigued, as I am, by the trailer for David Fincher’s upcoming The Social Network, and if part of what compels you about the trailer is the musical score—a choral version of Radiohead’s “Creep”—you’ll be happy to know you can purchase said song via emusic.com: On The Rocks is the album, “Creep” is the track, and Scala, a Belgian all-teenage-girl choir, are the artists. Highly recommended.

P.S. If emusic.com had an affiliate program, I’d have free music for life.



Categories: Web Design

We’re speechless

Fri, 08/13/2010 - 09:58


In What I learned at An Event Apart Minneapolis, Marc Drummond writes:

A really good session, in my opinion, is not about the how, it’s about the why. … A really good session, through arguments and examples, stories and slides, humor and deep thoughts, compels you to try something new. A great session exposes you to something you haven’t done before and inspires you to take action, change the way you do things.

Based on my experience, I plan to focus even more on understanding users for the sites I work on, strategize more about content, focus on mobile and adaptive layouts, consult existing patterns for interfaces, humanize interfaces, work more iteratively, start using HTML5 and CSS3 techniques that will save loads of time and give Dreamweaver CS5 a try.

While I might have run across information about these topics before, now I feel the urgency in putting these techniques in the top tray of my toolbox, where I will use them more frequently.





Categories: Web Design

I guest-edit .net magazine

Thu, 08/12/2010 - 08:16


A List Apart and .net magazine have long admired each other. So when .net editor Dan Oliver did me the great honor of asking if I wished to guest edit an issue, I saluted smartly. The result is now arriving in subscriber post boxes and will soon flood Her Majesty’s newsstands.

In .net magazine Issue No. 206, on sale 17th August in UK (and next month in the US, where it goes by the name “Practical Web Design”), we examine how new standards like CSS3 and HTML5, new devices like iPhone and Droid, and maturing UX disciplines like content strategy are converging to create new opportunities for web designers and the web users we serve:

  • Exult as Luke Wroblewski shows how the explosive growth of mobile lets us stop bowing to committees and refocus on features customers need.
  • Marvel as Ethan Marcotte explains how fluid grids, flexible images, and CSS3 media queries help us create precise yet context-sensitive layouts that change to fit the device and screen on which they’re viewed.
  • Delight as Kristina Halvorson tells how to achieve better design through coherent content wrangling.
  • Thrill as Andy Hume shows how to sell wary clients on cutting-edge design methods never before possible.
  • Geek out as Tim Van Damme shows how progressive enhancement and CSS3 make for sexy experiences in today’s most capable browsers—and damned fine experiences in those that are less web-standards-savvy.

You can also read my article, which asks the musical question:

Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a newer, more mature, more ubiquitous web?

Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!

Photo by Daniel Byrne for .net magazine. All rights reserved.





Categories: Web Design

HTML5, CSS3 default templates

Wed, 08/11/2010 - 07:23


Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.



Categories: Web Design

What a way to go

Wed, 08/11/2010 - 06:54
Categories: Web Design

Return to Sender

Tue, 08/10/2010 - 15:24


About 40 copies of HTML5 For Web Designers out of the first 10,000 sold have been returned to us because the recipients moved, or there was an error in their address.

Returns come from every continent on the globe. Japanese returns are quietly beautiful. French returns are vaguely contemptuous.

Returned books – A Book Apart



Categories: Web Design

The Big Web Show Episode 16: Serious Doodles

Mon, 08/09/2010 - 14:29


Sunni Brown (website, Twitter) is our guest on Thursday’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped in front of a live internet audience.

Sunni is a business owner, author, and information designer, and her consultancy, BrightSpot I.D., specializes in visual thinking and the broad range of its applications. She is currently an Associate of The Grove, a freelance consultant for XPLANE—the visual thinking company—and an Associate of Alphachimp Studios.

Sunni is co-Founder of VizThink Austin, currently the largest visual thinking community in the United States. She is also the leader of The Doodle Revolution, a growing effort to debunk the myth that doodling is a distraction.

The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.





Categories: Web Design

Color logos

Sat, 08/07/2010 - 09:44



Gosh knows how they reproduce in newspaper or how effectively they can be translated into favicons, but there’s no denying that there are some lovely works in Wsblogz.com’s gallery of color logos.





Categories: Web Design