Working with HTML5 Themes and Enhancements
Upcoming SlideShare
Loading in...5
×
 

Working with HTML5 Themes and Enhancements

on

  • 225 views

From a workshop at Intelligent Content Conference 2013 given by Don Day. ...

From a workshop at Intelligent Content Conference 2013 given by Don Day.

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 and more. But if your CMS lacks HTML5 themes, how else can you get these powerful benefits? This session provides the background and understanding you need to assess and convert existing HTML themes or templates into their effective HTML5 equivalent. Making best use of HTML5 also begs consideration of responsive and adaptive frameworks (for customizing the user’s experience of your content on portable devices) and of improving the adaptive behavior of content blocks. No two web sites are alike, so this presentation will cover the general concepts and then work through one common example: converting a popular, free web template into its attractive, responsively themed HTML5 layout equivalent. Then we will explore the content styling, demonstrate standard practices for encoding audiovisual and XML inclusions (MP3, OGG, SVG and mathML being common examples), and review popular HTML5 equivalents for features commonly called ‘shortcodes’. The resulting example theme will demonstrate principles that you can apply for your own themed content.

Statistics

Views

Total Views
225
Views on SlideShare
225
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Working with HTML5 Themes and Enhancements Working with HTML5 Themes and Enhancements Presentation Transcript

  • 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? Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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 Copyright © 2012 Contelligence Group, LLC 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?) Copyright © 2012 Contelligence Group, LLC 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? Copyright © 2012 Contelligence Group, LLC 7 October 2012
  • 8 The questions you really asked  Copyright © 2012 Contelligence Group, LLC 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 Copyright © 2012 Contelligence Group, LLC 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.”  Copyright © 2012 Contelligence Group, LLC 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! Copyright © 2012 Contelligence Group, LLC 7 October 2012
  • HTML5: Fact or Fiction? 12  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. Copyright © 2012 Contelligence Group, LLC 7 October 2012
  • HTML5: Fact or Fiction? 13  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.” Copyright © 2012 Contelligence Group, LLC 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?) Copyright © 2012 Contelligence Group, LLC 7 October 2012
  • OK, what is semantic markup? 15  I’ve talked about page and content semantics.  What is a semantic? Copyright © 2012 Contelligence Group, LLC 7 October 2012
  • OK, what is semantic markup? 16  I’ve talked about page and content semantics.  What is a semantic? Copyright © 2012 Contelligence Group, LLC 7 October 2012
  • OK, what is semantic markup? 17  I’ve talked about page and content semantics.  What is a semantic? Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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> Copyright © 2012 Contelligence Group, LLC 7 October 2012
  • Exercise: map HTML5 elements to page and content 20 The page Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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 Copyright © 2012 Contelligence Group, LLC 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.) Copyright © 2012 Contelligence Group, LLC 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 Copyright © 2012 Contelligence Group, LLC 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? Copyright © 2012 Contelligence Group, LLC 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.)  Copyright © 2012 Contelligence Group, LLC 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 Copyright © 2012 Contelligence Group, LLC 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 Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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> Copyright © 2012 Contelligence Group, LLC 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/ Copyright © 2012 Contelligence Group, LLC 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. Copyright © 2012 Contelligence Group, LLC 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) Copyright © 2012 Contelligence Group, LLC  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 Copyright © 2012 Contelligence Group, LLC 7 October 2012