Archive for the ‘HTML’ Category

File Under: HTML, HTML5, Web Standards

Meet HTML, The Spec Formerly Known as HTML5

It won’t be an unpronounceable symbol, but HTML5 is getting a Prince-style name change. From here on out HTML5 will simply be HTML — according to the WHATWG anyway.

Just a day after the W3C unveiled its new HTML5 logo, the Web Hypertext Application Technology Working Group (WHATWG) has announced that it will drop the term “HTML5,” stop the versioning of HTML altogether and instead treat the evolving specification as a “living standard.”

While eliminating the version number from HTML has been part of the WHATWG’s plan from the beginning, the timing of the change is clearly related to the W3C’s attempt to embrace the term “HTML5.” The W3C recently showed off a new HTML5 logo, but the accompanying FAQ used the term HTML5 to cover everything from the actual spec to only tangentially related tools like CSS 3, WOFF and SVG. Many developers saw the W3C’s nebulous use of the term HTML5 as a sign that the term had become, like “AJAX,” just another marketing buzzword.

The W3C has since rewritten its FAQ to clarify and more sharply define just what HTML5 is and is not, but before that happened Ian Hickson, the WHATWG’s editor, announced that the WHATWG was renaming its spec to just HTML. Hickson says the WHATWG was “going to change the name last year but ended up deciding to wait a bit since people still used the term ‘HTML5′ a lot.”

Hickson then makes a not-so-subtle jab at the W3C, saying HTML5 “is now basically being used to mean anything Web-standards-related, so it’s time to move on!”

The W3C has long had a tenuous relationship with the WHATWG. Technically the W3C is the standards body charged with publishing the HTML spec. The WHATWG — a consortium of browser makers — grew out of the W3C’s neglect of HTML and its misguided decision to pursue XHTML 2. Now that both groups are working on the same spec, in theory, their goals are the same. In practice, however, the two groups often butt heads. In other words, just because the WHATWG has decided to abandon the term HTML5, don’t expect it to disappear overnight.

The W3C will continue to work toward “snapshots” that reflect stable milestones of the ever-changing WHATWG version of the spec. For now at least, that means the term HTML5 will be alive and well at the W3C, as the group works through its standard practice of issuing working drafts, holding last calls on changes and finally publishing the spec as a “recommendation.”

Since browser makers have long been well ahead of the W3C when it comes to implementing the latest and greatest parts of the HTML5 spec, they will likely focus on the WHATWG’s HTML spec, which will, like Google’s Chrome browser, follow a “rolling release” schedule.

No doubt the media and marketers will continue to use HTML5 as a buzzword that means far more than just the spec, but even that’s not always a bad thing. There’s no doubt that Apple, Google, the New York Times and everyone else who’s used HTML5 as an analog for the New Shiny has helped HTML5 — and all the other tools it’s come to stand for — gain momentum. As web developer Jeff Croft puts it, “sometimes we just need a word to rally behind.”

While not everyone understands the nuances of what’s HTML5, what’s CSS 3 and what’s just JavaScript, that doesn’t change the fact that everyone is excited about building a better web and that is exactly what HTML(5) is designed to do.

See Also:

File Under: CSS, HTML, Web Standards

The Solar System, Rendered in CSS and HTML

A web developer named Alex Giron has created a working model of the solar system using only web standards.

It’s fully animated — though Alex takes advantage of some new CSS 3 features (border-radius, transforms and animations) and utilizes the -webkit prefix, so you’ll need to view it in Safari or Chrome to see the planets move around the sun.

Firefox and Opera users won’t see the animations, just a static CSS layout. But the hover events work, so you can mouse over each planet and learn the story of each celestial body. And yes, he included Pluto.

Here’s Alex’s blog post that includes a walk-through of the code.

Bonus: Alex’s screenshot of the same page in IE.

[Via kottke]

See Also:

File Under: HTML, UI/UX

Using ‘Mad Libs’ to Make Web Forms More Fun

In an ideal world, the web would have a built-in identity solutions — websites would automatically know who you are when you arrive. In the real world, however, almost every website has its own sign up and authentication process, endless forms enticing you to enter your name, your e-mail, pick a password… yawn, what now?

It’s repetitive, boring and makes many of your users click away in disgust. But what if you turned the sign up form into a narrative, something a bit like a Mad Lib?

That’s exactly what web developer Jeremy Keith has done for his podcasting site, Huffduffer. Instead of a list of blank boxes, Huffduffer’s sign up form looks like this:

All the usual behaviors of a web form are still there. You can tab between fields, your password is still masked and errors are highlighted if there are any. The difference is the in the presentation. It doesn’t look like some kind of online test.

In short, Huffduffer’s sign up for is refreshing, but does it work? Well, Luke Wroblewski, Chief Design Architect at Yahoo and author of the book Web Form Design, had the same question and, with some help from the team at Vast.com, ran some tests.

The designers at Vast redesigned their response forms along the lines of Huffduffer’s form and found that, as Wroblewski reports, “Mad Libs style forms increased conversion across the board by 25-40 percent.”

The forms are live on both Vast and the Kelley Blue Book website if you’d like to experience them yourself. Wroblewski has a few minor caveats about the increased number of users — be sure to check out his post for the complete details — but at least in some cases it would seem that a narrative flow trumps the boring old form.

See Also:

File Under: HTML, Multimedia

Web Graphics for Beginners

As an autistic, purebred Himalayan runt, my cat Rufo poses a triple threat of cuteness the whole world can enjoy. Sound like the everyday delusions of an average cat owner? Perhaps. But if Rufo is indeed a superstar dying to be born, then it’s my responsibility to help him, via the Internet. After all, what better use of the Web than as cat promotion?

At first, Rufo’s site was nothing more than a few paragraphs describing his unique kitty allure. Although a good start, mere words failed to convey the complete Rufo experience. For that, I needed graphics. Not just photographs – if Rufo was to be taken seriously as a cat celebrity, his Web presence had to look fun and professional. So I needed other collateral as well, like a logo, page banners, and graphic navigation.

My initial attempts were less than flattering. Pictures had blurry fur, the colors were pale and washed out, and the images took forever to download. So I taught myself how to create the kind of fast, sleek, and professional images that Rufo deserves. And now I’m going to share that hard-won knowledge with you. In the pages that follow, you’ll find tips, hints, and links to off-site resources or more advanced Webmonkey tutorials – everything an aspiring graphics designer needs to transform a texty site into a graphic sensation.

We begin at the very beginning: Getting images into the computer. For Rufo’s site, this meant importing photographs and finding usable graphics.

Continue Reading “Web Graphics for Beginners” »
File Under: HTML

Position Text and Images With Div Tags

Are you sick of putting align in every tag just to get a page to lay out properly? And how do you feel about table hacks for positioning images? I thought so. Well, never fear – the <div> tag is here.

Although it’s been around since HTML 3.0, <div> didn’t really catch on until CSS-based layouts became the rage du jour. It won’t solve all your problems, but it works for formatting large blocks of text, images, and just about anything else that has an HTML tag around it.


Continue Reading “Position Text and Images With Div Tags” »