Categories
Accessibility Adobe Advocacy AIGA art direction Authoring Bandwidth Best practices Browsers business Career client management Community creativity CSS Design Designers development Digital Preservation Fonts Future-Friendly HTML industry interface maturity Medium My Back Pages Off My Lawn! Performance Photoshop Rants Real type on the web Responsibility Responsive Web Design Site Optimization Standards State of the Web The Essentials The Profession Typography Usability User Experience UX Web Design Web Design History Web Standards Websites webtype work Working writing

This Web of Ours, Revisited

ONE MONTH and 24 years ago, in “Where Have All the Designers Gone?” (my HTMHell design column for Adobe of March 20, 2000), I discussed the deepening rift between aesthetically focused web designers and those primarily concerned with creating good experiences online:

More and more web designers seem less and less interested in web design.

Over the past 18 months or so, many of the best practitioners in the industry seem to have given up on the notion that a low-bandwidth, less than cutting-edge site is worth making. Much of the stuff they’ve been making instead has been beautiful and inspiring. But if top designers wash their hands of the rest of the Web, whose hands will build it, and whose minds will guide it? The possibilities are frightening.

An Imperfect Medium for Perfectionists

Why were many of the leading graphic designers and studios at the time uninterested in web design? For one thing, designers trained to strive for visual perfection found the web’s unpredictability depressing. The article provided clues to the frustrations of the time:

Good designers spend hours tweaking typography in Illustrator and Photoshop. Then visitors with slow connections turn off images.

Of course, where professionals trained in graphic design saw a distressing lack of control, others glimpsed in the infant technology a tremendous potential to help people, pixel-perfection be damned. To reduce the conflict to a cartoon, you might characterize it as David Carson versus Jakob Nielsen—though doing so would trivialize the concerns of both men. Designers already charged with creating websites found themselves somewhere in the middle—barking themselves hoarse reminding clients and managers that pixel-perfect rendering was not a thing on the web, while arguing with developers who told designers the exact same thing.

Visually inspiring websites like K10k showed that the web could, if approached carefully and joyfully, provide aesthetic delight. But many designers (along with organizations like AIGA) were unaware of those sites at the time.

Us and Them

Another source of tension in the medium in 2000 sprang from the discrepancy between the privileged access designers enjoyed—fast connections, up-to-date browsers and operating systems, high-res monitors (at least for the time) offering thousands of colors—versus the slow modems, aging and underpowered computers, outdated browsers, and limited-color monitors through which most people at the time experienced the web.

Which was the real design? The widescreen, multicolor, grid-based experience? Or the 216-color job with pixelated Windows type, a shallow “fold,” and pictures of headline text that took forever to be seen?

To view your masterpiece the way most users experienced it, and at the syrup-slow speed with which they experienced it, was to have an awakening or a nightmare—depending on your empathy quotient. Some designers began to take usability, accessibility, and performance seriously as part of their jobs; others fled for the predictability of more settled media (such as print).

A New (Old) Hope

My March, 2000 article ended on an upbeat note—and a gentle call to action:

For content sites to attain the credibility and usefulness of print magazines; for entertainment sites to truly entertain; for commerce sites and Web-based applications to function aesthetically as well as technically, the gifts of talented people are needed. We hope to see you among them.

That was my hope in 2000, and, all these years later, it remains my vision for this web of ours. For though the browsers, connections, and hardware have changed substantially over the past 24 years, and though the medium and its practitioners have, to a significant extent, grown the Hell up, beneath the surface, in 2024, many of these same attitudes and conflicts persist. We can do better.

Minus the framesets that formerly contained it, you may read the original text (complete with archaic instructions about 4.0 browsers and JavaScript that broke my heart, but which Adobe’s editors and producers insisted on posting) courtesy of the Wayback Machine.

☞  Hat tip to Andrey Taritsyn for digging up the article, which I had long forgotten.

Categories
"Found Objects" Acclaim Adobe Apple Applications apps art direction Authoring content copyright creativity Culture democracy Design Free Advice Ideas Nonsense social media stealing theft type Typography

Just add water.

Quick, before everyone else thinks of it. Set the word “SUCCESSION” in Engravers Gothic and export it to a transparent PNG. Download photos of confederate general Mitch McConnell and Republican Johns Thune (R-S.D.), Cornyn (R-Texas), and Barrasso (R-Wyo.). Grab and burn Nicholas Britell’s main title theme from Succession. Import all files into Final Cut Pro or Adobe After Effects. Add dissolves, fades, and film scratch overlays. Export. Upload to YouTube or Vimeo. Embed and amplify via all 500 social media networks. Sit back, relax, and bask in your 15 seconds of glory.

“Succession” is copyright HBO. Mitch McConnell is a wholly owned subsidiary of the NRA.

Categories
Adobe Design Platforms software The Profession Web Design Web Design History Zeldman zeldman.com

Save “Save For Web”

TWENTY years or so ago, Adobe Photoshop was, as its name suggests, primarily a tool for professional commercial photographers. Strange though it may seem for a company that now sells its software via a “Cloud” subscription service, the web was not at all on Adobe’s radar in those days. “Save For Web” was not even a widely held concept, let alone a Photoshop menu option.

This vacuum created an opportunity for independent developers and designers. Which is how the very talented Craig Hockenberry of Iconfactory and I came to release Furbo Filters, an indie shareware product that let designers prepare images for the web. It did a few other things as well, such as offering garish, psychedelic treatments you could apply to any image—not unlike the far more expensive (and also far, far more developed) Kai’s Power Tools. (And you know what they say: if you’re old enough to remember Kai’s Power Tools, there’s a Drop Shadow in your closet. But I digress.) Some of you may have used DeBabelizer to manage your web color palettes in those days when Adobe and Photoshop ignored the web. Some may even have used Furbo Filters.

Then Adobe created a “Save For Web” option (in Photoshop 5.5), and Furbo Filters’s beautiful market was gone in a moment. All that remains as a memento of that time and that product is the domain name furbo.org, which is where Craig keeps his blog.

I was reminded of this during a workplace discussion about the seeming disappearance of “Save For Web” from modern Photoshop.

To be clear, “Save For Web” still exists in Photoshop CC 2015. But it has been rather awkwardly deprecated, as revealed through both UX (“Save For Web” no longer appears in the part of the interface where we’ve been trained to look for it for the past twenty years) and language: when we stumble onto “Save For Web” hiding under Export, after not finding it where we expect it, we’re presented with the words “Save For Web (Legacy),” clearly indicating that the feature is no longer a recommended part of today’s workflow.

Adobe explains: “Because Save for Web is built on the former ImageReady product (now discontinued), the code is too antiquated to maintain and develop new features.” (If Furbo Filters and DeBabelizer didn’t resurrect dead brain cells for some of you, I bet “ImageReady” did. Remember that one? Also, how scary is it for me that half the tools I’ve used in my career only exist today as Wikipedia entries?)

Instead of Save For Web, we’re to use Export: Export As…, which Adobe has built on its Generator platform. Stephen Nielson, writing on Jeff Tranberry’s blog for Adobe, explains:

Adobe Generator is a new, modern, and more efficient platform for exporting image assets from Photoshop. We have been building new capabilities on top of this platform for the past two years, including the new Export As and Device Preview features. The Generator platform allows us to build new, streamlined workflows and incorporate more efficient compression algorithms like PNGQuant into Photoshop.

The new Export As workflows are a complete redesign of how you export assets out of Photoshop. Export As has new capabilities like adding padding to an image and exporting shapes and paths to SVG. We also introduced the Quick Export option, which allows you to export an entire document or selected layers very quickly with no dialog.

Going forward, we will no longer develop new features in Save for Web, which is why it now is labeled as “Legacy”. Don’t worry; no features have been removed from it and we know there are critical workflows that still require Save for Web. However, Save for Web does not support, for example, new Artboard documents.

—Jeff Tranberry’s Digital Imaging Crawlspace, “Save for Web in Photoshop CC 2015

While I believe the Export As function is built on newer code, and I get that Adobe is committed to it, after months of use, I still spend a tremendous amount of time searching for Save For Web whenever I use Photoshop. And when I make myself use Export As, I still don’t feel that I’m getting the speed, power, and options I loved and came to depend on in Save For Web. This is a subjective reaction, of course, and “users hate change” is not a truth to which designers are immune—but I’ve yet to meet a designer who prefers the new tool and doesn’t feel confused, frustrated, and bummed out about the switch.

What I’m saying is, Craig, let’s talk.

Categories
Adobe Multi-Device software

Cloudy With A Chance of Blueballs

I RECENTLY SHARED a positive view of what’s happening at Adobe. I’m still a huge fan of the company’s image editing software, and I remain optimistic about their new direction. But I’m unhappy about the two-device limitation Adobe Cloud places on software.

While the company is more liberal than it used to be (e.g. a license to use Adobe software on the Mac is also a license to use it in Windows, and vice-versa), the Cloud’s refusal to let me use software I’ve purchased from Adobe on more than two devices feels like a relic of the past. It’s a restriction that might have made sense for print designers working in corporations in the 1990s, but it is out of touch with the reality of remote and freelance workers designing digital sites and applications for a multi-device world.

I have an office iMac, a home iMac, a home laptop, and an office laptop. I use all of them for my work. My set-up is not unique. Everyone I know who works in this industry has something similar going on.

Apple gets this reality but Adobe does not. For instance, my copy of Lightroom 4, which I bought via the App Store, works everywhere. Not so Lightroom 5, which I purchased (rented? licensed?) as part of my annual Cloud subscription. As a paying Adobe Cloud customer and a photography and Lightroom fanatic, I should be chomping at the bit to upgrade to Lightroom 5. But I see no point in doing so if I’m only going to be able to use Lightroom on two machines.

You might ask why this is is a problem. Here are three times I use Lightroom: to edit business, family, and vacation photos on my laptop while traveling; to edit business photos on the computer in my design studio; and to edit family and travel photos on the computer in my home. Adobe Cloud will let me use Lightroom 5 in two of these situations, but not all three. That makes it useless to me. Lightroom 4, which I bought in the App Store, has no such restrictions. I can use it on as many machines as I own. (To be fair, Apple can easily afford to be liberal with software licensing, because it makes its money on the hardware I buy. Adobe does not. I get that, but understanding doesn’t solve my problem.)

Likewise, I need to use Photoshop when I’m traveling on business (laptop), when I’m working in my design studio, and when I’m burning the midnight oil at home. Adobe will only let me use the product in two of these contexts. Stymied, I use an older, non-cloud version of Photoshop on one or more machines—and when I do that, I run into compatibility problems.

Although I love Photoshop and have used it professionally for nearly two decades, I can’t help noticing that Pixelmator does pretty much everything I need Photoshop to do, costs a fraction of the price (US $29.99), and can be downloaded onto an unlimited number of computers I own.

Why should Adobe care? Because the current restriction is not sustainable for them. The frustrations the restriction creates for me every day actively encourage me to stick with Lightroom 4 and abandon Photoshop for a much more affordable competitor. In short, the one thing that’s uncool about the Cloud is actively unselling all the Cloud’s benefits. And that can hardly be in Adobe’s long-term interest.

What can Adobe do about it? Well, the company could offer a “pro” or “gold” version of Cloud service that removes the two-device restriction. If the difference in price is reasonable, I’d happily sign up. Even better, from a public relations as well as a love-your-neighbor point of view, would be if Adobe simply removed the restriction at no additional cost. Or set the restriction higher, allowing you to register Cloud software on up to five devices you own.

Whatever they do, they should do it soon. We want to keep working with Adobe software, but Adobe needs to work with us, too.

Categories
Adobe business State of the Web Typekit

Adobe Love

I CAME to AdobeMAX in Los Angeles to give a talk to a room full of designers. Before arriving, I thought of Adobe as a historically important 20th century company that was slowly leaking relevance—a company web designers in the era of responsive design have begun to think of with a combination of fondness and embarrassment, like a beloved but somewhat shameful old uncle.

I came to LA with those perceptions, but I leave with the impression of an exciting 21st century company in emergence.

Realistic products for a magical age

The products I saw were both amazing and realistic. It was amazing to see a responsive design prototyping application that works independently and inside Photoshop, created by passionate people who actually work in our field and who consulted with Ethan Marcotte, for Pete’s sake.

That was the amazing part, but the equally important realistic part was that nobody was pretending this tool would be used to deliver final code on your website. It was not a responsive Dreamweaver I saw, but a prototyping tool, to help designers figure out how their responsive design should work (and maybe show the prototype to a boss or client for approval). Just prototyping. Nobody pretending they had a product that would make the difficult craft of front-end design redundant. No such intention behind the product. A product for the real work-flow of 21st century design teams. No marketing puffery, no inflated claims to set designers’ teeth on edge.

We are now them

More than that. Every Adobe employee I saw seemed to be excited, happy, and on-board with the mission. I see that kind of energy at good startups and small studios. I never see it in big corporations. It sometimes seemed to me that Adobe hadn’t so much acquired Typekit as the reverse: that the people and thinking behind Typekit are now running Adobe (which is actually true), and that the mindset of some of the smartest consultants and designers in our industry is now driving a huge corporation.

I never expected to see that in my lifetime, and to me, it is even more impressive than the amazingness and realism of the new product line or the transformation of the company from a shrink-wrapped product manufacturer to an inventor of cloud-based services. I never expected to see people like us running companies like that.

It makes me feel good about the future, when so many other things conspire to make us feel the opposite.

Categories
Adobe Usability User Experience UX

Download in the Dumps (AKA Killing Me Softly With Adobe)

In which our intrepid reporter is unable to download and reinstall Adobe software he owns and paid for because Adobe.

I REMOVED Adobe CS5 from my studio Mac after it took on water damage during tropical storm Irene. Just as I was going to replace the machine, the water damage seemed to go away. (It actually never did go away, and as I write this it’s pretty bad, but for a week it seemed okay so I didn’t order a replacement.) As I need Photoshop this morning to work on a website, and as I’m still a registered CS5 owner, I logged into Adobe.com to download a “Trial” version of Photoshop. For all the good it did me, I could have eaten my own head.

Clicking “Download Photoshop” put an “Install Adobe Download Assistant” app on my desktop instead of downloading Photoshop. To download Photoshop from the web, you can’t just download Photoshop from the web. You have to download an installer that installs a downloader. There’s no benefit to the user for jumping through this extra hoop, but I guess Adobe Corporate wanted to show off its AIR-based software.

To download trial versions of Creative Suite software, you need to install the Adobe Download Assistant. After installation, the Adobe Download Assistant will start your product download automatically,

the website says. This is a lie.

Once installed, the downloader asks me to sign in again. Which is only logical. After all, between the time I clicked “download Photoshop” as a signed-in user and now, I might have been knocked unconscious by Photoshop pirates. Without a redundant double sign-in, the pirates would win.

So I type in my login and password again—same as I just did on the website to download this meshugah downloader installer in the first place—and guess what? Adobe says my login and password don’t match.

The login and password I used to download the installer downloader are unacceptable to the downloader. If you’re following this gibberish, God bless. If not, Adobe is telling me that the login and password I just used to install the downloader are no good.

Like a pimp pretending to help a runaway teen, a link in the unhelpful downloader now asks, “Having trouble signing in?” There being nothing else to do, I click the link, which takes me to a “Reset your password” panel. Only I can’t reset my password in the “Reset your password” panel; I’ll only be able to reset my password on a custom web page, whose address I will only learn once I receive an email from Adobe sending me a custom link. Excitingly, that “Reset your password” page (the one that will actually allow me to reset my password) will be generated on the fly via Adobe’s famous and ultra-reliable ColdFusion software.

I’ve now lost 30 minutes of work time but Adobe is not done with me. Oh, no. This is where the fun begins.

I spend long minutes reflexively checking my email, like a junkie scanning the corner in search of his busted dealer. The custom link email finally arrives, but the link never works. (It’s the cream of the jest!) Here is a screenshot of Adobe’s Chinese Japanese website, powered by ColdFusion, which is unable to generate a “Reset your password” page, allowing me to reset my password and use the AIR-based downloader software to download the software I already own.

Mission: not accomplished. Total time wasted: 45 minutes (not counting the writing of this blog post, which I do in the faint hope that Adobe will improve its customer experience). I still have no working copy of Photoshop and it’s clear I won’t get one today. The installer disks are gone from my office because I’m moving to a new studio soon and have been packing important pieces like installation disks ahead of time. (After all, I had reasoned, Adobe lets you download software from its website, so why keep disks around?)

To be fair, Hurricane Irene was not Adobe’s fault, and lots of people suffered much worse than a water-damaged iMac. Nor is water damage to my Mac Adobe’s fault. My decision to remove CS5 from the Mac was based on fear that if the Mac died and I hadn’t removed CS5, I would not be able to install it on the replacement machine I intended to purchase, as Adobe licensing (and the software itself) requires you to uninstall from Machine A before installing on Machine B. Adobe CS5 costs more than the computer I intended to buy, so it seemed prudent to remove it from the damaged machine, but of course I regret that decision now, because Adobe’s website won’t let me update my member information, and its downloader won’t let me download.

So I’ll be working from home tonight, doing what I should have done today. Five little letters: ADOBE.

Breathless Update!

Apparently Adobe’s entire membership section, powered by ColdFusion, is now down. Trying to do anything inside the member section leads to a Chinese “Sorry” page. This might be why the “downloader” failed to authorize my credentials. How much simpler it would be if Adobe simply provided a link to download its software (like in the old days) instead of forcing registered users to jump through broken hoops.

Categories
Adobe Applications Authoring Best practices Code Design

Fast Company on Adobe Muse

DESIGN GURU Jeffrey Zeldman, says while he likes Muse for its ease of creating layouts, it still doesn’t answer his plea for a better Internet. ‘Software can’t generate HTML that is search-engine friendly, accessibility-friendly, and portable between desktop and mobile,’ he says. ‘Only web design professionals who understand semantic markup, responsive and adaptive web layout, and mobile user interface can do that.’”

Adobes Muse Lets Designers Make Websites Without Knowing Code | Co. Design.

Categories
"Digital Curation" Adobe Formats glamorous Usability User Experience UX Zeldman

Jeffrey Zeldman signs a contract the modern way.

Jeffrey Zeldman Signs a Contract the Modern Way from Monkey Do! on Vimeo.

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
Adobe Design The Profession Web Design Web Design History

Style versus design, revisited

STYLE VERSUS DESIGN READS like it was written this morning. In fact, I wrote the original version in 1999, when I had a monthly web design column going at Adobe.com. In 2005, Adobe asked if I’d mind updating the piece. I changed a couple of words and they agreed that the revision worked. For although the web had changed tremendously between 1999 and 2005, the issue I addressed in my article had not. This afternoon, while importing some old Ma.gnolia bookmarks into Pinboard, I came upon Adobe’s HTML version of the 2005 revision to “Style vs. Design.” I read it again, and tweeted the link. Within minutes, designers were responding. Many thought the piece was new. For what I said in that article over eleven years ago still rings true, although there are now more designers who see things as I do. It’s nice that a piece of writing about web design could remain relevant for over a decade. But it’s also a bit sad. See what you think.

Categories
Adobe Community creativity

Layer Tennis Championship Today.

Ladies and gentlemen, prepare for the game of all games, a design denouement one incredible year in the making, the ultimate test of two unlikely heroes with even less likely names.

Noper vs. Reyes. Layer Tennis 2010 Season 3 championship. Fought live, with live commentary by yours truly. Presented by Adobe CS5 via Coudal Partners.

The Match begins 1:00 pm Chicago time (2:00 pm in NYC, 9:00 pm in Bucharest).

See you there.

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
Accessibility Adobe Advocacy Apple Applications apps architecture Authoring Best practices Browsers business Code content strategy CSS3 Design Designers development editorial Happy Cog™ HTML HTML5 industry javascript Platforms Publications Publishing Real type on the web Standards State of the Web The Essentials The Profession W3C Web Design Web Design History Web Standards webfonts webtype Zeldman

The future of web standards

Jeffrey Zeldman on the future of web standards.

“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?”

The Future of Web Standards by Jeffrey Zeldman

Originally written for .net magazine, Issue No. 206, published 17 August in UK and this month in the US in “Practical Web Design” Magazine. Now you can read the article even if you can’t get your hands on these print magazines.

See also: I Guest-Edit .net magazine.

Categories
Adobe Design software Tools

UI Design Framework for Web Designers

Vincent (no last name given) has designed a beautiful, extremely useful, feature-rich interface design framework for web designers who create their initial design mock-ups in Adobe Illustrator. And it’s free for personal or commercial use (credit link required).

The set includes:

  • GUI library – Hundreds of vector elements for interface design
  • Minimal UI icons set – 260 vector icons for Illustrator
  • Styles library – 200 styles to apply in Illustrator

I’d pay cash money for the color schemes alone: 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

The back-link requirement may be a deal breaker in some situations. I’d happily use these GUI icons on a personal project, but I might refrain on a client project if it seemed awkward to include a widget credit on the site. (It all depends on the client.)

That possible caveat aside, this is an extraordinary set of widgets and gizmos many web designers will want to have in their tool kit.

Categories
Adobe Code Design development HTML HTML5 The Essentials Tools Web Design Web Standards

An InDesign for HTML and CSS?

In “CSS is the new Photoshop” (?), Adobe’s John Nack correctly observes, as have many of us, that “Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.” Nack quotes Shawn Blanc, one of several concurrent authors of the phrase “CSS is the new Photoshop,” who cites as evidence Louis Harboe’s iOS icons and Jeff Batterton’s iPhone, both designed entirely in CSS and both only viewable in the latest Webkit browsers, Safari 5 and Google Chrome 5.

He’s not alone: Håkon Wium Lie from Opera predicts that CSS3 could eliminate half the images used on the Web. You can use various graphical tools to generate things like CSS gradients and rounded corners. As people can do more and more in code, it makes sense to ask whether even to use Photoshop in designing Web content.

I think Adobe should be freaking out a bit, but in a constructive way.

So far, so good. But Nack’s “constructive” suggestion for Adobe, quoting Michael Slade, is to create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.”

Nack acknowledges that this will be difficult. I propose that it will be impossible. Says Nack:

As I noted the other day, “Almost no one would look inside, say, an EPS file and harrumph, ‘Well, that’s not how I’d write PostScript’–but they absolutely do that with HTML.”

Well, there is a reason they absolutely do that with HTML. PostScript is a programming language designed to describe page layouts and text shapes in a world of known, fixed dimensions (the world of print), with no underlying semantics. PostScript doesn’t care whether an element is a paragraph, a headline, or a list item. It doesn’t care if a bit of content on one page cites another bit of content on a different page. PostScript is a visual plotting language. And HTML is anything but.

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

Moreover, authoring good HTML and CSS is an art, just as authoring good poetry or designing beautiful comps in Photoshop is an art. Expecting Photoshop to write the kind of markup and CSS you and I write at our best is like challenging TextMate to convert semantic HTML into a visually appropriate and aesthetically pleasing layout. Certain kinds of human creativity and expertise cannot be reproduced by machines. Yes, there are machines that create music, and a composer like Brian Eno can program such systems to create somewhat interesting aural landscapes, but such music can never be the Eroica or “This Land is Your Land,” because there is no algorithm with the creative and life experience of Beethoven or Woody Guthrie.

Adobe already has a fine product in the code arena. Some hand coders knock Dreamweaver, but it does about as good a job as is possible of converting groupings of meaningless pixels into chunks of valid code. It is unreasonable to expect more than that from a tool that begins by importing a multi-layered Photoshop comp. Of course you can do much more with Dreamweaver if you use its code merely as a starting point, or if you use it simply as a hand-coding environment. But that’s the point. Some things, to be done right, must be done by the human mind.

There’s something to what Nack says. Photoshop could be made friendlier to serious web designers. Adobe could also stop ignoring Fireworks, as Fireworks is a better starting place for web design. They might even interview serious, standards-oriented web designers and start from scratch, as a new tool will suffer from fewer political constraints and user expectations than a beloved existing product with deep features and multiple audiences.

But 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 very assumption that a such thing is possible suggests a lack of understanding of the professionalism, wisdom, and experience required to create good HTML, CSS, and JavaScript. Fortunately, a better understanding is easy to come by.