How SpringerLink Went Responsive

Transcript

1. 1.

   How SpringerLink Went Responsive Concepts & How we did it

2. 2.

   Whose face is that? Todd Carter Front End Developer @

   Springer London Kiwi living in London Working on SpringerLink
3. 3.

   Concepts: Mobile First Mobile First is about growing with the

   market Mobile First is about creating a more focused product Mobile First is about using device innovations to create unique user experiences
4. 4.

   Rather than tailoring disconnected designs to each of an ever-increasing

   number of web devices, we can treat them as facets of the same experience… In short, we need to practice responsive web design. Ethan Marcotte
5. 5.

   Concepts: Responsive Web Design + Flexible Grid Flexible Media Media

   Queries +
6. 6.

   This is Responsive

7. 7.

   Sounds great! But how did you actually do it?

8. 8.

   How We Did It: What Worked Well Research & (Re)design

9. 9.

   How We Did It: What Worked Well Design Principles

10. 10.

    How We Did It: What Worked Well Sketch Wireframes

11. 11.

    How We Did It: What Worked Well Breakpoints

12. 12.

    How We Did It: What Worked Well Device Support

13. 13.

    Retro fitted CSS/JS Unnecessary overwrites in CSS Code can be

    confusing to read Code bloat! How We Did It: What Worked Not So Well
14. 14.

    But worst of all…

15. 15.

    Mobile users still have to download everything!

16. 16.

    Doubled our e orts on the UX // Front End

    Mobile First is great as a guiding principle Get something on a device asap! (For science context) Use real content, not lipsum RWD isn’t necessary for every project How We Did It: Some considerations
17. 17.

    We’ve made a good start…

18. 18.

    But there’s still lots to be done!

19. 19.

    Better performance (CSS, JS, Actual Speed) Support for Hi-DPI media

    Ongoing refactoring/tweaking Device ranges and Content breakpoints Looking Towards The Future
20. 20.

    Springer, Everywhere

21. 21.

    Springer, Everywhere

22. 22.

    Thanks! Continue reading: bit.ly/10G8usQ Slides available here: bit.ly/16LurPR Questions //

    Comments: todd.carter@springer.com Connect with me: linkd.in/12LMVKs Creative Commons Licensed Attribution, Non-Commercial, Share Alike