30
FINGER FRIENDLY How STYLIGHT went responsive (in 6 weeks). [email protected] · @stylight_eng

How STYLIGHT went responsive

Embed Size (px)

Citation preview

Page 1: How STYLIGHT went responsive

FINGER FRIENDLYHow STYLIGHT went responsive (in 6 weeks).

[email protected] · @stylight_eng

Page 2: How STYLIGHT went responsive

We want to build the best place to discover fashion everyday.

Page 3: How STYLIGHT went responsive

Get inspired by looks created by the community.

Page 4: How STYLIGHT went responsive

Discover thousands of brands and millions of products.

Page 5: How STYLIGHT went responsive

We don’t decide how people access our websites. They do. And increasingly it’s on mobile devices and tablets.

SUCKEDOUR MOBILE EXPERIENCE

Page 6: How STYLIGHT went responsive

67%

22%

11%

Mobile Tablet Desktop

Page 7: How STYLIGHT went responsive

How can we offer a compelling experienceon all of these devices?

SO MANY DEVICES, SO MANY SIZES

Page 8: How STYLIGHT went responsive

ONE SITE TO RULE THEM ALL

DEVICE SPECIFIC EXPERIENCES

Responsive Mobile sites

Page 9: How STYLIGHT went responsive

ONE SITE TO RULE THEM ALL

DEVICE SPECIFIC EXPERIENCES

Responsive Mobile sites

* Valid alternative, responsive design isn’t the singular best solution for all circumstances

*

Page 10: How STYLIGHT went responsive

WHY RESPONSIVE?Four reasons why we have decided to move on with

a responsive design for STYLIGHT.

Page 11: How STYLIGHT went responsive

Simplicity.

SEO.

Conversion from status quo.

Speed.

Page 12: How STYLIGHT went responsive

Simplicity. No need for a separate mobile presence, allows us to have a single site at a single URL with a single code base and set of files to be used.

SEO.

Conversion from status quo.

Speed.

Page 13: How STYLIGHT went responsive

Simplicity. No need for a separate mobile presence, allows us to have a single site at a single URL with a single code base and set of files to be used.

SEO. Google officially recommended the responsive design. This is what we want – the leading search engine telling us how to handle your mobile traffic.

Conversion from status quo.

Speed.

Page 14: How STYLIGHT went responsive

Simplicity. No need for a separate mobile presence, allows us to have a single site at a single URL with a single code base and set of files to be used.

SEO. Google officially recommended the responsive design. This is what we want – the leading search engine telling us how to handle your mobile traffic.

Conversion from status quo. We converted our existing desktop website into a responsive one. There was no need to completely rebuild it.

Speed.

Page 15: How STYLIGHT went responsive

Simplicity. No need for a separate mobile presence, allows us to have a single site at a single URL with a single code base and set of files to be used.

SEO. Google officially recommended the responsive design. This is what we want – the leading search engine telling us how to handle your mobile traffic.

Conversion from status quo. We converted our existing desktop website into a responsive one. There was no need to completely rebuild it.

Speed.

* not really mobile first.

Page 16: How STYLIGHT went responsive

Simplicity. No need for a separate mobile presence, allows us to have a single site at a single URL with a single code base and set of files to be used.

SEO. Google officially recommended the responsive design. This is what we want – the leading search engine telling us how to handle your mobile traffic.

Conversion from status quo. We converted our existing desktop website into a responsive one. There was no need to completely rebuild it.

Speed. If designed and developed correctly, a responsive website will improve the overall performance, because it is made for both desktops & mobile devices.

* not really mobile first.

Source: http://blog.evolvecreativegroup.com/post/2013/07/09/Responsive-Web-Design-vs-Mobile-Site.aspx

Page 17: How STYLIGHT went responsive

OUR WORKFLOWThe entire project took 4 people 6 weeks.

Page 18: How STYLIGHT went responsive

Two designers & two developers in the same room

Page 19: How STYLIGHT went responsive

Great designs evolve in collaboration. Kill the waterfall.

Page 20: How STYLIGHT went responsive

Work with code as early and as much as possible.

Page 21: How STYLIGHT went responsive

Handle the visual design upfront in a style guide.

Page 22: How STYLIGHT went responsive

Do not document, do not deliver photoshop files. Prototype it.

Page 23: How STYLIGHT went responsive

Do not document, do not deliver photoshop files. Prototype it.

Page 24: How STYLIGHT went responsive

Do not document, do not deliver photoshop files. Prototype it.

Page 25: How STYLIGHT went responsive

HOW IT TURNED OUTImproved KPIs on all devices, but still way to go

in our mobile experience.

Page 26: How STYLIGHT went responsive

Before Responsive After Responsive

Goal completion rate mobile and tablet traffic

+24%

Page 27: How STYLIGHT went responsive

Before Responsive After Responsive

Average visit duration mobile and tablet traffic

+36%

Page 28: How STYLIGHT went responsive
Page 29: How STYLIGHT went responsive

GRACEFUL DEGRADATIONDesktop Down

PROGRESSIVE ENHANCEMENTMobile Up

Page 30: How STYLIGHT went responsive

GIVE IT A TRY!Send us your feedback & get in touch with us.

[email protected] · @stylight_eng