"RWD: Dealing with navigation" por @htmlboy

459 views
396 views

Published on

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/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
459
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

"RWD: Dealing with navigation" por @htmlboy

  1. 1. RWD:DEALING WITHNAVIGATIONJavier Usobiaga #Webcat
  2. 2. TheUTOPIAof a multipurposenavigation
  3. 3. THE MYTH OFMOBILE &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 aboutMID SCREENS
  8. 8. Mobile first;& desktop,& EVERYTHINGELSE
  9. 9. RESPONSIVENAVIGATIONPATTERNS
  10. 10. bit.ly/rwd-nav
  11. 11. bit.ly/rwd-nav2
  12. 12. THEJAVASCRIPTMYTH
  13. 13. “We dont have any non-JavaScript users” No, all your users are non-JS while theyre downloading your JS Jake Archibald
  14. 14. UNFOLDEDby default
  15. 15. MESSYby default
  16. 16. FASTvsCOMPACT
  17. 17. Design forLOADING
  18. 18. Content first,navigation second.Luke Wroblewsky
  19. 19. FOOTERloading
  20. 20. contentcontent Link
  21. 21. JavascriptENHANCEMENT
  22. 22. Link LinkLink LinkLink Linkcontent
  23. 23. DesktopAWKARDNESS
  24. 24. content content contentLink Link Link Link Link
  25. 25. Filters search result search result search result Filters Filters Filters Filters
  26. 26. DesktopCSS FIXING
  27. 27. nav{position: absolute;} content content content
  28. 28. #filters{ #results{float: float: right;}left;} search result search result search result
  29. 29. SUMMING UP
  30. 30. Navigation is aCORE ELEMENTin the designprocess
  31. 31. As web designers,we need topolish ourJS SKILLS
  32. 32. But if we onlyrely in JS,we’re doing itWRONG
  33. 33. THANKS!Javier Usobiaga @htmlboy

×