1

Teemu Malinen12th March 2013KiltaHelsinki, FinlandVer 2.0

Responsive design &

eCommerce

2

Sofokus is focused on demanding ebusiness & ecommerce solutions

3

Responsive Web Site (WordPress)

Sofokus Reference

snoobi.fi

4

Responsive Web Application (Django)

Sofokus Reference

Keikkatori.fi

5

Sofokus Reference

kauppahalli24.fi

Responsive Web eShop (Magento)

6

Mobile eCommerce

WHY BOTHER?

7

POLL: How many of you

own some smart device?

Sources: apple.com, nokia.com, samsung.com

8

US smartphone penetration 53%Source: printinthemix.com/fastfacts

US broadband use 68,9%Source: som.csudh.edu/fac/lpress/netapps/hout/broadbandandPenetration.htm

Tablets to surpass laptops 2016Source: printinthemix.com/fastfacts

9

Mobile internet > desktop internet

10

And yeah. It’s happening in Finland too.

11

3 different main

MOBILE STRATEGIES

12

Strategy 1: A Mobile Website

www.finnkino.fi m.finnkino.fi

13

Strategy 1: A Mobile Website

Possibility for great user experience

Tested, used widely

Expensive, 2 sites to uphold

Not really flexible, still a chosen form factor

14

Strategy 2: Mobile Application

amazon.com Amazon App

15

Excellent user experience

Fast to use

Expensive, every ecosystem

needs an own app

Application stores take a cut

Strategy 2: Mobile Application

Good offline capabilities Native applications needs to be distributed & installed

16

Strategy 3: Responsive e-Com Site

Currys.com

17

Only 1 site to maintain

One content can be served to all devices

Can be costly to implement to old systems

Requires a new perception and expertise on many levels

Strategy 3: Responsive e-Com Site

Just start using, no need to download app, remember different URL

18

Responsive design:

WHAT’S THE BEEF?

19

What is RESPONSIVE DESIGN?

Mashable: ”2013 is the year of Responsive Design.”Source: mashable.com/2012/12/11/responsive-web-design

”It is a web design approach that aims to provide optimal viewing (using) experience regardless of used device.”

20What is RESPONSIVE DESIGN?

Source: zindico.com/design/what-responsive-web-design

21

Global giants get it.Microsoft.com

Starbucks.com

Time.com

Worldwildlife.orgAwesome site!

Sony.com

22

Show me the $$$ !

+65%iPhone conversion

+112%iPhone transactions

+65%iPhone revenue

+42%Revenue all devices

+377%Revenue iPhones

+13%Conversion rate

+10%Mobile/tablet traffic

+23%Mobile PPV

+15%Unique visits

Source: econsultancy.com/fi/blog/62260-five-brands-that-reaped-rewards-after-adopting-responsive-design

23

No

No

No

No

No

No

So, what about most popular ecom sites in Finland?

24Source: Twitter

Sadly, we are here.

25

Finnish ecom people: this is a BIG chance for you.

26

How to become

RESPONSIVE?

27

”Responsive design is just a CSS trick.”

This is bull****

28

You need to rethink…

• Visual design• UI implementation• Tech platform use• Mobile first ideology• Use of analytics• Pointing methodsEtc.

But most of all: content.

29

Responsive design is not an exclusive method

30

Rethink visual design

AD:s need to adapt

31

Small screen means

You really have to prioritize

32

Think of means to navigate

Clicking? Tapping?

33

Know your customers.

Web analytics is your best friend

34

Plan suitable breakpoints

for your users needs

35

Summary is simple.

Before:

Tomorrow:

Mobile first! (*

*) lukew.com/ff/entry.asp?933

36

Teemu MalinenSofokus Oy

teemu.malinen@sofokus.com 040-531 8012twitter.com/teemumalinentwitter.com/sofokus

Thanks!

PLEASE, LINK ME IF YOU WISH