THE FIRST THING I got about the web was its ability to empower the maker. The year was 1995, and I was tinkering at my first website. The medium was raw and ugly, like a forceps baby; yet even in its blind, howling state, it made me a writer, a designer, and a publisher — ambitions which had eluded me during more than a decade of underachieving desert wanderings.

I say “it made me” but I made it, too. You get the power by using it. Nobody confers it on you.

I also got that the power was not for me alone: it was conferred in equal measure on everyone with whom I worked, although not everyone would have the time or desire to use the power fully.

The luckiest makers

Empowerment and desire. It takes extraordinary commitment, luck, and talent to become a maker in, say, music or film, because the production and distribution costs and risks in these fields almost always demand rich outside investors and tightly controlling corporate structures. (Film has held up better than music under these conditions.)

Music and film fill my life, and, from afar, I love many artists involved in these enterprises. But they are mostly closed to you and me, where the web is wide open, and always has been. We all know gifted, hard working musicians who deserve wide acclaim but do not receive it, even after decades of toil. The web is far kinder to makers.

To care is to share

Not only does the web make publishers of those willing to put in the work, it also makes most of us free sharers of our hard-won trade, craft, and business secrets. The minute we grab hold of a new angle on design, interaction, code, or content, we share it with a friend — or with friends we haven’t met yet. This sharing started in news groups and message boards, and flowered on what came to be called blogs, but it can also slip the bounds of its containing medium, empowering makers to create books, meet-ups, magazines, conferences, products, you name it. It is tough to break into traditional book publishing the normal way but comparatively easy to do it from the web, provided you have put in the early work of community building.

The beauty is that the community building doesn’t feel like work; it feels like goofing off with your friends (because, mostly, it is). You don’t have to turn your readers into customers. Indeed, if you feel like you’re turning your readers into customers, you’re doing it wrong.

If you see a chance, take it

The corollary to all this empowerment is that it’s up to each of us to do something positive with it. I sometimes become impatient when members of our community spend their energy publicly lamenting that a website about cats isn’t about dogs. Their energy would be so much better spent starting bow-wow.com. The feeling that something is missing from a beloved online resource (or conference, or product) can be a wonderful motivator to start your own. I created A List Apart because I felt that webmonkey.com wasn’t enough about design and highfive.com was too much about it. If this porridge is too hot and that porridge is too cold, I better make some fresh, eh?

I apologize if I sometimes seem snippy with whiners. My goal is never to make anyone feel bad, especially not anyone in this community. My message to my peers since the days of “Ask Dr Web” has always been: “you can do this! Go do it.” That is still what I say to you all.

I’VE TWEAKED the layout here with ITC Franklin Condensed from Webtype.

It’s funny. My daughter always asks what’s my favorite color, and I can never answer, ’cause I love them all. With color, it depends on context and it’s all about combination. But a favorite font? You bet I’ve got one. It’s Franklin Gothic, and especially Franklin Gothic Condensed. Has been for years.

For several years now I’ve used a licensed Franklin Gothic web font by someone other than Webtype here. It was good but not perfect.

Webtype’s Franklin Condensed is as close to perfect as web fonts can come in October, 2011. (And as they improve it, the look and feel here will improve as well.) The font is so good that it emboldened me to apply it to other parts of the page that formerly had to make do with Helvetica. See, for instance, my footer. It’s not a work of art, but it’s now much more pleasant to read in every environment I’ve tested.

I’m still conservative about web fonts (primarily because of bandwidth issues); this site’s body text is still set in Georgia, one of the world’s most beautiful screen fonts as we all agree. This morning, simply to break away from the herd, I tried replacing Georgia with Palatino, an engaging, readable, widely available font that comes with Windows 2000/XP (“Palatino Linotype”) and the Macintosh (“Palatino”). On its own, the Palatino was lovely. But it couldn’t stand up to the heavier elements of this site’s somewhat cartoonish look and feel. So back to Georgia I went.

The site is overdue for a redesign: the last redesign (e.g. the current look and feel) was a retro tribute to the site’s 1990s look. A new look is coming, but for the interim, I’m grateful to my friends at Webtype for their craftsmanship.

FROM 1996 TO 1999, I interviewed movie stars and web designers. Between 1998 and 1999, I published my favorite interviews in this little site. Then I stopped.

Here it is, just as it was — frames, buttons, cheesy JavaScript effects and all: The 15 Minutes Project.

Here is a reflection written when the site turned 13.

And here, from 2007, is a mini-retrospective of The Daily Report beginning with 31 August 1997 (entries from 1995–1996 are gone due to overwriting), and continuing through years of constant writing and strange design such as daily/0303a.shtml, daily/0103a.shtml, and daily/0902b.html. (Of course to really see these pages as the world saw them then, you’d need a non-antialiased operating system, a non-standards-compliant browser, and a dingy TV tube monitor. But I digress.)

More of this site’s juicy Web 1.0 goodness may be unearthed here.

If you like, you can also peruse a small gallery of my article header images from the early days of A List Apart Magazine.

Here’s to plenty more years ahead, inventing the web and modern design together.

“Mobile is huge. The iPhone, iPad, and Android are huge. On the one hand, they are standards-facing, because they all support HTML5 and CSS3, so you can create great mobile experiences using web standards. You can create apps using web standards. On the other hand, there is also the temptation to go a proprietary route. In a strange way, although the browsers are much more standards compliant, it seems like we are redoing the browser war. Only now, it’s not the browser wars, it’s platform wars.”

Video interview, plus transcript: Interview with Jeffrey Zeldman on the State of Web Design. Thank you, Michael Slater.

“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

The Zeldman badge. Ladies.

And on Gowalla.

HEY, YOU WITH THE STARS in your eyes. Yes, you, the all too necessary SXSW Interactive attendee. Got questions about the present and future of web design and publishing for me or the illustrious panelists on Jeffrey Zeldman’s Awesome Internet Design Panel at SXSW Interactive 2011? You do? Bravo! Post them on Twitter using hashtag #jzsxsw and we’ll answer the good ones at 5:00 PM in Big Ballroom D of the Austin Convention Center.

Topics include platform wars (native, web, and hybrid, or welcome back to 1999), web fonts, mobile is the new widescreen, how to succeed in the new publishing, responsive design, HTML5, Flash, East Coast West Coast beefs, whatever happened to…?, and many, many more.

Comments are off here so you’ll post your questions on Twitter.

The panel will be live sketched and live recorded for later partial or full broadcast via sxsw.com. In-person attendees, arrive early for best seats. Don’t eat the brown acid.

Designing Brand Identity—cover detail. Hat tip: Toke. Comment?

LONG BEFORE FLICKR “invented” the banterish copy platform, uncannily optimized for mobile devices a decade before they existed, coming at you from out of the past, it’s the 11 February 1998 edition of Jeffrey Zeldman Presents.

Hat tip: Monsieur Charles Roper.

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!

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.

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.

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.