Let me introduce you to Responsive Commerce

Responsive Webdesign + 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.

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" }, }, }
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
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 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. MEDIA QUERIES IT STARTED WITH
22. IT´S NOT ABOUT MEDIA QUERIES
23. FLUID DESIGN
24. BREAKPOINTS NATURAL
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. RESS FINALLY 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