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.

1. THEMING & MOBILE
optimizing your site for various devices
WORDCAMP BOSTON 2011
sara cannon / sara-cannon.com / follow @saracannon

2. ABOUT ME
SARA CANNON
Birmingham, AL
@saracannon
slideshare.net/saracannon
sara-cannon.com
WORDCAMP BOSTON

3. THEMING AND MOBILE
WORDCAMP BOSTON

4. THEMING AND MOBILE
WORDCAMP BOSTON

5. THEMING AND MOBILE
WORDCAMP BOSTON

6. SO MANY DEVICES AHHHH!
WORDCAMP BOSTON

7. SO MANY DEVICES AHHHH!
WORDCAMP BOSTON

8. SO MANY DEVICES AHHHH!
WORDCAMP BOSTON

9. THEMING AND MOBILE
CONTENT.
WORDCAMP BOSTON

10. THEMING AND MOBILE
WHAT DO WE DO?
DO WE EVEN DO ANYTHING?
WORDCAMP BOSTON

11. THEMING AND MOBILE
1. Separate Mobile Site
2. Use a Plugin / eme
3. Responsive Web Design
4. Do Nothing (dont-cha even worry about it!)
WORDCAMP BOSTON

12. THEMING AND MOBILE
Mobile WordPress
Plugins & emes
WORDCAMP BOSTON

13. THEMING AND MOBILE
WORDCAMP BOSTON

14. THEMING AND MOBILE
WORDCAMP BOSTON

15. THEMING AND MOBILE
WORDCAMP BOSTON

16. THEMING AND MOBILE
WORDCAMP BOSTON

17. THEMING AND MOBILE
WORDCAMP BOSTON

18. THEMING AND MOBILE
WORDCAMP BOSTON

19. THEMING AND MOBILE
WORDCAMP BOSTON

20. THEMING AND MOBILE
WORDCAMP BOSTON

21. RESPONSIVE WEB DESIGN
come on. be a smart little website.

22. BE RESPONSIVE!
hicksdesign.co.uk

23. BE RESPONSIVE!

24. BE RESPONSIVE!
twentyelevendemo.wordpress.com

25. CSS GRIDS | BE RESPONSIVE!
twentyelevendemo.wordpress.com

26. BE RESPONSIVE!
twentyelevendemo.wordpress.com

27. CSS GRIDS | BE RESPONSIVE!
8faces.com

28. CSS GRIDS | BE RESPONSIVE!
colly.com

29. BE RESPONSIVE!
HOW DO WE BECOME RESPONSIVE?
1. adaptive grid systems
2. media queries
3. lots of nagling and crying
4. ???????
5. pro t
WORDCAMP BOSTON

30. ADAPTIVE GRID SYSTEMS
responsive (responsible?) design
WORDCAMP BOSTON

31. CSS GRIDS | BE RESPONSIVE!
960.gs blueprintcss.org
WORDCAMP BOSTON

32. CSS GRIDS | BE RESPONSIVE!

33. CSS GRIDS | BE RESPONSIVE!

34. THEMING AND MOBILE
exible grids
alistapart.com/articles/ uidgrids
WORDCAMP BOSTON

35. CSS GRIDS | BE RESPONSIVE!
cssgrid.net

36. CSS GRIDS | BE RESPONSIVE!

37. CSS GRIDS | BE RESPONSIVE!
lessframework.com

38. CSS GRIDS | BE RESPONSIVE!
%
WORDCAMP BOSTON

39. CSS GRIDS | BE RESPONSIVE!
target ÷ context = result
940
100%
720 220
76.5957447% 23.40425535%

40. CSS GRIDS | BE RESPONSIVE!
responsivetwentyten.com

41. CSS GRIDS | BE RESPONSIVE!

42. CSS GRIDS | BE RESPONSIVE!
WORDCAMP BOSTON

43. BE RESPONSIVE!
twentyelevendemo.wordpress.com

44. MEDIA QUERIES
whoa, this is css?
WORDCAMP BOSTON

45. MEDIA QUERIES
IT’S KIND OF LIKE CONDITIONAL COMMENTS...
...BUT WITHIN CSS!
WORDCAMP BOSTON

46. MEDIA QUERIES
@MEDIA
WORDCAMP BOSTON

47. MEDIA QUERIES

48. MEDIA QUERIES
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

49. MEDIA QUERIES
RESOURCES ON MEDIA QUERIES
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

50. CSS GRIDS | BE RESPONSIVE!
RESPONSIVE WEB DESIGN
must see articles/resources
WORDCAMP BOSTON

51. CSS GRIDS | BE RESPONSIVE!
books.alistapart.com/products/responsive-web-design

52. CSS GRIDS | BE RESPONSIVE!
alistapart.com/articles/responsive-web-design

53. CSS GRIDS | BE RESPONSIVE!
alistapart.com/articles/ uidgrids

54. CSS GRIDS | BE RESPONSIVE!
smashingmagazine.com/2011/01/12/guidelines-for-
responsive-web-design

55. CSS GRIDS | BE RESPONSIVE!
unstoppablerobotninja.com/entry/ uid-images/

56. CSS GRIDS | BE RESPONSIVE!
smashingmagazine.com/2011/07/22/responsive-web-
design-techniques-tools-and-design-strategies

57. CSS GRIDS | BE RESPONSIVE!
mediaqueri.es

58. TYPOGRAPHY ON THE WEB
Check All Browsers
Always.
WORDCAMP BOSTON

59. TYPOGRAPHY ON THE WEB
Check Your Devices
WORDCAMP BOSTON

60. THEMING AND MOBILE
CONTENT.
WORDCAMP BOSTON

61. THEMING & MOBILE
ank You!
sara cannon / sara-cannon.com / follow @saracannon