Your SlideShare is downloading. ×
0
Progressive Enhancement    Use all the latest hotness without breaking your theme for anybodyNatalie MacLees              ...
If you’re looking for the   more honest, truthfulanswer to pretty much anyquestion on web design and     usability, here i...
If you’re looking for the   more honest, truthfulanswer to pretty much anyquestion on web design and     usability, here i...
TAFEE    http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
TAFEE•   More time for what matters                                 http://paulirish.com/2011/tiered-adaptive-front-end-ex...
TAFEE• More time for what matters• Growth audience                               http://paulirish.com/2011/tiered-adaptive...
TAFEE• More time for what matters• Growth audience• Improve site performance                               http://pauliris...
TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings               ...
TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings• A future proo...
TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings• A future proo...
TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings• A future proo...
I want to use...    HTML5
What is HTML5?
Search<input type="search" results="5"class="field" name="s" id="s"placeholder="<?php esc_attr_e( Search,twentyeleven ); ?...
Search         http://css-tricks.com/webkit-html5-search-inputs/
Search         http://css-tricks.com/webkit-html5-search-inputs/
Search         http://css-tricks.com/webkit-html5-search-inputs/
HTML5 Comment Formfunction html5_comment_form($i) {  $i[email] = str_replace("text", "email",$i[email]);  $i[url]   = str_...
Soft Keyboard
Soft Keyboard
Soft Keyboard
Soft Keyboard
Browser Validation
Browser Validation
Browser Validation
HTML5 Elements<header>       <article>   <figure><nav>          <aside>     <figcaption><hgroup>       <section>   <detail...
HTML5 Elements Option 1<!--[if lt IE 9]><script src="<?php echoget_template_directory_uri(); ?>/js/html5.js" type="text/ja...
HTML5 Elements Option 2<div class="article"><article>...</article></div><div class="header"><header>...</header></div><div...
HTML5 Elements Option 3<article>	 <header>	 	 <h1><?php the_title(); ?></h1>	 </header>	 <?php the_content(); ?></article>
I want to use...     CSS3
CSS3•Gradients             •RGBA•Box shadows           •Background size•Text shadows          •Transforms•Border radius   ...
CSS Targeting<!--[if IE 6]>  <html id="ie6" <?php language_attributes(); ?>><![endif]--><!--[if IE 7]>  <html id="ie7" <?p...
I want to use...     SVG
SVG? Really?•<embed>/<object>       •Filters•<img>                  •SMIL animation•CSS backgrounds        •Fonts•HTML ele...
SVG? Really?•<embed>/<object>       •Filters•<img>                  •SMIL animation•CSS backgrounds        •Fonts•HTML ele...
SVG CSS Background            http://designfestival.com/a-farewell-to-css3-gradients/
SVG CSS Background            http://designfestival.com/a-farewell-to-css3-gradients/
I want to use...     ARIA
ARIA
ARIA•WAI = Web AccessibilityInitiative
ARIA•WAI = Web AccessibilityInitiative•ARIA = Accessible Rich InternetApplications
ARIA<header id="branding" role="banner"><nav id="access" role="navigation"><div id="content" role="main"><footer id="colop...
I want to use...Responsive Design
Responsive vs. Adaptive
Responsive vs. Adaptive•Responsive = any size
Responsive vs. Adaptive•Responsive = any size•Adaptive = selected sizes
How-to     http://www.abookapart.com/products/responsive-web-design               http://www.abookapart.com/products/mobil...
How-to•   Start with the content                             http://www.abookapart.com/products/responsive-web-design     ...
How-to• Start with the content• Mobile-first                           http://www.abookapart.com/products/responsive-web-de...
How-to• Start with the content• Mobile-first• Liquid Layout - including media                                    http://www...
How-to• Start with the content• Mobile-first• Liquid Layout - including media• Media queries                               ...
Caveats
Caveats•   Large images to small screens?
Caveats• Large images to small screens?• Context by device
Caveats• Large images to small screens?• Context by device• Not all browsers support media queries
Caveats• Large images to small screens?• Context by device• Not all browsers support media queries• Ridiculous line length...
Solutions
Solutions•   Responsive Images      adaptive-images.com
Solutions• Responsive Images    adaptive-images.com• Conditional content loaded in via ajax    http://24ways.org/2011/cond...
Solutions• Responsive Images    adaptive-images.com• Conditional content loaded in via ajax    http://24ways.org/2011/cond...
Solutions• Responsive Images    adaptive-images.com• Conditional content loaded in via ajax    http://24ways.org/2011/cond...
Solutions• Responsive Images    adaptive-images.com• Conditional content loaded in via ajax    http://24ways.org/2011/cond...
Solutions•   Responsive Images      adaptive-images.com• Conditional content loaded in via ajax      http://24ways.org/201...
Questions?
Progressively Enhancing WordPress Themes
Upcoming SlideShare
Loading in...5
×

Progressively Enhancing WordPress Themes

1,683

Published on

Natalie MacLees' presentation on Progressively Enhancing WordPress themes from WordCamp Las Vegas 2011. Covers how to implement HTML5, CSS3, ARIA, SVG, and Responsive Design without breaking your theme for anybody.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,683
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • many things to many people\nseveral different specs/technologies\nfor us: forms and elements\n
  • \n\n
  • Pros:\nEnables search history with the results attribute\nAllows field to be easily cleared\nOptional incremental attribute for firing off events for live search\nTreated as a text field for browsers without support\nCons:\nLimited ability to style in some browsers (Webkit)\nNote:\nPlaceholder attribute already used in TwentyEleven\nSee http://css-tricks.com/7261-webkit-html5-search-inputs/ for styling information and CSS limitations\n\n
  • Pros:\nEnables search history with the results attribute\nAllows field to be easily cleared\nOptional incremental attribute for firing off events for live search\nTreated as a text field for browsers without support\nCons:\nLimited ability to style in some browsers (Webkit)\nNote:\nPlaceholder attribute already used in TwentyEleven\nSee http://css-tricks.com/7261-webkit-html5-search-inputs/ for styling information and CSS limitations\n\n
  • \n
  • Pros:\nHandy soft keyboard customization\n
  • Pros:\nHandy soft keyboard customization\n
  • Pros:\nHandy soft keyboard customization\n
  • Pros:\nAutomatic form validation for valid email and url\nTreated as regular text fields in browsers without support\nCons:\nEarly browser support was shaky at best - poor error messaging\nLoss of control over presentation of error messages\nNotes:\nNeed to update CSS and JavaScript to handle new attribute values\n
  • Pros:\nAutomatic form validation for valid email and url\nTreated as regular text fields in browsers without support\nCons:\nEarly browser support was shaky at best - poor error messaging\nLoss of control over presentation of error messages\nNotes:\nNeed to update CSS and JavaScript to handle new attribute values\n
  • Pros:\nLess &lt;div&gt;s - code is easier to read\nGive semantic meaning to common elements\nCons:\nNeeds some extra styling help\nIE doesn&amp;#x2019;t recognize these elements without JavaScript\n
  • JavaScript polyfill\nRemy Sharp&amp;#x2019;s HTML5 Shiv Included with TwentyEleven\nPros:\nSimple and neat\nCons:\nRelies on JavaScript\n
  • &lt;div&gt; wrappers for new elements\nPros:\nNo JS reliance\nBullet-proof\nCons:\nExtra markup (but not really much)\nNotes: Use &lt;div&gt;s, not new elements for CSS styling and JS\n
  • Avoid using new elements for CSS purposes\nAvoid adding classes and IDs to new elements\nInclude in markup for semantics\nAdd wrapper &lt;div&gt;s as necessary\nPros:\nLightweight\nCons:\nMaintenance and keeping track\n
  • \n
  • Pros:\nAchieve gorgeous results without images\nUse fun type faces on the web\nAccomplish complex tasks that would otherwise be extremely difficult or impossible\nCons:\nNeed to check all fallbacks\nCan cause lag in redrawing/scrolling if used too heavily\nNeed to specify the same properties and values over and over again with vendor prefixes and sometimes different syntax\nNotes:\nCheck and double-check fallbacks - for example, you can&amp;#x2019;t rely on only a box shadow to separate one element from another\nSupporting vendor prefixes and multiple syntaxes easier when using something like Less or Sass/Compass\n\n
  • Allows you to easily target CSS rules for the most difficult to accommodate browsers\n
  • \n
  • Not ready to be used - difficult to provide adequate fallbacks\nHowever - CSS backgrounds are a great candidate - easy to provide an elegant fallback\nCan be a great alternative to CSS3 gradient backgrounds, which can be tough to deal with\nhttp://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html\n
  • Not ready to be used - difficult to provide adequate fallbacks\nHowever - CSS backgrounds are a great candidate - easy to provide an elegant fallback\nCan be a great alternative to CSS3 gradient backgrounds, which can be tough to deal with\nhttp://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html\n
  • Not ready to be used - difficult to provide adequate fallbacks\nHowever - CSS backgrounds are a great candidate - easy to provide an elegant fallback\nCan be a great alternative to CSS3 gradient backgrounds, which can be tough to deal with\nhttp://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html\n
  • Not ready to be used - difficult to provide adequate fallbacks\nHowever - CSS backgrounds are a great candidate - easy to provide an elegant fallback\nCan be a great alternative to CSS3 gradient backgrounds, which can be tough to deal with\nhttp://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html\n
  • Not ready to be used - difficult to provide adequate fallbacks\nHowever - CSS backgrounds are a great candidate - easy to provide an elegant fallback\nCan be a great alternative to CSS3 gradient backgrounds, which can be tough to deal with\nhttp://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html\n
  • Not ready to be used - difficult to provide adequate fallbacks\nHowever - CSS backgrounds are a great candidate - easy to provide an elegant fallback\nCan be a great alternative to CSS3 gradient backgrounds, which can be tough to deal with\nhttp://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html\n
  • Not ready to be used - difficult to provide adequate fallbacks\nHowever - CSS backgrounds are a great candidate - easy to provide an elegant fallback\nCan be a great alternative to CSS3 gradient backgrounds, which can be tough to deal with\nhttp://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Content first - for WP? We know what types of content we&apos;ll have - posts, pages, images, videos, links, etc.\nMobile first ensures the experience is optimal for the hardest-to-please audience\nPercentage widths for everything\nUse media queries to adjust layout\nNotes:\nDesign and development are no longer two separate entities\n
  • Content first - for WP? We know what types of content we&apos;ll have - posts, pages, images, videos, links, etc.\nMobile first ensures the experience is optimal for the hardest-to-please audience\nPercentage widths for everything\nUse media queries to adjust layout\nNotes:\nDesign and development are no longer two separate entities\n
  • Content first - for WP? We know what types of content we&apos;ll have - posts, pages, images, videos, links, etc.\nMobile first ensures the experience is optimal for the hardest-to-please audience\nPercentage widths for everything\nUse media queries to adjust layout\nNotes:\nDesign and development are no longer two separate entities\n
  • Content first - for WP? We know what types of content we&apos;ll have - posts, pages, images, videos, links, etc.\nMobile first ensures the experience is optimal for the hardest-to-please audience\nPercentage widths for everything\nUse media queries to adjust layout\nNotes:\nDesign and development are no longer two separate entities\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Progressively Enhancing WordPress Themes"

    1. 1. Progressive Enhancement Use all the latest hotness without breaking your theme for anybodyNatalie MacLees SoCal WP@nataliemac @socalwp
    2. 2. If you’re looking for the more honest, truthfulanswer to pretty much anyquestion on web design and usability, here it is:
    3. 3. If you’re looking for the more honest, truthfulanswer to pretty much anyquestion on web design and usability, here it is: It depends. - Jeremy Keith
    4. 4. TAFEE http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    5. 5. TAFEE• More time for what matters http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    6. 6. TAFEE• More time for what matters• Growth audience http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    7. 7. TAFEE• More time for what matters• Growth audience• Improve site performance http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    8. 8. TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    9. 9. TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings• A future proof theme http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    10. 10. TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings• A future proof theme• Easier maintenance and updates http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    11. 11. TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings• A future proof theme• Easier maintenance and updates• More design possibilities http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
    12. 12. I want to use... HTML5
    13. 13. What is HTML5?
    14. 14. Search<input type="search" results="5"class="field" name="s" id="s"placeholder="<?php esc_attr_e( Search,twentyeleven ); ?>" />
    15. 15. Search http://css-tricks.com/webkit-html5-search-inputs/
    16. 16. Search http://css-tricks.com/webkit-html5-search-inputs/
    17. 17. Search http://css-tricks.com/webkit-html5-search-inputs/
    18. 18. HTML5 Comment Formfunction html5_comment_form($i) { $i[email] = str_replace("text", "email",$i[email]); $i[url] = str_replace("text", "url",$i[url]); return $i;}add_filter(comment_form_default_fields,html5_comment_form);
    19. 19. Soft Keyboard
    20. 20. Soft Keyboard
    21. 21. Soft Keyboard
    22. 22. Soft Keyboard
    23. 23. Browser Validation
    24. 24. Browser Validation
    25. 25. Browser Validation
    26. 26. HTML5 Elements<header> <article> <figure><nav> <aside> <figcaption><hgroup> <section> <details><footer> <time> <summary>
    27. 27. HTML5 Elements Option 1<!--[if lt IE 9]><script src="<?php echoget_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script><![endif]--> http://remysharp.com/2009/01/07/html5-enabling-script/
    28. 28. HTML5 Elements Option 2<div class="article"><article>...</article></div><div class="header"><header>...</header></div><div class="footer"><footer>...</footer></div><div class="aside"><aside>...</aside></div>
    29. 29. HTML5 Elements Option 3<article> <header> <h1><?php the_title(); ?></h1> </header> <?php the_content(); ?></article>
    30. 30. I want to use... CSS3
    31. 31. CSS3•Gradients •RGBA•Box shadows •Background size•Text shadows •Transforms•Border radius •Animations•Border images •Tabular display•Multiple background •Web fonts images
    32. 32. CSS Targeting<!--[if IE 6]> <html id="ie6" <?php language_attributes(); ?>><![endif]--><!--[if IE 7]> <html id="ie7" <?php language_attributes(); ?>><![endif]--><!--[if IE 8]> <html id="ie8" <?php language_attributes(); ?>><![endif]--><!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>><!--<![endif]-->
    33. 33. I want to use... SVG
    34. 34. SVG? Really?•<embed>/<object> •Filters•<img> •SMIL animation•CSS backgrounds •Fonts•HTML element effects•Inline
    35. 35. SVG? Really?•<embed>/<object> •Filters•<img> •SMIL animation•CSS backgrounds •Fonts•HTML element effects•Inline
    36. 36. SVG CSS Background http://designfestival.com/a-farewell-to-css3-gradients/
    37. 37. SVG CSS Background http://designfestival.com/a-farewell-to-css3-gradients/
    38. 38. I want to use... ARIA
    39. 39. ARIA
    40. 40. ARIA•WAI = Web AccessibilityInitiative
    41. 41. ARIA•WAI = Web AccessibilityInitiative•ARIA = Accessible Rich InternetApplications
    42. 42. ARIA<header id="branding" role="banner"><nav id="access" role="navigation"><div id="content" role="main"><footer id="colophon" role="contentinfo"><div class="widget-area" role="complementary"> http://www.w3.org/WAI/intro/aria
    43. 43. I want to use...Responsive Design
    44. 44. Responsive vs. Adaptive
    45. 45. Responsive vs. Adaptive•Responsive = any size
    46. 46. Responsive vs. Adaptive•Responsive = any size•Adaptive = selected sizes
    47. 47. How-to http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-first
    48. 48. How-to• Start with the content http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-first
    49. 49. How-to• Start with the content• Mobile-first http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-first
    50. 50. How-to• Start with the content• Mobile-first• Liquid Layout - including media http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-first
    51. 51. How-to• Start with the content• Mobile-first• Liquid Layout - including media• Media queries http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-first
    52. 52. Caveats
    53. 53. Caveats• Large images to small screens?
    54. 54. Caveats• Large images to small screens?• Context by device
    55. 55. Caveats• Large images to small screens?• Context by device• Not all browsers support media queries
    56. 56. Caveats• Large images to small screens?• Context by device• Not all browsers support media queries• Ridiculous line lengths for large screens
    57. 57. Solutions
    58. 58. Solutions• Responsive Images adaptive-images.com
    59. 59. Solutions• Responsive Images adaptive-images.com• Conditional content loaded in via ajax http://24ways.org/2011/conditional-loading-for-responsive-designs
    60. 60. Solutions• Responsive Images adaptive-images.com• Conditional content loaded in via ajax http://24ways.org/2011/conditional-loading-for-responsive-designs• Make friends with Compass/SASS http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
    61. 61. Solutions• Responsive Images adaptive-images.com• Conditional content loaded in via ajax http://24ways.org/2011/conditional-loading-for-responsive-designs• Make friends with Compass/SASS http://nicolasgallagher.com/mobile-first-css-sass-and-ie/• Size up text size with browser width http://goldengridsystem.com/
    62. 62. Solutions• Responsive Images adaptive-images.com• Conditional content loaded in via ajax http://24ways.org/2011/conditional-loading-for-responsive-designs• Make friends with Compass/SASS http://nicolasgallagher.com/mobile-first-css-sass-and-ie/• Size up text size with browser width http://goldengridsystem.com/• JS polyfill http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive- layouts/
    63. 63. Solutions• Responsive Images adaptive-images.com• Conditional content loaded in via ajax http://24ways.org/2011/conditional-loading-for-responsive-designs• Make friends with Compass/SASS http://nicolasgallagher.com/mobile-first-css-sass-and-ie/• Size up text size with browser width http://goldengridsystem.com/• JS polyfill http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive- layouts/• Conditional comments http://adactio.com/journal/4494/
    64. 64. Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×