HTML 5 and Content Strategy for the Web By: Christina Fregosi ISC 496

HTML 5 and

Content Strategy for the Web

By: Christina Fregosi

ISC 496

HTML5

HTML5 includes new elements for better structure, form handling, drawing and media content.

Semantics Elements- describe their meaning or purpose clearly to the browser and to the developer.

New Elements

Header and Footer

Nav – creates a navigation or menu bar

Sections and Aritcles – group your content

Aside – can be used for secondary content such as a side bar or related links

<Canvas>

Used to draw graphics, on the fly.

The element is only a container for graphics. To actually draw in the canvas one typically uses JavaScript

1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;”>Your browser does not support the HTML5 canvas tag.</canvas>

2. <script>var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d"); X

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);</script> Y

Audio and Video Support

Prior to HTML5 you needed a plug-in like Silverlight or Flash

NOW

<audio> and <video> tags

<Audio>

<video>

Polyfill

“ A shim that mimics a future API, providing fallback functionality to older browsers” – Paul Irish

JavaScript Modernizr – adds feature detection capability so you can check specifically for whether a browser supports an element and provide a backup option if not possible.

Polyfill Example

IE 9

IE8

How to fix the problem?

Adding a reference to Modernizr will brute-force these elements into the DOM.

1. Download it from : http://www.modernizr.com/download/

2. Add a reference in the <head> section.

http://www.modernizr.com/download/

End Result

Top 10 Reasons to use HTML5

10. Accessibility

9. Video and Audio support

8. DOCTYPE

7. Cleaner Code

6. Smarter Storage

5. Better Interaction

4. Game Development

3. Legacy/ Cross Browser Support

2. Mobile

1. It’s the Future!

FACTS

Average time people spend on a website –

As long as it takes for the website to load

Less than 60 seconds

690 seconds for an average, and about 30% stay 5 minutes or longer, but 52-53% exit in less than 30 seconds

What can good content do for a publisher?

Build your brand

Close the sale

Improve retention

Win loyalty

Help the user do something better, smarter and with greater ease

What is Good Content?

Easy to find information

Well-designed layout and labeling

Use of Social Networks

Always know your location (URL, breadcrumbs)

Always display what is best for your visitors

HTML/XML Site Maps

What is Bad Content?

Subpar

Inconsistent

Irrelevant content

Duplicate pages

Broken or redirected links

Wrong or not updated information

Spamming the search engines

How to measure content effectiveness?

Google Web Analytics and Webmaster Tools

Bing/Yahoo! Webmaster Tools

Search Engine Optimization (SEO)

<title>

<meta description>

<alt>

<h1>

Internal Links

Links to external sources

Social sharing

Crawlability

Work Cited

Bing’s Webmaster Guidelines

Content Strategy for the Web by Kristina Halorson

COX, PATRICK. "P 10 REASONS TO USE HTML5 RIGHT NOW." codrops. WEBDESIGN, 24 2011. Web. 26 Nov 2012. <http://tympanus.net/codrops/2011/11/24/top-10-reasons-to-use-html5-right-now/>.

Google’s Search Engine Optimization Starter Guide

Marsman, Jennifer. N.p.. Web. 25 Nov 2012.

<http://msdn.microsoft.com/en-us/hh549253.asp&xgt;.

www.w3schools.com

http://www.w3schools.com/

Documents

HTML 5 and Content Strategy for the Web By: Christina Fregosi ISC 496