HTML5: A Cowpath on a Cliff
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!
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 3rd benefit is better indexing by the search engines.
HTML5 also includes forms. Some of the new form controls include:
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.
One Reply to “HTML5: A Cowpath on a Cliff”
We have several clients who have asked for their sites to be redesigned “using HTML5” to make sure that it will display properly on Apple devices. As with all projects, we need to consider the search engine implications of utilizing code that is not necessarily compliant across all display systems, and error on the best display for the most users. Any good seo company is not going to necessarily go for the “latest and greatest” unless it makes sense for the majority of users. Unfortunately, that means IE…..