responsive design + e-commerce =

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

Upload: matthias-lau

Post on 28-Nov-2014

633 views

Category:

Technology


0 download

DESCRIPTION

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

Page 1: Responsive Design + E-Commerce =

RESPONSIVECOMMERCE .

let meintroduceyou to

PRESENTED BY MATTHIAS LAU

Page 2: Responsive Design + E-Commerce =

{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

Page 3: Responsive Design + E-Commerce =

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

371KBabies born per day

562KiOS devices

1.3MAndroid devices activated per day

Page 4: Responsive Design + E-Commerce =

3.5“

Page 5: Responsive Design + E-Commerce =

3.5“

AppleiPhone 3G

4“

HTC Windows Phone8S

4.3“

Sony Xperia V

4.7“

HTC One

5“

Samsung Galaxy Note

Samsung Galaxy Note II

5.5“

Page 6: Responsive Design + E-Commerce =

9.7“

Page 7: Responsive Design + E-Commerce =

9.7“ 10.1“7.9“ 8.9“ 11.6“

Acer Iconia W700

Google Nexus 10Samsung Galaxy Note 10.1Sony Xperia Tablet Z

Acer W510HP ElitePad 900

Apple iPadAmazon Kindle FireHD 8.9

Apple iPad Mini

Page 8: Responsive Design + E-Commerce =

6.1“ 7“ 7.9“

Apple iPad MiniSamsung Galaxy Tab 2 7.0Amazon Kindle Fire HDAsus Google Nexus 7

5.5“

SamsungGalaxy Note II

Huawei Ascend Mate

6.3“

SamsungGalaxy Mega 6.3

Page 9: Responsive Design + E-Commerce =

12.5“

Page 10: Responsive Design + E-Commerce =

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

Page 11: Responsive Design + E-Commerce =

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

Page 12: Responsive Design + E-Commerce =

STATIC LAYOUTS

ARE DEAD

Page 13: Responsive Design + E-Commerce =

THERE ARE NO

DEVICE CLASSESanymore

Page 14: Responsive Design + E-Commerce =

WHAT ABOUTE-COMMERCE?

Page 15: Responsive Design + E-Commerce =

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

371KBabies born per day

Mobile Payments

2009 2010 2011 2012

$141M$750M

$4B

$14B

Page 16: Responsive Design + E-Commerce =

#fail

Page 17: Responsive Design + E-Commerce =

#success

Page 18: Responsive Design + E-Commerce =

Sources:http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/

371KBabies born per day

+42.4%revenue growthfor all devices

+13.6%conversion rate

Page 19: Responsive Design + E-Commerce =

Responsive Design + E-Commerce = <3

Page 20: Responsive Design + E-Commerce =

I WANT THIS RESPONSIVE DESIGN!

WHAT IS IT?

Page 21: Responsive Design + E-Commerce =
Page 22: Responsive Design + E-Commerce =

MEDIA QUERIESIT STARTED WITH

Page 23: Responsive Design + E-Commerce =

IT´S NOT ABOUTMEDIA QUERIES

Page 24: Responsive Design + E-Commerce =

FLUID LAYOUT

Page 25: Responsive Design + E-Commerce =

BREAKPOINTSNATURAL

Page 26: Responsive Design + E-Commerce =

OPTIMIZE MEDIA

Page 27: Responsive Design + E-Commerce =

MOBILE FIRST

Page 28: Responsive Design + E-Commerce =

PREPARE TO LOSE CONTROL

Page 29: Responsive Design + E-Commerce =

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

Page 30: Responsive Design + E-Commerce =
Page 31: Responsive Design + E-Commerce =

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

Page 32: Responsive Design + E-Commerce =

THE MOBILE WEB IS DEAD

Page 33: Responsive Design + E-Commerce =
Page 34: Responsive Design + E-Commerce =

MIGRATIONSfor the

E-COMMERCE

Page 35: Responsive Design + E-Commerce =

MIGRATION STRATEGY 1:responsive mobile website

Page 36: Responsive Design + E-Commerce =

MIGRATION STRATEGY 2:responsive template

Page 37: Responsive Design + E-Commerce =

MIGRATION STRATEGY 3:JUST DO IT!

Page 38: Responsive Design + E-Commerce =

RESPONSIVE DESIGN

IS FOR EVERYONE

Page 39: Responsive Design + E-Commerce =

QUESTIONS?

http://twitter.com/matthiaslau

http://laumatthias.de/

https://www.xing.com/profile/Matthias_Lau