20130916 mo mo_muc_stylight_went_responsive
-
Upload
mobilemonday -
Category
Technology
-
view
368 -
download
0
description
Transcript of 20130916 mo mo_muc_stylight_went_responsive
![Page 2: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/2.jpg)
We want to build the best place to discover fashion everyday.
![Page 3: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/3.jpg)
Get inspired by looks created by the community.
![Page 4: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/4.jpg)
Discover thousands of brands and millions of products.
![Page 5: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/5.jpg)
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: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/6.jpg)
67%
22%
11%
Mobile Tablet Desktop
![Page 7: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/7.jpg)
How can we offer a compelling experienceon all of these devices?
SO MANY DEVICES, SO MANY SIZES
![Page 8: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/8.jpg)
ONE SITE TO RULE THEM ALL
DEVICE SPECIFIC EXPERIENCES
Responsive Mobile sites
![Page 9: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/9.jpg)
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: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/10.jpg)
WHY RESPONSIVE?Four reasons why we have decided to move on with
a responsive design for STYLIGHT.
![Page 11: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/11.jpg)
Simplicity.
SEO.
Conversion from status quo.
Speed.
![Page 12: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/12.jpg)
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: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/13.jpg)
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: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/14.jpg)
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: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/15.jpg)
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: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/16.jpg)
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.
![Page 17: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/17.jpg)
OUR WORKFLOWThe entire project took 4 people 6 weeks.
![Page 18: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/18.jpg)
Two designers & two developers in the same room
![Page 19: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/19.jpg)
Great designs evolve in collaboration. Kill the waterfall.
![Page 20: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/20.jpg)
Work with code as early and as much as possible.
![Page 21: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/21.jpg)
Handle the visual design upfront in a style guide.
![Page 22: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/22.jpg)
Do not document, do not deliver photoshop files. Prototype it.
![Page 23: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/23.jpg)
Do not document, do not deliver photoshop files. Prototype it.
![Page 24: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/24.jpg)
Do not document, do not deliver photoshop files. Prototype it.
![Page 25: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/25.jpg)
HOW IT TURNED OUTImproved KPIs on all devices, but still way to go
in our mobile experience.
![Page 26: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/26.jpg)
Before Responsive After Responsive
Goal completion rate mobile and tablet traffic
+24%
![Page 27: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/27.jpg)
Before Responsive After Responsive
Average visit duration mobile and tablet traffic
+36%
![Page 28: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/28.jpg)
![Page 29: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/29.jpg)
GRACEFUL DEGRADATIONDesktop Down
PROGRESSIVE ENHANCEMENTMobile Up
![Page 30: 20130916 mo mo_muc_stylight_went_responsive](https://reader034.fdocuments.in/reader034/viewer/2022042714/5552a1bdb4c9051f108b55a1/html5/thumbnails/30.jpg)
GIVE IT A TRY, PLEASE.I am looking forward to your feedback & questions!
[email protected] · @nonsquared