Working with HTML5 Themes and Enhancements

Working With HTML5 Themes
and Enhancements
1
MAKE EFFECTIVE USE OF THE
INTELLIGENCE YOU HAVE PUT INTO YOUR
CONTENT

Copyright © 2012 Contelligence Group, LLC

7 October 2012

Workshop Prospectus
2



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

Who is Don Day?
3

 Work/technology background
 Hobbies
 Personality
 http://about.me/donrday
 donrday@contelligencegroup.com
 @donrday
 don.r.day on Skype
 Ask about my cats, Maybelle and Talullah.

7 October 2012

Proposed agenda
4

 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

Terminology
5

 Template vs Theme
 Tag vs Element
 HTML vs XHTML vs XML vs SMILE
 Metadata
 Semantics
 Tag Soup
 CSS vs XSLT
 Intelligent Content / Rich Content / Clean Content
 Responsive / adaptive / personalized

7 October 2012

The part where the instructor
asks “Telling questions”
6

 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

The questions you might
have asked
7
 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

Since we are all thinking it…
9

 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

Common question
10

 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

HTML5: Fact or Fiction?
11

 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

Starting with the #1 hype
14

 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 2012

OK, what is semantic markup?
15

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


7 October 2012

16



7 October 2012

17



7 October 2012

Why semantics matter
18

 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


2.

For example, schemas, DTDs, SQL tables, program declarations.

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 2012

Exercise: Classify some HTML5 elements
<article>
<aside>
<footer>
<header>
<hgroup>
<nav>
<section>

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

<details>
<summary>
<figure>
<figcaption>

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

<time>

Defines a date/time

<mark>
<command>
<meter>
<progress>

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

<ruby>
<rt>
<rp>
<bdi>

Defines a ruby annotation (for East Asian typography)
Defines an explanation/pronunciation of characters (for East Asian typography)
Defines what to show in browsers that do not support ruby annotations
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>
<video>
<source>
<embed>
<track>

19

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


7 October 2012

Exercise: map HTML5 elements
to page and content
20
The page


The post

The paragraph

7 October 2012

Which leads to this gem:
21

The Siphonaptera
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 turn
Have greater fleas to go on;
While these again have greater still,
And greater still, and so on.

7 October 2012

Structural vs Semantic
22

 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

Compare HTML5 structure
to DITA structure
23

 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.

7 October 2012

Templates and your CMS
24

 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

Review some popular templates
25

 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

Types of templates:
26

 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, catalogs
Admin: useful for interfacing directly with the CMS
Commerce templates: single purpose


7 October 2012

Analyze the regions
27

 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

Features
28

 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

Division of labor
29

 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

What happened to my
nested lists?
30

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

semantically


7 October 2012

Adding “actionable intelligence”
to content
31

 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

Practicuum
33

 Convert a popular, free web template into its

attractive, responsively themed HTML5 layout
equivalent.
1.

2.

Put a liquid layout behind a fixed microsite template:
http://mobiledita.com/
Put the skeleton or netmagazine demo framework behind a
two-column fixed blog template:
colorvoid by Arcsin: http://templates.arcsin.se/


7 October 2012

Summary
34

 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

Resources
35

 Free Template sites
 Search on “free css
templates” + keywords
 http://templates.arcsin.se/
 http://www.styleshout.com/
 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://matthewjamestaylor.c
om/blog/-website-layouts
http://www.aliaspooryorik.c
om (Responsive CSS grid
systems)

7 October 2012

But wait! There’s more!
36

 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-basicresponsive-site-css


7 October 2012

Working with HTML5 Themes and Enhancements

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Recently uploaded

Recently uploaded (20)

Working with HTML5 Themes and Enhancements