Presentación realizada en el #webcat Barcelona de Febrero 2013 Autor: Javier Usobiaga (@htmlboy) ------------------------------------------------ RECURSOS: - Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ - Complex Navigation Patterns for Responsive Design http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/ - This Is Responsive http://bradfrost.github.com/this-is-responsive/

1. RWD:
DEALING WITH
NAVIGATION
Javier Usobiaga #Webcat

2. The
UTOPIA
of a multipurpose
navigation

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. Content first,
navigation second.
Luke Wroblewsky

25. FOOTER
loading

26. content
content
Link

27. Javascript
ENHANCEMENT

28. Link Link
Link Link
Link Link
content

29. Desktop
AWKARDNESS

30. content content
content
Link Link Link Link Link

31. Filters search result
search result
search result
Filters Filters
Filters Filters

32. Desktop
CSS FIXING

33. nav{position: absolute;}
content content
content

34. #filters{ #results{
float: float: right;}
left;}
search result
search result
search result

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