Theming & Mobile - Optimizing your Site for Various Devices
•
12 likes•6,285 views
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.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (17)
More from Sara Cannon
More from Sara Cannon (20)
Recently uploaded
Recently uploaded (20)
Theming & Mobile - Optimizing your Site for Various Devices
- 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!
- 25. CSS GRIDS | 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
- 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