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.
1. Progressive Enhancement
Use all the latest hotness without breaking your theme for anybody
Natalie MacLees SoCal WP
@nataliemac @socalwp
2.
3. If you’re looking for the
more honest, truthful
answer to pretty much any
question on web design and
usability, here it is:
4. If you’re looking for the
more honest, truthful
answer to pretty much any
question on web design and
usability, here it is:
It depends.
- Jeremy Keith
6. TAFEE
• More time for what matters
http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
7. TAFEE
• More time for what matters
• Growth audience
http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
8. TAFEE
• More time for what matters
• Growth audience
• Improve site performance
http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
9. TAFEE
• More time for what matters
• Growth audience
• Improve site performance
• Better search engine rankings
http://paulirish.com/2011/tiered-adaptive-front-end-experiences/
10. 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/
11. 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/
12. 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/
49. How-to
• Start with the content
http://www.abookapart.com/products/responsive-web-design
http://www.abookapart.com/products/mobile-first
50. How-to
• Start with the content
• Mobile-first
http://www.abookapart.com/products/responsive-web-design
http://www.abookapart.com/products/mobile-first
51. 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
52. 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
60. Solutions
• Responsive Images
adaptive-images.com
• Conditional content loaded in via ajax
http://24ways.org/2011/conditional-loading-for-responsive-designs
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/
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/
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/
64. 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/
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 <div>s - code is easier to read\nGive semantic meaning to common elements\nCons:\nNeeds some extra styling help\nIE doesn&#x2019;t recognize these elements without JavaScript\n
JavaScript polyfill\nRemy Sharp&#x2019;s HTML5 Shiv Included with TwentyEleven\nPros:\nSimple and neat\nCons:\nRelies on JavaScript\n
<div> wrappers for new elements\nPros:\nNo JS reliance\nBullet-proof\nCons:\nExtra markup (but not really much)\nNotes: Use <div>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 <div>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&#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'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'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'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'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