Responsive Design + E-Commerce =

RESPONSIVECOMMERCE .

let meintroduceyou to

PRESENTED BY MATTHIAS LAU

{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

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

3.5“

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“

9.7“

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

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

12.5“

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

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

STATIC LAYOUTS

ARE DEAD

THERE ARE NO

DEVICE CLASSESanymore

WHAT ABOUTE-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

#fail

#success

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

371KBabies born per day

+42.4%revenue growthfor all devices

+13.6%conversion rate

Responsive Design + E-Commerce = <3

I WANT THIS RESPONSIVE DESIGN!

WHAT IS IT?

MEDIA QUERIESIT STARTED WITH

IT´S NOT ABOUTMEDIA QUERIES

FLUID LAYOUT

BREAKPOINTSNATURAL

OPTIMIZE MEDIA

MOBILE FIRST

PREPARE TO LOSE CONTROL

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

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

THE MOBILE WEB IS DEAD

MIGRATIONSfor the

E-COMMERCE

MIGRATION STRATEGY 1:responsive mobile website

MIGRATION STRATEGY 2:responsive template

MIGRATION STRATEGY 3:JUST DO IT!

RESPONSIVE DESIGN

IS FOR EVERYONE

QUESTIONS?

http://twitter.com/matthiaslau

http://laumatthias.de/

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