Archive for November 2012

HTML5 Audio and Video   5 comments

Audio and Video

Over the past decade, video on the web has exploded. As bandwidth has increased, and more people have access to high speed internet connections the likes of YouTube and Vimeo have gripped the imagination of web users. Before HTML5, the most common method for including video on a webpage was to render it using Adobe Flash. YouTube and Vimeo continue to use this approach by default, but both have started migrating to a more accessible and standards friendly HTML5 version <video> tag. The HTML5 <video> tag, <audio> tag are fast becoming the method for presenting rich media content in a way that is compatible  with all devices,  including smartphones.

More recently, many vendors including Apple dropped support for Flash from their mobile devices. The HTML5 specification has long proposed native video and audio in the browser, as part of its aim to reduce the amount of code and work required to deploy common media types to the web. As with other HTML5 enhancements, direct embedding offers numerous accessibility benefits, and search engine indexing improvements over Flash.

The usage is simple: use a <video> tag to embed video,  and an <audio> tag to embed audio, and nest within the tag links to the different formats in which you have encoded your media.  There are two competing standards H.264 and WebM and many more for audio.

In order to use HTML5 to render video, you need to encode your video and audio into multiple formats and link to each format within the <audio> and <video> tags ensure every HTML5 capable browser will be able to render your media. For older browsers that do not support HTML5, it is also safe to use H.264 encoded video only and provide Flash as a fall back for those who don’t support H.264 files.

Both new tags allow for fallback content, which makes it a simple process to upgrade your existing Flash embed code to make use of HTML5 without excluding older browsers and no direct need for browser sniffing scripts.


The growing market for location-aware applications, where content is specifically oriented towards both the user and their current position. These apps take advantage of a hardware enhancement common to most smartphones running software from Apple, Google and Microsoft.  HTML5 offers us the ability to query the user’s location and tailor our web content accordingly.

The geolocation element of HTML5 is made available through an API, accessible with Javascript. The location isn’t dependant  upon the device accessing the page having a GPS chip, so any HTML5 capable browser with support for the geolocation API will attempt to locate the visitor using available means Wi-Fi networks, Bluetooth, RFID etc. The user has to explicitly choose to share their location through the API before any results are returned to the browser.

Current smartphones and tablets devices are typically running HTML5 engineered browsers, so are the most common devices able to use this functionality. You can request the user’s location with a few simple lines of Javascript code. The data is only useful if you do something with it like, a customised map that shows the location of nearest public convenience or a set of driving instructions to the office locations.

Translating the user’s location into something meaningful is made easier with the likes of OpenLayers, OpenStreetMap, Bing Maps or Google Maps, and each of these offers an API allowing you to pass in a location expressed in latitude and longitude.

Video in Email   5 comments

How important is video in digital marketing? Has including video in email become a standard practice?

Brand sites and social media sites are the most popular channels for distributing video content, but just over half of those surveyed were actually using video content within their email campaigns.

Video is a powerful way to move prospective buyers through the conversion funnel. Video within email has a positive impact on campaign performance and email generate a higher click-through rate. Now a  whole new crop of email service providers and technology vendors now offer solutions that give marketers the ability to provide users with a richer experience within the inbox.

To make the most of video within email, marketers must understand the value proposition brought by open standards. Since HTML5 , is built into most modern Web browsers as well as most modern mobile devices, many mail clients (e.g. Hotmail) are actually now capable of displaying video directly in the body of the email when users view that email in an HTML5 compliant Web browser (e.g. IE9+, Chrome3 and Firefox3.5+).

To include video in email, it is necessary to use the HTML5 video tag. While the rate at which your own recipient list will be able to view and play video directly within email will vary,  it is imperative that your email service provider also offers the ability to “fall back” and provide either an animated .GIF/.PNG or a static image to the recipient, depending on the mail client in use.

Solutions from email service providers should be sophisticated enough to automatically know where videos work and provide fall-back support in real time as the message is opened. For example, while an email  with video won’t play in Gmail, it does support animated .GIFs ; whereas in Outlook 2007 or 2010, neither video or animated .GIFs will work, so you need a static image fall-back.

Many best practices remain that should be employed to ensure that video within email carries value for the campaign. Sending videos relevant to your audience should be given, as would indicating the contents of the email- in this case , that there is in fact a video.

Supporting copy should be included, along with some information about what will happen when the video is clicked.

HTML5 Semantics, Structure and Forms   5 comments

The new semantic tags and structure that form part of HTML5  specification are the biggest new features that’s fully ready to be used regardless of your visitor’s browser. The semantics are important for better search engine optimization, more accessible content, easier to understand structure and improved maintainability.

Semantics is the study of language meaning. In HTML the  language meaning relates to the tags we use to mark-up our content. the <p> tag means that the marked-up content is a paragraph.

HTML has a limited number of tags. As designers we tend to use <div> to mark-up navigation menus,  sidebar, page header and so on. So in HTML5, rather than create a header using the code <div id=”header”></div>, you can now use the semantic <header> tag.  Similarly, tags have been introduced for <footer>, <aside>, <article>, <section> and <nav>.

From a  search engine optimization point of view, having universal tags that describe content is a big plus; using these tags helps search spiders to determine the most important content on the page and index accordingly. Using a semantic approach to you code also helps with screen-readers, allowing disabled visitors to get to your content more easily.

HTML5  forms

One of the challenges associated with designing web forms is helping the use to complete the form correctly. Dates have to be checked to ensure they are in the correct format, email addresses need to be validated and so on. Each time a form is deployed , therefore, we are compelled to use client or server-side validation , writing own routines to provide date picker, validate input etc.

HTML5 solves these problems with the introduction of new input types, browser- native user controls and input validation.  The new options use the same core tag that you are familiar with, <input>, but add content specific features. Examples include the email input, number, tel, date and url. Crucially, because <input> remains the primary tag, older browsers will simply ignore the new type declarations and fall back to type=”text”, allowing these enhancements to degrade gracefully.

The syntax for new input options is the same. Rather than use the code <input type=”text” name=”email”> you can now use <input type=”email” name=”email”>. In addition, there are some new attributes and CSS pseudo classes that allow you to make the most of native browser controls and validation. The required attribute will tell an HTNL5 ready browser to validate and require a field, while the CSS invalid pseudo class allows styling to be used to provide visual feedback to the user without the need for any external scripting at all. Elsewhere, the placeholder attribute allows you to specify some example content that demonstrates the type of input you’re expecting from the user. This will typically render as light grey text inside the form field which disappears once the field gains focus on the page.

Older browsers will simply fall back to treating each of the new types as standard text field, and will totally ignore any attributes they do not recognize.  For the time being you will need to provide your own validation.

%d bloggers like this: