Working with HTML5 Themes and Enhancements

1

Copyright © 2012 Contelligence Group, LLC

MAKE EFFECTIVE USE OF THE INTELLIGENCE YOU HAVE PUT INTO YOUR

CONTENT

Working With HTML5 Themes and Enhancements

7 October 2012

2


Workshop Prospectus

You want to take advantage of the latest capabilities you’ve heard are available in, or inspired by, HTML5: Responsive and adaptive and liquid layouts Support for new media types Browser-side content caching Geolocation support Fewer plugins and more.

How do these features benefit me? How can I make use of these supposed benefits?

7 October 2012

3


Who is Don Day?

Work/technology backgroundHobbiesPersonalityhttp://about.me/[email protected]@donrdaydon.r.day on Skype

Ask about my cats, Maybelle and Talullah.

7 October 2012

mailto:[email protected]



4


Proposed agenda

My aim is to provide the background and understanding you need to assess and convert existing HTML themes or templates into their effective HTML5 equivalent.

We’ll pay particular attention to how content can be improved in order to give HTML5 the hooks it needs to create the most effective UX benefits for readers.

7 October 2012

5


Terminology

Template vs ThemeTag vs ElementHTML vs XHTML vs XML vs SMILEMetadataSemanticsTag SoupCSS vs XSLTIntelligent Content / Rich Content / Clean

ContentResponsive / adaptive / personalized

7 October 2012

6


The part where the instructor asks “Telling questions”

What are the top three content problems that you hope HTML5 will fix?

What problems have you encountered in reconciling HTML5 with content strategy? If none, what information would help make

HTML5 more effective for your job? What problems have you encountered in

implementing themes or layouts in your web sites?

(Who didn’t find a connection with one of those questions?) 7 October 2012

7


The questions you might have asked

Why HTML5? What was wrong with HTML 4?What are the primary changes in HTML5?What is the common terminology that we will

use in discussing HTML5?

7 October 2012

8


The questions you really asked

7 October 2012

9


Since we are all thinking it…

Why does HTML5 matter? Markup is only part of the story. HTML5 gives CSS3 hooks for intelligent

content. HTML5 has functional benefits (local

cache, form improvements, tag soup, ToC, etc.).

Browser parity is finally a possibility. Web apps written in HTML5/CSS3 can

work across device platforms. http://futurefriend.ly/ Manifesto 7 October 2012

http://futurefriend.ly/

http://futurefriend.ly/

10


Common question

Whatever was wrong with XHTML? Valid template with invalid content = invalid page

(GIGO). Validation seen as “draconian.” HTML5 supports graceful degradation in content. Expect SEO ranking to depend less on XHTML

validity as a ranking metric. Better use of Web standards in browsers means

the Web has come of age as a publishing medium. XHTML was never XMLish enough for some,

never friendly enough for others. HTML5 views XML as “interesting but irrelevant.”

7 October 2012

11


HTML5: Fact or Fiction?

HTML5 improves semantic tagging! Page semantics, yes, but that only helps web developers.

Prescription without proscription. Content semantics are in the data attributes, but improves

user experience and search relevance. HTML5 + Intelligent Content = Awesome user experience!

7 October 2012

12






HTML5 will bastardize the Web and make content authors become more lazy about valid markup! In fact, HTML5 defines how browsers should repair errant

markup in a regular way, making the Web more valid, not less.

7 October 2012

13






HTML5 will bastardize the Web and make content authors become more lazy about valid markup! In fact, HTML5 defines how browsers should repair errant

markup in a regular way, making the Web more valid, not less.

But HTML5 played backwards sounds like “vile la míche!” No, HTML5 played backwards sounds like “wife’ll

meet’cha.”7 October 2012

14

Starting with the #1 hype

From a web consultant's page (http://www.html5webtemplates.co.uk/):

"HTML 5 is a new version of HTML 4.01 and XHTML 1.0, and includes lots of new and exciting tags, including...

(queue drum roll)

“<section>, <article>, <header>, <nav>, <video>, <audio> and <canvas>.”

(Are you excited?)

7 October 2012Copyright © 2012 Contelligence Group, LLC

15


OK, what is semantic markup?

I’ve talked about page and content semantics. What is a semantic?

7 October 2012

16




7 October 2012

17




7 October 2012

18

Why semantics matter

Semantics is “the study of meaning”The Semantic Web suggests Web applications

should be able to use Web content as data for meaningful processing.

Metadata, easy version: data about the data.1. Structural metadata: schemas—defining the data

structures For example, schemas, DTDs, SQL tables, program

declarations.

2. Descriptive metadata: properties of the data For example, names, colors, dimension, weight, encoding…

Tag names and attribute values are rich sources of semantic hooks for servers and browsers to operate on.

For the record, I don’t buy the argument that “strong” and “em” are more semantic than “b” and “i”! Typographic semantics are less bad than wrong semantics.

7 October 2012Copyright © 2012 Contelligence Group, LLC


Exercise: Classify some HTML5 elements19

<article> Defines an article<aside> Defines content aside from the page content<footer> Defines a footer for a document or section<header> Defines a header for a document or section<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels<nav> Defines navigation links<section> Defines a section in a document

<details> Defines additional details that the user can view or hide<summary> Defines a visible heading for a <details> element<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.<figcaption> Defines a caption for a <figure> element

<time> Defines a date/time

<mark> Defines marked/highlighted text<command>Defines a command button that a user can invoke<meter> Defines a scalar measurement within a known range (a gauge)<progress> Represents the progress of a task

<ruby> Defines a ruby annotation (for East Asian typography)<rt> Defines an explanation/pronunciation of characters (for East Asian typography)<rp> Defines what to show in browsers that do not support ruby annotations<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it

<wbr> Defines a possible line-break

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<audio> Defines sound content<video> Defines a video or movie<source> Defines multiple media resources for <video> and <audio><embed> Defines a container for an external application or interactive content (a plug-in)<track> Defines text tracks for <video> and <audio>

7 October 2012

20


Exercise: map HTML5 elements to page and content

7 October 2012

The page The post The paragraph

21


Which leads to this gem:

Big fleas have little fleas,Upon their backs to bite 'em,And little fleas have lesser fleas,and so, ad infinitum.And the great fleas, themselves, in turnHave greater fleas to go on;While these again have greater still,And greater still, and so on.

7 October 2012

The Siphonaptera

22


Structural vs Semantic

Page layout is primarily structural; no semantic processing is ever done on containers, so [heresyflag!] divs are okay at the layout level. Whichever your template uses for layout, being able to attach new CSS/JS behaviors to layout is more important than what they are called.

Content has structure: the blocks that represent regular expectations of the structure of discourse.

Content also has semantics: those blocks have names, and the substructures have names that matter to themes, behaviors, and ultimately, to users.

Net: Give your content the attention it deserves, and it will reward you well into the future.

7 October 2012


23

Compare HTML5 structure to DITA structure

7 October 2012

DITA topic: Title Shortdesc Body Related links

Typical HTML5 blog post:

Title (h1-h6) Excerpted content

(section) Body (article) Widgets (nav, aside,

section)

The main difference is in consistency: • XML is like a form for semantic textareas;• HTML’s page elements are like building blocks.

24


Templates and your CMS

Considerations for choice of features: Business needs:

branding, mobility, ease of extension, ease of maintenance, CSS and Javascript controls to support desired interactions

User needs: “beauty,” ease of use, accessibility, configurability,

delightful experience

7 October 2012

25


Review some popular templates

Examples of popular sites http://www.styleshout.com/ http://free-responsive-templates.com/templates/

(shhh!) http://www.freecsstemplates.org/

Due diligence: review terms of use, license considerations, individual restrictions (ie, not for military use or nuclear power plants or fur industry, etc.)

7 October 2012

http://www.styleshout.com/


http://free-responsive-templates.com/templates/

http://free-responsive-templates.com/templates/

http://www.freecsstemplates.org/

26


Types of templates:

News templates: Good for many fields of changing info, feeds

Blog templates: Good for general web sites, wikis

Landing page templates: Good for Coming soon, events

Single page templates: popular for micro sites

Galleries: oriented for shopping, catalogsAdmin: useful for interfacing directly with the

CMSCommerce templates: single purpose

7 October 2012

27


Analyze the regions

Standard components that match your structural model?

Reusable patterns (ie, are there useful examples of widget layout that follow the theme)?

Headers that support your workflow needs?Banner and nav regions that support business

and branding purposes? One, two, or three columns? Adequate width for images, syndicated feeds?

7 October 2012

28


Features

Multi-page types or single?Responsive/fluid or platform-specific?Frameworks:

Liquid Responsive CSS (grids and semantic tables) Hybrid (fixed/float, minimum/maximum limits,

etc.)

7 October 2012

29


Division of labor

Responsive/liquid behavior Happens at the page layout level

Adaptive/semantic behavior Happens at the content level

Everyone gets the layout part right; almost no one gets the content part right

7 October 2012

30


What happened to my nested lists?

Your template probably contains a reset.css! The pros and cons of Reset.cssAlternatives (Normalize.css , namespacing)The benefit of <header> if headings are not

used semantically

7 October 2012

31


Adding “actionable intelligence”to content

Managing mixed queries and content The issue is that theme-related effects apply not only

in the page frame but also within the content regions The solution is to apply theme-related styling to

content on the way to the page (most common for widgets and dynamic nav).

Making content smarter For organizational consistency, the options are forms

or XML (yes, really!). For semantic consistency, the options are content

analytics, regex, variables, or XML.

7 October 2012

32


Adding behaviors to intelligent content

Role of shortcodes vs data attributes or semantic markup Shortcodes: hooks that are in the content domain

(that is, they are invisible to either HTML or XML parsers). [button], [tabcontent], [heresy!]

Data attributes: Name/value pair: <meta name="theme"

content=“brownie" /> HTML5: <p data-jobrole=“evaluator”> XML: <?xpd-html linebreak?> (process-specific)

Semantic markup: <date>9 Feb. 2013</date>, <voltage>2.8</voltage>

7 October 2012

33


Practicuum

Convert a popular, free web template into its attractive, responsively themed HTML5 layout equivalent. 1. Put a liquid layout behind a fixed microsite template:

http://mobiledita.com/2. Put the skeleton or netmagazine demo framework

behind a two-column fixed blog template:colorvoid by Arcsin: http://templates.arcsin.se/

7 October 2012

http://mobiledita.com/

http://mobiledita.com/

http://templates.arcsin.se/


34


Summary

You can always just go find a responsive theme, but…

If you understand the principles, you can more specifically match function in the theme to hooks in the content.

Smarter content gives you better future options and gives users a better current experience.

7 October 2012


35

Resources

7 October 2012

Free Template sites Search on “free css

templates” + keywords http://templates.arcsin.se

/ http://www.styleshout.co

m/Don’s “First Reach”

tools pagify.js responsinator.com mediaquery Bookmarklet Wampserver (localhost)

Books Implementing

Responsive Design ( Tim Kadlec)

Responsive/liquid frameworks http://getskeleton.com http://matthewjamestaylo

r.com/blog/-website-layouts

http://www.aliaspooryorik.com (Responsive CSS grid systems)





http://getskeleton.com/

http://matthewjamestaylor.com/blog/-website-layouts



http://www.aliaspooryorik.com/

http://www.aliaspooryorik.com/

36


But wait! There’s more!

http://learningbywrote.com/pagify/index-orig.html Don’s collection of simple themes reset on the pagify

“CMS”http://

line25.com/tutorials/create-a-responsive-web-design-with-media-queries

http://www.netmagazine.com/tutorials/build-basic-responsive-site-css

7 October 2012

http://learningbywrote.com/pagify/index-orig.html

http://learningbywrote.com/pagify/index-orig.html

http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries




