theming & mobile - optimizing your site for various devices
DESCRIPTION
Your site is about your content. How do we optimize for all the different devices out there but still keep our brand? Do we even optimize at all? What are different ways we can look at how our content is handled? We are going to take a look at different techniques out there including: responsive web design, media queries, dealing with video, touch, and other various plugins & CSS tricks to truly display your site and your content in the best possible manner in any given scenario.TRANSCRIPT
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