dijous, 13 de març de 2014

Patrons de navegació responsive

Això va de menús i submenús i de com podem fer que la navegació pel nostre site sigui correcta en visualitzacions petites.
Ara mateix no ens podem permetre el luxe de no fer un web que no sigui responsive (això és que s’adapti a totes les resolucions de pantalla i especialment en el dispositius mòbils).
Tant si la web és molt gran com si és petita el menú de navegació sempre és una secció que hem de tenir especial cura quan la construïm.

També cal tenir en compte si totes les seccions de la web són importants, si podem agrupar unes quantes pàgines en una, en definitiva si cal realment un mega-menu.
Avui us presentem Complex Navigation Patterns for Responsive Design una web (bé un post d'un blog) on se’ns presenten diferents maneres de construir un menú de navegació responsive per a navegacions complexes o menús grans.

Què trobarem a Complex Navigation Patterns for Responsive Design? Trobarem exemples de navegació responsive, aquí els teniu:

  • Multi-Toggle o visualització en acordió
  • Ol’ Right to Left una forma de mostrar menús i submenús amb panells que es desplacen de dreta a esquerra
  • Skip the Sub-Nav’ mostra només els ítems principals de navegació
  • Priority+ mostra /oculta ítems de menú segons la prioritat que li vulguem donar, és a dir un menú amb els elements principals i un “mostrar +”
  • Off-Canvas Flyout un menú lateral a mode de columna de navegació
  • Carousel+ els ítems principals es mostren en un carrusel (amb navegació dreta - esquerra) i el submenú penja de cada ítem principal

De tots aquests patrons en podem veure exemples en funcionament, els pros i els contras i així poder triar el que millor s’adapti a la nostra web.
També trobarem els recursos necessaris per poder construir cada sistema de navegació.
Magnífic recurs.