Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl

1,822 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,822
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl

  1. 1. •  Magento •  Responsive Theme vs Mobile Theme •  Creating a Responsive Theme •  Creating a Mobile Theme
  2. 2. First, A Story
  3. 3. RESPONSIVE VS MOBILE WEB SITES Responsive •  Same theme (HTML, PHP) •  Fluid layout - based on % not px •  Use media queries to apply different CSS for different sizes Mobile •  Separate theme created specifically for devices •  Create new theme with HTML5 •  Magento theme structure and inheritance supports reuse
  4. 4. RESPONSIVE 75% more than just a desktop theme MOBILE 75% of the time it took create a desktop theme BUT HOW MUCH TIME ($) DO THEY COST
  5. 5. WHICH IS BETTER? IT DEPENDS
  6. 6. EXAMPLES www.scosche.com -  Sell mobile accessories -  Optimizing for mobile devices to purchase is key -  iPad conversion +60%, mobile phones +40%
  7. 7. EXAMPLES www.citywinery.com -  Working Winery, Restaurant and Music Events -  Customers mostly come from desktop -  Too Much Content -  Mobile should focus on what users need on the go -  Less phone calls -> Happier Customers
  8. 8. RESPONSIVE TECHNOLOGIES •  Twitter Bootstrap •  Foundation •  GetSkeleton •  Media Queries
  9. 9. RESPONSIVE STRATEGIES From Brad Frost •  Responsive Retrofitting (desktop first) •  Responsive Mobile Sites •  Mobile-First Responsive Design •  Piecemeal http://bradfrostweb.com/
  10. 10. RESPONSIVE EXAMPLE Add Twitter Bootstrap to your Theme Download bootstrap from http://twitter.github.io/bootstrap/getting-started.html
  11. 11. RESPONSIVE EXAMPLE Create a local.xml file in skin/frontend/default/responsive/layout
  12. 12. RESPONSIVE EXAMPLE Modify Templates to add the Bootstrap grid classes skin/frontend/default/responsive/template/2columns-left.phtml
  13. 13. RESPONSIVE EXAMPLE Continue to modify the CSS and add styles for different screen widths using media queries
  14. 14. RESPONSIVE EXAMPLE
  15. 15. B-RESPONSIVE https://github.com/redlightblinking/b-responsive JOIN US!
  16. 16. MOBILE •  HTML5/CSS3 •  jQuery Mobile •  Magento iPhone Theme
  17. 17. MOBILE EXAMPLE Using Magento Design Exception to serve the mobile theme for mobile user agents iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|mobi|Windows Mobile|Android|Opera Mini!
  18. 18. MOBILE THEME
  19. 19. HAMBURGER MENU
  20. 20. A NOTE ABOUT PERFORMANCE DON’T DO STUPID THINGS •  IE DOES NOT NEED TO BE RESPONISVE •  REMOVE BLOCKS, DON’T JUST HIDE THEM •  REMOVE ASSETS (css, js, images, etc..)
  21. 21. TOOLS User Agent Switcher -  Firefox Addon Firefox -> Web Developer -> Responsive Design View •  Simulate touch events Web Developers Toolbar
  22. 22. TESTING ON MULTIPLE DEVICES WWW.BROWSERSTACK.COM
  23. 23. THANK YOU!!! Kimberely Thomas www.twitter.com/magentogirl www.redlightblinking.com

×