Categories
Announcements Applications Code Design development editorial Education HTML HTML5 industry Jeremy Keith Publications Publishing Web Design Web Design History Web Standards Zeldman

HTML5 For Web Designers

HTML5 For Web Designers, by Jeremy Keith.

WHEN MANDY BROWN, Jason Santa Maria and I formed A Book Apart, one topic burned uppermost in our minds, and there was only one author for
the job.

Nothing else, not even “real fonts” or CSS3, has stirred the standards-based design community like the imminent arrival of HTML5. Born out of dissatisfaction with the pacing and politics of the W3C, and conceived for a web of applications (not just documents), this new edition of the web’s lingua franca has in equal measure excited, angered, and confused the web design community.

HTML5 For Web Designers

Win free copies of HTML5 For Web Designers on Gowalla!

Just as he did with the DOM and JavaScript, Jeremy Keith has a unique ability to illuminate HTML5 and cut straight to what matters to accessible, standards-based designer-developers. And he does it in this book, using only as many words and pictures as are needed.

The Big Web Show

Watch Jeremy Keith discuss HTML5 with Dan Benjamin and me live on The Big Web Show this Thursday at 1:00 PM Eastern.

There are other books about HTML5, and there will be many more. There will be 500 page technical books for application developers, whose needs drove much of HTML5’s development. There will be even longer secret books for browser makers, addressing technical challenges that you and I are blessed never to need to think about.

But this is a book for you—you who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it your user guide to HTML5. Its goal—one it will share with every title in the forthcoming A Book Apart catalog—is to shed clear light on a tricky subject, and do it fast, so you can get back to work.


4 May 2010
Jeffrey Zeldman, Publisher
A Book Apart “for people who make websites”
In Association with A List Apart
An imprint of Happy Cog

The present-day content producer refuses to die.

And don’t miss…

Categories
HTML HTML5 Markup

Link Relations in HTML5

Mark Pilgrim has turned the WHAT Working Group’s blog into a tool of genuine outreach and tremendously helpful (even entertaining) information. His “Road to HTML5” column “explain[s] … new elements, attributes, and other features in the upcoming HTML 5 specification” with frank clarity and developer-focused practicality.

The April 17th installment all about link relations. And while that may sound confusing, boring, or pedantic, it is actually clear, fascinating, and quite useful. If you’ve dabbled in Microformats or used rel= in your header, you’ll recognize the material and appreciate the way HTML5 is attempting to bring order to it.

And speaking of HTML5, don’t just eat the sausage, help make it. Although not a democracy, the WHAT WG is the most open standards-making activity seen on the web. To participate (even just by following along), join the mailing list.


Categories
Apple Applications apps automattic Compatibility Design Flash HTML5

Web charts with HTML5 + Flash

ZingChart hopes to end the war between HTML5 and Flash in web-based charting:

Today we launched the first charting library that renders charts and graphs in both HTML5 <canvas> and Flash. Rather than join the Flash vs. <canvas> debate, we built a version that renders charts in both frameworks. With the recent launch of the iPad, we hope ZingChart Flash + HTML5 <canvas> helps the growing data visualization community focus on building great visualizations rather than worrying about compatibility.

For you visual learners and tinkerers, here’s the demo:

www.zingchart.com/flash-and-html5-canvas/

via ZingChart.

Next question: How accessible is it?


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
A List Apart Design E-Books Flash Formats HTML HTML5 ipad Standards State of the Web XHTML

E-books, Flash, and Standards

In Issue No. 302 of A List Apart for people who make websites, Joe Clark explains what E-book designers can learn from 10 years of standards-based web design, and Daniel Mall tells designers what they can do besides bicker over formats.

Web Standards for E-books

by Joe Clark

E-books aren’t going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That’s great news for publishers and standards-aware web designers. Great news for readers, too. Our favorite genius, Joe Clark, explains the simple why and how.

Flash and Standards: The Cold War of the Web

by Daniel Mall

You’ve probably heard that Apple recently released the iPad. The absence of Flash Player on the device seems to have awakened the HTML5 vs. Flash debate. Apparently, it’s the final nail in the coffin for Flash. Either that, or the HTML5 community is overhyping its still nascent markup language update. The arguments run wide, strong, and legitimate on both sides. Yet both sides might also be wrong. Designer/developer Dan Mall is equally adept at web standards and Flash; what matters, he says, isn’t technology, but people.

Illustration by Kevin Cornell for A List Apart.

Categories
Accessibility Adobe Advocacy Apple Design Flash Formats HTML HTML5 ipad Web Design Web Design History Web Standards

Betting on the web

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.

Related posts, on the off-chance you missed them:


Categories
Accessibility Adobe Advocacy Apple Design HTML HTML5 ipad The Essentials

Flash, iPad, Standards

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. Additional layers of Flash UX can then be optionally added in, just as, in proper, accessible, standards-based development, JavaScript UX enhancements are added only after we verify that the site works without them.

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.

Whither, plug-ins?

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.


Discussion has moved to a new thread.


Categories
An Event Apart Announcements Appearances CSS Happy Cog™ HTML5 Web Design Web Standards webtype

Three Days in Seattle

Dan Cederholm holds forth on the virtues of coffee and CSS3 at An Event Apart.

Three, count ’em, three days of design, code, and content. That’s what we’ve got lined up for you in beautiful Seattle, Washington. Including a special one-day workshop on HTML5 and CSS3, led by Jeremy Keith and Dan Cederholm (pictured above, extolling the virtues of caffeine and CSS).

The complete schedule for An Event Apart Seattle 2010—including A Day Apart with Jeremy Keith and Dan Cederholm—is now available online for your listening and dancing pleasure.

Photo: Warren Parsons.


Categories
Blue Beanie Day HTML HTML5 Standards Web Design Web Design History Web Standards XHTML Zeldman

A Zing Too Far

Fred Blasdel said:

You’ll always draw ire for having stumbled into being the Chief of the cargo-cult side of Web Standards, with so-called ‘XHTML’ as the false idol. You did a lot of good, but not without ambiguating the nomenclature with a lot of feel-good bullshit.

You often find yourself as a mediator between designery folks (who you have a strong grasp over) and technical implementors (who will always hold a grudge against you for muddying the discourse). Asking people to wear blue toques does not particularly affect this balance.

“Cargo cult.” I love that phrase. But I’m not sure I agree with your assessment.

XHTML, with its clearer and stricter rules, came out just as many of us were rediscovering semantic markup and learning of its rich value in promoting content. It wasn’t a coincidence that we took this W3C specification seriously and helped promote it to our readers, colleagues, etc. The stricter, clearer rules of XHTML 1.0 helped enforce a new mindset among web designers and developers, who had previously viewed HTML as an “anything goes” medium (because browsers treated it that way, still do, and quite probably always will; indeed HTML5 codifies this, and that’s not necessarily a bad thing).

Future versions of XHTML became a dead-end not because there was no value in strict, semantic, structural markup, but because the people charged with moving XHTML forward lost touch with reality and with developers. This is why HTML5 was born.

That’s history and it’s human behavior. But those subsequent twists and turns in the story don’t mean that standardistas who supported XHTML 1.0 (or still do) and who used it as a teaching tool when explaining semantic markup to their colleagues were wrong or misguided to do so.

That some technical people in the standards community think we were wrong is known, but their belief does not make it so.

That a handful of those technical people express their belief loudly, rudely, and with belligerent and unconcealed schadenfreude does not make their point of view true or persuasive to the rest of us. It just makes them look like the close-minded, socially maladroit, too-early-toilet-trained, tiny-all-male-world-inhabiting pinheads they are.

Short URL: zeldman.com/?p=3108

Categories
Design DWWS HTML5 Interviews Zeldman

Beep ’n Me, Live

Join Ethan Marcotte and me tonight at 8:00 PM EDT on the CreativeXpert Live Show, an interview and podcast with live listener call-in via Skype and Twitter.

We’ll discuss the newly released third edition of Designing with Web Standards and such topics from its pages as selling standards to reluctant clients and bosses, changing what support for IE6 means, understanding and transitioning to HTML5, neato CSS3-based design techniques you can use right now, and more.

Tune in, call in, rock on.

Short URL: zeldman.com/?p=2810

Categories
3e books CSS Design development DOM DWWS HTML5 javascript Publications Real type on the web Standards State of the Web Typography Usability User Experience Web Design Web Standards webfonts XHTML Zeldman

Am I Blue

Zeldman

Our classic orange avatar has turned blue to celebrate the release of Designing With Web Standards 3rd Edition by Jeffrey Zeldman with Ethan Marcotte. This substantial revision to the foundational web standards text will be in bookstores across the U.S. on October 19, 2009, with international stores to follow. Save 37% off the list price when you buy it from Amazon.com.

Short URL: zeldman.com/?p=2730

Categories
A List Apart An Event Apart Appearances architecture art direction Authoring Browsers bugs Career Chicago cities Code Community Compatibility conferences content content strategy creativity CSS Design development DOM downloads editorial Education engagement eric meyer events flickr Fonts Formats glamorous Happy Cog™ HTML HTML5 industry Information architecture Jason Santa Maria javascript Markup photography Real type on the web Scripting Search social networking speaking spec Standards State of the Web

Chicago Deep Dish

Dan Cederholm and Eric Meyer at An Event Apart Chicago 2009. Photo by John Morrison.

For those who couldn’t be there, and for those who were there and seek to savor the memories, here is An Event Apart Chicago, all wrapped up in a pretty bow:

AEA Chicago – official photo set
By John Morrison, subism studios llc. See also (and contribute to) An Event Apart Chicago 2009 Pool, a user group on Flickr.
A Feed Apart Chicago
Live tweeting from the show, captured forever and still being updated. Includes complete blow-by-blow from Whitney Hess.
Luke W’s Notes on the Show
Smart note-taking by Luke Wroblewski, design lead for Yahoo!, frequent AEA speaker, and author of Web Form Design: Filling in the Blanks (Rosenfeld Media, 2008):

  1. Jeffrey Zeldman: A Site Redesign
  2. Jason Santa Maria: Thinking Small
  3. Kristina Halvorson: Content First
  4. Dan Brown: Concept Models -A Tool for Planning Websites
  5. Whitney Hess: DIY UX -Give Your Users an Upgrade
  6. Andy Clarke: Walls Come Tumbling Down
  7. Eric Meyer: JavaScript Will Save Us All (not captured)
  8. Aaron Gustafson: Using CSS3 Today with eCSStender (not captured)
  9. Simon Willison: Building Things Fast
  10. Luke Wroblewski: Web Form Design in Action (download slides)
  11. Dan Rubin: Designing Virtual Realism
  12. Dan Cederholm: Progressive Enrichment With CSS3 (not captured)
  13. Three years of An Event Apart Presentations

Note: Comment posting here is a bit wonky at the moment. We are investigating the cause. Normal commenting has been restored. Thank you, Noel Jackson.

Short URL: zeldman.com/?p=2695

Categories
editorial Education HTML HTML5 Web Design History Web Standards

HTML5 Redefines Footer

It seems like only yesterday that the HTML5 Super Friends asked the HTML5 working groups to rethink footer’s content model to avoid web developer misuse and frustration. Okay, it wasn’t yesterday, it was Monday. Close enough. Today comes word that footer is indeed being redefined as we requested. This is a wonderful usability improvement to HTML5, and we salute the working group(s) for listening and acting.

Categories
editorial Education HTML HTML5 Web Design History Web Standards

HTML5 For Smarties

The HTML5 specification runs on for over 900 pages, and much of what it covers, while vital to browser makers, is meaningless to people who create websites. If thousands of irrelevant details in the HTML5 spec have you crossing your eyes and crying for Mama, Michael™ Smith’s HTML 5: The Markup Language is just what the HTML5 doctor ordered: lean, clean, and content-author-focused. Until there’s a plain-language HTML5 Pocket Guide, Smith’s edited presentation of the spec will do. (It’s also available in a single page format.)

ShortURL: zeldman.com/?p=2561

Categories
Design HTML HTML5 spec Standards State of the Web Web Design Web Design History Web Standards

Loving HTML5

Half of standards making is minutia; the other half is politics. Rightly or wrongly, I’ve long suspected that Atom was born, not of necessity, but because of conflicts between the XML crowd and the founders of RSS. Likewise, rightly or wrongly, I reckoned HTML5 was at least partly Hixie’s revenge against XHTML served as text/html.

And then a funny thing happened. Some friends and I gathered at Happy Cog’s New York studio to hash out the pros and cons of HTML5 from the perspective of semantic-markup-oriented web designers (as opposed to the equally valid perspectives of browser engineers and web application developers—the two perspectives that have primarily driven the creation of HTML 5).

Our first task was to come to a shared understanding of the spec. During the two days and nights we spent poring over new and changed semantic elements, we discovered that many things we had previously considered serious problems were fixable issues related to language.

Easy language problems

Some of these language problems are trivial indeed. For instance, on both the WHATWG and W3C sites, the specification is sometimes called “HTML 5” (with a space) and sometimes called “HTML5” (with no space). A standard should have a standard name. (Informed of this problem, Hixie has removed the space everywhere in the WHATWG version of the spec.)

Likewise, as an end-user, I found it confusing to be told that there is an “HTML5 serialization of HTML 5,” let alone an “XHTML 5 version of HTML5.” I requested that the two serializations be referred to as “HTML” and “XHTML”—emphasizing the distinction between the two kinds of syntax rather than drawing needless attention to version numbers. (Again, Hixie promptly updated the spec.)

Names and expectations

Some language problems are tougher—but still eminently fixable, because they are language problems that mar the presentation of good ideas, not bad ideas that require rethinking.

For example, in order to choose suitable names for the new semantic elements in HTML 5, Hixie analyzed classnames on thousands of websites to see what web designers and developers were already doing. If many designers and developers use classnames like “header” and “footer” to contain certain kinds of content, then HTML 5 should use these labels, too, Hixie and his colleagues reasoned. Doing so would make the purpose of the new elements intuitively obvious to working web professionals, removing the learning curve and encouraging proper element use from the get-go.

It’s a beautiful theory that comes straight out of Bert Bos’s W3C Design Principles. There’s just one problem. Header, and especially footer, behave differently from what their names will lead web designers and developers to expect. Developers will use it for the footer of the page—not for the footer of each section. And they will be frustrated that the footer in HTML5 forbids navigation links. After all, the footer at the bottom of web pages almost always includes navigation links.

To avoid misuse and frustration, the content model of footer should change to match that of header, so that it may be used concurrently as a template level element (the expected use) and a sub-division of section (the new use). Alternately, the element’s name should be changed (to almost anything but “footer”). Expanding the content model is clearly the better choice.

For the love of markup

HTML5 is unusual in many ways. Chiefly, it is the first HTML created in the time of web applications. It is also the first to be initiated outside the W3C (although it now develops there in parallel).

Not surprisingly in a specification that goes on for 900 pages, there are at least a dozen places in HTML5 where a thoughtful standardista might request clarification, suggest a change, or both. My friends and I have taken a stab at this ourselves, and will soon publish our short list of recommendations and requests for clarification.

Nevertheless, the more I study the direction HTML5 is taking, the better I like it. In the words of the HTML5 Super Friends, “Its introduction of a limited set of additional semantic elements, its instructions on how to handle failure, and its integration of application development tools hold the promise of richer and more consistent user experiences, faster prototyping, and increased human and machine semantics.”

Update

[4:47 PM EST] Calling all cars! The HTML5 Super Friends declaration of support is now live, as is the Super Friends Guide to HTML5 Hiccups (i.e. our technical recommendations).

ShortURL: zeldman.com/?p=2438