•  Magento

•  Responsive Theme vs Mobile Theme

•  Creating a Responsive Theme

•  Creating a Mobile Theme

First, A Story

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

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

WHICH IS BETTER? IT DEPENDS

EXAMPLES

www.scosche.com -  Sell mobile accessories -  Optimizing for mobile devices to purchase is key -  iPad conversion +60%, mobile phones +40%

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

RESPONSIVE TECHNOLOGIES

•  Twitter Bootstrap •  Foundation •  GetSkeleton •  Media Queries

RESPONSIVE STRATEGIES

From Brad Frost •  Responsive Retrofitting (desktop first) •  Responsive Mobile Sites •  Mobile-First Responsive Design •  Piecemeal

http://bradfrostweb.com/

RESPONSIVE EXAMPLE

Add Twitter Bootstrap to your Theme

Download bootstrap from http://twitter.github.io/bootstrap/getting-started.html

RESPONSIVE EXAMPLE

Create a local.xml file in skin/frontend/default/responsive/layout

RESPONSIVE EXAMPLE

Modify Templates to add the Bootstrap grid classes

skin/frontend/default/responsive/template/2columns-left.phtml

RESPONSIVE EXAMPLE

Continue to modify the CSS and add styles for different screen widths using media queries

RESPONSIVE EXAMPLE

B-RESPONSIVE

https://github.com/redlightblinking/b-responsive

JOIN US!

MOBILE

•  HTML5/CSS3

•  jQuery Mobile

•  Magento iPhone Theme

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!

MOBILE THEME

HAMBURGER MENU

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..)

TOOLS

User Agent Switcher -  Firefox Addon Firefox -> Web Developer -> Responsive Design View •  Simulate touch events Web Developers Toolbar

TESTING ON MULTIPLE DEVICES

WWW.BROWSERSTACK.COM

THANK YOU!!!

Kimberely Thomas www.twitter.com/magentogirl

www.redlightblinking.com