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.

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/
371KBabies born per day
378KiPhones sold per day
562KiOS devices
1.3MAndroid 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 iPadAmazon 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?

22. MEDIA QUERIES
IT STARTED WITH

23. IT´S NOT ABOUT
MEDIA QUERIES

24. FLUID LAYOUT

25. BREAKPOINTSNATURAL

26. OPTIMIZE MEDIA

27. MOBILE FIRST

28. PREPARE TO LOSE CONTROL

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

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

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