Categories
Design Web Design Web Standards Working

Web standards curriculum

WaSP InterAct is a “living, open web standards curriculum.” Put together by an amazing group of dedicated educators and industry experts, the curriculum is designed to teach students the skills of the web professional—and ease the burden of colleges and universities, struggling to develop timely and appropriate curricula for our fast-moving profession.

Schools that teach web design struggle to keep pace with our industry, and those just starting their curricula often set off in the wrong direction because the breadth and depth of our medium can be daunting. The WaSP InterAct curriculum project seeks to ease the challenges schools around the world face as they prepare their students for careers on the Web. … Its courses are divided into six learning tracks that provide students with a well rounded foundation in the many facets of the web design craft.

The group offers its resources to all who need them (to reuse adapt), and it seeks your content and ideas.

[tags]design, data, webdesign, webstandards, education, curriculum, WaSP, webstandards.org[/tags]

Categories
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 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]

Categories
Web Design Web Standards wordpress work Zeldman zeldman.com

Redesigned

The zeldman.com redesign is up. You’re soaking in it. It’s old school. It’s brand heritage, baby. It’s retro 90s web. It’s so retro it’s nowtro. Because old is the new new.

Mainly, the redesign is content focused. After so many years as a web designer, and after creative directing so many influential projects, I naturally considered doing a wide, three-column, ultra-modern design—something cool, detached, polished, and glowing with rich media and fancy-pants sliding-drawer JavaScript effects. Not that there’s anything wrong with those things. In the right circumstances, those things can rock hard. But this site is mainly about my writing. So I crafted a simple look that encourages reading and hearkens back to this site’s early years.

Read more about it here, here, there, and elsewhere. (Don’t freak out; these old posts are now in the new layout, adding a layer of surrealism to the experience, since you’re looking at a blog post in the finished new look that links to and talks about cruddy early versions of that same look.)

If orange hurts you, there’s a style switcher in the footer that will remember your preference for an off-white background. You’re welcome.

WordPress implementation by Noel Jackson.

Rotation script by Mark Huot.

Thanks, fellas! And thanks to all readers who critiqued the public beta.

[tags]zeldman, zeldman.com, redesign, redesigns, webdesign, design[/tags]

Categories
Design HTML HTML5 Standards State of the Web W3C Web Design Web Standards

NSFW tag in HTML 5

A “Not Safe for Work” Tag has been proposed for HTML 5:

One of the most common descriptive notes people have to write using text when they post links or images to blogs, comments or anywhere in HTML is to say “this link is not safe for work” or simply “NSFW”. By adding the <NSFW> tag, this could be made much simpler and standardized. Browsers could then have an option to automatically hide all <NSFW> content. A tag is preferred to an attribute since it could then also be used around content and not just links.

Examples:
<nsfw><a href=”http://www.example.com”>Pics here!</a></nsfw>
<nsfw><img src=”badkitten.jpg”></nsfw>

(Via Bruce Lawson)

Drew McLellan of The Web Standards Project thinks it’s a nice idea that won’t work:

@brucel we looked into #nsfw in microformats. It’s an unworkable minefield. #

it’s used when linking to something that you might want to save until you get home. e.g. http://ampleboobies.info (NSFW) #

So a browser could conceivably be configured not to follow links or display content tagged nsfw. Sounds a good idea, but unworkable. #

The use of tags (rather than CSS and JavaScript) to hide or show content is an intriguing and controversial aspect of HTML 5. It’s intriguing because using a standard tag—instead of writing custom CSS and JavaScript that someone else may someday have to maintain—potentially simplifies web development and maintenance, bringing advanced techniques of content presentation to more sites for less money. It’s controversial because it sticks presentation and behavior back in markup, after we all just spent a decade separating site structure and semantics from behavior and presentation.

We’re going to be following these developments and trying to make buzzword-free sense of them for you.

[tags]standards, webstandards, HTML, HTML5, tags, NSFW, W3C[/tags]

Categories
Design Fonts Ideas industry Typography Web Design Web Standards

Real fonts on the web, part 2

Introducing 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.

See also: “Web Fonts Now: How We’re Doing With That” (23 May 2009) right here at zeldman.com.

[tags]webdesign, webstandards, @font-face, typekit, realfonts[/tags]

Categories
Advocacy Code Design development HTML HTML5 Web Design Web Standards XHTML

“Google Bets Big on HTML 5”

While the entire HTML 5 standard is years or more from adoption, there are many powerful features available in browsers today. In fact, five key next-generation features are already available in the latest (sometimes experimental) browser builds from Firefox, Opera, Safari, and Google Chrome.

Tim O’Reilly: Google Bets Big on HTML 5

Striving to avoid the mistake Microsoft made when it bet on binary applications over the web, Google is counting on HTML 5 adoption to expand the capability of web applications. Tim O’Reilly describes Google’s strategy and lists five key HTML 5 features that are already supported in Safari, Firefox, Opera, and Chrome.

[tags]HTML5, Google, O’Reilly, TimO’Reilly, canvas, browsers, webapps, web applications, webstandards[/tags]

Categories
Interviews Press Publications Publishing reportage reprints Standards Typography Usability User Experience UX Web Design Web Standards wisdom Zeldman zeldman.com

.net interview

There was a point in the 90s when I felt like a sucker for doing HTML and CSS.”

The .net Zeldman interview is available for your downloading pleasure (4.2 MB PDF). For more of the best in web design and development, visit netmag.co.uk.

Update, 27 May 2009

An HTML version of the interview has now been posted on .net’s website.

[tags]webdesign, webdevelopment, magazine, interview, .net, netmag, interview, interviews, zeldman, jeffreyzeldman[/tags]

Categories
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)

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.

Read more

  • 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]

Categories
CSS Design development Happy Cog™ HTML Web Design Web Standards wordpress work Working XHTML Zeldman zeldman.com

Orange you glad

Working on the footer of zeldman.com redesign. Once footer is done, going to adjust header and Twitter sidebar blip.

[tags]zeldman, zeldman.com, design, redesign, css[/tags]

Categories
A List Apart An Event Apart Appearances better-know-a-speaker cities Code Community conferences content creativity CSS Design development Education eric meyer events HTML industry Information architecture Seattle Web Design Web Standards

Seattle-bound

City of Puget Sound, Jimi Hendrix, and the space needle, here I come for An Event Apart Seattle 2009—two days of peace, love, design, code, and content.

[tags]seattle, aneventapart, webdesign, webstandards, design, conference, conferences, webdesign conference, webdesign conferences, standards, IA, UX, ericmeyer, jeffreyzeldman, zeldman, meyerweb[/tags]

Categories
CSS Design Web Design Web Standards Zeldman zeldman.com

Alternate color scheme

Thanks for the great feedback, folks. For those who find the orange background objectionable, I’ll offer a user-selectable alternate color scheme, like this one (quick sketch, ignore the color of the printer’s mark at the top, final colors may vary).

[tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags]

Categories
Appearances Browsers content creativity CSS Design Fonts HTML Layout Web Design Web Standards Websites wordpress work Working XHTML Zeldman zeldman.com

Redesign in progress

Here’s a little something for a Wednesday evening. (Or wherever day and time it is in your part of the world.)

The body and bottom of the next zeldman.com design are now finished. Tomorrow I start working on the top.

Have a look.

Looks extra sweet in iPhone.

I’m designing from the content out. Meaning that I designed the middle of the page (the part you read) first. Because that’s what this site is about.

When I was satisfied that it was not only readable but actually encouraged reading, I brought in colors and started working on the footer. (The colors, I need not point out to longtime visitors, hearken back to the zeldman.com brand as it was in the 1990s.)

The footer, I reckoned, was the right place for my literary and software products.

I designed the grid in my head, verified it on sketch paper, and laid out the footer bits in Photoshop just to make sure they fit and looked right. Essentially, though, this is a design process that takes place outside Photoshop. That is, it starts in my head, gets interpreted via CSS, viewed in a browser, and tweaked.

Do not interpret this as me dumping on Photoshop. I love Photoshop and could not live or work without it. But especially for a simple site focused on reading, I find it quicker and easier to tweak font settings in code than to laboriously render pages in Photoshop.

If you view source, I haven’t optimized the CSS. (There’s no sense in doing so yet, as I still have to design the top of the page.)

I thought about waiting till I was finished before showing anything. That, after all, is what any sensible designer would do. But this site has a long history of redesigning in public, and the current design has been with us at least four years too long. Since I can’t snap my fingers and change it, sharing is the next best thing.

A work in progress. Like ourselves.

[tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags]

Categories
A List Apart Advocacy art direction business CSS Design development Fonts Happy Cog™ HTML Ideas industry Interviews Layout Publications Publishing Standards State of the Web Typography Usability User Experience UX Web Design Web Standards Working XHTML

ALA 282: Life After Georgia

In Issue No. 282 of A List Apart, For People Who Make Websites:

  • Can we finally get real type on the web?
  • Does beauty in design have a benefit besides aesthetic pleasure?

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

by DAVID BERLOW, JEFFREY ZELDMAN

Is there life after Georgia? We ask David Berlow, co-founder of The Font Bureau, Inc, and the ?rst TrueType type designer, how type designers and web designers can work together to resolve licensing and technology issues that stand between us and real fonts on the web.

In Defense of Eye Candy

by STEPHEN P. ANDERSON

Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

[tags]alistapart, type, typography, realtype, truetype, CSS, beauty, design, aesthetics[/tags]

Categories
art direction books Community content creativity CSS Design downloads Free Happy Cog™ HTML Ideas industry Information architecture jobs Layout Publications Publishing reprints State of the Web The Essentials The Profession Tools Typography Usability User Experience UX W3C Web Design Web Standards Websites Working writing Zeldman

“Taking Your Talent to the Web” is now a free downloadable book

Taking Your Talent To The Web, a guide for the transitioning designer, by L. Jeffrey Zeldman. Hand model: Tim Brown.

RATED FIVE STARS at Amazon.com since the day it was published, Taking Your Talent to the Web (PDF) is now a free downloadable book from zeldman.com:

I wrote this book in 2001 for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.

Here we are in 2009, and print designers and art directors are scrambling to move into web and interaction design.

The dot-com crash killed this book. Now it lives again. While browser references and modem speeds may reek of 2001, much of the advice about transitioning to the web still holds true.

It’s yours. Enjoy.

Oh, yes, here’s that ancient Amazon page.


Short Link

Update – now with bookmarks

Attention, K-Mart shoppers. The PDF now includes proper Acrobat bookmarks, courtesy of Robert Black. Thanks, Robert!

Categories
architecture Blogs and Blogging business Design findability HTML Ideas industry Information architecture links Publications Publishing Respect Standards State of the Web twitter Usability User Experience UX Web Design Web Standards Websites

Tiny URL, Big Trouble

Joshua Schachter explains how URL shorteners like TinyURL, bit.ly, etc., originally created to prevent long URLs from breaking in 1990s e-mail clients, and now used primarily as a means of monetizing someone else’s content, are bad:

  • They “add another layer of indirection to an already creaky system, [making what] used to be transparent … opaque,” slowing down web use by adding needless lookups, and potentially disguising spam.
  • Shorteners “steal search juice” from the original publishers. (For example, with the Digg bar and Digg short URL, your content makes Digg more valuable and your site less valuable; the more content you create, the richer you make Digg.)
  • “A new and potentially unreliable middleman now sits between the link and its destination. And the long-term archivability of the hyperlink now depends on the health of a third party.”

And more. Via Merlin Mann.

Anyone who creates web content should read Joshua’s post. I’m sold and will dial way back on my use of the zeldman.com short URL. The question remains, what to do when you need to paste a long, cumbersome link into a 140-character service like Twitter. (If you do nothing, Twitter itself will shorten the link via TinyURL.)

[tags]URL, URLshortener, JoshuaSchachter, redirect, abstraction, Digg, findability, searchjuice, SEO[/tags]