Ever visited a website and things didn’t look right? Chances are those involved in the development of that site didn’t account for the way their design might look in your browser. This is a common problem with the way websites are developed.
You would think that it would be simple enough to develop a set of standards or rules to which every web browser should conform and then designers build to those standards — but it isn’t. Even the international standards organization for web design and development, The World Wide Web Consortium
(W3C) was headed off in a different direction until it agreed to join the Web Hypertext Application Technology Working Group
(WHATWG) in the development of what is now officially HTML5
To those outside the web development world, HTML5 is just another acronym for geeks. But it may have more of an impact on the new technologies that will emerge over the next five years than you might think. With HTML5, developers are being given a new set of tools with which to work. The possibilities of what Web 3.0 holds are just beginning to be revealed.
Now that I have the requisite number of acronyms covered to satisfy the geek quotient, let’s talk about some of these cool new features.
Getting video to work seamlessly and efficiently on the Web is tricky at best. With HTML5, video is simply embedded into a web page with simple code that will be rendered the same no matter if you are using Firefox, Internet Explorer, or using a Mac with Safari. No prompts to install this plugin or that plugin — just press play. Now, with that said, there are a few kinks to be worked out with this part of HTML5. For instance, Google has removed the video codec
(a computer program that encodes a data stream or signal for transmission, storage or encryption, or decodes it for playback or editing) from its browser, Chrome, as they have a competing codec that differs from the one specified in the new HTML5 standards. Interestingly enough, Google-owned YouTube
has already developed the new HTML5 video format for use on mobile devices and is what makes the YouTube app for your iPad play video without Flash.
Until recently, web designers have been limited to creating text using approximately 18 web-safe fonts
. There have been “work-arounds” and some browsers recognize new font embedding features, but most websites are still designed with this restriction in mind. With HTML5 and Cascading Style Sheets
level 3 (CSS3), designers will be able to use a font that is not present on the web visitor’s machine setting typography free on websites to rival that used in print publications. This capability has been around for a couple of years and some websites have incorporated it, but has only recently received widespread browser support.
Here at Bit-Wizards, we use it when it makes sense and can enhance our designs. A recent example is the reservation website for Wind Creek Casino
where the designer used MoolBoran font to stay consistent with the client's branding.
Helping add to the aesthetics is the new “canvas” element which allows for the creation motion graphics without the need of Rich Internet Applications
like Adobe’s Flash
or Microsoft’s Silverlight
. There are many experiments using canvas on the web and most are animations or games. And although canvas is in its developmental infancy, I’m doubtful it will completely replace Flash or Silverlight, but there are huge possibilities — for exciting new web applications.
Location Based Apps
The geolocation application programming interface (API) in HTML5 gives developers the ability to use GPS, cell tower triangulation, or wi-fi databases to create browser-based apps that can detect and utilize your current location. Although some web browsers have supported this functionality prior to HTML5, it is
the standardized API that makes it special. Mobile applications are where this feature will shine. With geolocation, your device can tell websites and apps where you are, and then tailor results to your need.
For example, search for “restaurants” using the Google Maps app for the iPhone or iPad and local restaurants will appear in the search results. Check-in services like foursquare
use geolocation, and it may be soon where dating websites will show you all the eligible matches within 10 miles of your location. Already, music fans can follow their favorite bands using services like Flowd
, a location-based mobile app.
Faster, Stronger, Able to Leap Tall Buildings…
Okay, so maybe it won’t turn your device into a Super Computer, but HTML5 will make the apps faster and more efficient. With local storage, developers can store data, preferences, and even the state of an application just like desktop applications. So if you are working with a web-based application or playing a game, and you need to shut down and come back to it later, you will find it in the same spot as when you shut it down. By storing data locally, it also conserves bandwidth and makes apps work faster by not having to request the same information already retained on your local device
The Future is Here
As cool as HTML5 sounds, a lot of the kinks still have to be ironed out and it may be a while before some of these new development tools are ready for extensive adaptation. However, many of these new features are already finding a home in web and mobile applications. The future is here and you can check it out at the links below
21 Ridiculously Impressive HTML5 Canvas Experiments
The backlash over Google's HTML5 video bet
Where on the Web Is HTML5?
TED.com now available in HTML5, serving many mobile platforms, including iPhone, iPad
Yahoo unveils HTML5 mail app for the iPad
HTML5 Example: Nike Better World Site
Microsoft Silverlight vs HTML 5 Strategy