Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design + E-Commerce = <3

Ee7858da539f69023efc718a93679eb4?s=47 Matthias Lau
September 13, 2013

Responsive Design + E-Commerce = <3

Responsive Commerce lässt mit einem >10% CR Lift das Herz vieler Shop-Betreiber schneller schlagen und doch ist Responsive Design aktuell noch eine Seltenheit in der E-Commerce Landschaft.
Warum ist für Responsive Commerce ein Umdenken erforderlich und wie sieht dieses aus? Warum lohnt sich das? Antworten gibt's in diesem Talk.

Ee7858da539f69023efc718a93679eb4?s=128

Matthias Lau

September 13, 2013
Tweet

More Decks by Matthias Lau

Other Decks in Business

Transcript

  1. RESPONSIVE COMMERCE . let me introduce you to PRESENTED BY

    MATTHIAS LAU
  2. { name: "Matthias Lau", link: "http://laumatthias.de", twitter: "@matthiaslau", hometown: {

    name: "Hamburg, Germany" }, bio: "Web-Allrounder mit Leidenschaft für E-Commerce, Coden, Hacken, Konzipieren, Designen.", work: { employer: { name: "Jimdo" }, position: { name: "Shop-Rakete" }, }, } /me
  3. Sources: http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/, http://techcrunch.com/2012/09/05/eric-schmidt-there-are-now-1-3-million-android-device-activations-per-day/ 371K Babies born per day 378K iPhones

    sold per day 562K iOS devices 1.3M Android devices activated per day
  4. 3.5“

  5. 3.5“ Apple iPhone 3G 4“ HTC Windows Phone 8S 4.3“

    Sony Xperia V 4.7“ HTC One 5“ Samsung Galaxy Note Samsung Galaxy Note II 5.5“
  6. 9.7“

  7. 9.7“ 10.1“ 7.9“ 8.9“ 11.6“ Acer Iconia W700 Google Nexus

    10 Samsung Galaxy Note 10.1 Sony Xperia Tablet Z Acer W510 HP ElitePad 900 Apple iPad Amazon Kindle Fire HD 8.9 Apple iPad Mini
  8. 6.1“ 7“ 7.9“ Apple iPad Mini Samsung Galaxy Tab 2

    7.0 Amazon Kindle Fire HD Asus Google Nexus 7 5.5“ Samsung Galaxy Note II Huawei Ascend Mate 6.3“ Samsung Galaxy Mega 6.3
  9. 12.5“

  10. Sources: http://opensignal.com/reports/fragmentation.php

  11. Sources: http://opensignal.com/reports/fragmentation.php

  12. STATIC LAYOUTS ARE DEAD

  13. THERE ARE NO DEVICE CLASSES anymore

  14. WHAT ABOUT E-COMMERCE?

  15. Sources: http://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/, http://www.mobilepaymentstoday.com/article/206827/EBay-says-PayPal-s-mobile-payment-volume-beat-estimate Mobile Payments 2009 2010 2011 2012 $141M

    $750M $4B $14B
  16. #fail

  17. #success

  18. Sources: http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/ +42.4% revenue growth for all devices +13.6% conversion

    rate
  19. Responsive Design + E-Commerce = <3

  20. I WANT THIS RESPONSIVE DESIGN! WHAT IS IT?

  21. None
  22. MEDIA QUERIES IT STARTED WITH

  23. IT´S NOT ABOUT MEDIA QUERIES

  24. FLUID LAYOUT

  25. BREAKPOINTS NATURAL

  26. OPTIMIZE MEDIA

  27. MOBILE FIRST

  28. PREPARE TO LOSE CONTROL

  29. DO NOT HIDE STUFF! USERS NEED THE SAME AS ON

    THE DESKTOP
  30. None
  31. „Mobile users want to see our menu, hours, and delivery

    number. Desktop users definitely want this 1mb png of someone smiling at a salad.“ MAT MARQUIS (@wilto)
  32. THE MOBILE WEB IS DEAD

  33. None
  34. MIGRATIONS for the E-COMMERCE

  35. MIGRATION STRATEGY 1: responsive mobile website

  36. MIGRATION STRATEGY 2: responsive template

  37. MIGRATION STRATEGY 3: JUST DO IT!

  38. RESPONSIVE DESIGN IS FOR EVERYONE

  39. QUESTIONS? http://twitter.com/matthiaslau http://laumatthias.de/ https://www.xing.com/profile/Matthias_Lau