RWD: Dealing with navigation

Presentation by @htmlboy at #webcat, Barcelona, February 2013.

Transcript

1. RWD: DEALING WITH NAVIGATION Javier Usobiaga #Webcat
2. of a multipurpose navigation UTOPIA The
3. THE MYTH OF MOBILE & DESKTOP
4. MOBILE Link Link Link Link Link Link
5. DESKTOP Link Link Link Link Link
6. WTFABLET Link Link Link Link Link
7. RWD is about MID SCREENS
8. Mobile first; & desktop, & EVERYTHING ELSE
9. RESPONSIVE NAVIGATION PATTERNS
11. bit.ly/rwd-nav
13. bit.ly/rwd-nav2
14. THE JAVASCRIPT MYTH
15. We don't have any non-JavaScript users” No, all your users are non-JS while they're downloading your JS Jake Archibald “
18. UNFOLDED by default
20. MESSY by default
22. FAST vs COMPACT
23. Design for LOADING
24. Luke Wroblewsky Content first, navigation second.
25. FOOTER loading
26. content content Link
27. Javascript ENHANCEMENT
28. content Link Link Link Link Link Link
29. Desktop AWKARDNESS
30. content content Link Link Link Link Link content
31. Filters Filters Filters Filters search result search result search result Filters
32. Desktop CSS FIXING
33. content content nav{position: absolute;} content
34. #results{ float: right;} search result search result search result #filters{ float: left;}
35. SUMMING UP
36. Navigation is a CORE ELEMENT in the design process
37. As web designers, we need to polish our JS SKILLS
38. But if we only rely in JS, we’re doing it WRONG
39. THANKS! Javier Usobiaga @htmlboy