HTML5: A Cowpath on a Cliff

Speakers:
Karl Dubost, Developer Relations & Tools, Opera Software

Karl has a very thick accent, and honestly I’m horrible with accents so we’ll see how well I do with this session. I’ll do my best folks!

The main language of the web is HTML and up until recently it’s been mainly HTML4.  HTML4 was/is DOM, CSS and JavaScript.  We then moved to XHTML 1.0. It was supposed to be a pure language, the ‘promise land’…but it fell slightly short. Yet, something interesting that came out of XHTML is that people started to care about the semantics of the language. They realized that by using some of the elements they got benefits in the browsers and search engines.

When XHTML 2.0 came, there was a crisis in the developer community and those developers found that the web couldn’t be converted strictly to XHTML because not everyone used it.  So Opera & Google did a survey to see what people were using and doing on the web. They found out that people were using div footers, headers and articles but sometimes misusing simple tags like the meta charset command.  They also found that even though the page code was sometimes incorrect, the browsers would do their best to correct it and render the page correctly.

HTML5 was created in order to go hand in hand with what people are doing and seeing and wanting from the web.

New HTML5 Elements & Attributes include elements like:

<header>  <footer> <article> <section> <nav> <video> <canvas> and many others

This prevents having to use div tags, but instead specific tags for each section of your site.

The nice thing about HTML5 is that the search engines, especially Google are behind it.

Another benefit of HTML5 is that there are better semantics and easier styling. A 3^rd benefit is better indexing by the search engines.

HTML5 also includes forms.  Some of the new form controls include:

Type=”datetime”

Type=”number”

Type=”email” and others

This simplifies the process of creating and processing forms on a web page by streamlining it. The usability includes features like a calendar appearing in the datetime fields. However some drawbacks are things like the calendar not fitting within a site’s design.  Customizing it can be difficult.

API’s associated with HTML5 include:

• Canvas API
• Structured client storage
• Offline application caching (manifest)
  • This will help prevent loss of emails written in a browser when connection is lost or similar situations
• Server sent events (not HTML5)
• Currently things are done in a ‘call’ environment
• This will actually create a ‘push’ environment to save bandwidth and time
• Geo-location (not HTML5)
• Contact (not HTML5)
  • This will center around address books to enable easier transfer of contacts from one application to another
•  And many more

However, the true question is, Is HTML5 usable?

Answer: Yes, but be careful with it and be ready to fall.  Don’t be afraid to experiment with the features, however remember that it is still a work in progress.

CanIUse.com is a site that shows you the features implemented across certain browsers. This will help you when designing to decide what features to use depending on your target browser.

It’s predicted that in 2014, small & mobile devices will be more important than PCs and laptops.  This means that if your site is not working in that space now, you need to start thinking about it and implementing quickly.  Mobile is becoming bigger than ever and you don’t want to miss out. Understand your visitors and what type of phones they are using because in most cases, mobile users are not using smart phones. Design accordingly.

Karl suggests an article in the Guardian – July 24, 2011 called Africa’s Mobile Economic Revolution which talks about how Africans are using mobile to do everyday things…not just to play Angry Birds.

He mentions that using the www and m. versions to solve the mobile demand for your site is working, but is not optimal. He suggests doing feature detection instead of crawler detection to avoid upsetting the search engines or making mistakes.

CSS3 is not part of HTML5 but it is new and has some good features.  It is a way to design for any device. Karl says to design for the web, not for specific devices.  If you design for the device you will be doing it all wrong.

Mediaqueri.es (a feature of CSS3) has the purpose of taking one website and making it work on any device.  The CSS adjusts itself depending on the size of the screen.  It means that your website is usable across all platforms and will save you the trouble of developing multiple versions.

So, when thinking about designing for mobile, think about your content first.  He suggests looking up “responsive web design” and educating yourself. You have to think about how your content will render on the mobile device, how it will respond to touch screens etc. You want to do so because remember, in 2014 most people will access the web via their mobile device instead of a PC.

He preaches on how important it is to maintain your website and its content.  Maintain links to other web properties.  Create a site that will still be around in 5, 10 or 20 years and still contain any relevant and important content on it.  He mentions that many large companies don’t have content on their own websites that talks about the same thing as their Wikipedia profile or similar, and he says that’s a crime. Your website should contain all the information about your company and you should maintain it so it’ll stand the test of the time. Don’t be limited by space…space is limitless on the web.

Once a hard working corporate type, Jayme traded in her office and business attire for cowboy boots and the Sierra Nevada mountains. At one time Jayme was the director of SEO for Bruce Clay Inc., then senior SEO analyst for WebMetro. She now spends her time out in the country. As a busy mom, soccer coach, weekly volleyball player, weekend hiker and hobbyist photographer she does manage to find a few hours a week to stay connected to the Internet Marketing world plus she is still doing SEO on a handful of clients. You won't find her active on Twitter or her own blog, because when she does have spare time she's usually away from her computer enjoying what life has to offer, away from the computer monitor. In fact her own website is sinfully neglected. Even though she has grand plans to one day put some energy into her own blog that day still hasn't arrived, possibly after her kids are both in school.

See Jayme's author page for links to connect on social media.