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

Un Acercamiento Flexible a la Navegación Adaptiva

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Muchos sitios web adaptivos proporcionan una barra de navegación horizontal en pantallas grandes y una navegación desplegable para dispositivos pequeños. Es un enfoque perfectamente decente, pero también tiene sus problemas. En primer lugar, los dispositivos no sólo vienen grandes y pequeños; vienen en todos los tamaños imaginables. En segundo lugar, la navegación podría cambiar con el tiempo. En tercer lugar, el posicionamiento del diseño o el tamaño de fuente pueden variar según el tamaño de la pantalla. Vamos a hacer las cosas de manera diferente...

¿Por qué no comprobar (con JavaScript) para ver cuánto de nuestra navegación realmente se ajusta en el espacio disponible? Una vez que sepamos esto, podemos tomar elementos que no encajan dentro de la barra de navegación y moverlos a un menú desplegable. En pantallas especialmente pequeñas, podemos elegir poner el menú entero en una lista desplegable.


¿Se Ajusta la Navegación?

¿Qué tipo de navegación funciona mejor? La respuesta a esta pregunta depende de varios factores, incluyendo el tamaño de pantalla, el tamaño de fuente, la familia de fuente, el número de elementos de navegación y el contexto en el que aparece la navegación. Estos factores interactúan entre sí y todos ellos pueden cambiar.

En vez de considerar cada uno de estos factores, simplemente examinaremos el resultado final: ¿Encajan todos los elementos de navegación en una fila ordenada o se empujan hacia abajo hasta la siguiente línea? Si es el último caso, ¿cuántos elementos encajan? Armados con esta información, podemos elegir la navegación correcta para hacer el trabajo.


Paso 1: Eligiendo los Breakpoints

El diseño adaptivo tiene dos características principales. En primer lugar el diseño debe ser fluido: su anchura se escala con el ancho del navegador. En segundo lugar hay puntos de interrupción (breakpoints), anchos en los que el diseño cambia a través del uso de media queries CSS. Por ejemplo, usted puede decidir que cuando el navegador no supere los 480 píxeles, una barra lateral se moverá por debajo del contenido y los encabezados se harán más pequeños. Puede tener tantos o tan pocos breakpoints como desee.

Screenshots of Twitter Bootstrap at desktop and mobile breakpoints

Puede crear un breakpoint utilizando una media query así:

Entonces, ¿cómo procedemos para elegir breakpoints? Un enfoque consiste en seleccionar unas pocas anchuras que coincidan con los tamaños de dispositivos comunes.

Twitter Bootstrap tiene varios breakpoints, incluyendo un breakpoint "smartphone" que se activa en ventanas de no más de 480px. También tiene un breakpoint para "tablets en sentido retrato" que se dispara entre 768px y 979px.

Usted podrá notar que no hay un breakpoint para "tablets en sentido paisaje" en Bootstrap. Eso es porque el iPad tiene 1024 píxeles de ancho en sentido paisaje - el mismo ancho que muchas pantallas de escritorio. Eso nos lleva a la falla principal con este enfoque: se trata de hacer conjeturas aproximadas sobre los tipos de dispositivos. Un dispositivo que concuerda con nuestra "tablet en sentido retrato" en realidad podría ser un teléfono realmente grande o un portátil realmente pequeño.

Las media queries no nos dicen qué tipo de dispositivo se está utilizando, pero podemos hacer una suposición basada en el tamaño del dispositivo.

Un enfoque alternativo sería basar los breakpoints en el diseño y el contenido. Usted podría implementar una versión fluida de su diseño sin breakpoints y después probarla en diferentes anchos. Cuando encuentre anchuras donde las cosas empiezan a verse extrañas, es un buen momento para agregar un breakpoint. Este es el enfoque favorecido por Ethan Marcotte, quien acuñó el término "diseño adaptivo".

Screenshot of the Boston Globe at three different widths

¿Cuál es el mejor enfoque? Como con tantas cosas en la vida, depende. ¿Está utilizando un framework pre-construido como Bootstrap? ¿Cree usted que será más fácil explicar el diseño adaptivo a tu equipo o a los clientes si puede hablar de tipos específicos de dispositivos? Si respondió "sí" entonces la elección de breakpoints basados ​​en el tamaño del dispositivo puede ser adecuada para usted. Si respondió "no", elegir breakpoints basados ​​en su diseño y contenido puede darle más libertad y flexibilidad. Ese es el enfoque que vamos a aplicar en este tutorial.


Paso 2: Escribiendo el Marcado

Vamos a empezar a construir una página sencilla. Construiremos un área de "article" que contiene cierto contenido y una barra de navegación. Junto al artículo, ubicaremos un aside.

Incluya alrededor de diez elementos de navegación en esta lista con fines demostrativos.


Paso 3: Estilo Básico

Primero vamos a dar estilo de nuestra lista para que se vea como una barra de navegación.

También haremos que nuestro artículo se destaque un poco, y mostraremos nuestro aside como una barra lateral. Utilizamos valores porcentuales para nuestros anchos para hacer que nuestro diseño sea fluido.

Nuestro resultado final debe ser algo como esto:

Screenshots of the design at small medium and large widths

Paso 4: Agregue un Breakpoint

Cuando nuestra anchura es particularmente pequeña, el texto se envuelve tanto que resulta difícil de leer. Podemos arreglar eso dejando que el artículo y la barra lateral tomen el ancho completo, y empujando la barra lateral debajo del artículo.

Screenshot of the demo in a small window

Siéntase libre de jugar con el ancho de la ventana y observe lo que sucede. En general, como la ventana se hace más pequeña, hay espacio para menos navegación cada vez. Sin embargo cuando usted encoge la ventana a 550px, en realidad esta ganando algo de espacio para la navegación ya que la barra lateral salta a la siguiente línea.

El número de elementos que podemos mostrar en la barra de navegación depende de varios factores, incluyendo el ancho de la ventana, el breakpoint, el tamaño de fuente y el número de elementos en la navegación.


Paso 5: Establezca una Altura Fija en la Barra de Navegación

En muchos casos, nuestro contenido de barra de navegación no encaja en una línea ordenada. ¡Vamos a arreglar eso!

Si el usuario tiene JavaScript, esconderemos elementos que no encajen. Los mostraremos en un menú desplegable más tarde. Si el usuario no tiene JavaScript, dejaremos que la altura de la barra de navegación se expanda según sea necesario. No es bonito, pero por lo menos es funcional.

Para ello, descargaremos e incluiremos una versión personalizada de Modernizr, una biblioteca de JavaScript que nos permite probar el soporte de funciones en los navegadores. Nuestras pruebas de compilación personalizadas para soporte de JavaScript y de eventos táctiles.

A continuación, agregaremos una clase "no-js" a nuestra etiqueta. Si el usuario tiene JavaScript, Mozernizr cambiará esa clase a "js". Si el usuario no tiene JavaScript, la clase se mantendrá como "no-js".

Nota: Por razones de rendimiento, generalmente es mejor evitar poner los scripts en la parte superior de la página. Mientras el navegador está ocupado descargando scripts, dejará de descargar otros archivos y de renderizar la página. En este caso es precisamente eso lo que queremos: no queremos que el navegador muestre nada hasta que nuestra clase .js esté en su lugar. Hay un pequeño rendimiento superior asociado con este enfoque, el cual hemos mitigado un poco mediante el uso de una versión personalizada de Modernizr. Si solo necesita esa clase "no-js" y no planea utilizar otras funciones de Modernizr, podría hacer que su página sea aún más ligera usando en su lugar esta maravilla de una línea.

Ahora que tenemos una clase .js funcionando en su lugar, vamos a usarla para ocultar los elementos que se envuelven en una segunda línea.


Paso 6: Agregue FlexMenu

A continuación, vamos a descargar flexMenu, un plugin de jQuery que nos permite comprobar si todos los elementos encajan en la barra de navegación y mostrar el tipo de menú adecuado. También necesitaremos jQuery. Ponga estos scripts en la parte inferior de la página, para que no bloqueen la visualización de la página mientras se cargan.

También debemos decirle a flexMenu que mire nuestro menú y lo redimensione según sea necesario:

Ahora, a medida que cambiamos el tamaño de la página, aparece un vínculo "más" cuando algunos de los elementos no encajan en la barra de navegación. Puede pasar el cursor o pulsar este enlace para mostrar una lista desplegable con estos elementos. Cuando la página se vuelve demasiado pequeña para que aparezcan más de uno o dos elementos en la barra de navegación, se nos presenta un enlace "menú". Cuando pasa el cursor sobre este enlace o lo toca, aparecerán todos los elementos de navegación.

flexMenu working but looking pretty ugly

Ahora tenemos el comportamiento que queremos, pero el menú desplegable se ve bastante horrible. Eso está bien - lo arreglaremos en el siguiente paso.


Paso 7: Dar Estilo a flexMenu

Ahora, vamos a añadir algunos estilos para que el menú desplegable se vea mejor. También añadiremos una flecha CSS al lado del enlace "menú" o "más" para dejar claro que estos vínculos abrirán un menú desplegable.

Con las flechas CSS, no hay ninguna imagen que cargar y las flechas permanecen bien acentuadas en las pantallas de alta resolución. Este enfoque funciona en todos los navegadores modernos, así como en IE8. Si necesita soporte para IE7 o una versión anterior, asegúrese de incluir una copia de seguridad basada en imágenes.

Screenshot of our popup menu looking pretty decent

Paso 8: Ajuste para Pantallas Táctiles

Ahora tenemos una barra de herramientas que funciona bien en una variedad de tamaños de pantalla, pero es un poco difícil de usar en una pantalla táctil. Las pantallas táctiles no proporcionan tanta precisión como ratones y trackpads, por lo que es fácil perderse y tocar el elemento equivocado. Para solucionar este problema, vamos a hacer los enlaces un poco más grande y moverlos un poco más lejos unos de otros.

Modernizr, que hemos agregado anteriormente, proporciona una clase CSS para cada característica que comprueba. En los dispositivos con pantalla táctil, agregará la clase "touch". En los dispositivos sin pantalla táctil, agregará la clase "no-touch".

Mmm Big Type

Debido a que hemos expresado todos nuestros tamaños en ems, podemos escalar la barra de navegación entera hacia arriba o hacia abajo mediante su tamaño de fuente. La línea de arriba (ok, técnicamente tres dada la forma en que la hemos espaciado) ajusta no sólo el tamaño del texto sino también el tamaño de las flechas, la altura de la barra de navegación, el relleno en los enlaces y el margen entre los elementos.

Nota: La clase .touch indica compatibilidad con eventos táctiles, lo que permite a los desarrolladores crear entradas táctiles en las aplicaciones web. Los dispositivos que tengan pantallas táctiles y ratones (por ejemplo, pizarras de Windows 8) probablemente obtendrán la clase .touch. La mayoría de los dispositivos táctiles simulan eventos de ratón con fines de compatibilidad, por lo que actualmente no hay manera de utilizar Modernizr para detectar dispositivos con pantallas táctiles y ratones.

Screenshot of our responsive navbar on an iPhone

Paso 9: Corregir las Rarezas entre Navegadores

Si usted prueba la demostración hasta ahora en IE7, probablemente notará dos problemas:

  • A medida que se redimensiona la ventana, la barra lateral a veces se empuja por debajo del artículo antes de llegar a nuestro breakpoint.
  • El menú desplegable está un píxel debajo de la parte inferior del vínculo "más", por lo que el menú desaparece cuando usted intenta pasar el cursor sobre él.

El primer problema se debe al manejo que IE7 le da a los porcentajes. Si calcula un valor que incluye una fracción de un píxel, siempre redondea. El segundo problema es probablemente causado por un inconveniente similar.

Para evitar este problema, podemos establecer un ancho fijo para nuestra página en IE7. Para hacer esto, vamos a agregar primero una clase "menor que IE8" en la parte superior de nuestra página.

A continuación, vamos a añadir CSS que establezca un ancho de píxel específico para el artículo y la barra lateral en IE7. La anchura total de estas áreas, más el relleno, el margen, y la tolerancia para redondear hacia arriba, resulta en 901 pixeles.

También puede notar que en iOS, el nivel de zoom cambia al girar el dispositivo de vertical a horizontal. Para solucionar este problema, usted sólo tiene que tomar esta corrección basada en JavaScript y hacer referencia a ella en la parte inferior de la página. Este problema aparentemente ha sido corregido en iOS 6.


Lecturas Adicionales

Los artículos de Brad Frost Patrones de Navegación Adaptiva y Patrones Complejos de Navegación para Diseño Adaptivo cubren una amplia variedad de aproximaciones a la navegación en sitios adaptivos.

Luke Wroblewski es también un gran recurso para los patrones de diseño adaptivos y móviles. En particular, su enfoque Off Canvas es bastante inteligente: coloca la navegación y otros contenidos secundarios fuera de pantalla en dispositivos pequeños. Cuando el usuario pulsa un botón, el contenido se desliza desde la izquierda o la derecha.

Por supuesto estos recursos no proporcionan una lista exhaustiva. El diseño adaptivo es todavía un campo joven, y usted puede esperar un muchos nuevos patrones de increíble diseño que aparecerán en el futuro. ¡Tal vez algunos de ellos serán suyos!

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.