Your SlideShare is downloading. ×
0
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

981

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
981
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. •  Magento •  Responsive Theme vs Mobile Theme •  Creating a Responsive Theme •  Creating a Mobile Theme
  • 2. First, A Story
  • 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. 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. WHICH IS BETTER? IT DEPENDS
  • 6. EXAMPLES www.scosche.com -  Sell mobile accessories -  Optimizing for mobile devices to purchase is key -  iPad conversion +60%, mobile phones +40%
  • 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. RESPONSIVE TECHNOLOGIES •  Twitter Bootstrap •  Foundation •  GetSkeleton •  Media Queries
  • 9. RESPONSIVE STRATEGIES From Brad Frost •  Responsive Retrofitting (desktop first) •  Responsive Mobile Sites •  Mobile-First Responsive Design •  Piecemeal http://bradfrostweb.com/
  • 10. RESPONSIVE EXAMPLE Add Twitter Bootstrap to your Theme Download bootstrap from http://twitter.github.io/bootstrap/getting-started.html
  • 11. RESPONSIVE EXAMPLE Create a local.xml file in skin/frontend/default/responsive/layout
  • 12. RESPONSIVE EXAMPLE Modify Templates to add the Bootstrap grid classes skin/frontend/default/responsive/template/2columns-left.phtml
  • 13. RESPONSIVE EXAMPLE Continue to modify the CSS and add styles for different screen widths using media queries
  • 14. RESPONSIVE EXAMPLE
  • 15. B-RESPONSIVE https://github.com/redlightblinking/b-responsive JOIN US!
  • 16. MOBILE •  HTML5/CSS3 •  jQuery Mobile •  Magento iPhone Theme
  • 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. MOBILE THEME
  • 19. HAMBURGER MENU
  • 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. TOOLS User Agent Switcher -  Firefox Addon Firefox -> Web Developer -> Responsive Design View •  Simulate touch events Web Developers Toolbar
  • 22. TESTING ON MULTIPLE DEVICES WWW.BROWSERSTACK.COM
  • 23. THANK YOU!!! Kimberely Thomas www.twitter.com/magentogirl www.redlightblinking.com

×