Why You Should Invest in HTML5

By - Posted under: Design, Web, Web App on January 3, 2012

Many people still haven’t updated their website to HTML5. Reasons are aplenty, such as it is still pretty new, Internet Explorer (IE) is still not supporting it, it’s a huge cost to convert the existing website to HTML5, HTML5 is a myth and it’s not working, HTML5 is not adopted worldwide yet, and etc.

But there are plenty of good reasons to start implementing HTML5. This is not only aimed at web developer or web designers, because businesses with an online presence should think of their long term strategy for their web as well.

Below are the 10 reasons to change your web to HTML5 or to start using HTML5.

Reason #10: Accessibility
HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them.

ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. This has been well overlooked and widely under-used mostly due to the fact that it wasn’t valid, however, HTML5 will validate these attributes. Also, HTML5 will have built in roles that can’t be over-ridden making assigning roles a no brainer.

Reason #9: Video and Audio Support
Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the <embed> and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly. Your media tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and audio tags basically treat them as images; <video src=”url”/>. But what about all those parameters like height, width and autoplay? No worries my good man, just define those attributes in the tag just like any other HTML element: <video src=”url” width=”640px” height=”380px” autoplay/>.

It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly… but this code isn’t nearly as gnarly and messy as the <object> and <embed> tags:

<video poster=”myvideo.jpg” controls>
<source src=”myvideo.m4v” type=”video/mp4″ />
<source src=”myvideo.ogg” type=”video/ogg” />
<embed src=”/to/my/video/player”></embed>
</video>

Reason #8: Doctype
<!DOCTYPE html>
Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes. You can simply and easily type it out and be happy. The really great thing about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6.

Another example to show how HTML5 has a much cleaner and simple code is this: the reference link code for stylesheet in HTML4.01 needed to be defined for “type” (in this case, text/css), and the code looks like this:
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

With HTML5, the code is clean and simple:
<link rel=”stylesheet” href=”css/style.css” />

There is no need to define the “type” anymore in HTML5 because when the “rel” is defined for “stylesheet”, it is understood that it is “text/css” type.

Yup, that’s it!

Reason #7: Cleaner Code
If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content. Consider this typical and simple header code with navigation:

<div id=”header”>
<h1>Header Text</h1>
<div id=”nav”>
<ul>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>
</div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
<h1>Header Text</h1>
<nav>
<ul>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>
</nav>
</header>

With HTML5 you can finally cure your “divitis” and “classitis” by using semantic and HTML headers to describe your content. Previously you would generally just use div’s for every block of content than drop an id or class on it to describe its content but with the new <section>, <article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized and happier.

Reason #6: Smarter Storage
One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Because it’s essentially a client side data base you don’t have to worry about the user deleting cookies and it is been adopted by all the popular browsers.

Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins. Being able to store data in the user’s browser allows you to easily create those app features like: storing user information, the ability to cache data, and the ability to load the user’s previous application state. If you are interested in getting started with local storage, check out Christian Heilmann’s great 24 Ways article from last year — Wrapping Things Nicely with HTML5 Local Storage.

Reason #5: Better Interactions
We all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than the previous rich internet application platforms like Flash.

Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:

Drag and Drop (DnD)
Offline storage database
Browser history management
document editing
Timed media playback

Reason #4: Game Development
Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. Furthermore, Zynga, one of the largest game developer for Facebook with popular title such as Farmville, has announced that they are porting their games to HTML5.

If you’ve built Flash games before, you’ll love building HTML5 games.

Reason #3: Legacy/Cross Browser Support
Cross browser compatibility is always the biggest nightmare for website designer. The modern, popular browsers all support HTML5 (Chrome, Firefox, Safari, IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn’t mean they can use all the new HTML5 tags and goodies. Fortunately, HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

Reason #2: Mobile, Mobile, Mobile
The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.

Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile:

Viewport: allows you to define viewport widths and zoom settings
Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode

Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device

Reason #1: It’s the Future!
The number one reason why you should start using HTML5 today is this: it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary, it’s not anything you really need to figure out or relearn — if you’re developing XHTML strict right now you are already developing in HTML5 so why not take full advantage of it’s current capability?

At Zymora, we have adopted HTML5 for quite some time, and the number 1 reason why we love HTML5 is the fact that the code is cleaner and easier. If we need to make one change on the HTML code, we used to spend hours and hours finding it and making sure that it works. Now, with HTML5, we could find the code easily

Choosing a Side

By - Posted under: Browser, Design on October 3, 2011

In an ideal world, a designer can whip out the codes and viola! Things are done accordingly.

Unfortunately, the world is not ideal because we have to deal with cross-browser compatibility. As a designer, the worst nightmare is about having to deal with Internet Explorer because the “real browsers” like Chrome, Safari, and Firefox, are following the international standard on rendering the website code. Only Internet Explorer got a different engine and own interpretation on the code. So when we, as designer, coded the website and tested live on Chrome or Firefox or Safari, we are glad the website is displayed correctly.

And then when we test it on Internet Explorer, we will groan in pain and scratch our head on the code, and most often than not we just wish we can remove Internet Explorer to make the world a better place.

And we have to deal with this issue on a daily basis.

Sometimes we will have take the issue into our own hands. There are some websites out there that do not want to provide support for Internet Explorer. When the website detects that a visitor is using Internet Explorer, the visitor will be redirected to a different landing page, telling them that their browser is not being supported and provide links to download Chrome, FireFox or Safari. The attitude is “If you want to use this site, come back with a better browser.”

In Malaysia, CIMB clicks website is the same, only that it’s reversed. Users with any browser other than Internet Explorer will be told to come back to the site with Internet Explorer. In my opinion, that’s a bold move and I admire it. But my only issue with it has to deal with security issues as Internet Explorer has many security holes, and online banking and share transaction using Internet Explorer only?

Furthermore, how about Mac OS users? Or Linux users? These users can’t install Internet Explorer to use the website.

So if we, as web designers, have to make a choice, it’s best if we choose Chrome, FireFox and Safari that can support multiple OSes than Internet Explorer.


Page 1 of 11