Theming & Mobile - Optimizing your Site for Various Devices

9,605 views
9,099 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
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,605
On SlideShare
0
From Embeds
0
Number of Embeds
1,816
Actions
Shares
0
Downloads
101
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

×