“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?”
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.
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.
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.
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.
New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.
Except Steve Jobs’s subtext isn’t “web standards, web standards, web standards, told you so.”
Except it kind of is.
Layer Tennis Around the World
Around the world in ten layers with Coudal Partners: Ten designers in ten cities, fifteen minutes at a time. A single Photoshop file will circumnavigate the globe starting in Portland and ending in Tokyo with yours truly, Jeffrey Zeldman, providing the layer-by-layer commentary. Don’t miss this one, live Friday, starting at 2pm Chicago time.
Must-read analysis at Daring Fireball anatomizes the “war” between Flash and web standards as a matter of business strategy for companies, like Apple and Google, that build best-of-breed experiences atop lowest-common-denominator platforms such as the web:
It boils down to control. I’ve written several times that I believe Apple controls the entire source code to iPhone OS. (No one has disputed that.) There’s no bug Apple can’t try to fix on their own. No performance problem they can’t try to tackle. No one they need to wait for. That’s just not true for Mac OS X, where a component like Flash Player is controlled by Adobe.
I say what Apple cares about controlling is the implementation. That’s why they started the WebKit project. That’s why Apple employees from the WebKit team are leaders and major contributors of the HTML5 standards drive. The bottom line for Apple, at the executive level, is selling devices. … If Apple controls its own implementation, then no matter how popular the web gets as a platform, Apple will prosper so long as its implementation is superior.
Likewise with Google’s interest in the open web and HTML5. … So long as the web is open, Google’s success rests within its own control. And in the same way Apple is confident in its ability to deliver devices with best-of-breed browsing experiences, Google is confident in its ability to provide best-of-breed search results and relevant ads. In short, Google and Apple have found different ways to bet with the web, rather than against the web.
The first part of my post of 1 February was not an attack on Flash. It described a way of working with Flash that also supports users who don’t have access to Flash. I’ve followed and advocated that approach for 10 years. It has nothing to do with Apple’s recent decisions and everything to do with making content available to people and search engines.
My point was simply that if you’re an all-Flash shop that never creates a semantic HTML underpinning, it’s time to start creating HTML first—because an ever-larger number of your users are going to be accessing your site via devices that do not support Flash.
That’s not Apple “zealotry.” It’s not Flash hate. It’s a recommendation to my fellow professionals who aren’t already on the accessible, standards-based design train.
THE SECOND PART OF MY POST wasn’t Flash hate. It was a prediction based on the way computing is changing as more people at varying skill levels use computers and the internet, and as the nature of the computer changes.
There will probably always be “expert” computer systems for people like you and me who like to tinker and customize, just as there are still hundreds of thousands of people who hand-code their websites even though there are dozens of dead-simple web content publishing platforms out there these days.
But an increasing number of people will use simpler computers (just as we’ve seen millions of people blog who never wrote a line of HTML).
THE THIRD PART OF MY POST wasn’t Flash hate. It was an observation that Google and Apple, as companies, have more to gain from betting on HTML5 than from pinning their hopes to Adobe. That’s not a deep insight, it’s a statement of the obvious, and making the statement doesn’t equate to hating Adobe or swearing allegiance to Google and Apple—any more than stating that we’re having a cold winter makes me Al Gore’s best friend.
(Although I like Gore, don’t get me wrong. I also like Apple, Google, and Adobe. My admiration for these companies, however, does not impede my ability to make observations about them.)
THE THIRD PART OF MY POST ALSO WASN’T a blind assertion that HTML5, with VIDEO and CANVAS, is ready to replace Flash today, or more adept than Flash, or more accessible than Flash. Flash is currently more capable and it is far more accessible than CANVAS.
We have previously commented on HTML5’s strengths and weaknesses (Exhibit A, Exhibit B, Exhibit C) and are about to publish a book about HTML5 for web designers. HTML5 is rich with potential; Flash is rich with capability and can be made highly accessible.
That it is unstable on Mac and Linux is one reason Apple chose not to include it in its devices; that this omission will change the way some developers create web content is certain. If the first thing it does is encourage them to develop semantic HTML first, that’s a win for everyone who uses the web.
Flash, iPad, Standards
As the percentage of web users on non-Flash-capable platforms grows, developers who currently create Flash experiences with no fallbacks will have to rethink their strategy and start with the basics before adding a Flash layer. They will need to ensure that content and experience are delivered with or without Flash.
Developers always should have done this, but some don’t. For those who don’t, the growing percentage of users on non-Flash-capable platforms is a wake-up call to get the basics right first.
Flash won’t die tomorrow, but plug-in technology is on its way out.
Plug-in technology made sense when web browsing was the province of geeks. It was a brilliant solution to the question of how to extend the user experience beyond what HTML allowed. People who were used to extending their PC via third-party hardware, and jacking the capabilities of their operating system via third-party spell checkers, font managers, and more, intuitively grasped how to boost their browser’s prowess by downloading and updating plug-ins.
But tomorrow’s computing systems, heralded by the iPhone, are not for DIYers. You don’t add Default Folder or FontExplorer X Pro to your iPhone, you don’t choose your iPhone’s browser, and you don’t install plug-ins in your iPhone’s browser. This lack of extensibility may not please the Slashdot crowd but it’s the future of computing and browsing. The bulk of humanity doesn’t want a computing experience it can tinker with; it wants a computing experience that works.
HTML5, with its built-in support for video and audio, plays perfectly into this new model of computing and browsing; small wonder that Google and Apple’s browsers support these HTML5 features.
The power shifts
Google not only makes a browser, a phone, an OS, and Google Docs, it also owns a tremendous amount of video content that can be converted to play in HTML5, sans plug-in. Apple not only makes Macs, iPhones, and iPads, it is also among the largest retail distributors of video and audio content.
Over the weekend, a lot of people were doing the math, and there was panic at Adobe and schadenfreude elsewhere. Apple and Adobe invented modern publishing together in the 1980s, and they’ve been fighting like an old unmarried couple ever since, but Apple’s decision to omit Flash from the iPad isn’t about revenge, it’s about delivering a stable platform. And with HTML5 here, the tea leaves are easy to read. Developers who supplement Flash with HTML5 may soon tire of Flash—but Adobe has a brief but golden opportunity to create the tools with which rich HTML5 content is created. Let’s see if they figure that out.
The new office is so new to me that I entered the address incorrectly while ordering CS3 suites for the studio. Amazon is consequently rush-delivering Photoshop, Illustrator, InDesign, Flash, Dreamweaver, Acrobat Pro, and Fireworks to the wrong address, and it’s too late to change the address on the order. Someone in Harlem is going to be very happy.