Embrace HTML5

Craig, our Front End Developer explains that the web industry is moving along at a rapid pace and trying to keep up can be quite tricky. Here’s what he has to say about embracing HTML5:

New web technologies are being released on a more regular occurrence. Yes, we will never have full cross-browser support for these new technologies, but as long as you know the audience you want to address and you provide suitable fallback options for legacy browsers… then why should you be held back?

The biggest leap over the past decade has been the invention of HTML5. HTML5 is more an evolution and combination of three technologies (HTML, CSS and Javascript) into one specification. It’s come at the right time too. Since Apple does not support Adobe’s Flash technology on its mobile devices, animated Flash based websites have steadily declined. Lets be honest though, we all want to see things moving around with loads of interactivity on websites. Adobe, not to be outdone by this have created an application called Adobe Edge Animate (http://html.adobe.com/edge/animate/showcase.html) which converts your completed animation into HTML and CSS code ready to be viewed in modern browsers.

HTML5 and Search Engines

Currently Google does not promote or penalize a site being written in HTML5. However, as we all know Google search engines are getting smarter all the time, so writing your website code in HTML5’s cleaner and semantic fashion could theoretically provide more weight to the content on your site and help to boost your all important search rankings in the future. Each version of HTML introduces new markup but there has never been so many new additions that relate directly to describing content. So as a basic example you would normally structure your page using tags and the heading section might look something like this:

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

This code is fine as it is but we can clean it up even more using the new HTML5 tags to replace the division tags:

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

Browser Support for HTML5

All major modern browsers support HTML5 these include Firefox, Google Chrome, Safari, Internet Explorer 9 and Opera, however earlier versions of Internet Explorer do not recognize the new HTML tags. There is a work around to this by using a bit of Javascript to force the browser to parse the new elements. So for example in your script file you would have : document.createElement(“header”). This lets the CSS engine know that the element exists and would then allow you to structure and style that element in the legacy browser.

Great Reasons for Developers to use HTML5

There are loads of new features, not all are down to HTML directly but as a whole including CSS and Javascript combined you can create some amazing stuff.
• New Doctype
No longer need to remember or rely on your IDE to create the XHTML Doctype :

Replace this with
• New native form features
Form validation
Autofocus on form fields
Placeholder text

• Video and Audio
No longer require additional 3rd party plugins to run.

• Canvas
Allows you to draw, create games and animations using code (no need for a drawing or animation software)
Some great examples : impressive-html5-canvas-experiments/

• GeoLocation

http://html5demos.com/geo

• Web storage
Web pages can store data locally within the user’s browser. This is normally done with cookies but web storage is more secure and faster.

And loads more. (See additional resources below)

Sum Up

From more descriptive tags to animations and improved multimedia support, developers using HTML5 have a lot of new tools to build better user experiences. Browser support will continue to improve and evolve at a rapid pace. WordPress now ships out with its default theme written with HTML5 markup and seeing that developers have been using it in their projects for well over 2 years now is testament that we should all be using it now. It is the future and you certainly do not want to get left behind.

Additional Resources

http://www.html5rocks.com/en/

http://html5doctor.com/

http://www.w3schools.com/html/html5_intro.asp

http://www.script-tutorials.com/

Web Content Strategies for Businesses

Content is key to a business’ success online. Frequently changing, engaging content not only adds value to your website for your visitors but a dynamic site will always be favoured by search engines.

The goal is always to persuade visitors onto your site, but more importantly to convert those visitors into clients or customers. Engaging content can bolster your reputation and increase a potential customers’ trust in your brand, and ultimately leads to increasing conversion rates.

Many websites remain static for years, and it may be difficult to justify the expense to pay an agency to produce, upload and distribute content for a business. But if you’re considering handling the process in-house, knowing where to start, knowing what constitutes valuable content, knowing where to source it and knowing how to then distribute it can also be daunting.

The truth is businesses have been producing content potential customers are likely to find both relevant and interesting for years - they just haven’t realised how it may be leveraged online.

I’m going to take a look at some of the content you’ve probably already produced offline, consider some of the activities your company already undertakes which have the opportunity to yield valuable content and also look at how all this content may be housed online.

Re-purposing Old Content…

Newsletters

Whether sent by email or on good old paper, content from previous newsletters, with a few tweaks, is likely to still be relevant today and suitable for distributing online. Future newsletter content should find a place on your site within a news or articles section.

Corporate videos or photos

Upload them onto your site. Better still upload them onto You Tube or flickr.

Presentation Slideshows

Presentations made at seminars or industry events are often great additions to a website or can add value to your brand when uploaded to online content sharing sites like scribd.

Case Studies & Collateral

You may have case studies or pieces of research that have formed part of your printed marketing collateral or have had internal purposes. Consider how they may have value on your website or distributed off-site.

Leverage Existing Activities…

Also consider existing activities that may also have the potential to spawn relevant content.

Philanthropy

If you sponsor a charity tell everyone about it with an article on your website. If you’re raising some money or doing some work in your community shout about it and keep your visitors up to date with it all.

Industry News

Chances are you know exactly what’s going on the industry in which you work and the markets in which you operate. Have a dedicated news section on your site and, in addition to adding your new newsletter content, regularly add some industry commentary.

White Papers

Heavier weight content such as technical or business benefit white papers can be leveraged further to build contact databases by requesting an email address prior to providing access to the resource. Well written white papers not only reach your target market, they may also have the ability to influence them.

Trade Shows & Seminars

If you attend a trade show or conference make an effort to do some ‘live blogging’ – that is use your company blog as a platform to report and comment on what is happening.

Now go blog about this

Think about your staff

It’s likely that there are some amazingly talented people sat nearby with some expert subject knowledge. Utilise skill sets and get staff involved in all your content generation activities. If you have subject experts have them writing the occasional article for your website or guest blog posts for other sites.

Where am I going to put all this content?

Start with your company’s website. A company blog is a great place to present and archive content. WordPress can seamlessly integrate with your existing site and provide all the functionality you could need. In addition to a blog, try to incorporate a news section and article or video archive.

There is also a wealth of opportunities to expose your content to an even wider audience by distributing online. Videos can be posted to You Tube, slideshows to scribd, photos to flickr, good article and news content to free article sites.

While I’m not suggesting that content creation and distribution strategies should be central to all your employees daily schedules, consideration of how you can increase your interaction with potential customers online by providing them with engaging content both on and off your website should certainly be given some thought, especially if you don’t want those potential customers drifting off to your competitors site where they do.

There are just two things I would suggest bearing in mind. The first is to not duplicate your content all over the internet; it will only devalue it. The second, more importantly, is to carefully consider what content you do place online – one way or another it is likely to be there for a long time.

image credit: http://www.flickr.com/photos/nightthree

Cookie Use

Gravytrain uses cookies, small text files which are downloaded to your computer's hard drive when you visit most websites.

Cookies are harmless files which can help improve the experience. Cookies allow websites to respond to you as an individual. The website can tailor its operations to your needs, likes and dislikes by gathering and remembering information about your preferences.

By using our website, you agree to allow us to use cookies to improve your experiece with us.

Cookie Policy
Read more