Responsive design mobile_apps
4 likes1,346 views
Mobile commerce is growing rapidly, with mobile sales estimated to reach $31 billion by 2015. There are three main approaches to targeting mobile users: separate mobile sites, apps, and responsive design. Responsive design uses CSS and media queries to dynamically rearrange and resize website content for any screen size. While it has higher initial development costs than mobile sites or apps, responsive design requires only one version to work on all devices and provides numerous SEO and user experience advantages over the long run. The primer recommends responsive design as the best strategy for true multi-device engagement.
Responsive design mobile_apps
- 1. Mobile Commerce Primer: Mobile Sites vs. Apps vs. Responsive Design
- 2. Mobile Commerce Primer It’s become imperative to reach consumers seamlessly across devices and channels. Why? + 2012 U.S. mobile sales: $17.1 billion (est.*) + 2015 U.S. mobile sales: $31 billion (est.) + By 2016, 7% of all e-commerce transactions will be conducted via mobile + Average Order Value and conversion rates are higher for tablet users than desktop users + Mobile-connected devices will exceed the world’s population by 2013 *Data courtesy Forrester Research Inc., Internet Retailer, ComScore
- 3. Mobile Commerce Primer Why don’t desktop sites function correctly on mobile devices? + Smartphones and tablets emulate desktop browsers by default + Rendering websites in full-page view requires users to constantly zoom and scroll to interact with the site + Some site functionality can also be lost on mobile devices The result is a choppy, disjointed user experience that is particularly undesirable in the conversion-focused e-commerce space.
- 4. Mobile Commerce Primer Desktop Sites on Mobile Screens
- 5. Mobile Commerce Primer There are currently 3 primary approaches to targeting the mobile consumer: + Separate, mobile-specific sites + Apps for smartphones and tablets + Responsive Design
- 6. Mobile Commerce Primer What are Mobile Websites? + Often referred to as “M-dot” sites (i.e. m.brandname.com) + Use a separate design/development instance geared to mobile devices + Mobile sites display effectively on the mobile devices for which they are created
- 7. Mobile Commerce Primer Mobile Websites
- 8. Mobile Commerce Primer Mobile Websites Pros Cons + Improved performance on (some) + Separate design and development mobile devices costs + Mobile-specific design + Ongoing maintenance, content + Good for specific functional uses creation, etc., in addition to (e.g. store locator) primary site tasks + Stripped-down user interface and content + Negative SEO implications + Device limitations – mobile designed for smartphones function poorly on tablets + Non-compatible with emerging device types
- 9. Mobile Commerce Primer Apps (Smartphone and Tablet) + Made ubiquitous with the launch of the iPhone in 2007 + Enable seamless functionality within the device + Splintered market (Apple iOS, Android, Windows 8) + Require separate app instances for smartphone/tablet users Worldwide market share Q1 2012 (Source Mobile Statistics)
- 10. Mobile Commerce Primer Apps (Smartphone and Tablet)
- 11. Mobile Commerce Primer Smartphone Apps Pros Cons + Device-specific design + Multiple design and + Ability to access device development costs (iOS, Android, etc.) functionality (i.e. camera, + Separate maintenance and contact list) content needs + Ability to create a targeted user + Frequent updates required experience + Low adoption – 80% of branded smartphone apps are downloaded less than 1000 times* + Low repeat usage – 60% of downloaded apps are used less than 5 times* + Over-crowded marketplaces *Via Deloitte & Touche; Loyalytics
- 12. Mobile Commerce Primer Responsive Design + Presents a new approach to website design and development + First appeared in the 2010 book Responsive Web Design by Ethan Marcotte + Uses a modular approach to design and development, leveraging CSS3 and media queries
- 13. Mobile Commerce Primer Responsive Design (cont’d) + Responsive sites “survey” the destination device, reorganizing and displaying site content, and altering functionality, accordingly + Allows for a single set of URLs across digital channels, which provide numerous SEO benefits + This approach works across devices, from smartphones and tablets to the largest web-enabled TVs
- 14. Mobile Commerce Primer Responsive Design
- 15. Mobile Commerce Primer Responsive Design Pros Cons + Requires a single + Initial development costs and design/development instance timeframe higher than a + 1 set of content (text, images, standalone website product catalog) across devices + Potential page load performance + Future-proof for new devices issues on slower networks + Numerous SEO and social sharing advantages + Endorsed by Google (preferred method for mobile development) + Initial costs offset by lower lifetime maintenance costs + Enables context-based design and functionality + Continually evolving framework
- 16. Mobile Commerce Primer Conclusions + For true multichannel, multi-device engagement, responsive design offers numerous advantages over other current solutions. + We fully recommend responsive design over alternative mobile strategies. + The future of responsive design will open the door to “context-based” site functionality. + Apps can be a viable solution in certain situations. Specifically, large retailers/brand manufacturers with sufficient resources, who are looking to push the experience envelope. + Mobile-specific site development has limited benefits in niche use cases. We believe this strategy will be further marginalized as responsive design becomes more mainstream. Still, it is preferable to ignoring the mobile channel. +To see responsive design in action, visit adapt.gorillagroup.com