Responsive Webdesign + E-Commerce = <3.>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"
},
},
}

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

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“

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?

21. MEDIA QUERIES
IT STARTED WITH

22. IT´S NOT ABOUT
MEDIA QUERIES

23. FLUID DESIGN

24. BREAKPOINTSNATURAL

25. OPTIMIZE MEDIA

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

27. <PICTURE> ELEMENT
<picture)width="500")height="500">)))))
))<source)media="(min9width:)45em)")src="large.jpg">
))<source)media="(min9width:)18em)")src="med.jpg">
))<source)src="small.jpg">
))<img)src="small.jpg")alt="">
))<p>Accessible)text</p>
</picture>

28. THE FUTURE IS NOW: PICTUREFILL
(https://github.com/scottjehl/picturefill)
<div)data9picture)data9alt="A)giant)stone)face">
))))<div)data9src="small.jpg"></div>
))))<div)data9src="medium.jpg")))))data9media="(min9width:)400px)"></div>
))))<div)data9src="large.jpg"))))))data9media="(min9width:)800px)"></div>
))))<div)data9src="extralarge.jpg")data9media="(min9width:)1000px)"></div>
))))<!##$Fallback$content$for$non#JS$browsers.$##>
))))<noscript>
))))))))<img)src="external/imgs/small.jpg")alt="A)giant)stone)face">
))))</noscript>
</div>

29. RESIZING SERVICES
http://src.sencha.io/520/http://blog.arktis.de/wp9content/
uploads/shopware9community9day.jpg
http://src.sencha.io/[/WIDTH[/HEIGHT]]/[URL]

32. RESSFINALLY A NEW BUZZWORD
$WURFLWidth = $client->getDeviceCapability('max_image_width');

33. CAREFUL:
CACHING HATES RESS
ALL THIS MAGIC MEANS
DYNAMIC CONTENT!

34. OPTIMIZE MEDIA FOTOS+VIDEOS
USE SVG FOR EVERYTHING ELSE

35. PREPARE TO LOSE CONTROL

36. MOBILE FIRST

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

39. THE MOBILE WEB IS DEAD

41. MIGRATIONS
for the
E-COMMERCE

42. MIGRATION STRATEGY 1:
responsive mobile website

43. MIGRATION STRATEGY 2:
responsive template

44. MIGRATION STRATEGY 3:
JUST DO IT!

45. RESPONSIVE DESIGN
IS FOR EVERYONE

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