Progressively Enhancing WordPress Themes

Progressive Enhancement Use all the latest hotness without breaking your theme for anybodyNatalie MacLees SoCal WP@nataliemac @socalwp

If you’re looking for the more honest, truthfulanswer to pretty much anyquestion on web design and usability, here it is:

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

TAFEE http://paulirish.com/2011/tiered-adaptive-front-end-experiences/

TAFEE• More time for what matters http://paulirish.com/2011/tiered-adaptive-front-end-experiences/

TAFEE• More time for what matters• Growth audience http://paulirish.com/2011/tiered-adaptive-front-end-experiences/

TAFEE• More time for what matters• Growth audience• Improve site performance http://paulirish.com/2011/tiered-adaptive-front-end-experiences/

TAFEE• More time for what matters• Growth audience• Improve site performance• Better search engine rankings http://paulirish.com/2011/tiered-adaptive-front-end-experiences/

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/

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/

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/

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/

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);

Soft Keyboard

Browser Validation

HTML5 Elements<header> <article> <figure><nav> <aside> <figcaption><hgroup> <section> <details><footer> <time> <summary>

HTML5 Elements Option 1 http://remysharp.com/2009/01/07/html5-enabling-script/

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>

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 •Animations•Border images •Tabular display•Multiple background •Web fonts images

CSS Targeting <html <?php language_attributes(); ?>>

I want to use... SVG

SVG? Really?•<embed>/<object> •Filters•<img> •SMIL animation•CSS backgrounds •Fonts•HTML element effects•Inline

SVG CSS Background http://designfestival.com/a-farewell-to-css3-gradients/

I want to use... 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="colophon" role="contentinfo"><div class="widget-area" role="complementary"> http://www.w3.org/WAI/intro/aria

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/mobile-ﬁrst

How-to• Start with the content http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-ﬁrst

How-to• Start with the content• Mobile-ﬁrst http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-ﬁrst

How-to• Start with the content• Mobile-ﬁrst• Liquid Layout - including media http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-ﬁrst

How-to• Start with the content• Mobile-ﬁrst• Liquid Layout - including media• Media queries http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-ﬁrst

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 lengths for large screens

Solutions

Solutions• Responsive Images adaptive-images.com

Solutions• Responsive Images adaptive-images.com• Conditional content loaded in via ajax http://24ways.org/2011/conditional-loading-for-responsive-designs

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-ﬁrst-css-sass-and-ie/

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-ﬁrst-css-sass-and-ie/• Size up text size with browser width http://goldengridsystem.com/

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-ﬁrst-css-sass-and-ie/• Size up text size with browser width http://goldengridsystem.com/• JS polyﬁll http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive- layouts/

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-ﬁrst-css-sass-and-ie/• Size up text size with browser width http://goldengridsystem.com/• JS polyﬁll http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive- layouts/• Conditional comments http://adactio.com/journal/4494/

Questions?

Progressively Enhancing WordPress Themes

by Purple Pen Productions on Dec 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 17

Statistics

Progressively Enhancing WordPress Themes — Presentation Transcript

http://paper.li	16
http://a0.twimg.com	1