Category: Best practices

Episode 19: Beyond Usability with Aarron Walter

Post author By L. Jeffrey Zeldman
Post date 8 September 2010
No Comments on Episode 19: Beyond Usability with Aarron Walter

Designer Aarron Walter guests on Thursday’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped before a live internet audience.

Aarron is the author of one of my favorite web design books, Building Findable Websites: Web Standards, SEO, and Beyond (New Riders, 2008). It’s the book that explains the connection between “search engine optimization” and good, accessible, semantic markup. (Buy your clients a copy.) He works as the lead user experience designer for MailChimp, bringing ease of use and even fun to web-based email marketing and list management. He is also a popular conference speaker; the author of an upcoming A Book Apart mini-tome on emotional design; and the lead of the WaSP InterACT curriculum project, “a living, open curriculum based upon web standards and best practices, designed to teach students the skills of the web professional.”

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.

A List Apart Accessibility Amazon Apple art direction Authoring Best practices books Browsers Code Compatibility Design E-Books Formats HTML industry Layout Site Optimization The Essentials Touchscreen Web Design Web Design History Web Standards webkit zeldman.com

My other iPad is a Kindle

Post author By L. Jeffrey Zeldman
Post date 2 September 2010
No Comments on My other iPad is a Kindle

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.

art direction Best practices Big Web Show Design The Big Web Show The Profession Web Design Web Design History Web Standards webfonts Websites webtype Working

Episode 18: Roger Black on web type and templates

Post author By L. Jeffrey Zeldman
Post date 1 September 2010

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.

Photo of Roger Black at Happy Cog by Jeffrey Zeldman.

A Book Apart Acclaim Advocacy Announcements Apple Best practices Formats HTML HTML5 industry Jeremy Keith Products Publications Publishing

HTML5 Pour Les Web Designers

Post author By L. Jeffrey Zeldman
Post date 26 August 2010
No Comments on HTML5 Pour Les Web Designers

Sacre bleu! The French edition of the ebook of HTML5 For Web Designers is in the Top 5 sellers on iTunes Français.

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!

A List Apart An Event Apart Announcements Appearances Applications architecture art direction Best practices Browsers chrome Code CSS CSS3 Damned Fine Journalism Design Designers editorial Education engagement glamorous Happy Cog™ HTML HTML5 Ideas industry interface ipad iphone launches Layout photography Press Publications Publishing Real type on the web Responsive Web Design Standards State of the Web The Big Web Show The Essentials The Profession This never happens to Gruber type Typography User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Websites webtype writing Zeldman zeldman.com

I guest-edit .net magazine

Post author By L. Jeffrey Zeldman
Post date 12 August 2010
No Comments on I guest-edit .net magazine

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!

A List Apart Best practices business client management client services clients Design Publications Publishing User Experience UX Web Design

A List Apart 311: Say No to Clients and Kick Ass

Post author By L. Jeffrey Zeldman
Post date 4 August 2010

Something remarkable awaits you in Issue No. 311 of A List Apart for people who make websites. Two wonderfully readable articles tackle the thorny subject of client relationships, providing practices, insights, and tips which, when taken to heart, will help designers, UXers, and (frankly) clients do their jobs better:

One of the toughest parts of the client/designer relationship is that nobody likes to be told “no”—especially not the client who is paying you. But to do your job right, you often have to turn aside requests for what the client wants in favor of what the user really needs. In No One Nos: Learning to Say No to Bad Ideas, Whitney Hess explains when to say no, and how to turn it into a positive experience.

Of course, your ability to speak truth to the client assumes you’ve established a mutually respectful, goal- and team-focused relationship in the first place. And the first place is exactly where to begin establishing just that kind of relationship. In Kick Ass Kickoff Meetings, Kevin M. Hoffman shows how to use the first official meeting to turn a roomful of mutually suspicious turf battlers into an energetic team with shared ownership of the end-product.

Not only are these articles convincing, I know these techniques work, because we use them at Happy Cog.

Also in this issue, ALA illustrator Kevin Cornell outdoes even himself.

Join us, won’t you?

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Explore our articles and topics.

A List Apart An Event Apart Appearances Best practices better-know-a-speaker conferences content content strategy creativity CSS CSS3 Curation Design Designers engagement eric meyer Happy Cog™ HTML HTML5 Ideas Images industry Minneapolis people photography Responsive Web Design Typography Usability User Experience UX W3C Web Design Web Standards webfonts Zeldman

Minneapolis Remembered

Post author By L. Jeffrey Zeldman
Post date 29 July 2010

The show’s over but the photos linger on. An Event Apart Minneapolis was two days of nonstop brilliance and inspiration. In an environment more than one attendee likened to a “TED of web design,” a dozen of the most exciting speakers and visionaries in our industry explained why this moment in web design is like no other.

If you were there, relive the memories; if you couldn’t attend, steal a glance at some of what you missed: An Event Apart Minneapolis: the photo pool at Flickr.

Next up: An Event Apart DC and San Diego. These shows will not be streamed, simulcast, or repackaged in DVD format. To experience them, you must attend. Tickets are first-come, first-served, and every show this year has sold out. Forewarned is forearmed; we’d love to turn you on.

Photo: Jared Mehle.

automattic Best practices Big Web Show clients Code CSS CSS3 Design Interviews

Nicole Sullivan on CSS

Post author By L. Jeffrey Zeldman
Post date 8 July 2010

Update! Episode 11 featuring Nicole Sullivan on CSS optimization is now available for your listening and viewing pleasure at 5by5.tv.

If writing good CSS is tough, fixing someone else’s (or multiple someones’) bad CSS is a rarified art calling for the skill of a surgeon, the sensitivity of a Stradivarius, the patience of a saint, and the diplomacy of a Zheng He. Nicole Sullivan is one of the best and most successful of that small pool of CSS troubleshooters. Dan Benjamin and I are thrilled to have her as our guest on Episode 11 of The Big Web Show. Join us today, 8 July 2010, for the live taping at 1:00 PM ET.

Nicole is an evangelist, front-end performance consultant, CSS Ninja, and author. She started the Object-Oriented CSS open source project, which answers the question: how do you scale CSS for millions of visitors or thousands of pages? She also consulted with the W3C for their beta redesign, and is the co-creator of Smush.it, an image optimization service in the cloud.

Nicole is passionate about CSS, web standards, and scalable front-end architecture for large commercial websites. She speaks about performance at conferences around the world, most recently at An Event Apart, The Ajax Experience, ParisWeb, and Web Directions North.

The Big Web Show 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.

Acclaim Applications apps architecture art direction Authoring Best practices Browsers business Career Code creativity CSS Design development HTML HTML5 Ideas industry interface ipad iphone javascript links maturity Photoshop Platforms Publishing Standards State of the Web Stories The Profession Web Design Web Design History Web Standards

SlideShowPro adds HTML5

Most of us web folk are hybrids of one sort or another, but Todd Dominey was one of the first web designers to combine exceptional graphic design talent with serious mastery of code.

Being so good at both design and development that you could easily earn a fine living doing just one of them is still rare, although it looks like the future of our profession. One of the first serious designers to embrace web standards, Todd was also one of the few who did so while continuing to achieve recognition for his work in Flash. (Daniel Mall, who came later, is another.)

Finally, Todd was one of the first—along with 37signals and Coudal Partners—to abandon an enviably successful client services career in favor of full-time product development, inspiring a generation to do likewise, and helping bring us to our current world of web apps and startups.

A personal project that became an empire

In Todd’s case, the product was SlideShowPro, a project he designed for himself, which has grown to become the web’s most popular photo and video slideshow and gallery viewer. When you visit a photographer’s portfolio website, there’s an excellent chance that SlideShowPro powers its dynamic photo viewing experience. The same is true for the photo and video gallery features of many major newspaper and magazine sites, quite possibly including your favorites.

But deliberate lack of Flash support in the iPad and iPhone, while lauded here on February 1, 2010 as a win for accessible, standards-based design (“Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first”), presented a serious problem for developers who use SlideShowPro and readers who enjoy browsing dynamic photo and video galleries.

Mr Dominey has now solved that problem:

SlideShowPro Mobile is an entirely new media player built using HTML5 that doesn’t require the Flash Player plugin and can serve as a fallback for users accessing your web sites using these devices. But it’s not just any fallback — it’s specially designed for touch interfaces and smaller screen sizes. So it looks nothing like the SlideShowPro player and more like a native application that’s intuitive, easy to use, and just feels right.

The best part though is that because SlideShowPro Director (which will be required) publishes the mobile content, you’ll be able to provide the mobile alternative by simply updating the Flash Player embed code in your HTML documents. And just like when using the SlideShowPro player, because Director is behind the scenes, all your photos will be published for the target dimensions of these devices — which gives your users top quality, first generation images. The mobile player will automatically load whatever content is assigned to the Flash version, so the same content will be accessible to any browser accessing your web site.

A public beta will be released in the next weeks. Meanwhile, there is a video demo. There’s also an excellent Question and Answer page that answers questions you may have, whether you’re a SlideShow Pro customer or not. For instance:

Why mobile? Why not desktop?

We believe that (on the desktop) Flash is still the best delivery method for photo/video galleries and slideshows for it provides the most consistent user experience across all browsers and the broadest range of playback and customization options. As HTML5 support matures across all desktop browsers, we’ll continue to look into alternate presentation options.

Into the future!

37signals Acclaim Announcements Appearances Applications apps Authoring Best practices better-know-a-speaker business Chicago client services Code Coudal Partners Design ethics HTML Ideas industry interface Interviews Journalism at its Finest Press Products Publications Publishing Respect Ruby on Rails Small Business State of the Web The Big Web Show The Essentials The Profession User Experience

37signals’ Jason Fried live today on The Big Web Show

Post author By L. Jeffrey Zeldman
Post date 1 July 2010

I have known 37signals CEO Jason Fried since he was a young copywriter who reminded me of me, only smarter and more confident. Like many of you, with a mixture of awe and pleasure, I have watched him change our industry, along with book publishing and business generally. Dan Benjamin and I are delighted to announce the mercurial Mr Fried as our guest on The Big Web Show. Join us today, 1 July 2010, for the live taping at 1:00 PM ET.

Jason’s official bio is brief, but he can write at length when he wishes: see Rework, Getting Real, and Defensive Web Design, each a classic, and to each of which he was principal co-writer and guiding force. Besides saying no to meetings, contracts, and VC money, Jason and 37signals are famous for godfathering a speedy, iterative form of web application design; for gifting the industry with Ruby on Rails; for creating a suite of beloved (yes, really) business productivity web apps; for mastering and then abandoning client services in favor of making stuff; for somehow, in the midst of all that busyness, churning out tons of fine content on their popular blog; and for being roommates with the equally fantastic Coudal Partners.

Can’t wait to interview Jason Fried in front of a live internet audience today. Hope you’ll join us.

A Book Apart A List Apart Accessibility Best practices Blogs and Blogging books Design Ideas The Essentials Usability User Experience UX Web Design Web Design History Web Standards

Responsive design is the new black

Post author By L. Jeffrey Zeldman
Post date 23 June 2010
No Comments on Responsive design is the new black

The blog of Mr Simon Collison, retooled as responsive web design. The wide version.

The blog of Mr Simon Collison, retooled as responsive web design. The narrow version.

See more versions in Mr Collison’s “Media Query Layouts” set on Flickr.

Read the article that started it all. Coming soon as a book by Mr Ethan Marcotte from A Book Apart. (The current A Book Apart book, Mr Jeremy Keith’s HTML5 For Web Designers, ships Friday. Mr Ethan Marcotte will be our guest this Thursday, June 24, on The Big Web Show. Synchronicity. It’s not just an LP by The Police. Kids, ask your parents.)

The beauty of responsive web design becomes obvious when you see your site in smart phones, tablets, and widescreen desktop browsers. It’s as if your site was redesigned to perfectly fit that specific environment. And yet there is but one actual design—a somewhat plastic design, if you will. An extensible design, if you prefer. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. Powered by CSS media queries, it’s the resurrection of a Dao of Web Design and a spiffy new best practice. All the kids are doing it.

Well, anyway, some of the cool ones are. See also the newly retooled-per-responsive-design Journal by Mr Hicks. Hat tip: Mr Stocks. I obviously have some work to do on this site. And you may on yours.

Seen any good responsive redesigns lately?