HTML5 for Online Business and Web Design
DECEMBER 30, 2011
What is HTML5?
HTML5 is a new set of browser technologies that helps you build better sites faster. It introduces various new capabilities to web browsers that were traditionally only available via fully installed applications.
HTML 5 is the latest specification of HTML and most browsers are beginning to support it. Adobe Flash does not run well on mobile browsers. It has been abandoned as a viable mobile technology. Since mobile web browsing is already surpassing traditional web browsing, HTML5’s importance is growing exponentially.
Html5 technologies allow you to build robust web applications that are cross browser and cross platform friendly. Meaning they do not depend on any specific device or operating system. In the past, many of the application functions and feature sets were traditionally only available on offline applications that had to be installed onto a specific piece of hardware. Like an iPhone or laptop. By building your application for the web using html5 you can ‘escape the walled garden’ of platform specific apps.
The nice thing about HTML 5 is that it attempts to stay backwards compatible while providing the ability to achieve advanced effects and functionalities. So you can offer exciting new features to your users while continuing to support your customer base that isn’t ready to upgrade yet.
There are many business advantages to using HTML5. In this article we’ll walk you through a few:
How Is This Good For Your Business?
What does HTML5Lets take a look at some of these newer html5 features and functions and analyze how you can apply them to your business.
1) HTML5 INCREASES PROFIT MARGINS:
- INDEPENDENCE – The web is open source. It does not require a specific device or technology. Anyone can use it. It’s free.
- SEO – HTML5 improves your site’s SEO. New more semantic HTML5 elements and MicroData increase granular data about your website which Google better index your pages to include more detailed information and yield higher quality search results.
- EASY – Implementation of HTML5 technologies is a relatively easy process. Existing web developing teams can get up and running quickly by using their existing skill sets.
- LOW OVERHEAD – Building for the web allows you to reach more consumers with fewer resources. Web applications are not device specific, so you can reach audiences regardless of what device they are using. They could be using any brand of smartphone like iPhone or Android, tablets like iPad and Galaxy, kindles, Xboxes… ANY device that can access the web providing that the application is built properly.
2) HTML5 REDUCES TIME TO MARKET
- Average time for an appstore approval is 2 days to 2 weeks (app denied graphic)
- There is no wait time or approval process for an HTML5 app
- Use the web to get your updates to your consumers without having to depend on them installing / updating apps. Every time there is an update to a device-specific application (like iPhone) we have to download the updated application onto our iPhones. As a developer you have to hope that your users will be vigilant in keeping their applications updated with the latest versions. On web applications that decision is up to the developers. They simply update their web applications and the next time a user visits the web app they will be using the newest version of the web app.
3) HTML5 GIVES YOU AN ADVANTAGE OVER THE COMPETITION
- Early adoption fosters innovation and better understanding of new technologies. Get the jump on your competition by taking advantage of the newest technologies first. New web technologies inevitably take time to learn and develop. Patterns have to be established. You should encourage your team to master the intricacies of these new technologies.
- Many prominent forward thinning businesses are already using HTML5 (logos of co’s using HTML5)
Here, I will review the following on how it benefits webmasters, developers and online marketers:
- Offline / Storage
- File / Hardware Access
- Semantics & Markup
- Graphics / Multimedia
- CSS3
Offline / Storage
Traditionally, a user needs to be online to be able to use applications that have a connection to the Internet. When they go offline, they can no longer check e-mail, browse their calendar, or prepare presentations with their online tools.
Meanwhile, native applications (applications that are installed right into the computer’s local hard drive) provide those features: e-mail clients cache folders locally, calendars store their events locally, and presentation packages store their data files locally.
While offline, users dependent on online applications cannot contact the server to work on their files offline.
HTML 5 specifications provide two solutions to this:
- An SQL-based database API for storing data locally.
- An offline application HTTP cache for ensuring applications are available even when the user is not connected to their network
THE BUSINESS ANGLE
Kill 2 birds with 1 stone – By using HTML5′s Offline/Storage capabilities, you can build an app that has the best of both online and offline worlds. Online, the user can access files from any computer with access to the internet. Then using new offline/storage capabilities the user can save their work to their existing device and continue working offline without interruption in their workflow.
File / Hardware Access
HTML5 provides the capabilities to drag and drop files. For instance you can drag a file from your desktop into your web app … Just like you would for a local desktop.
Nowadays most phones and mobile devices carry Global Positioning Systems (GPS). With HTML5′s geo-location capabilities, you can build this functionality into your web app. In cases where a device does not have GPS, the IP address is used to approximate location.
The real benefit to you is the development team can build applications that look and feel just like a native application at a fraction of the cost.
Semantics & Markup
HTML 5 introduces a slew of new elements that make web development so much easier. They took the most common web development patterns and converted them into semantic elements. This is called ‘paving the cowpaths’. Many of these new elements were created based on the patterns that organically emerged from the web development community. For instance, it was observed that most dev’s were naming their link navigation elements “nav”. In response, a ‘nav’ element was created. The same exact thing happened with the new header, footer and article elements.
The real benefit: The dev team can build an application that looks and feels just like a native application at a fraction of the cost
Graphics / Multimedia
HTML5 allows you to easily embed video and audio into your web app without using cumbersome plugins and scripts. Using HTML5 you can embed a video or music file as easily as you would an image file.
The canvas 3d element allows you achieve complex scripting and animation.
Easily embed SVG graphics like you would a normal image element. SVG graphic are scalable vector graphic, meaning they can be enlarged and reduced without affecting their visual quality.
The benefit: Videos, music, 3D graphics are now all easily possible without depending on third party plugins.
CSS3
Many times, on graphic heavy websites that had a highly designed interface with custom graphics for titles, buttons making a change was a nightmare because we need to open a graphics editor and re-export all the graphics. Thankfully, CSS3 brings an arsenal of visual effects that were previously achieved through time-consuming processes in graphic apps.
A few of the more popular new css3 features:
Round corners – until recently, dev had to go about tedious work-around to apply rounded corners to web elements. It involved creating the graphics and embedding them being even single element that would have a rounded corner. With css3, you can just set the radius of the corners in the code making it easily editable and dynamic.
Drop Shadows – CSS3 brings the ability to add drop shadows to elements
Advanced Layout – CSS3 brings many advanced layout modules that allow devs to build pages with rich layout and typography, like a magazine or newspaper.
Custom Fonts – we can embed custom fonts in webpages adding even more visual control to our web designs without sacrificing semantics.
Gradient Colors – we can now achieve gradient colors without having to rely on heavy background images.
CSS3 Transitions and Animation - Simple animations and effects can now be added through css3, this reduces the reliance on javascript. Transitions and animation also have the added benefit of being ‘hardware accelerated’ … Meaning that in iOS devices like the iPhone and iPad, the animations are run using the internal graphic chip making for very fast and smooth animations.
The Benefit: Time is money and css3 saves any web designer a lot of time.
This entry was posted in Web Development and tagged css for online business, CSS3, css3 for online business, html for online business, HTML5 Development, html5 for ebay business, html5 for free business, html5 for home business, html5 for internet business, html5 for small business, webkit for online business, whatwg for online business. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
Comments
Post a Comment