Los Sistemas de Navegación a Examen

() translation by (you can also view the original English article)

Conforme los diseñadores web crean más y más webs de diseño adaptativo o responsive, surgen continuamente patrones para gestionar el sistema de navegación principal. Este es el primero de una serie de entradas centradas en cómo desarrollar algunos de estos patrones. Esta entrada cubrirá tres sistemas de navegación adaptativos; la navegación superior, prioritario, y menú de selección.

Uno de los problemas específicos a los que se enfrenta un sitio de diseño adaptativo es cómo enfocar la navegación. Una barra de navegación que se asienta cómodamente en una pantalla amplia, fácilmente se descompondrá en una pantalla pequeña. Han surgido una serie de soluciones , gracias a la experimentación realizada por diseñadores de todo el mundo, para manejar este problema.

Brad Frost seleccionó muchos de estos sistemas de navegación adaptativa y después reunió algunos sistemas más complejos. Esta entrada es el comienzo de una serie que explora algunos de esos sistemas o patrones, se centra concretamente en cómo desarrollarlos tú solo, mas que en un enfoque copia-pega. Veremos tres sistemas similares y consideraremos grupos de sistemas adicionales en futuras entradas.

Los Sistemas

El problema básico con la navegación adaptativa es el espacio. En pantallas grandes disponemos de mucho espacio horizontal con el que trabajar, pero este por el contrario no es el caso de los teléfonos inteligentes y dispositivos similares. Podríamos cambiar el espacio horizontal por el vertical en estos dispositivos, pero esto empujaría el contenido hacia el final de la página. Estos sistemas intentan mantener la navegación accesible al mismo tiempo que limitar el uso de espacio vertical.

Los 3 sistemas que veremos en esta entrada son los siguientes:

Navegación-Superior – (no hacer nada) – mantiene los elementos del menú en mínimos y adapta la navegación mediante css.
Prioridad – prioriza los elementos de menú, los cuales se mostrarán u ocultarán dependiendo de la anchura de pantalla disponible.
Menú de Selección – convierte la barra de navegación en un menú de selección cuyo espacio es limitado.

Cada uno de estos sistemas intenta resolver el problema de espacio desde un punto de vista diferente.

La demo muestra los tres sistemas, más una variación sobre el sistema de menú de selección. Más abajo explicaré cada uno, aunque mantendré el código limitado al encabezado de cada página para simplificar las cosas.

Sistema de Navegación Superior (No Hacer Nada)

El sistema de navegación arriba es probablemente el recurso más utilizado. Los cambios entre pantalla amplia y estrecha son mínimos, de ahí el apelativo "no hacer nada". Normalmente todo lo necesario serán algunas modificaciones mínimas en el css para que el sistema funcione.

Planteamiento: La demo tiene un encabezado muy simple. Incluye un logo y varios enlaces que conforman juntos la navegación. Nuestro reto es realizar el cambio entre la navegación que se asienta bajo el logo y subirlo hacia la derecha una vez se disponga de espacio suficiente.

Paso 1: El HTML

El marcado es bastante simple. Dentro de un elemento de encabezado html5, tenemos un logo y una lista desordenada de enlaces para nuestra navegación. El div contenedor es simplemente una manera de permitir que el fondo del encabezado se estreche de extremo a extremo, mientras mantiene el contenido centrado con la propiedad max-width. El funcionamiento es el mismo que acotar todo tu código en un único contenedor, pero permite mayor flexibilidad en cuanto a lo que contiene o no.

Una cosa sobre la que seguramente te estarás preguntando es el uso de espacios irrompibles (non-breaking) en las etiquetas del menú. Conforme el navegador se redimensiona, los elementos del menú querrán dividirse y ocupar una o dos líneas. Los espacios irrompibles aseguran que las etiquetas se mantendrán completas en una sola línea, evitando la poco afortunada propiedad word-wrapping.

<header>
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />

    <nav>
      <ul id="demo-nav">
        <li><a href="">Back to Post</a></li>
        <li class="current"><a href="">Top-Nav</a></li>
        <li><a href="">Priority</a></li>
        <li><a href="">Select&nbsp;Menu</a></li>
        <li><a href="">Select&nbsp;Menu&nbsp;JS</a></li>
      </ul>
    </nav>

  </div>
</header>

Paso 2: El CSS Predeterminado

El css predeterminado para el encabezado y el logo es también muy simple. El encabezado mismo toma algunos estilos de color y algo de padding por debajo. En pantallas pequeñas tendremos la navegación bajo el logo y centraremos ambas. He asignado al logo en sí algo de margen para añadir un poco de espacio por encima y debajo.

header {
  color:#eee;
  background: #2b2726;
  padding-bottom: 1em;
  text-align: center;
}

.logo {
  margin: 1.25em 0;
  width: 200px;
}

El css por defecto para la navegación, nuevamente, es muy sencillo. Si en alguna ocasión ha creado el código para una barra navegación, te será familiar. Una cosa que habitualmente se incluye en las barras de navegación, pero no aquí, es la flotación de los enlaces. A partir del momento en que vamos a centrarlo todo por defecto, reservaremos la flotación solo para cuando sea necesario.

#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
  
#demo-nav li {
  display: inline;
}
	
#demo-nav a {
  color:#fff;
  padding: 0.75em;
  text-decoration: none;
  line-height: 2.5;
}
	
#demo-nav a:hover {
  text-decoration: underline;
}

La clave de lo que mostramos arriba está en el espaciado de los enlaces. Si no hay suficiente espacio, será difícil pulsar los enlaces individualmente. Demasiado espacio y la navegación ocupará una línea extra y en consecuencia, más espacio vertical. Lo que he hecho es buscar un equilibrio que permita tanto espacio como sea posible entre los enlaces al tiempo que mantiene las filas de enlaces en un máximo de dos.

Con los estilos de arriba, la navegación debería parecerse a lo que ves aquí debajo. La captura de pantalla fue tomada en mi navegador abierto a 320px.

Paso 3: Las Media Queries

Las dos primeras media queries se usan para ajustar el espacio entre enlaces. No dispondremos de espacio suficiente para mover la navegación hacia arriba por un tiempo, pero mientras tanto podemos ajustar el padding de los enlaces tanto como nos lo permita el espacio. No hay una cantidad buena y mala. Simplemente fui jugando con el navegador he hice ajustes en varios puntos.

Sobre los 42.5em (680px) hay suficiente espacio como para situar todos los enlaces en una sola línea, así que reduje el padding derecho e izquierdo para conservarlos todos en una línea.

@media screen and (min-width: 30em) {
  #demo-nav a {padding: 0.75em 1.75em;}
}

@media screen and (min-width: 42.5em) {
  #demo-nav a {padding: 0.75em 1.1em;}
}

Cuando la pantalla alcanza más o menos 52.5em (840px) ya hay suficiente espacio para mover la barra de navegación arriba y a la derecha del logo. Primero flotaremos el logo a la izquierda. El padding en la base del encabezado o header ya no es necesario, así que lo removeremos.

Flotaremos la barra de navegación a la derecha y reduciremos el padding a derecha e izquierda de los enlaces un poco más hasta que la navegación encaje en su sitio. Desde el momento en que la estamos flotando hacia la derecha, he eliminado el innecesario padding derecho del último enlace. El último cambio consiste en establecer la propiedad display de los enlaces como elementos de bloque (block level), de esta forma aumentamos el área susceptible de ser pulsada, y es por ello que los enlaces necesitan ser flotados.

@media screen and (min-width: 52.5em) {
  .logo {float: left;}
  header {padding-bottom: 0;}

  #demo-nav {float: right;}
  #demo-nav a {padding: 1.25em 0.75em; display: block; float: left}
  #demo-nav  li:last-child a {padding-right: 0;}
}

Estos últimos dos cambios son una vez más simplemente para ajustar el espacio entre los enlaces y nuevamente los cambios fueron más a ojo que otra cosa.

@media screen and (min-width: 64em) {
  #demo-nav a {padding: 1.5em;}
}

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 1em 2.25em; line-height: 3em}
}

Consejos

Este sistema es bastante simple, por eso lo verás con mucha frecuencia. Dependiendo de tu diseño es posible que no necesites cambiar realmente nada, más allá de algunos pequeños ajustes por aquí o allá.

Este sistema funciona mejor cuando el número de elementos en el menú es limitado. Yo he usado cinco aquí. Con seis probablemente funcione. Con cuatro seguramente funcione mejor aún.

El asunto a vigilar es asegurarse de dejar suficiente espacio alrededor de los enlaces en pantallas pequeñas para que puedan ser seleccionados individualmente. Piensa que en un móvil no harás la selección con la precisión de un ratón. Usarás tus dedos, los cuales no son tan precisos.

Otra cosa que debes recordar es que las etiquetas de los enlaces probablemente se dividirán en varias líneas al alcanzar determinados anchos. Aquí he usado non-breaking space (espacio irrompible) para prevenirlo, lo cual no tiene porque ser la solución ideal.

Ejemplos

Todos los siguientes sites estánusando el sistema de navegación superior.

El Sistema de Prioridad

El sistema de navegación superior funciona bien cuando solo tienes unos pocos enlaces en la navegación. Algunas veces no puedes reducir el número de elementos de menú a cuatro o cinco, y el sistema se rompe. Acaba necesitando demasiado espacio vertical en las pantallas pequeñas.

De todas formas, aunque podrías necesitar más enlaces, seguramente algunos de ellos son más importantes que otros. Ahí es donde entra en juego el sistema de prioridad. La idea es especificar una prioridad para los enlaces a través de clases en los elementos de menú.

En las pantallas más anchas se mostrarán todos los enlaces. Conforme la ventana del navegador se estrecha, los enlaces con la prioridad más baja se ocultan tras un enlace "más". Si el navegador se hace aún más pequeño, el siguiente nivel de enlaces se oculta. En las pantallas más pequeñas empleas un mínimo de espacio vertical hasta que el visitante solicita "más" enlaces.

Planteamiento: Una vez más la demo tiene un encabezado sencillo. Esta vez incluye más enlaces así que mantendremos la navegación bajo el encabezado todo el tiempo. Tenemos dos retos independientes para la transformación del menú desde pantallas pequeñas a las anchas.

Mostrar y ocultar algunos enlaces por defecto
Mostrar y ocultar algunos enlaces cuando sea solicitado.

Paso 1: El HTML

El html es similar al del sistema de navegación superior. Las diferencias son los enlaces adicionales y los enlaces "more" (más) y "less" (menos) que usaremos para mostrar y ocultar otros enlaces. También se incluyen las clases de prioridad (alpha, beta, gamma) asignadas a las respectivas listas de elementos y las clases show-more (mostrar más) y show-less (mostrar menos).

<header>
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />

    <nav>
      <ul id="demo-nav">
        <li class="alpha"><a href="">Back to Post</a></li>
        <li class="alpha"><a href="">Top-Nav</a></li>
        <li class="current alpha"><a href="">Priority</a></li>
        <li class="alpha"><a href="">Select Menu</a></li>
        <li class="beta"><a href="">Select Menu JS</a></li>
        <li class="beta"><a href="">Beta Link</a></li>
        <li class="gamma"><a href="">Gamma Link</a></li>
        <li class="gamma"><a href="">Gamma Link</a></li>
        <li class="show-more"><a href="#more">More</a></li>
        <li class="show-less"><a href="#">Less</a></li>
      </ul>
    </nav>

  </div>
</header>

Paso 2: El CSS predeterminado

El estilo predeterminado es idéntico al estilo predeterminado del anterior sistema de navegación superior, así que no lo repetiré aquí. La excepción es la necesidad de ocultar y mostrar enlaces. Los pasos para hacerlo son dos.

Primero solo queremos mostrar los enlaces alpha y el enlace "more" en las pantallas más pequeñas, así que estableceremos el resto en display: none.

1	#demo-nav li.beta,
2	#demo-nav li.gamma,
3	#demo-nav li.show-less
4	{display: none;}

En segundo lugar necesitamos mostrar y ocultar el resto de los enlaces y hacer intercambiables los enlaces de "more" (más) y "less" (menos) al ser pulsados. Para conseguirlo aprovecharemos las ventajas del pseudo-selector :target. Si no estás familiarizao con este selector, su funcionamiento es similar al de las anclas con nombre.

El selector :target se usa cuando el hash en una url y un id en un elemento son iguales. En otras palabras, si tienes la url domain.com#more entonces :target lo asociará con cualquier elemento con un id="more" añadido.

Habrás notado en el html de arriba que el href del enlace "more" es #more. Al pulsarlo nos llevará a la misma página con el hash #more añadido. Lo que no mostré antes es el elemento html en la página.

1	<html lang="en" id="more">

Pulsar more nos permitirá apuntar a la etiqueta html usando el pseudo selector :target y consecuentemente todo aquello contenido dentro de ella. Podemos mostrar los enlaces ocultos y ocultar el enlace "more" de la siguiente manera.

:target #demo-nav li.beta,
:target #demo-nav li.gamma,
:target #demo-nav li.show-less
  {display: inline;}
	
:target #demo-nav li.show-more {
  display: none;
}

Cuando alguien pulsa el enlace "less" eliminamos el hash y esos selectores :target ya no tienen efecto.

Nota: Al tiempo que he añadido el id="more" a la etiqueta html, cualquier elemento superior en el DOM puede funcionar. Simplemente es necesario que sea algo que contenga todos los elementos que quieres seleccionar en última instancia.

Paso 3: Las Media Queries

Tal y como hice en el ejemplo de navegación superior, tengo preparadas algunas media queries en las que lo único que cambia es el padding entre enlaces. También cambié de centrarlo todo a flotar tanto el logo como la barra de navegación hacia la izquierda, aunque en este modelo mantuve la navegación bajo el logo.

No mostraré todo ese código, aunque puedes verlo en el sistema de Prioridad. En su lugar vamos a centrarnos en descubrir los enlaces de más baja prioridad, lo cual es bastante sencillo. Todo lo que necesitamos hacer es mostrar cada nivel de prioridad de enlaces tan pronto exista espacio suficiente para ubicarlos. Mostraremos los enlaces beta primero y despues los gamma.

@media screen and (min-width: 48em) {
  #demo-nav li.beta {display: inline;}
}

@media screen and (min-width: 75em) {
  #demo-nav li.gamma {display: inline;}

  #demo-nav li.show-more,
  :target #demo-nav li.show-less
  {display: none;}
}

Una vez que los 3 niveles de prioridad puedan ser mostrados ya no necesitaremos ni el enlace "less" ni el "more", de modo que los deshabilitaremos completamente.

Consejos

De todos los sistemas, el modelo de prioridad será seguramente el que menos usarás, no obstante es una buena solución en algunos ocasiones. Tiene algunos inconvenientes. Uno de ellos es el hecho de que el pseudo-selector :target no funciona en IE8 e inferior. IE6 y IE7 podrían ser fácilmente descartables, pero creo que siendo realistas, necesitamos dar soporte a IE8 por algún tiempo más. Puedes reemplazar el método :target de arriba con una solución basada en javascript que muestre y oculte los enlaces para IE8.

Un problema mayor es el intercambio de los enlaces more y less, puede resultar descoordinado. En este ejemplo he situado estos enlaces al final y al pulsar uno dejamos el otro en un lugar distinto. Parece que se intercambian manteniendo la posición, pero no lo hacen.

Puedes compensarlo colocándolos en el primer lugar de la lista o haciendo uso de varios pares de estos que se muestran siempre después de que los enlaces prioritarios hayan sido mostrados y antes de aquellos que se ocultan por defecto, pero nunca será una solución elegante.

Ejemplos

Dos de los siguientes ejemplos son demos, y el último es un ejemplo de este sistema usado en una sitio en vivo.

Sistema de Menú de Selección

El sistema de Menú de Selección es otra manera de resolver el problema de tener demasiado enlaces para una pantalla pequeña, aunque lo consigue convirtiendo tu lista de enlaces en una caja de selección. La ventaja es que la caja de selección necesitará menos espacio vertical. La desventaja es que los enlaces de tu navegación global están ocultos por defecto.

Otra desventaja es que necesitas crear el código de ambos tipos de navegación en tu html, ya que no existe modo de conseguir que una selección tenga la apariencia de una lista y viceversa. Esto significa que deberás mantener 2 menús, lo cual es molesto si tienes algo más que unos pocos enlaces. Iré a otra versión de este sistema en un momento, en la cual se emplea javascript para crear uno de los menús.

Planteamiento: Empezaremos con dos menús en html, uno es la misma lista desordenada que ya usamos en el sistema de navegación superior y el otro un elemento de selección. Cambiaremos de uno a otro mediante una media query en cuanto el espacio lo permita. También necesitamos añadir un poco de javascript de manera que seleccionar una opción nos llevará a una nueva página.

Paso 1: El HTML

No hay nada nuevo en la versión del menú de lista sin orden. La novedad es la caja de selección y sus opciones correspondientes. Los valores del atributo href se trasladan al atributo de valor del elemento de opción.

<div id="header">
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />

    <nav>
      <ul id="demo-nav">
        <li><a href="">Back to Post</a></li>
        <li><a href="top-nav.html">Top-Nav</a></li>
        <li><a href="priority.html">Priority</a></li>
        <li class="current"><a href="select.html">Select Menu</a></li>
        <li><a href="select-js.html">Select Menu JS</a></li>
      </ul>
    </nav>

    <select id="select-menu">
      <option value="" selected="selected">Select</option>
      <option value="">Back to Post</option>
      <option value="top-nav.html">Top-Nav</option>
      <option value="priority.html">Priority</option>
      <option value="select.html">Select Menu</option>
      <option value="select-js.html">Select Menu JS</option>
  </select>
  </div>
</div>

Paso 2: El CSS Predeterminado

El estilo predeterminado general es el mismo que los mostrados arriba así que no lo repetiré aquí. Para las pantallas pequeñas he decidido dejar caer el menú bajo el logo y centrado. Dándole una anchura de 75% fue todo lo necesario.

1	#select-menu {
2	width: 75%;
3	}

Paso 3: Las Media Queries

El css en las media queries son de nuevo muy sencillas. Como el menú no necesita mucho espacio horizontal lo podemos mover hacia arriba y a la derecha del logo con relativa rapidez.

@media screen and (min-width: 30em) {
  .logo {float: left;}

  #select-menu {
    float: right;
    clear: none;
    width: 40%;
    margin-top: 2.25em;
  }

  #header {padding-bottom: 0; text-align: left;}
}

El cambio principal consiste en esconder el menú de selección y mostrar el menú de lista sin ordenar, lo cual se puede hacer con facilidad para ambos a través de la propiedad display. En términos de accesibilidad también es bastante recomendable ya que los lectores de pantalla solo necesitarán escanear la navegación una vez. Con la lista desordenada mostrándose, la flotaremos a la derecha y ajustaremos el padding de los enlaces.

@media screen and (min-width: 64em) {
  #select-menu {display: none;}

  #demo-nav {
    display: block;
    float: right;
  }
		
  #demo-nav a {padding: 1.25em 1.5em;}
  #demo-nav li:last-child a {padding-right: 0;}

}

Además de lo anterior, he hecho un cambio adicional para proveer a los enlaces de un poco más de espacio en las pantallas más anchas.

Paso 4: Un poco de Javascript

Este sistema necesita un poco de javascript para que las opciones en el menú de selección nos lleven a las nuevas páginas. Aquí usé un poco de jQuery (tras incluir jQuery en el head del documento).

$(function() {
  $("div select").change(function() {
    window.location = $(this).find("option:selected").val();
  });
});

Ejemplos

Todos los sitios siguientes usan el sistema de menú de selección.

Menú de Selección JS

Mencioné arriba que podrías usar javascript para crear el menú de selección de forma que no tengas que mantener dos grupos idénticos de enlaces. Una vez más usaré jQuery para crear el menú de selección a partir de la lista desordenada con algo de código prestado de Chris Coyier.

Primero creamos la selección y la agregamos a nuestro elemento de navegación. El bloque siguiente crea la opción "Seleción" que mostraremos por defecto. Esto no es realmente necesario. En su lugar podrías permitir que tu primer menú se mostrase, o quizá podrías añadir un poco de código de forma que la opción de la página en la que te encuentres, cualquiera que ésta sea, se seleccione por defecto.

El último bloque recoge cada enlace de la lista desordenada y añade la url y el texto a la parte apropiada del elemento de opción.

$(function() {
  // Create the dropdown base
  $("<select id='select-menu'/>").appendTo("nav");
	
  // Create default option "Select"
  $("<option />", {
    "selected"  :  "selected",
    "value"        :  "",
    "text"           :  "Select"
  }).appendTo("nav select");
	
  // Populate dropdown with menu items
  $("nav a").each(function() {
    var el = $(this);
    $("<option />", {
    "value"  :  el.attr("href"),
    "text"     :  el.text()
  }).appendTo("nav select");
});

Finalizamos con el mismo jQuery de arriba para aseguramos de que las opciones llevan al usuario a la página que ha seleccionado.

1	$("nav select").change(function() {
2	window.location = $(this).find("option:selected").val();
3	});
4	});

Sumario

Estos son los tres sistemas comúnmente empleados para gestionar la navegación responsive.

El sistema de navegación superior funciona mejor cuando solo tienes unos pocos enlaces y no necesita mucho más aparte de los cambios estilísticos que tú decidas.

El sistema de prioridad se puede usar cuando tienes algo más que unos pocos enlaces. Oculta diferentes niveles de enlaces priorizados basándose en el espacio disponible y cambia el diseño de los enlaces a través del pseudo selector :target.

El sistema de menú de selección convierte una lista desordenada en menús seleccionables de manera que no ocupen ningún espacio vertical extra.

Existen más sistemas aparte de estos, los examinaremos en artículos futuros de esta serie. ¡Gracias por leérnos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!