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.

Categories
A Feed Apart A List Apart An Event Apart Boston Community conferences content content strategy creativity CSS Design Designers Education eric meyer events Happy Cog™ HTML5 interface launches Standards Tools twitter User Experience UX Web Design Zeldman

A Feed Apart 2.0

A Feed Apart

As promised, a super-hot update to A Feed Apart, the official feed aggregator for An Event Apart, is up and running for your web design conference pleasure. You can now tweet from inside the application, and can even arrange meet-ups and make other social connections there.

Must-read: Designer Ali M. Ali talks about the interface design.

Steve Losh did back-end programming.

Nick Sergeant and Pete Karl created the original A Feed Apart and led the redesign effort.

If you can’t attend the sold-out show, which begins Monday, May 24, you can follow the live Tweetage from the comfort of your cubicle.

Enjoy An Event Apart Boston 2010 on A Feed Apart.

Categories
Apple Applications Tools

Happy 15th birthday, DragThing

Dragthing

On 1 May 1995, young James Thomson released the first version of DragThing, “the original dock designed to tidy up your Macintosh desktop.” On 1 May 2010, a still young James Thomson celebrated his product’s 15th birthday the way any good indie software developer would: with a free update.

It’s been over six years since we last charged for an update, and we’ve released over twenty free updates since then, so this should really be a paid one. But since it’s a relatively minor release, this is still free for people who bought any earlier version of DragThing 5.

My favorite DragThing feature

… is the ability to assign keystrokes to my favorite apps. I launch TextEdit with F1, Mail with F2, Fetch with F3, TextMate with F6, Photoshop with F7, Safari with F8, Illustrator with F10. The best part is that even when I’m working in a half-dozen or more apps at once, I can easily switch between them with a keypress—for instance, after copying a selection in Illustrator, I can hit F7 and paste it into Photoshop.

There are certainly other ways of doing these things (including other ways of assigning keystrokes to applications), but DragThing makes it easy.

Trash Can love

DragThing also lets you stick documents, folders, and applications in single or multiple, highly configurable docks, and can store frequently used text and photo clippings for pasting into other applications with a click. Plus you can assign sounds to actions (now you can hear when you empty the Trash can), stick the Trash can back on the desktop where it belongs, and play with all manner of dock styles and color schemes (caution! a little goes a long way).

You can take my copy of DragThing when you pry it out of my cold, dead hands.

Congratulations, James Thomson. The rest of you, download DragThing 5.9.6.

Categories
Authoring books Community Compatibility content Design development E-Books editorial ipad iphone Kindle Layout Publications Publishing Tools Touchscreen type Typography webfonts

More Mod on the Digital Book

Embracing the Digital Book by Craig Mod.

A Reading Heatmap: Key passages illuminated by layering all readers’ highlights for the same text.

LAST MONTH, he wowed us with Books in the Age of the iPad, a call to make digital books as beautiful as printed ones. This month, Craig Mod is back with Embracing the Digital Book, an article (or blog post if you must) that begins as a critique of iBooks and Kindle and moves on to discuss the e-reader of our dreams, complete with reasoned social features:

I’m excited about digital books for a number of reasons. Their proclivity towards multimedia is not one of them. I’m excited about digital books for their meta potential. The illumination of, in the words of Richard Nash, that commonality between two people who have read the same book.

We need to step back for a moment and stop acting purely on style. There is no style store. Retire those half-realized metaphors while they’re still young.

Instead, let’s focus on the fundamentals. Improve e-reader typography and page balance. Integrate well considered networked (social) features. Respect the rights of the reader and then — only then — will we be in a position to further explore our new canvas.

Embracing the digital book — Craig Mod


Categories
Design interface ipad iphone Tools Touchscreen User Experience UX

Touch Gesture Reference Guide

The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces including iPhone, Windows 7, Windows Phone 7, Android, and more.

The guide contains an overview of the core gestures used for most touch commands. It tells how to use these gestures to support major user actions; provides visual representations of each gesture to use in design documentation and deliverables; and additionally provides an outline of how popular software platforms support core touch gestures. All in seven pretty PDF pages. It was conceived, researched, illustrated, and designed by Craig Villamor, Dan Willis, Luke Wroblewski, and Jennifer Rhim (document design).

Platform support information comes from the following sources:


Categories
Accessibility Advocacy Apple Applications apps art direction Browsers bugs Code Compatibility CSS Design HTML ipad iphone Layout Real type on the web Standards State of the Web The Essentials Tools W3C Web Design Web Standards webfonts webkit webtype zeldman.com

Opera loves my web font

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.


Categories
cities Code Community conferences content content strategy CSS Design development eric meyer Happy Cog™ HTML HTML5 Seattle speaking Standards State of the Web Tools Usability User Experience UX Web Design Web Standards Zeldman

An Event Apart Seattle

Above: Part of my deck for “Put Your Worst Foot Forward,” a talk on learning from mistakes at An Event Apart Seattle 2010.

Greetings, web design fans. I’m in Seattle doing the final prep for three days of kick-ass design, code, and content. Starting Monday, April 5 and running through Wednesday, April 8, An Event Apart Seattle 2010 features 13 great speakers and 13 sessions, and has been sold out for over a month. A Day Apart, a special one-day learning experience on HTML5 and CSS3, follows the regular conference and is led by Jeremy Keith and Dan Cederholm.

The all-star cast includes …

… And that’s just the first day.

There are also two parties (sponsored by our good friends at Media Temple and MSNBC) and seven more great speakers with topics of interest to all standards-based web designers.

If you can’t be with us, follow the Twitter stream live on A Feed Apart.

Categories
37signals business client services Happy Cog™ Interviews Tools

On Basecamp

In an interview at 37signals, I discuss how the Happy Cog team uses Basecamp to coordinate projects across three studios and maintain accurate client communications.

Categories
Design Tools

Pixen: Bitmap Graphics in Style

via opensword.org

Pixen is an innovative graphics editor for the Mac. It’s designed from top to bottom for pixel artists—people who make low-resolution raster art like the sprites you see in old video games. But it’s great for artists of all arenas: Pixen is like a very powerful MSPaint or a simpler, more agile Photoshop. And best of all, it’s Free!

Posted via web from Does This Zeldman Make My Posterous Look Fat?


Categories
architecture Blogs and Blogging Design Publications Publishing Tools

Tumblr v. Posterous

Business Insider: Why Tumblr Is Kicking Posterous’s Ass

Posted via web from Does This Zeldman Make My Posterous Look Fat?


Categories
A List Apart Code Design Tools Usability User Experience UX Web Design

Fold, Spindle

Another generation of technology has passed and Unicode support is almost everywhere. The next step is to write software that is not just “internationalized” but truly multilingual. In this article we will skip through a bit of history and theory, then illustrate a neat hack called accent-folding. Accent-folding has its limitations but it can help make some important yet overlooked user interactions work better.

Accent Folding for Auto-Complete by CARLOS BUENO in A List Apart Issue No. 301

Illustration: Kevin Cornell for A List Apart


Categories
Design Themes and Templates Tools Typography Web Design wordpress

60+ Free WordPress Themes

One of 60+ quality WordPress themes.

Via instantshift.com

Pulling the trigger just got easier. Now anyone can have a beautifully designed, standards-compliant WordPress site. The 60-plus recently created free WordPress themes (AKA template collections) listed by InstantShift’s Daniel Adams are categorized by function and style: “Clean and Minimal,” “Artistic and Fancy,” “Magazine Style,” “Portfolio Style,” “News and Social Media Style,” “Showcase and Galleries Style,” “E-Comerce and Shopping Cart Style,” “Domain Parking/Coming Soon Style,” and “Other.” Something for everyone.

Not everything here is a winner or will appeal to every taste, but there is plenty of great work to be had here. If WordPress is your CMS (it’s mine), even if you are a designer, you may ask yourself if you really need to perform that next site redesign from scratch.

Posted via the web from Does This Zeldman Make My Posterous Look Fat?

Categories
Accessibility content Design The Profession Tools

Wish I’d invented it

Arc90 Lab’s Readability is a simple and essential tool that “makes reading on the web more enjoyable by removing the clutter around what you’re reading.”

Just choose your settings, install the bookmarklet in your browser’s toolbar, and enjoy content on even the busiest, most poorly-designed sites.

In the past, I’ve cited Readability as a signpost for designers struggling with IE6.

It’s also an invaluable aid to readers who use smart phones.

For instance, here is Roger Ebert’s review of Fellini’s 8 1/2.

On a desktop browser, although it’s not an aesthetically pleasant experience, you can probably read it. On a small iPhone screen, you can’t. It’s a nightmare. It’s everything designers shouldn’t do when they have text by a good writer with an audience of eager readers.

So what’s a reader to do?

Without Readability, there’s nothing you can do, but sigh and close the browser window. With Readability, you can read and actually enjoy what Roger Ebert has to say.

Invaluable.


Categories
spec Standards State of the Web Tools Web Design Web Design History Web Standards webfonts webtype writing Zeldman

Real Fonts and Rendering: The New Elephant in the Room

My friend, the content strategist Kristina Halvorson, likes to call content “the elephant in the room” of web design. She means it’s the huge problem that no one on the web development team or client side is willing to acknowledge, face squarely, and plan for….

Without discounting the primacy of the content problem, we web design folk have now birthed ourselves a second lumbering mammoth, thanks to our interest in “real fonts on the web“ (the unfortunate name we’ve chosen for the recent practice of serving web-licensed fonts via CSS’s decade-old @font-face declaration—as if Georgia, Verdana, and Times were somehow unreal).…

Put simply, even fonts optimized for web use (which is a whole thing: ask a type designer) will not look good in every browser and OS.

Zeldman

Jeffrey Zeldman, Real Fonts and Rendering: The New Elephant in the Room
22 December, 2009
24 ways: The Advent Calendar for Web Developers


Short URL: zeldman.com/?p=3319

Categories
Design Fonts software Tools Typography Web Design Web Standards webfonts webtype widgets

Fab Font Favelet

This is a bookmarklet made for web designers who want to rapidly check how different fonts and font styles look on their screen without editing code and refreshing pages. 

Download the amazing and oh-so-practical Soma FontFriend bookmarklet.