Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressively Enhancing WordPress Themes

2,505 views

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
  • Be the first to comment

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?

×