THEMING & MOBILE
sara cannon / sara-cannon.com / follow @saracannon
optimizing your site for various devices
WORDCAMP BOSTON 2011
WORDCAMP BOSTON
SARA CANNON
A B O U T M E
Birmingham, AL
@saracannon
slideshare.net/saracannon
sara-cannon.com
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
S O M A N Y D E V I C E S A H H H H !
WORDCAMP BOSTON
S O M A N Y D E V I C E S A H H H H !
WORDCAMP BOSTON
S O M A N Y D E V I C E S A H H H H !
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
CONTENT.
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WHAT DO WE DO?
DO WE EVEN DO ANYTHING?
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
1. Separate Mobile Site
2. Use a Plugin / eme
3. Responsive Web Design
4. Do Nothing (dont-cha even worry about it!)
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
Mobile WordPress Plugins & emes
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
RESPONSIVE WEB DESIGN
come on. be a smart little website.
B E R E S P O N S I V E !
hicksdesign.co.uk
B E R E S P O N S I V E !
B E R E S P O N S I V E !
twentyelevendemo.wordpress.comtwentyelevendemo.wordpress.com
C S S G R I D S | B E R E S P O N S I V E !
twentyelevendemo.wordpress.com
B E R E S P O N S I V E !
twentyelevendemo.wordpress.com
C S S G R I D S | B E R E S P O N S I V E !
8faces.com
C S S G R I D S | B E R E S P O N S I V E !
colly.com
WORDCAMP BOSTON
B E R E S P O N S I V E !
HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems
2. media queries3. lots of !nagling and crying
4. ???????5. pro!t
ADAPTIVE GRID SYSTEMS
responsive (responsible?) design
WORDCAMP BOSTON
WORDCAMP BOSTON
C S S G R I D S | B E R E S P O N S I V E !
960.gs blueprintcss.org
C S S G R I D S | B E R E S P O N S I V E !
C S S G R I D S | B E R E S P O N S I V E !
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
"exible grids
alistapart.com/articles/"uidgrids
C S S G R I D S | B E R E S P O N S I V E !
cssgrid.net
C S S G R I D S | B E R E S P O N S I V E !
C S S G R I D S | B E R E S P O N S I V E !
lessframework.com
WORDCAMP BOSTON
C S S G R I D S | B E R E S P O N S I V E !
%
C S S G R I D S | B E R E S P O N S I V E !
target ÷ context = result
940
720 220
76.5957447% 23.40425535%
100%
C S S G R I D S | B E R E S P O N S I V E !
responsivetwentyten.com
C S S G R I D S | B E R E S P O N S I V E !
WORDCAMP BOSTON
C S S G R I D S | B E R E S P O N S I V E !
B E R E S P O N S I V E !
twentyelevendemo.wordpress.comtwentyelevendemo.wordpress.com
MEDIA QUERIES
whoa, this is css?
WORDCAMP BOSTON
WORDCAMP BOSTON
M E D I A Q U E R I E S
IT’S KIND OF LIKE CONDITIONAL COMMENTS...
...BUT WITHIN CSS!
WORDCAMP BOSTON
M E D I A Q U E R I E S
@MEDIA
M E D I A Q U E R I E S
WORDCAMP BOSTON
M E D I A Q U E R I E S
CSS3-MEDIAQUERIES.JS
code.google.com/p/css3-mediaqueries-js
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries
WORDCAMP BOSTON
R E S O U R C E S O N M E D I A Q U E R I E S
M E D I A Q U E R I E S
w3.org/TR/css3-mediaqueries
smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website
css-tricks.com/css-media-queries
WORDCAMP BOSTON
C S S G R I D S | B E R E S P O N S I V E !
RESPONSIVE WEB DESIGNmust see articles/resources
C S S G R I D S | B E R E S P O N S I V E !
books.alistapart.com/products/responsive-web-design
C S S G R I D S | B E R E S P O N S I V E !
alistapart.com/articles/responsive-web-design
C S S G R I D S | B E R E S P O N S I V E !
alistapart.com/articles/"uidgrids
C S S G R I D S | B E R E S P O N S I V E !
smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design
C S S G R I D S | B E R E S P O N S I V E !
unstoppablerobotninja.com/entry/!uid-images/
C S S G R I D S | B E R E S P O N S I V E !
smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies
C S S G R I D S | B E R E S P O N S I V E !
mediaqueri.es
WORDCAMP BOSTON
T Y P O G R A P H Y O N T H E W E B
Always.
Check All Browsers
WORDCAMP BOSTON
T Y P O G R A P H Y O N T H E W E B
Check Your Devices
WORDCAMP BOSTON
T H E M I N G A N D M O B I L E
CONTENT.
ank You!
sara cannon / sara-cannon.com / follow @saracannon
THEMING & MOBILE
