How to use HTML5 in your client work right now | HTML5 Doctor

I was presenting some designs to a client a couple of weeks ago when this question came up: “Will you be building this site with HTML5 in mind?” Naturally, I was happy to answer that one! It went a little like this:

Me:

We’ll build the whole thing with HTML5 if that’s okay with you guys. One question though: do you know what percentage of your visitors use Internet Explorer without JavaScript to view your site?

Client:

Erm, I don’t really know, and I wouldn’t want to lose those visitors. Maybe we’d better not build it in HTML5 after all.

Me:

Whoa there! No need to be so hasty. We don’t have to use HTML5 exclusively, but we can still use it to develop specific parts of the site. How does that sound?

Client:

Great! Let’s do it!

Which bits of HTML5 can I use right now?

Rich: Lots of them! Here’s a short list of cross-browser (including IE) compatible techniques that you can use today:

For a clearer idea of what is or isn’t cross-browser compatible, check out these sites from Molly Holzschlag and Alex Deveria.

Remy: Assess the technology and fit it to your project. If I have a lot of IE6 users, I avoid using PNGs. If I have a lot of IE users with JavaScript disabled, I give them reduced markup as Rich pointed out earlier (e.g., simplified doctype, <script>, and <style> elements) but avoid using new block-level elements like <section>. If they have a very interactive product that relies on JavaScript anyway, I don’t have any qualms using JavaScript to help IE style the new elements.

Also, I’m going to detect Web Forms 2.0 and other HTML5-type support using something like Modernizr, and then fall back on “traditional” JavaScript for things like date pickers if they’re not available natively.

What are the benefits of using HTML5 now?

Rich: Here are several, in no particular order:

  • Cleaner markup
  • Additional semantics of new elements like <header>, <nav>, and <time>
  • New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms
  • Staying ahead of the curve before HTML5 becomes the mainstream markup language. Use this as a selling point when talking with your clients

What are the downsides to using HTML5 now?

Rich: Obviously, you make some trade-offs when using HTML5:

  • The spec isn’t finished and is likely to change
  • Not everything works in every browser (but you could say the same about CSS, right?)

Should I tell my clients I’m using HTML5?

Remy: No. When I go to buy a car, I don’t ask about the parts in the engine. I just want to know what it looks like, how much it costs, its level of quality, features, etc. Sure, some people are mechanics, but most aren’t.

Clients aren’t developers, so they shouldn’t influence your decision on what technology to use. When they ask “What technology are you going to use?” or “Should we be using HTML5?”, we, as developers, should tell them:

It depends on your product and your audience. Do you have any usage statistics that I can see?

Rich: Yes, you should. If a client doesn’t want to use HTML5 for a project, simply explain the benefits mentioned above. Point out that their site will be built using an up-to-date markup language, so it’s less likely to need updating in a few years. It’s “future-proofed”, and it will save them money in the long run.

What if my client mentions that “HTML5 won’t be finished until 2022″?

Rich: Politely inform them that it’ll be closer to 2012 (and some might argue even sooner). Tell them you’re building this site with an eye on the future and that it will help them in the long run. In my opinion, it’s only fair to inform your client that you’re using HTML5 (depending on their position and level of understanding), though in some cases it won’t matter because they’re only concerned with how the site looks in the browser they use.

Remy: My opinion is that you shouldn’t be discussing with the client which technology to use — only (perhaps) providing justification as to why you’ve used a particular technology. You can assure them that SEO and compatibility won’t suffer, but just as you don’t offer accessibility as an optional item on the menu (well, I certainly hope you don’t), you shouldn’t offer HTML4, XHTML, or HTML5 as a menu item either.

Will using HTML5 negatively affect my clients’ search engine rankings?

Rich: No. Google is properly indexing sites built with HTML5. Take our site for example — it’s doing just fine. ;)

Have you built any client sites with HTML5?

Rich & Remy: We’ve both started using things like the simplified doctype and reduced markup in our client work. We’ve also used HTML5 on a lot of professional projects where we’re our own clients, such as Speak the Web and the 2009 Full Frontal JavaScript Conference.

We haven’t used it as much for full-fledged HTML5 apps that use all the new markup and new APIs – but rest assured, there is work in the pipeline. :)

Rich: I’ve also recently released an events site for the agency I work for that uses new HTML5 elements.

So should I be using HTML5 in my projects right now?

Well, as with all projects, it depends on the client (are they marketing directors or IT directors? internal or external?), the budget, and the timescale, among many other things.

To wrap up, we’ll leave you with our checklist for building client sites with HTML5:

  • Use the HTML5 doctype and character set.
  • Use the simplified <script> and <style> elements.
  • Use semantic class names that are representative of the new HTML5 elements. See @boblet‘s cheat sheet for more on this.
  • Use block level links.
  • Use the new form attributes and input types.
  • Use the new <audio> and <video> media elements (but make sure they degrade gracefully).
  • Plug the gaps with something like Modernizr.

If you think there’s anything more that we could be doing today, please let us know. I’m also keen to find out who is using HTML5 on client sites today. I’ve seen quite a few on the gallery, but it would be great to hear some arguments for and against building clients’ sites with HTML5 now.

24 comments on “How to use HTML5 in your client work right now | HTML5 Doctor

  1. Extremely revealing appreciate it, It looks like your current readers will likely want way more content of this nature keep up the good content.

  2. I was wondering if you ever thought of changing the page layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or two pictures. Maybe you could space it out better?

  3. you’re really a excellent webmaster. The website loading pace is amazing. It kind of feels that you’re doing any distinctive trick. Moreover, The contents are masterpiece. you’ve done a great task on this topic!

  4. Outstanding post, I believe website owners should learn a lot from this site its really user friendly . “Frisbeetarianism is the belief that when you die, your soul goes up on the roof and gets stuck.” by George Carlin.

  5. Super page on How to use HTML5 in your client work right now | HTML5 Doctor | Codingbird. Thanks! If they had to treat a preemie, for example, what is a medical insurance plan that doesn’t pay for things consistently, doesn’t pay well, etc? If you were a doctor, what type of insurance would you NOT want to deal with?.

  6. Hey There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will certainly return.

  7. I just book marked your blog blog.codingbird.com on Digg and Stumble Upon. I enjoy reading your commentaries.

  8. Hey very nice blog!! Man .. Excellent .. Amazing .. I’ll bookmark your site and take the feeds also…I’m happy to find a lot of useful info here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . .

  9. You made some Good points there. I did a search on the topic and found most people will agree with blog.codingbird.com

  10. Tremendous issues on blog.codingbird.com . I am very satisfied to peer your article. Thanks a lot and i am looking ahead to touch you. Will you kindly drop me a mail?

  11. I think other site proprietors should take blog.codingbird.com as an model, very clean and excellent user friendly style and design, let alone the content. You are an expert in this topic!

  12. Well, that is my first check out to blog.codingbird.com ! We are a group of volunteers and starting a brand new initiative in a regional community in the exact same niche. Your blog supplied us valuable information to work on. You have done a marvellous task!

  13. Pingback: 23 Useful Online HTML5 Tools « Codingbird

Comments are closed.