Categories
art direction Best practices Blogs and Blogging Compatibility Content First content strategy Content-First creativity Design Ideas Layout Redesigns Site Optimization Standards State of the Web The Essentials The Profession Typekit Typography Usability User Experience UX Web Design Web Design History webfonts Websites webtype Zeldman zeldman.com

Web Design Manifesto 2012

THANK YOU for the screen shot. I was actually already aware that the type on my site is big. I designed it that way. And while I’m grateful for your kind desire to help me, I actually do know how the site looks in a browser with default settings on a desktop computer. I am fortunate enough to own a desktop computer. Moreover, I work in a design studio where we have several of them.

This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can. Before I got busy with one thing and another, I used to redesign this site practically every other week. Sometimes the designs experimented with pitifully low contrast. Other times the type was absurdly small. I experimented with the technology that’s used to create web layouts, and with various notions of web “page” design and content presentation. I’m still doing that, I just don’t get to do it as often.

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

A few people who hate this design have asked if I’ve heard of responsive web design. I have indeed. I was there when Ethan Marcotte invented it, I published his ground-breaking article (and, later, his book, which I read in draft half a dozen times and which I still turn to for reference and pleasure), and I’ve had the privilege of seeing Ethan lecture and lead workshops on the topic about 40 times over the past three years. We’ve incorporated responsive design in our studio’s practice, and I’ve talked about it myself on various stages in three countries. I’m even using elements of it in this design, although you’d have to view source and think hard to understand how, and I don’t feel like explaining that part yet.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.

If this were a client site, I wouldn’t push the boundaries this far. If this were a client site, I’d worry that maybe a third of the initial responses to the redesign were negative. Hell, let’s get real: if this were a client site, I wouldn’t have removed as much secondary functionality and I certainly wouldn’t have set the type this big. But this is my personal site. There are many like it, but this one is mine. And on this one, I get to try designs that are idea-driven and make statements. On this one, I get to flounder and occasionally flop. If this design turns out to be a hideous mistake, I’ll probably eventually realize that and change it. (It’s going to change eventually, anyway. This is the web. No design is for the ages, not even Douglas Bowman’s great Minima.)

But for right now, I don’t think this design is a mistake. I think it is a harbinger. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer.

Most of you reading this already know these things and already think about them each time you’re asked to create a new digital experience. But even our best clients can sometimes push back, and even our most thrilling projects typically contain some element of compromise. A personal site is where you don’t have to compromise. Even if you lose some readers. Even if some people hate what you’ve done. Even if others wonder why you aren’t doing what everyone else who knows what’s what is doing.

I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size. You don’t even have to use Typekit or its brothers to experiment with big type (awesome as those services are). In today’s monitors and operating systems, yesterday’s classic web fonts—the ones that come with most everyone’s computer—can look pretty danged gorgeous at large sizes. Try tired old Times New Roman. You might be surprised.

The present day designer refuses to die.


Categories
Apple Applications art direction Community iphone

Essential iPhone Photo Apps

“EVER SINCE the iPhone 3GS, the iPhone has become my primary camera. Aside from its terrific image quality, it’s the abundance of photo apps that make it shine. I get asked a lot about what apps I use, which are good, etc. Here’s my list.”—Jim Barraud

Essential iPhone Photography Apps

Categories
Acclaim Appearances art direction Design Publishing SXSW zeldman.com

Jeffrey Zeldman’s Awesome Internet Design Panel at SXSW

WE KICKED OFF WITH a discussion on web platforms, perhaps the most widely-changing aspect of the web in the past 18 months. Zeldman began with a story about his efforts to check in to his upcoming flight to SXSW from a taxi cab in New York. He entered his details into his airline’s mobile app and clicked the ‘log in’ button, only to be taken to their desktop website which required Flash to log in, which inevitably, his iPhone didn’t support. How did this kind of user experience failure occur? …

“Moving on, the panel began to discuss publishing. The advent of plugins like Readability and a new product Roger Black is working on called TreeSaver allow readers to specify how they want to see content, and the advent of web standards means that content is generally separated from presentation, to the benefit of the reader. Zeldman made the point that the entire platform is for content, which makes it odd when some products are designed with the content being the last thing in mind.”

“The paywall quickly came up and the overwhelming ethos from the panel was “if you have exclusive great stuff, people will pay for it”. Dan Mall suggested that traditional publishers didn’t understand alternative modes of publishing and were attempting to price them at the same rate as their paper-and-ink versions. Mandy Brown joked that many publishers saw the iPad as their saviour, just like they did with the CD-ROM back in the 90s. She also made the point that despite its web-savvy audience, the A Book Apart project’s sales were 75% print. …

Jeffrey Zeldman’s Awesome Internet Design Panel (13/03 @ 5PM)


Paul MacInnes is the editor of the Guardian Guide and Matt Andrews is a client side web developer at the Guardian. Full coverage of SXSW 2011 at guardian.co.uk/sxsw

Categories
"Digital Curation" Advocacy Appearances art direction Authoring Best practices business Community conferences content content strategy Design development editorial Education engagement Ideas Micropublishing Molehill Platforms Publications Publishing Responsibility Standards State of the Web The Essentials The Profession Usability User Experience UX Web Design Zeldman

You are all in publishing!

ON SUNDAY, while leading a discussion on the future of web design and publishing, I noticed a slightly confused look appearing on some faces in the audience. The discussion had been billed as “Jeffrey Zeldman’s Awesome Internet Design Panel,” and I thought perhaps there was a disconnect for some in the audience between “design” and such topics as where content comes from and who pays for it.

So I asked, “Who here is in publishing?”

A few hands were gently raised.

Uh-huh. “And how many of you work on the web?”

Every right hand in the room shot up.

“You are all in publishing,” I explained.

Now, I like a good rounded corner talk as much as the next designer. I’ve given my share of them. Also of line height and measure, color and contrast, how to design things that don’t work in old versions of Internet Explorer, and so on. In the practice of web and interaction design, there will always be a place for craft discussions—for craft is execution, and ideas without execution are songs without music, meaningless.

But right now (and always) there is a need for design to also be about the big strategic issues. And right now, as much as design is wrestling with open vs. proprietary formats and the old challenges of new devices, design is also very much in the service of applications and publishing. Who gets content, who pays for it, how it is distributed (and how evenly), the balance between broadcast and conversation, editor and user—these are the issues of this moment, and it is designers even more than editors who will answer these riddles.

Categories
Applications apps architecture art direction Authoring Best practices Brands business Community content Damned Fine Journalism Design Designers development Happy Cog™ Journalism at its Finest Microblogging Platforms State of the Web The Big Web Show

Episode 39: Crowd Fusion’s Brian Alvey live on The Big Web Show

Brian Alvey

BRIAN ALVEY (home, Twitter) is our guest on The Big Web Show Episode 39, recording live Thursday, February 16, at 12:00 PM Eastern at 5by5.tv/live.

Brian is CEO of Crowd Fusion, a publishing platform that combines popular applications like blogging, wikis, tagging and workflow management, and a leader in the content management world. He co-founded Weblogs, Inc.—home to Engadget, Autoblog, TUAW and more—and built the Blogsmith platform, both of which were acquired by Aol and are essential to their current strategy. Brian has been putting big brands on the web since 1995 when he designed the first TV Guide website and helped BusinessWeek leap from Aol to the web.

Brian built database-driven web applications and content management systems for many large companies in the 1990’s including Intel, J.D. Edwards, Deloitte & Touche and The McGraw-Hill Companies. His 1999 Tech-Engine site was a “skinnable HotJobs” which powered over 200 online career centers including XML.com, Perl.com, O’Reilly & Associates Network, DevShed, and Computer User magazine.

He has been the art director of three print magazines (I met him in 1995 when he was art director for “Net Surfer” or something like that) and was the Chief Technology Officer of Rising Tide Studios where he developed The Venture Reporter Network, which is now a Dow Jones property.

In 2003, Brian invented and launched Blogstakes, a sweepstakes application for the blogging community. He is a former Happy Cog partner of mine; at Happy Cog, Brian built content management systems for customers including Capgemini, A List Apart, and the Kansas City Chiefs. He was also the creator and host of the Meet The Makers conference, a series of talk show-style events that were so compelling, they helped inspired me to create An Event Apart with Eric Meyer.

And I’ll stop there. Ladies and gentlemen, a legend and true creative force in this medium. Please join us at tomorrow on 5by5.tv/live for a lively and wide-ranging discussion.

The Big Web Show (“Everything Web That Matters”) records live every Thursday at 12:00 PM Eastern. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

The Big Web Show #39: Brian Alvey.

Categories
art direction Authoring Best practices business CSS Design Platforms Publications Publishing Responsibility Startups State of the Web The Essentials Told you so

Readability 2.0 is disruptive two ways

RELEASED LAST WEEK, Arc90’s Readability 2.0 is a web application/browser extension that removes clutter from any web page, replacing the typical multi-column layout with a simple, elegant, book-style page view—a page view that can be user customized, and that “knows” when it is being viewed on a mobile device and reconfigures itself to create an platform-appropriate reading experience.

In so doing, Readability focuses the user’s attention on the content, creating an enhanced—and often much more accessible—reading experience. It also subverts the typical web browsing design paradigm, where each website offers a different visual experience. Instead, to the Readability user, all web content looks the same, once she has clicked a button to engage the Readability view.

If Readability did only this, it would represent a significant directional departure for the web and for site owners, in that, for the first time in the history of designed websites, branded look and feel is subordinated to a user-focused content experience that transcends the individual site.

Of course, this was always supposed to be possible in HTML, and it always was possible for users of some assistive devices and for CSS experts who felt like creating intricate personal style sheets, but those are edge cases, and Readability is for everyone.

Readability 1.0 was released as open source. Apple used its code for the “Reader” view in Safari. The creators of Flipboard used its code too. And the creators of the open-source Treesaver swapped code and rights with the makers of Readability to enhance both products. I’ve never seen a humble open-source project, created by a not-terribly-well-known shop get so quickly accepted and absorbed by companies like Apple and by the creators of cutting-edge web and hybrid apps.

That was Readability 1.0. What Readability 2.0 adds to the mix is automatic payment for content creators. How it works is simple: I pay a small fee each month to use Readability. Most of that money gets divided between the creators of the web pages I’ve viewed in Readability. This makes Readability 2.0 disruptive two ways:

  1. As mentioned earlier, for the first time, branded look and feel is secondary to the user’s desire to engage with written content in a visually comfortable environment. (That Readability 1.0 premiered around the same time as the iPad is not coincidental.)
  2. For the first time, content monetization is no longer the problem of content creators. Writers can stop being salespeople, and focus on what they do best: creating compelling content. The better the content, the more people who engage with it via Readability, the more money writers will make—with no bookkeeping, no ad sales, and no hassle. This is a huge subversion of the ad paradigm.

Many of us who watched Arc90 develop Readability worried that short-sighted publishers and site owners would misunderstand and reject the app, maybe even sic’ing their lawyers on it. But in the hectic two weeks just ending, publishers have had time to absorb what Readability 2.0 does and what it could mean to them—and according to Readability creator and Arc90 founder Rich Ziade, the reaction is positive.

Have publishers suddenly grasped the web? Perhaps not. But it’s a rare publisher who’d say no to extra money, risk-free. We are in a wait-and-see, try-it-and-see phase of publishing and the web—past the initial Web 2.0 euphoria and into the hard business of creating great stuff (and finding new ways to keep old great stuff, like great writing and reporting, alive). No one is quite sure what will work. And publishers risk nothing by participating in the Readability program. If the program succeeds, they make additional revenue for their content. If it fails, it’s no skin off their budget.

I’ve interviewed Rich Ziade on The Big Web Show and I’m an advisor on the project but it was only last night, when Rich was addressing my MFA Interaction Design class at School of Visual Arts, that I realized for the first time how profoundly disruptive—and powerful—Readability 2.0 really is. (Video of that class session is available.)

If you love reading and the web, I urge you to give Readability 2.0 a try.

Categories
A Book Apart A List Apart Adobe An Event Apart Apple architecture art direction Authoring Best practices Big Web Show client services Code content content strategy creativity CSS CSS3 Dan Benjamin Design DWWS E-Books editorial Education eric meyer Fonts Formats Free Advice Happy Cog™ Haters industry Information architecture interface ipad iphone IXD javascript links maturity New Riders peachpit Publications Publishing Real type on the web Respect Responsibility Responsive Web Design Standards State of the Web tbws The Big Web Show The Essentials The Profession This never happens to Gruber Typekit Typography Usability User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Websites webtype work Working writing Zeldman zeldman.com

2010: The Year in Web Standards

WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.

It was the third year in a row that everyone was talking about content strategy and designers refused to “just comp something up” without first conducting research and developing a user experience strategy.

CSS3 media queries plus fluid grids and flexible images gave birth to responsive web design (thanks, Beep!). Internet Explorer 9 (that’s right, the browser by Microsoft we’ve spent years grousing about) kicked ass on web standards, inspiring a 10K Apart contest that celebrated what designers and developers could achieve with just 10K of standards-compliant HTML, CSS, and JavaScript. IE9 also kicked ass on type rendering, stimulating debates as to which platform offers the best reading experience for the first time since Macintosh System 7.

Even outside the newest, best browsers, things were better than ever. Modernizr and eCSStender brought advanced selectors and @font-face to archaic browsers (not to mention HTML5 and SVG, in the case of Modernizr). Tim Murtaugh and Mike Pick’s HTML5 Reset and Paul Irish’s HTML5 Boilerplate gave us clean starting points for HTML5- and CSS3-powered sites.

Web fonts were everywhere—from the W3C to small personal and large commercial websites—thanks to pioneering syntax constructions by Paul Irish and Richard Fink, fine open-source products like the Font Squirrel @Font-Face Generator, open-source liberal font licensing like FontSpring’s, and terrific service platforms led by Typekit and including Fontdeck, Webtype, Typotheque, and Kernest.

Print continued its move to networked screens. iPhone found a worthy adversary in Android. Webkit was ubiquitous.

Insights into the new spirit of web design, from a wide variety of extremely smart people, can be seen and heard on The Big Web Show, which Dan Benjamin and I started this year (and which won Video Podcast of the Year in the 2010 .net Awards), on Dan’s other shows on the 5by5 network, on the Workers of the Web podcast by Alan Houser and Eric Anderson, and of course in A List Apart for people who make websites.

Zeldman.com: The Year in Review

A few things I wrote here at zeldman.com this year (some related to web standards and design, some not) may be worth reviewing:

iPad as the New Flash 17 October 2010
Masturbatory novelty is not a business strategy.
Flash, iPad, and Standards 1 February 2010
Lack of Flash in the iPad (and before that, in the iPhone) is 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.
An InDesign for HTML and CSS? 5 July 2010
while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The assumption that a such thing is possible suggests a lack of understanding.
Stop Chasing Followers 21 April 2010
The web is not a game of “eyeballs.” Never has been, never will be. Influence matters, numbers don’t.
Crowdsourcing Dickens 23 March 2010
Like it says.
My Love/Hate Affair with Typekit 22 March 2010
Like it says.
You Cannot Copyright A Tweet 25 February 2010
Like it says.
Free Advice: Show Up Early 5 February 2010
Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.

Outside Reading

A few things I wrote elsewhere might repay your interest as well:

The Future of Web Standards 26 September, for .net Magazine
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 new web?
Style vs. Design written in 1999 and slightly revised in 2005, for Adobe
When Style is a fetish, sites confuse visitors, hurting users and the companies that paid for the sites. When designers don’t start by asking who will use the site, and what they will use it for, we get meaningless eye candy that gives beauty a bad name.

Happy New Year, all!

Categories
"Digital Curation" Apple Applications apps architecture art direction ipad

Flipboard Update Preview

Jeffrey Zeldman Presents, viewed in Flipboard; screenshot by Craig Mod

FLIPBOARD, AS YOU DOUBTLESS know, is a social media magazine for iPad. Part RSS reader, part iPad publication uniquely curated by each reader, the app brings serendipity, discovery, and typographic excellence to the experience of keeping up with one’s friends on Twitter, Facebook, and so on. This morning (last night in Japan), a new, improved version of Flipboard was launched, offering designers like us even more visual pleasure and rewarding the hours we put into our content’s semantic underpinnings.

Designer Craig Mod, in a letter, told me his “goal was to try and produce one of the best RSS experiences out there.” It’s accomplished via features like those listed below and more, as seen in these screenshots Craig sent me from his pre-launch tests:

  • auto-small caps
  • portrait and landscape optimized typography
  • full bleed images
  • flowing of text based on image size and location in the document
  • auto-generation of [figure] and [figcaption] objects based on alt
    text on images

Adds Craig, “What’s great is that the more semantic and clean your feed, the better it will look in the app.”

Download Flipboard or update your copy in the iTunes Store and see.

Jeffrey Zeldman Presents, viewed in Flipboard; screenshot by Craig Mod

Categories
art direction Blogs and Blogging Brands

Dr. Seuss does Star Wars

Enjoy!

Hat tip: Erika Hall

Categories
art art direction Design experience glamorous The Essentials work writing Zeldman

Pixy Stix | Jason Santa Maria

I wrote a true story of  love, obsession, heartbreak, and candy and my friend Jason Santa Maria art directed it. I’m proud of this tiny, fast-reading story, which is like condensed essence of me (and all these years later, nothing has really changed) and I love what Jason’s done with the page. Please enjoy Pixy Stix, the October 19th Candygram.

Categories
Accessibility Adobe Advocacy Apple Applications apps architecture art direction Authoring Best practices business development E-Books editorial Flash Formats Free Advice glamorous HTML HTML5 industry ipad iphone Publications Publishing Responsibility Standards State of the Web The Essentials W3C Web Design Web Design History Web Standards

iPad as the new Flash


Jeffrey Zeldman Presents

iPad. Never have so many embraced a great product for exactly the wrong reasons.

Too many designers and publishers see the iPad as an opportunity to do all the wrong things—things they once did in Flash—without the taint of Flash.

In the minds of many, the iPad is like Flash that pays. You can cram traditional publishing content into an overwrought, novelty Flash interface as The New York Times once did with its T magazine. You may win a design award but nobody will pay you for that content. Ah, but do the same thing on the iPad instead, and subscribers will pay—maybe not enough to save publishing, but enough to keep the content coming and at least some journalists, editors, and art directors employed.

It’s hard to argue with money and jobs, and I wouldn’t dream of doing so.

Alas, the early success of a few publications—publications so good they would doubtless survive with or without iPad—is creating a stampede that will not help most magazines and interfaces that will not please most readers.

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

Luke Wroblewski’s Touch Gesture Reference Guide gives designers plenty of ammunition to create dynamic user experiences that work on a wide variety of mobile phones and devices (including iPad) while these same sites can use traditional desktop browser effects like hover to offer equally rich experiences on non-touch-enabled browsers. Unless your organization’s business model includes turning a profit by hiring redundant, competing teams, “Write once, publish everywhere” makes more economic sense than “Write once, publish to iPad. Write again, publish to Kindle. Write again, publish to some other device.”

I’m not against the iPad. I love my iPad. It’s great for storing and reading books, for browsing websites, for listening to music and watching films, for editing texts, presentations, and spreadsheets, for displaying family photos, and on and on. It’s nearly all the stuff I love about my Mac plus a great ePub reader slipped into a little glass notebook I play like a Theremin.

I’m not against iPad apps. Twitterific for iPad is by far the best way to use Twitter. After all, Twitter is really an internet service, not a website; Twitter’s own site, while leaps ahead of where it used to be, is hardly the most useful or delightful way to access its service. Gowalla for iPad is my constant companion. I dread the idea of traveling without it. And there are plenty of other great iPad apps I love, from Bloom, an “endless music machine” by Brian Eno and Peter Chilvers, to Articles, which turns Wikipedia into an elegant reading experience, to Mellotronics for iPad, an uncannily accurate Mellotron simulator packed with 13 authentic voices—“the same production tapes featured on Strawberry Fields Forever” and other classic tracks (not to mention tracks by nouveau retro bands like Eels).

There are apps that need to be apps, demand to be apps, and I admire and learn from them like every other designer who’s alive at this moment.

I’m just not sold on what the magazines are doing. Masturbatory novelty is not a business strategy.

Categories
art direction arts Design film

Making of a Star Wars classic

Making of a Star Wars classic.

On Set: Empire Strikes Back | Vanity Fair.

Categories
Applications apps art direction Authoring CSS Design Web Design Web Design History Websites

960 Pixel Grids Made Easy

Listen up, web designers. From Stuntbox with love comes Gridulator, a dandy free web application that calculates multi-column grids for all your pixel-based web layout needs. Creator David Sleight explains how it works:

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based designfolk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you, ready for use in your CSS, Photoshop docs, or what have you. And there’s full keyboard control for you snazzy power users.

More:

Thanks, Stuntbox!

Categories
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

Zeldman.com as seen on 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.

Categories
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

Roger Black

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.