Utilizing HTML5 Elements in Mobile Website Development
It is no supprise that there has been a major push for mobile capabile e-commerce sites, whether that be dedicated m-dot sites, or responsive designs over the past year. Customers have started expecting mobile capable sites and if you are not providing a good experience, chances are, you are losing potential sales.
There are a host of html5, JS and CSS features that are widely supported on both iOS and Android that can be utilized in unique ways for someone who is using their mobile phone or tablet to provide them with an enhanced user experience.
1. Geo-location
When a potential customer is out of their house on the weekend and browsing your site, using the customer’s geo-location to quickly direct them to your closest brick and mortar store so they can pick up the item right away, rather than waiting for a delivery could mean the difference between getting a sale and losing one.
2. Client Side Storage
The more data that a site can store on the client side, the less information has to get sent back-and-forth to the server with every request. One of the most useful additions to HTML5 is the concept of true client side storage. There are a couple of different available APIs in HTML, but the most widely adopted type of client side storage is called Web Storage, which works by saving data in key/value pairs in the browser. Any piece of data which is saved per-user can be stored here, including login name, recently viewed products, or even items in the cart or site preferences, like language and currency.
3. Adding Touch Events
One of the simplest additions one to make to an existing site to make it more mobile friendly, is to add touch events where users on the desktop would usually hover-over to get additional information. The most obvious area to add touch events to is the main navigation if the navigation has drop-down or mega menus. On a mobile devise the menu should be displayed on touch and closed when the user clicks or touches outside of the menu area. Additing the touch feature will have no effect on the desktop experience, but will allow users on mobile devises to interact properly with your desktop site.
4. Using CSS3
Changing from a straight CSS2 to a CSS3 site is not something that should be taken lightly. One must understand that the site will render differently for users who have older browsers. However, since we are discussing mobile sites here, CSS3 is pretty widly supported.
One of the big advantages to using CSS3 on mobile sites is that one can acheieve styling just using CSS that previously would require images in order to produce on the screen. Not requiring users to download additional images means the site will take less time to render and a faster rendering time means more converstions.
One of the most commonly used CSS3 styles is the boarder-radius. All of the buttons that used to have to be downloaded because of rounded corners and jankey HTML that had to be added in just in order to make boxes with rounded tops can be removed. The markup will be cleaner, there will be fewer images to download and only CSS, which can and should be compressed, will be needed to style the site.
5. Responsive Emails
One topic that was discussed at some length, and even had a few questions asked about it was responsive emails. It was said that around 50% of all emails that are opened, are opened on mobile devises. If the email is not easily read on a handheld device, than the emails are not going to be as effective as they could be, especially for re-marketing or abandoned cart emails.
If creating a responsive site is difficult, than creating responsive emails as at least as hard, if not more so. All of the CSS has to be embedded in the email and emails do not allow for JavaScript, so a lot of the capability sniffing techniques that are common on responsive sites are not available for emails.
There is hope. Depending on the provider that is being used for sending emails, many of them offer mobile previews across multiple platforms. If your provider does not offer mobile previous, there are several services available which allow email testing for a monthly fee.
I outlined just a few aspects of the HTML5 talk. As support for all of the HTML5 features improves in the coming years, there will be new an innovative ways to interact with your customer’s when they are using their mobile devises.
If you are considering using one of the above HTML5 features, it is a good idea to look at the features compatibility on http://caniuse.com and compare the support for the feature against your sites real browser traffic.
