0
FINGER FRIENDLY
How STYLIGHT went responsive (in 6 weeks).
max.mueller@stylight.com · @nonsquared
We want to build the best place to discover fashion everyday.
Get inspired by looks created by the community.
Discover thousands of brands and millions of products.
We don’t decide how people access our websites. They do.
And increasingly it’s on mobile devices and tablets.
SUCKED
OUR M...
67%
22%
11%
Mobile Tablet Desktop
How can we offer a compelling experience
on all of these devices?
SO MANY DEVICES, SO MANY SIZES
ONE SITE TO
RULE THEM ALL
DEVICE SPECIFIC
EXPERIENCES
Responsive Mobile sites
ONE SITE TO
RULE THEM ALL
DEVICE SPECIFIC
EXPERIENCES
Responsive Mobile sites
* Valid alternative, responsive design isn’t...
WHY RESPONSIVE?
Four reasons why we have decided to move on with
a responsive design for STYLIGHT.
Simplicity.
SEO.
Conversion from status quo.
Speed.
Simplicity. No need for a separate mobile presence, allows us to have a
single site at a single URL with a single code bas...
Simplicity. No need for a separate mobile presence, allows us to have a
single site at a single URL with a single code bas...
Simplicity. No need for a separate mobile presence, allows us to have a
single site at a single URL with a single code bas...
Simplicity. No need for a separate mobile presence, allows us to have a
single site at a single URL with a single code bas...
Simplicity. No need for a separate mobile presence, allows us to have a
single site at a single URL with a single code bas...
OUR WORKFLOW
The entire project took 4 people 6 weeks.
Two designers & two developers in the same room
Great designs evolve in collaboration. Kill the waterfall.
Work with code as early and as much as possible.
Handle the visual design upfront in a style guide.
Do not document, do not deliver photoshop files. Prototype it.
Do not document, do not deliver photoshop files. Prototype it.
Do not document, do not deliver photoshop files. Prototype it.
HOW IT TURNED OUT
Improved KPIs on all devices, but still way to go
in our mobile experience.
Before Responsive After Responsive
Goal completion rate mobile and tablet traffic
+24%
Before Responsive After Responsive
Average visit duration mobile and tablet traffic
+36%
GRACEFUL DEGRADATION
Desktop Down
PROGRESSIVE ENHANCEMENT
Mobile Up
GIVE IT A TRY, PLEASE.
I am looking forward to your feedback & questions!
max.mueller@stylight.com · @nonsquared
20130916 mo mo_muc_stylight_went_responsive
Upcoming SlideShare
Loading in...5
×

20130916 mo mo_muc_stylight_went_responsive

384

Published on

How Stylight, an Online Fashion Community, Went Responsive in 6 Weeks

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "20130916 mo mo_muc_stylight_went_responsive"

  1. 1. FINGER FRIENDLY How STYLIGHT went responsive (in 6 weeks). max.mueller@stylight.com · @nonsquared
  2. 2. We want to build the best place to discover fashion everyday.
  3. 3. Get inspired by looks created by the community.
  4. 4. Discover thousands of brands and millions of products.
  5. 5. We don’t decide how people access our websites. They do. And increasingly it’s on mobile devices and tablets. SUCKED OUR MOBILE EXPERIENCE
  6. 6. 67% 22% 11% Mobile Tablet Desktop
  7. 7. How can we offer a compelling experience on all of these devices? SO MANY DEVICES, SO MANY SIZES
  8. 8. ONE SITE TO RULE THEM ALL DEVICE SPECIFIC EXPERIENCES Responsive Mobile sites
  9. 9. 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 *
  10. 10. WHY RESPONSIVE? Four reasons why we have decided to move on with a responsive design for STYLIGHT.
  11. 11. Simplicity. SEO. Conversion from status quo. Speed.
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. 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.
  16. 16. 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.
  17. 17. OUR WORKFLOW The entire project took 4 people 6 weeks.
  18. 18. Two designers & two developers in the same room
  19. 19. Great designs evolve in collaboration. Kill the waterfall.
  20. 20. Work with code as early and as much as possible.
  21. 21. Handle the visual design upfront in a style guide.
  22. 22. Do not document, do not deliver photoshop files. Prototype it.
  23. 23. Do not document, do not deliver photoshop files. Prototype it.
  24. 24. Do not document, do not deliver photoshop files. Prototype it.
  25. 25. HOW IT TURNED OUT Improved KPIs on all devices, but still way to go in our mobile experience.
  26. 26. Before Responsive After Responsive Goal completion rate mobile and tablet traffic +24%
  27. 27. Before Responsive After Responsive Average visit duration mobile and tablet traffic +36%
  28. 28. GRACEFUL DEGRADATION Desktop Down PROGRESSIVE ENHANCEMENT Mobile Up
  29. 29. GIVE IT A TRY, PLEASE. I am looking forward to your feedback & questions! max.mueller@stylight.com · @nonsquared
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×