Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design

Una navegación simple, responsiva, enfocada a móviles

by
Length:LongLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Vamos a construir una sitio web de navegación simple y responsiva. Nuestra solución nos ayudará a poner énfasis en el contenido de nuestra página, posiblemente la mayor prioridad cuando se diseña para móviles. No habrá JavaScript involucrado, y lo abordaremos desde un enfoque primero para móvil.

Navegación Móvil

Si has leído Mobile First de Like Wroblewski, estarás familiarizado con su afirmación de que:

Como una regla general, el contenido toma prioridad sobre la navegación en móvil.

A lo que se refiere con eso es que los usuarios móviles regularmente buscan respuestas inmediatas; ellos quieren el contenido que vinieron buscando, no más opciones de navegación.

Varios sitios, incluso los responsivos, se apegan a la convención de que la navegación pertenece a la parte superior de cualquier página. Ésta aproximación puede causar problemas de usabilidad en dispositivos móviles porque los usuarios móviles generalmente carecen de dos cosas: espacio en pantalla y tiempo. Si una navegación primaria es puesta al principio de una página, hay una buena posibilidad de que ésta eclipsará toda la pantalla de un móvil. Éste problema es exacerbado además por grandes links amigables al tacto, forzando a los usuarios a desplazarse más allá de la navegación para llegar a cualquier contenido valioso.

Toma éste ejemplo de London & Partners:

Un diseño responsivo perfectamente decente, pero en dimensiones estándar de móviles (320px x 480px) lo único que puedes ver realmente es un menú de navegación. Seguramente, habiendo llegado a la página de inicio, ¿Quiero ver algo más aparte de eso? No sólo es London & Partners quien demuestra esto – es una práctica vista en varios diseños responsivos a través de la web.

¿Entonces Cuáles Son las Soluciones?

Hemos visto unas cuantas maneras de hacer esto, frecuentemente apoyándonos en jQuery para acomodar las cosas por nosotros. Toma la explicación de Chris Coyier del menú responsivo desplegable en Five Simple Steps.

Pantalla grande, pantalla pequeña.

Usando jQuery, un duplicado del menú es creado en forma de <select> desplegable, inicialmente oculto usando CSS. Cuando los media queries detectan una pantalla más pequeña, éstos hacen al desplegable visible y la navegación original invisible. Esto es perfecto para dispositivos móviles ya que los desplegables usan un espacio mínimo del UI específico del dispositivo (como el deslizador del iPhone).

De manera alternativa, debes ocultar tu navegación, pero has la transición a la vista cuando un botón de “menú” sea clickeado. Puedes ver éste efecto en acción con el más reciente Bootstrap de Twitter.

Pantallas más pequeñas ocultan los links de navegación y muestran un ícono de “lista” (rápidamente siendo aceptado como un “menú”) el cual revela la navegación cuando se pulsa. De nuevo, los visitantes en móviles obtienen tanto contenido como sea posible, pero tienen opciones de navegación disponibles cuando ellos dispongan.

Solución con CSS Puro

Vamos a usar una técnica mencionada por Luke, la cual hace uso de CSS y una aproximación de Prioridad a Móviles. ¿A qué nos referimos con Prioridad a Móviles? De manera simple, vamos a diseñar una retícula móvil sencilla, después, progresivamente mejorar el diseño para pantallas más grandes. Usaremos media queries que detectarán continuamente incrementos en tamaños de pantalla, agregando estilo y características al mismo tiempo.

Esto significa que sólo la cantidad mínima de CSS y recursos serán cargados cuando nuestro diseño sea visualizado con un dispositivo móvil. También significa que versiones más viejas de IE (las cuales no reconocen media queries) serán presentadas con el sitio móvil. Revisa Leaving Old Internet Explorer Behind de Joni Korpi para más información sobre esto.

1. Marcado

Explicaré las ideas detrás de ésta solución mientras las seguimos, así que por el tiempo arrojemos algún marcado, empezando con un documento HTML5 en blanco.

Note: No olvides la Etiqueta Meta Viewport!

Habiendo hecho eso, agregaremos un poco de estructura. Cosas sencillas y para propósitos demostrativos. He usado texto de relleno de Monty Python's Holy Grail (gracias Chris Valleskey) que es una buena manera de poner una sonrisa en tu cara mientras trabajas :)

2. Marcado de Navegación

Hemos formado una página básica de html, así que ahora es tiempo para la atracción principal, nuestra navegación primaria.

Sí, has visto eso correctamente, agregamos eso en la línea 68, después del último artículo. No olvides que estamos diseñando para móviles ahora, cubriremos Desktop luego. Hemos puesto la navegación al fondo de nuestra página para que esté totalmente fuera del camino. Vamos ahora a poner un link hasta arriba de nuestra página para que los usuarios puedan encontrar la navegación cuando si así lo desean.

3. Reinicio CSS

Dependiendo de cómo normalmente comiences los proyectos web, este paso podría diferir de tu flujo de trabajo usual. Siempre he encontrado el reinicio de Eric Meyer como una sólida base desde la cual trabajar, especialmente como lo ha retomado recientemente. Añadiremos sus reglas de reinicio a una hoja de estilo para iniciar nuestro CSS.

4. Estilos Básicos

De momento nuestra página luce poco inspiradora..

..mejoremos las cosas agregando algún estilo simple.

Todo esto son cosas básicas (fuentes, grosores de línea, colores, etc.), lo que es crucial hasta ahora es que he estilizado el botón “menú” para flotarlo a la derecha dentro del <header>, donde frecuentemente esperas encontrar la navegación.

Si pasas encima de el verás el estado de hover - no necesario para dispositivos de pantalla táctil por supuesto, pero está experiencia será también entregada para versiones poco cooperativas de Internet Explorer. Lo que hemos definido para el beneficio de los usuarios móviles es un estado :focus. Es lo mismo que el estado :hover, pero ofrecerá retroalimentación crucial para dispositivos con pantalla táctil. Nuestros usuarios sabrán que han pulsado satisfactoriamente el botón de menú.

De cualquier modo, clickea en el y serás llevado a la navegación, super.

Ahora demos estilo al menú un poco.

5. Estilos de Navegación

De hecho vamos a dar estilo a nuestra navegación primaria casi como el ejemplo de London & Partners mostrado antes, excepto que esta vez es obviamente al final de la página ..

Mucho mejor. Hicimos los links del menú grandes y bonitos (lee más sobre Touch Target Sizes en el blog de Luke Wroblewski) y una vez más determinamos el estado a:focus para retroalimentación del usuario.

También ha sido claro que incluimos un link “top” el cual llevará a los usuarios de regreso al inicio de la página de ser necesario.

6. Volvíendose Más Grande

OK, hemos lidiado con nuestra simple retícula móvil, así que ahora es tiempo de un mejoramiento progresivo. Vamos a usar media queries para determinar cuándo nuestra retícula móvil ya no es apropiada.

¿Pero en que punto se vuelve inapropiada? Hay muchas maneras de determinar media queries, pero vamos a trabajar desde el fundamento de que un viewport móvil es de 320px x 480px. Es de 320px de ancho cuando se ve en modo vertical, 480px de ancho cuando se ve en modo apaisado, así que podemos justificadamente fijar nuestro primer media query para detectar cualquier pantalla más grande que 480px.

Sin embargo, el siguiente paso sería la Tablet. El iPad tiene una resolución de 980px x 768px, así que podemos asumir de manera segura que cualquier cosa más pequeña que 768px es apropiado para nuestra retícula móvil. Cualquiera más grande de 768px puede soportar más retículas Desktop.

Podemos entonces empezar a agregar reglas, así que configuremos un media query:

Éste media query ejecutará todos los estilos contenidos en él cuando el viewport sea de al menos 768px de ancho. Notese la inclusión de la palabra only, la cual asegura que Internet Explorer 8 no se confunda y trate de procesar la consulta. Mira mi explicación previa para más detalles.

Empezemos las cosas por hacer nuestro botón de ‘menú’ desaparecer:

Con el navegador ligeramente más ancho, el botón de menú ya no se muestra.

7. Moviendo la Navegación

Ahora necesitamos llevar nuestra navegación primaria al principio de la página. Lo haremos removiéndola del flujo del documento, posicionándola absolutamente hasta arriba.

Para que eso sea posible primero debemos dar a su padre (.wrapper) con posición relativa. Podemos hacer eso en el media query, o determinarlo al inicio de la hoja de estilo.

Una vez que el menú está absolutamente posicionad, necesitamos remover algunos de los estilos anchor. No hay mucho que hacer, pero necesitamos que los elementos de lista se muestren en línea, y necesitamos remover los bordes y padding exagerado de los anchors. Los estados hover que establecimos antes están bien desde luego, así que no necesitamos cambiarlos.

8. Una Última Cosa

Si has estado poniendo atención te habrás dado cuenta de que aún tenemos un link ‘top’ en la navegación - ¿realmente no lo necesitamos más verdad?

Podemos removerlo de distintas maneras, pero si estamos seguros de lo que está pasando primero agregamos una clase al elemento de lista:

Y luego podemos deshacernos de él dentro de nuestro media query:

Conclusión

¡Eso es todo! Hay muchas maneras de construir sobre esta idea (siendo una el implementar el ícono de lista) y, por supuesto, puedes continuar agregando media queries para cubrir tamaños de pantalla más grandes. Con suerte ahora tienes los fundamentos para hacerlo. Hemos creado una navegación simple, responsiva y amigable para dispositivos táctiles, desde una aproximación primeramente móvil dando énfasis al contenido y la usabilidad. ¿Quién podría pedir más?

Otros Recursos

Unos cuantos links útiles mencionados en el tutorial, todos apilados en una conveniente lista

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.