Embed Size (px)
DESCRIPTION
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/
Citation preview
RWD:DEALING WITH NAVIGATION
Javier Usobiaga #Webcat
of a multipurposenavigation
UTOPIAThe
THE MYTH OFMOBILE &DESKTOP
MOBILELinkLinkLinkLinkLinkLink
DESKTOP
Link Link Link Link Link
WTFABLET
Link Link Link Link Link
RWD is about MID SCREENS
Mobile first;& desktop, & EVERYTHINGELSE
RESPONSIVENAVIGATIONPATTERNS
THE JAVASCRIPTMYTH
We don't have any non-JavaScript users” No, all your users are non-JS while they're downloading your JSJake Archibald
“
UNFOLDEDby default
MESSYby default
FAST vsCOMPACT
Design for LOADING
Luke Wroblewsky
Content first,navigation second.
FOOTERloading
content
content
LinkLinkLinkLinkLink
Javascript ENHANCEMENT
content
content
LinkLinkLink
LinkLinkLink
Desktop AWKARDNESS
content content
Link Link Link Link Link
content
Filters FiltersFilters Filters
search result
search result
search result
Filters
Desktop CSS FIXING
content content
nav{position: absolute;}
content
#results{float: right;}
search result
search result
search result
#filters{float: left;}
SUMMING UP
Navigation is aCORE ELEMENTin the designprocess
As web designers,we need topolish ourJS SKILLS
But if we onlyrely in JS,we’re doing itWRONG
THANKS!
Javier Usobiaga @htmlboy
