Working with HTML5 Themes and Enhancements
-
Upload
intelligent-content-conference -
Category
Documents
-
view
109 -
download
1
description
Transcript of 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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
4
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
The questions you really asked
7 October 2012
9
Copyright © 2012 Contelligence Group, LLC
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
10
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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!
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
Copyright © 2012 Contelligence Group, LLC
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!
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
Copyright © 2012 Contelligence Group, LLC
OK, what is semantic markup?
I’ve talked about page and content semantics. What is a semantic?
7 October 2012
16
Copyright © 2012 Contelligence Group, LLC
OK, what is semantic markup?
I’ve talked about page and content semantics. What is a semantic?
7 October 2012
17
Copyright © 2012 Contelligence Group, LLC
OK, what is semantic markup?
I’ve talked about page and content semantics. What is a semantic?
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
Copyright © 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
Copyright © 2012 Contelligence Group, LLC
Exercise: map HTML5 elements to page and content
7 October 2012
The page The post The paragraph
21
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
26
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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
34
Copyright © 2012 Contelligence Group, LLC
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
Copyright © 2012 Contelligence Group, LLC
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)
36
Copyright © 2012 Contelligence Group, LLC
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