RWD: Dealing with navigation

Transcript

1. 1.

   RWD: DEALING WITH NAVIGATION Javier Usobiaga #Webcat

2. 2.

   of a multipurpose navigation UTOPIA The

3. 3.

   THE MYTH OF MOBILE & DESKTOP

4. 4.

   MOBILE Link Link Link Link Link Link

5. 5.

   DESKTOP Link Link Link Link Link

6. 6.

   WTFABLET Link Link Link Link Link

7. 7.

   RWD is about MID SCREENS

8. 8.

   Mobile first; & desktop, & EVERYTHING ELSE

9. 9.

   RESPONSIVE NAVIGATION PATTERNS

10. 10.

    None
11. 11.

    bit.ly/rwd-nav

12. 12.

    None
13. 13.

    bit.ly/rwd-nav2

14. 14.

    THE JAVASCRIPT MYTH

15. 15.

    We don't have any non-JavaScript users” No, all your users

    are non-JS while they're downloading your JS Jake Archibald “
16. 16.

    None
17. 17.

    None
18. 18.

    UNFOLDED by default

19. 19.

    None
20. 20.

    MESSY by default

21. 21.

    None
22. 22.

    FAST vs COMPACT

23. 23.

    Design for LOADING

24. 24.

    Luke Wroblewsky Content first, navigation second.

25. 25.

    FOOTER loading

26. 26.

    content content Link

27. 27.

    Javascript ENHANCEMENT

28. 28.

    content Link Link Link Link Link Link

29. 29.

    Desktop AWKARDNESS

30. 30.

    content content Link Link Link Link Link content

31. 31.

    Filters Filters Filters Filters search result search result search result

    Filters
32. 32.

    Desktop CSS FIXING

33. 33.

    content content nav{position: absolute;} content

34. 34.

    #results{ float: right;} search result search result search result #filters{

    float: left;}
35. 35.

    SUMMING UP

36. 36.

    Navigation is a CORE ELEMENT in the design process

37. 37.

    As web designers, we need to polish our JS SKILLS

38. 38.

    But if we only rely in JS, we’re doing it

    WRONG
39. 39.

    THANKS! Javier Usobiaga @htmlboy