How STYLIGHT went responsive

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

Transcript

1. FINGER FRIENDLY
   How STYLIGHT went responsive (in 6 weeks).
   max.mueller@stylight.com · @stylight_eng
   

   View Slide

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

   View Slide

3. Get inspired by looks created by the community.
   

   View Slide

4. Discover thousands of brands and millions of products.
   

   View Slide

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
   

   View Slide

6. 67%
   22%
   11%
   Mobile Tablet Desktop
   

   View Slide

7. How can we offer a compelling experience
   on all of these devices?
   SO MANY DEVICES, SO MANY SIZES
   

   View Slide

8. ONE SITE TO
   RULE THEM ALL
   DEVICE SPECIFIC
   EXPERIENCES
   Responsive Mobile sites
   

   View Slide

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
   *
   

   View Slide

10. WHY RESPONSIVE?
    Four reasons why we have decided to move on with
    a responsive design for STYLIGHT.
    

    View Slide

11. Simplicity.
    SEO.
    Conversion from status quo.
    Speed.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    Source: http://blog.evolvecreativegroup.com/post/2013/07/09/Responsive-Web-Design-vs-Mobile-Site.aspx
    

    View Slide

17. OUR WORKFLOW
    The entire project took 4 people 6 weeks.
    

    View Slide

18. Two designers & two developers in the same room
    

    View Slide

19. Great designs evolve in collaboration. Kill the waterfall.
    

    View Slide

20. Work with code as early and as much as possible.
    

    View Slide

21. Handle the visual design upfront in a style guide.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. HOW IT TURNED OUT
    Improved KPIs on all devices, but still way to go
    in our mobile experience.
    

    View Slide

26. Before Responsive After Responsive
    Goal completion rate mobile and tablet traffic
    +24%
    

    View Slide

27. Before Responsive After Responsive
    Average visit duration mobile and tablet traffic
    +36%
    

    View Slide

28. View Slide

29. GRACEFUL DEGRADATION
    Desktop Down
    PROGRESSIVE ENHANCEMENT
    Mobile Up
    

    View Slide

30. GIVE IT A TRY!
    Send us your feedback & get in touch with us.
    max.mueller@stylight.com · @stylight_eng
    

    View Slide