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

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. Your browser does not support the HTML5 canvas tag. 2. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");X ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); Y

Audio and Video Support Prior to HTML5 you needed a plug-in like Silverlight or Flash NOW and tags

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 : Add a reference in the section.

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) 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, Web. 26 Nov Google’s Search Engine Optimization Starter Guide Marsman, Jennifer. N.p.. Web. 25 Nov <