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

Let me introduce you to Responsive Commerce

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.

Matthias Lau

June 08, 2013
Tweet

More Decks by Matthias Lau

Other Decks in Programming

Transcript

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

    View full-size slide

  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"
    },
    },
    }

    View full-size slide

  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

    View full-size slide

  4. 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“

    View full-size slide

  5. 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

    View full-size slide

  6. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. STATIC LAYOUTS
    ARE DEAD

    View full-size slide

  10. THERE ARE NO
    DEVICE CLASSES
    anymore

    View full-size slide

  11. WHAT ABOUT
    E-COMMERCE?

    View full-size slide

  12. 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

    View full-size slide

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

    View full-size slide

  14. Responsive Design + E-Commerce = <3

    View full-size slide

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

    View full-size slide

  16. MEDIA QUERIES
    IT STARTED WITH

    View full-size slide

  17. IT´S
    NOT ABOUT
    MEDIA QUERIES

    View full-size slide

  18. FLUID DESIGN

    View full-size slide

  19. BREAKPOINTS
    NATURAL

    View full-size slide

  20. OPTIMIZE MEDIA

    View full-size slide

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

    View full-size slide

  22. ELEMENT
    )))))
    ))
    ))
    ))
    ))
    ))Accessible)text

    View full-size slide

  23. THE FUTURE IS NOW: PICTUREFILL
    (https://github.com/scottjehl/picturefill)

    ))))
    ))))
    ))))
    ))))
    ))))
    ))))
    ))))))))
    ))))

    View full-size slide

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

    View full-size slide

  25. RESS
    FINALLY A NEW BUZZWORD
    $WURFLWidth = $client->getDeviceCapability('max_image_width');

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. PREPARE TO LOSE CONTROL

    View full-size slide

  29. MOBILE FIRST

    View full-size slide

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

    View full-size slide

  31. THE MOBILE WEB IS DEAD

    View full-size slide

  32. MIGRATIONS
    for the
    E-COMMERCE

    View full-size slide

  33. MIGRATION STRATEGY 1:
    responsive mobile website

    View full-size slide

  34. MIGRATION STRATEGY 2:
    responsive template

    View full-size slide

  35. MIGRATION STRATEGY 3:
    JUST DO IT!

    View full-size slide

  36. RESPONSIVE DESIGN
    IS FOR EVERYONE

    View full-size slide

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

    View full-size slide