Category: DWWS

What’s new in DWWS 3e

The 3rd Edition of Designing With Web Standards is coming soon to a bookstore near you. Abetted mightily by our secret cabal of interns, co-author Ethan Marcotte, technical editor Aaron Gustafson, copyeditor Rose Weisburd, editor Erin Kissane and I have worked hard to create what we hope is not merely an update, but a significant revision to the foundational web standards text.

Packed with new ideas

After years of stasis, the world of standards-based design is exploding with new ideas and possibilities. Designing With Web Standards 3rd Edition captures this moment, makes sense of it, and keeps you smartly ahead of the pack.

From HTML 5 to web fonts, CSS3 to WCAG2, the latest technologies, claims and counter-claims get broken down in classic DWWS style into their easy-to-understand component ideas, helping you pick the course of action that works best for your projects. As always, the core ideas of standards-based design (which never change) get presented with clear insights and up-to-date examples. You’ll find strategies for persuading even the most stubborn boss or client to support accessibility or reconsider what “IE6 support” means—and for handling the other problems we face when trying to bring rational design and development to the unruly web.

Now with more “how”

While this 3rd Edition, like its predecessors, spends a great deal of time on “why,” it also features a lot more “how” than past editions. If you loved the ideas in DWWS, but wished the book was a bit more hands-on, this is the edition you’ve waited for.

Oh, and the color this time? It’s blue, like l’amour.

Pre-order and save

A few chapters remain to be written, but the goal is in sight, and the book will be out this Fall. To celebrate, you can now save 37% when you pre-order Designing With Web Standards 3rd Edition from Amazon.com.

There’s a new book mini-site as well, with more content and features to come. The sharp-eyed will notice that the mini-site is set in Franklin Gothic. A web-licensed version of ITC Franklin Pro Medium from Font Bureau has been embedded via standard CSS. It works everywhere, even in IE. (View Source if curious.)

ShortURL: zeldman.com/x/57

CSS Design development DWWS Education Publications Publishing Respect Web Design Web Standards Zeldman

Beep

For the third edition of Designing With Web Standards, I’ve brought in a co-author: the brilliant and talented Mr Ethan Marcotte.

Mr Marcotte is a web designer/developer who “works for Airbag Industries as a Senior Designer, swears profusely on Twitter, and is getting married to an incredible lady.” He is also a technical editor and contributing author to A List Apart, and the co-author of several fine books about the intersection between great code and fine design. Then there’s the fact that I dig him. I dig the hell out of him. I love him like a younger, sweeter, funnier brother.

That’s important because I don’t add a co-author to any book, let alone this book, lightly. In asking Ethan to help me bring the awesome to this substantially revised and rewritten edition, I chose not only on the basis of expertise and writing ability, but also on sheer karma.

In his new role, Ethan joins a SuperFriends™ line-up including technical editor Aaron Gustafson (Twitter), another honey of a guy, and truly one of the smartest, most innovative, and most knowledgeable voices in web standards, and editor Erin Kissane (Twitter), whose mastery of the subtlest details of voice consistency alone makes her the finest editor I have ever been blessed to work with. Behind it all, there’s Michael Nolan (Twitter), New Riders’ sagely seasoned acquisitions editor and a designer and author himself, who first took a chance on me as an author back in nineteen ninety humph.

Designing With Web Standards, 3rd Edition is coming this year to a bookstore near you. I thank my brilliant crew for making it possible. Onward!

[tags]EthanMarcotte, beep, unstoppablerobotninja, airbag, alistapart, CSS, design, webstandards, webdesign, designingwithwebstandards, DWWS, 3rdedition, DWWS3e, writer, writers, authors[/tags]

Tags 3rdedition, airbag, alistapart, authors, beep, CSS, Design, designingwithwebstandards, DWWS, DWWS3e, ethanmarcotte, unstoppablerobotninja, webdesign, webstandards, writer, writers

Accessibility Advocacy content copyright creativity CSS Design development DWWS Fonts Ideas industry links Real type on the web Standards State of the Web Tools Web Design Web Standards webfonts webtype

Web fonts now (how we’re doing with that)

Post author By L. Jeffrey Zeldman
Post date 23 May 2009

THE WEB Fonts Wiki has a page listing fonts you can legally embed in your site designs using the CSS standard @font-face method. Just as importantly, the wiki maintains a page showing commercial foundries that allow @font-face embedding. Between these two wiki pages, you may find just the font you need for your next design (even if you can’t currently license classics like Adobe Garamond or ITC Franklin and Clarendon).

The advantages of using fonts other than Times, Arial, Georgia, and Verdana have long been obvious to designers; it’s why web design in the 1990s was divided between pages done in Flash, and HTML pages containing pictures of fonts—a practice that still, bizarrely, continues even in occasionally otherwise advanced recent sites.

Using real fonts instead of pictures of fonts or outlines of fonts provides speed and accessibility advantages.

Currently the Webkit-based Apple Safari browser supports @font-face. The soon-to-be-released next versions of Opera Software’s Opera browser, Google’s Webkit-based Chrome, and Mozilla Firefox will do likewise. When I say “soon-to-be-released,” I mean any day now. When this occurs, all browsers except IE will support @font-face.

IE has, however, offered font embedding since IE4 via Embedded OpenType (.EOT), a font format that enables real fonts to be temporarily embedded in web pages. That is, the reader sees the font while reading the page, but cannot download (“steal”) the font afterwards. Microsoft has “grant[ed] to the W3C a perpetual, nonexclusive, royalty-free, world-wide right and license under any Microsoft copyrights on this contribution, to copy, publish and distribute the contribution under the W3C document licenses,” in hopes that EOT would thereby become a standard. But so far, only Microsoft’s own browsers support EOT.

Thus, as we consider integrating real fonts into our designs, we must navigate between browsers that support @font-face now (Safari), those that will do so soon (Opera, Chrome, Firefox), and the one that possibly never will (IE, with a dwindling but still overwhelming market share).

The person who figures out a designer-friendly solution to all this will either be hailed as a hero/heroine or get rich. Meanwhile, near-complete solutions of varying implementation difficulty exist. Read on:

CSS @ Ten: The Next Big Thing

“Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.” An introduction to @font-face by Håkon Wium Lie, father of CSS.

Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow

Is there life after Georgia? To understand issues surrounding web fonts from the type designer’s perspective, I interview David Berlow, co-founder of The Font Bureau, Inc, and the ?rst TrueType type designer.

The W3C: @font-face vs. EOT

A discussion that shows why the W3C may not be able to resolve this conflict. (It’s kind of like asking the Montagues and Capulets to decide whether the Montagues or the Capulets should rule Verona.)

sIFR 2.0: Rich Accessible Typography for the Masses

Mike Davidson’s scalable and accessible remix of Shaun Inman’s pioneering use of Flash and JavaScript to replace short passages of HTML text with Flash movies of the same text set in a real font. The Flash movies are created on the fly. If JavaScript or images are turned off, the user “sees” the HTML text; text set in sIFR can also be copied and pasted. sIFR was a great initial solution to the problem of real fonts on the web, but it’s only for short passages (which means the rest of the page must still be set in Georgia or Verdana), and it fails if the user has a Flash block plug-in installed, as half of Firefox users seem to. It’s also always a pain to implement. I don’t know any designer or developer who has an easy time setting up sIFR. In short, while sIFR is an awesome stop-gap, real fonts on the web are still what’s needed. Which also leads us to…

Cufón – Fonts for the People

Simo Kinnunen’s method of embedding fonts, regardless of whether or not a browser supports @font-face.

Combining Cufón And @Font-Face

Kilian Valkhof: “Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.”

Adobe, Web Fonts, and EOT

Why Adobe supports Microsoft’s EOT instead of @font-face.

Introducing Typekit

Update May 28, 2009: Working with Jason Santa Maria, Jeff Veen’s company Small Batch Inc. introduces Typekit:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Web Fonts, HTML 5 Roundup: Worthwhile reading on the hot new web font proposals, and on HTML 5/CSS 3 basics, plus a demo of advanced HTML 5 trickery. — 20 July 2009
Web Fonts Now, for real: David Berlow of The Font Bureau has proposed a Permissions Table for OpenType that can be implemented immediately to turn raw fonts into web fonts without any wrappers or other nonsense. If adopted, it will enable type designers to license their work for web use, and web designers to create pages that use real fonts via the CSS @font-face standard. — 16 July 2009

[tags]fonts, webfonts, webdesign, embed, @font-face, EOT, wiki, css, layout, safari, opera, firefox, chrome, browsers[/tags]

Tags @font-face, Browsers, chrome, CSS, embed, EOT, firefox, Fonts, Layout, opera, safari, webdesign, webfonts, wiki

Accessibility Browsers business CSS Design development DWWS Layout Standards

A new answer to the IE6 question?

Post author By L. Jeffrey Zeldman
Post date 21 May 2009
No Comments on A new answer to the IE6 question?

In “Universal Internet Explorer 6 CSS,” Andy Clarke proposes a novel approach to the problem that has vexed standards-based designers since time immemorial (or at least since we could quit worrying about Netscape 4).

The problem is IE6. Outdated but still widely used, especially in the developing world, its inaccurate and incomplete CSS support forces web designers and developers to spend expensive hours on workarounds ranging from hacks, to IE6-only styles served via conditional comments, to JavaScript. Some refuse to serve CSS to IE6 at all; others stop IE6 users at the gate. In some situations (personal site, web app used by first-world hipsters), ignoring IE6 may work; but mostly it doesn’t.

After a brief but thorough tour of current IE6 solutions and their limitations, Andy unveils his zinger. He proposes to serve IE6 users a set of universal styles completely unrelated to the design of the site in question. Not unlike Arc90’s awesome Readability plug-in, the styles Andy has designed concern themselves with typographic hierarchy and whitespace. Here’s the theory: make the page easy to read, make it obvious that somebody designed it, and the IE6 user will have a good experience.

(By contrast, block styles from IE6, as some developers suggest, and that user will have a bad experience. Most likely, in the absence of styles, the user will think the page is broken.)

No hammer fits all nails, and no solution, however elegant, will work for every situation. But if we’re open minded, Andy’s proposal may work in more situations than we at first suspect. Where it works, it’s what business folk call a “win, win:” the visitor has a good reading experience, and client and developer are spared tedium and expense.

Check it out.

[tags]IE6, workarounds, design, development, webdesign, hacks, legibility, styles, CSS, andyclarke[/tags]