Finally, cross-browser visual control over forms.

Now we have something else to be thankful for. Nathan Smith of Sonspring has created a library that gives designers and developers “some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system.” Smith calls his new library Formalize CSS:

I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag.

For more, including demos, options, screenshots, thanks, and the library itself, read Smith’s write-up at SonSpring | Formalize CSS. Hat tip and happy Thanksgiving to my good friend Aaron Gustafson for sharing this gem.

A Book Apart No. 2: CSS3 For Web Designers, by Dan Cederholm

CSS3 For Web Designers by Dan Cederholm

DAN CEDERHOLM IS THE FIRST front-end developer I’ve ever worked with who got everything right. Typically when one person is designing in Photoshop and another is converting that design to code, the coder makes at least one or two decisions that the designer will feel moved to correct. For instance, the designer may have intended a margin of 26px, but the coder writes 25px. Or the designer establishes a certain distance between subhead and paragraph, then accidentally changes that distance in a single instance during a Photoshop copy-and-paste error, and the coder slavishly copies the mistake. No front-end developer, however good, reads minds, right?

Wrong. Dan Cederholm reads minds. When we have hired him to code other people’s visual designs, he gets everything right, including the parts the designer got wrong. Maybe that’s because Dan is not only a front-end developer, he is also an extremely gifted designer with a strong personal vision and style, which you can see by visiting work.simplebits.com. Not only that, Dan invariably translates a designer’s fixed Photoshop dimensions into code that is flexible, accessible, and bulletproof. That’s only to be expected, of course, as Dan is a leading and pioneering advocate of accessible, standards-based design and the author who coined the phrase “bulletproof web design.”

Designer, coder, pioneer. That would be plenty of achievement for anyone, but it happens that Dan is also a born teacher and a terrifically funny guy, whose deadpan delivery makes Steven Wright look giddy by comparison. Dan speaks all over America and the world, helping web designers improve their craft, and he not only educates, he kills.

And that, my friends, is why we’ve asked him to be our (and your) guide to CSS3. To be sure, there are (a few) other high-end CSS gurus who write beautifully and wittily, and whom we might have approached. But most are not designers. Dan is, to his core. He dreams design, bleeds design, and even gave the world a new way to share design.

You couldn’t ask for a smarter, more design-focused, more detail-obsessed guide to the smoking hot newness and conceptual and browser challenges of CSS3. So sit back, relax, and enjoy the trip:

Awesome web apps in 10k or less

The 10K Apart Challenge had a simple premise: Could you build a complete web application using less than 10 kilobytes? … A joint effort between An Event Apart and MIX Online, the 10K Apart reaped 367 web applications in 28 days—everything from casual games to RIAs—that demonstrate, even with their tiny footprints, what is truly possible with modern [web] standards.

Read about the winning entries: 10K Apart – IEBlog.

Blue Beanie Day Haiku Contest – Win Prizes from Peachpit and A Book Apart

ATTENTION, web design geeks, contest fans, standards freaks, HTML5ophiles, CSSistas, grammarians, bookworms, UXers, designers, developers, and budding Haikuists. Can you do this?

Do not tell me I
Am source of your browser woes.
Template validates.

Write a web standards haiku (like that one), and post it on Twitter with the hashtag #bbd4 between now and November 30th—which happens to be the fourth international Blue Beanie Day in support of Web Standards.

Winning haikus will receive free books from Peachpit/New Riders (“Voices That Matter”) and A Book Apart.

Ethan Marcotte, co-author of Designing With Web Standards 3rd Edition and I will determine the winners.

Enter as many haikus as you like. Sorry, only one winning entry per person. Now get out there and haiku your heart out!

See you on Blue Beanie Day.

P.S. An ePub version of Designing With Web Standards 3rd Edition is coming soon to a virtual bookstore near you. Watch this space.

BBEdit Revised, Reviewed.


Jeffrey Zeldman Presents

I RECENTLY ATE dinner with a friend I hadn’t seen in 20 years. If you are in a position to do likewise, I highly recommend the experience. So much had changed, yet so much was still wonderfully the same. We were still the same joyously creative young fools, yet time had seasoned us. No longer poking the world with sharp sticks, we had found a place in it. I was pleasantly reminded of this existentially thrilling encounter while opening a pre-release version Bare Bones Software’s BBEdit 9.6 update—released to the public as of 12:19 EDT today.

A beloved and venerable HTML and text editor for Macintosh, BBEdit is tailored to the needs of web developers and designers who write their own code. Its no-frills interface consists of a document window in which you write your code; a side drawer that lists all pages you’re working on, enabling you to navigate between them; a stack of buttons (many with drop-downs) you can push to perform tasks like choosing and inserting a DOCTYPE, wrapping chunks of copy in paragraph tags, checking syntax and links for errors, and more; and a report window where you can view your test results and correct your errors.

Previous versions of BBEdit were updated with the precepts of Designing With Web Standards in mind, and the current version takes some of its feature cues from Jeremy Keith’s HTML5 For Web Designers. (When I say the software takes its cues from Mr Keith’s book, I mean that literally; Bare Bones Software head Rich Siegel and his team used HTML5 For Web Designers to help develop some of their testing suites.)

Given these antecedents, it’s no surprise that the new version adds support for HTML5, including published element lists from WHATWG and W3C; CSS3 properties, including vendor-specific properties for Mozilla, Safari/WebKit, and Opera browsers; a new contextual code-hinting feature tied to your chosen doctype that includes as-you-type popups for allowed elements, attributes, and (in CSS documents) style properties; and Bare Bones’s own offline validator (HTML 3.2 through HTML5, XHTML inclusive), baked right into BBEdit.

Using BBEdit 9.6 this morning, I was able to quickly update my site from XHTML 1.0 to HTML5. The syntax checker enabled me to use my preferred coding style (i.e. XHTML style) and the product identified outmoded attributes (“language=JavaScript”) and elements (“rev”), enabling me to correct them right in the error report window. It took no time at all.

BBEdit 9.6 also found the errors in WordPress plug-ins like fbLike Button and TweetMeme Retweet Button, enabling me to make an informed decision to stop using the former plug-in and helping me edit the PHP files of the latter plug-in so that it now validates here.

BBEdit 9.6 also offers increased performance for several common
operations, including search, and includes several enhancements and
refinements, plus fixes for reported issues. Detailed information on
all of the changes and improvements in BBEdit 9.6 can be found on the Release Notes page.

After using the new version for two days, I am switching back to BBEdit as my full-time coding platform.

BBEdit 9.6 is available free of charge to all registered BBEdit 9 customers from the Bare Bones Software website on the BBEdit Updates page. For more information, or to download a fully functional demo, visit Bare Bones Software’s site.

The future of web standards

Jeffrey Zeldman on the future of web standards.

“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?”

The Future of Web Standards by Jeffrey Zeldman

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.

See also: I Guest-Edit .net magazine.

ALA 314: Web Forms Magic

Issue No. 314 of A List Apart For People Who Make Websites is all about your form.

Ryan Seddon shows how to reduce errors and guide users to success via new methods made possible by HTML5 and CSS3. Harness HTML5 form input types and attributes to set validation constraints to check user input, and use CSS3’s new UI pseudo-classes to style validation states, making form completion quick and effortless.

And Luke Wroblewski explains how accordion forms increase completion rates and user happiness by dynamically showing and hiding sections of related questions as people complete the form—allowing them to focus on what matters and finish quickly. Learn how your smallest design decisions affect completion speed, which design choices make these innovative forms feel familiar and easy—and which make them feel foreign and complex, leading people to make errors.

Illustration by Kevin Cornell for A List Apart Magazine.

I guest-edit .net magazine

Web 2.1. Zeldman guest-edits .net magazine.

A List Apart and .net magazine have long admired each other. So when .net editor Dan Oliver did me the great honor of asking if I wished to guest edit an issue, I saluted smartly. The result is now arriving in subscriber post boxes and will soon flood Her Majesty’s newsstands.

In .net magazine Issue No. 206, on sale 17th August in UK (and next month in the US, where it goes by the name “Practical Web Design”), we examine how new standards like CSS3 and HTML5, new devices like iPhone and Droid, and maturing UX disciplines like content strategy are converging to create new opportunities for web designers and the web users we serve:

  • Exult as Luke Wroblewski shows how the explosive growth of mobile lets us stop bowing to committees and refocus on features customers need.
  • Marvel as Ethan Marcotte explains how fluid grids, flexible images, and CSS3 media queries help us create precise yet context-sensitive layouts that change to fit the device and screen on which they’re viewed.
  • Delight as Kristina Halvorson tells how to achieve better design through coherent content wrangling.
  • Thrill as Andy Hume shows how to sell wary clients on cutting-edge design methods never before possible.
  • Geek out as Tim Van Damme shows how progressive enhancement and CSS3 make for sexy experiences in today’s most capable browsers—and damned fine experiences in those that are less web-standards-savvy.

You can also read my article, which asks the musical question:

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?

Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!


Photo by Daniel Byrne for .net magazine. All rights reserved.

HTML5, CSS3 default templates

Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.