Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
THEMING & MOBILE optimizing your site for various devices WORDCAMP BOSTON 2011sara cannon / sara-canno...
ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
SO MANY DEVICES AHHHH! WORDCAMP BOSTON
SO MANY DEVICES AHHHH! WORDCAMP BOSTON
SO MANY DEVICES AHHHH! WORDCAMP BOSTON
THEMING AND MOBILECONTENT. WORDCAMP BOSTON
THEMING AND MOBILE WHAT DO WE DO?DO WE EVEN DO ANYTHING? WORDCAMP BOSTON
THEMING AND MOBILE1. Separate Mobile Site2. Use a Plugin / eme3. Responsive Web Design4. Do Nothing (dont-cha even worry ...
THEMING AND MOBILEMobile WordPressPlugins & emes WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
THEMING AND MOBILE WORDCAMP BOSTON
RESPONSIVE WEB DESIGN come on. be a smart little website.
BE RESPONSIVE! hicksdesign.co.uk
BE RESPONSIVE!
BE RESPONSIVE!twentyelevendemo.wordpress.com
CSS GRIDS | BE RESPONSIVE! twentyelevendemo.wordpress.com
BE RESPONSIVE!twentyelevendemo.wordpress.com
CSS GRIDS | BE RESPONSIVE! 8faces.com
CSS GRIDS | BE RESPONSIVE! colly.com
BE RESPONSIVE!HOW DO WE BECOME RESPONSIVE? 1. adaptive grid systems 2. media queries3. lots of nagling and cryin...
ADAPTIVE GRID SYSTEMS responsive (responsible?) design WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE!960.gs blueprintcss.org WORDCAMP BOS...
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE!
THEMING AND MOBILE exible gridsalistapart.com/articles/ uidgrids WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE! cssgrid.net
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE! lessframework.com
CSS GRIDS | BE RESPONSIVE! % WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE!target ÷ context = result 940 100% 720 220 76.5...
CSS GRIDS | BE RESPONSIVE! responsivetwentyten.com
CSS GRIDS | BE RESPONSIVE!
CSS GRIDS | BE RESPONSIVE! WORDCAMP BOSTON
BE RESPONSIVE!twentyelevendemo.wordpress.com
MEDIA QUERIES whoa, this is css? WORDCAMP BOSTON
MEDIA QUERIESIT’S KIND OF LIKE CONDITIONAL COMMENTS... ...BUT WITHIN CSS! WORD...
MEDIA QUERIES @MEDIA WORDCAMP BOSTON
MEDIA QUERIES
MEDIA QUERIES CSS3-MEDIAQUERIES.JScode.google.com/p/css3-mediaqueries-jscss3-mediaqueries.js is a JavaScri...
MEDIA QUERIESRESOURCES ON MEDIA QUERIESw3.org/TR/css3-mediaqueriessmashingmagazine.com/2010/07/19/how-to-use-css3-media-qu...
CSS GRIDS | BE RESPONSIVE! RESPONSIVE WEB DESIGNmust see articles/resources WORDCAMP BOSTON
CSS GRIDS | BE RESPONSIVE!books.alistapart.com/products/responsive-web-design
CSS GRIDS | BE RESPONSIVE!alistapart.com/articles/responsive-web-design
CSS GRIDS | BE RESPONSIVE! alistapart.com/articles/ uidgrids
CSS GRIDS | BE RESPONSIVE!smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design
CSS GRIDS | BE RESPONSIVE! unstoppablerobotninja.com/entry/ uid-images/
CSS GRIDS | BE RESPONSIVE!smashingmagazine.com/2011/07/22/responsive-web- design-techniques-tools-and-design-strategies
CSS GRIDS | BE RESPONSIVE! mediaqueri.es
TYPOGRAPHY ON THE WEBCheck All Browsers Always. WORDCAMP BOSTON
TYPOGRAPHY ON THE WEBCheck Your Devices WORDCAMP BOSTON
THEMING AND MOBILECONTENT. WORDCAMP BOSTON
THEMING & MOBILE ank You!sara cannon / sara-cannon.com / follow @saracannon
Upcoming SlideShare
Loading in …5
×

Theming & Mobile - Optimizing your Site for Various Devices

11,062 views

Published on

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.

Published in: Technology, Business
no profile picture user

  • Be the first to comment

Show More

Theming & Mobile - Optimizing your Site for Various Devices

  1. THEMING & MOBILE optimizing your site for various devices WORDCAMP BOSTON 2011sara 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 MOBILECONTENT. WORDCAMP BOSTON
  10. THEMING AND MOBILE WHAT DO WE DO?DO WE EVEN DO ANYTHING? WORDCAMP BOSTON
  11. THEMING AND MOBILE1. Separate Mobile Site2. Use a Plugin / eme3. Responsive Web Design4. Do Nothing (dont-cha even worry about it!) WORDCAMP BOSTON
  12. THEMING AND MOBILEMobile WordPressPlugins & 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 queries3. 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 gridsalistapart.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 QUERIESIT’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.JScode.google.com/p/css3-mediaqueries-jscss3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ andSafari 2 transparently parse, test and apply CSS3 Media Queries WORDCAMP BOSTON
  49. MEDIA QUERIESRESOURCES ON MEDIA QUERIESw3.org/TR/css3-mediaqueriessmashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-websitecss-tricks.com/css-media-queries WORDCAMP BOSTON
  50. CSS GRIDS | BE RESPONSIVE! RESPONSIVE WEB DESIGNmust 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 WEBCheck All Browsers Always. WORDCAMP BOSTON
  59. TYPOGRAPHY ON THE WEBCheck Your Devices WORDCAMP BOSTON
  60. THEMING AND MOBILECONTENT. WORDCAMP BOSTON
  61. THEMING & MOBILE ank You!sara cannon / sara-cannon.com / follow @saracannon

×