Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Let me introduce you to Responsive Commerce

644 views

Published on

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.

Published in: Technology
  • Be the first to comment

Let me introduce you to Responsive Commerce

  1. 1. RESPONSIVECOMMERCE .let meintroduceyou toPRESENTED BY MATTHIAS LAU
  2. 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. 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 day378KiPhones sold per day562KiOS devices1.3MAndroid devicesactivated per day
  4. 4. 3.5“AppleiPhone 3G4“HTC Windows Phone8S4.3“Sony Xperia V4.7“HTC One5“Samsung Galaxy NoteSamsung Galaxy Note II5.5“
  5. 5. 9.7“ 10.1“7.9“ 8.9“ 11.6“Acer Iconia W700Google Nexus 10Samsung Galaxy Note 10.1Sony Xperia Tablet ZAcer W510HP ElitePad 900Apple iPadAmazon Kindle FireHD 8.9Apple iPad Mini
  6. 6. 6.1“ 7“ 7.9“Apple iPad MiniSamsung Galaxy Tab 2 7.0Amazon Kindle Fire HDAsus Google Nexus 75.5“SamsungGalaxy Note IIHuawei Ascend Mate6.3“SamsungGalaxy Mega 6.3
  7. 7. 12.5“
  8. 8. Sources:http://opensignal.com/reports/fragmentation.php
  9. 9. Sources:http://opensignal.com/reports/fragmentation.php
  10. 10. STATIC LAYOUTSARE DEAD
  11. 11. THERE ARE NODEVICE CLASSESanymore
  12. 12. WHAT ABOUTE-COMMERCE?
  13. 13. 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-estimateMobile Payments2009 2010 2011 2012$141M$750M$4B$14B
  14. 14. #fail
  15. 15. #success
  16. 16. Sources:http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/+42.4%revenue growthfor all devices+13.6%conversion rate
  17. 17. Responsive Design + E-Commerce = <3
  18. 18. I WANT THIS RESPONSIVE DESIGN!WHAT IS IT?
  19. 19. MEDIA QUERIESIT STARTED WITH
  20. 20. IT´S NOT ABOUTMEDIA QUERIES
  21. 21. FLUID DESIGN
  22. 22. BREAKPOINTSNATURAL
  23. 23. OPTIMIZE MEDIA
  24. 24. „Mobile users want to see our menu, hours,and delivery number. Desktop users definitelywant this 1mb png of someone smiling at asalad.“MAT MARQUIS (@wilto)
  25. 25. <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>
  26. 26. 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>
  27. 27. RESIZING SERVICEShttp://src.sencha.io/520/http://blog.arktis.de/wp9content/uploads/shopware9community9day.jpghttp://src.sencha.io/[/WIDTH[/HEIGHT]]/[URL]
  28. 28. RESSFINALLY A NEW BUZZWORD$WURFLWidth = $client->getDeviceCapability(max_image_width);
  29. 29. CAREFUL:CACHING HATES RESSALL THIS MAGIC MEANSDYNAMIC CONTENT!
  30. 30. OPTIMIZE MEDIA FOTOS+VIDEOSUSE SVG FOR EVERYTHING ELSE
  31. 31. PREPARE TO LOSE CONTROL
  32. 32. MOBILE FIRST
  33. 33. DO NOT HIDE STUFF!USERS NEED THE SAME AS ON THE DESKTOP
  34. 34. THE MOBILE WEB IS DEAD
  35. 35. MIGRATIONSfor theE-COMMERCE
  36. 36. MIGRATION STRATEGY 1:responsive mobile website
  37. 37. MIGRATION STRATEGY 2:responsive template
  38. 38. MIGRATION STRATEGY 3:JUST DO IT!
  39. 39. RESPONSIVE DESIGNIS FOR EVERYONE
  40. 40. QUESTIONS?http://twitter.com/matthiaslauhttp://laumatthias.de/https://www.xing.com/profile/Matthias_Lau

×