Advertisement
  1. Web Design
  2. Responsive Web Design

Navegación Mobile First sencilla y adaptable

by
Read Time:12 minsLanguages:

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

Crearemos una navegación de sitio web sencilla y adaptable. Nuestra solución nos ayudará a poner énfasis en el contenido de nuestra página, posiblemente la principal prioridad al diseñar para dispositivos móviles. No habrá JavaScript involucrado, y lo abordaremos desde un enfoque Mobile First.

Navegación móvil

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

Como regla general, el contenido tiene prioridad sobre la navegación en dispositivos móviles.

Lo que quiere decir con esto es que los usuarios de dispositivos móviles a menudo buscan respuestas inmediatas; quieren el contenido que fueron a buscar, no más opciones de navegación.

Muchos sitios, incluso los adaptables, se apegan a la costumbre de que la navegación pertenece a la parte superior de cualquier página. Este enfoque puede causar problemas de usabilidad en dispositivos móviles porque los usuarios de dispositivos móviles a menudo no tienen dos cosas: espacio de pantalla y tiempo. Si la navegación principal se coloca en la parte superior de una página, es muy probable que oscurezca toda la pantalla del dispositivo móvil. Este problema se ve agravado aún más por los grandes enlaces de menú táctiles, lo que obliga a los usuarios a desplazarse más allá de la navegación para acceder a cualquier contenido valioso.

Tomemos este ejemplo de London & Partners:

Un diseño adaptable perfectamente decente, pero en las dimensiones estándar de la ventana gráfica móvil (320px x 480px) todo lo que realmente ves es un menú de navegación. Seguramente, después de haber llegado a la página de inicio, ¿quiero ver algo más que eso? No son solo London & Partners quienes demuestran esto, es una práctica que se ve en muchos diseños adaptables en la web.

Entonces, ¿cuáles son las soluciones?

Hemos visto algunas formas de solucionar esto, a menudo apoyándonos en jQuery para resolver las cosas por nosotros. Tomemos la explicación de Chris Coyier del menú desplegable adaptable de Cinco sencillos pasos.

Pantalla grande, pantalla pequeña.

Usando jQuery, se crea un duplicado del menú en forma de un menú desplegable <select>, inicialmente oculto a la vista usando CSS. Cuando las consultas de medios detectan una pantalla más pequeña, hacen que el menú desplegable sea visible y la navegación original sea invisible. Esto es perfecto para dispositivos móviles, ya que los menús desplegables ocupan un espacio mínimo y hacen uso de la interfaz de usuario particular del dispositivo (como el scroller del iPhone).

Alternativamente, puedes ocultar tu navegación, pero hacer que se muestre cuando se haga clic en un botón de 'menú'. Puedes ver este efecto en acción con el último Bootstrap de Twitter.

Las pantallas más pequeñas ocultan los enlaces de navegación y muestran un icono de "lista" (que se acepta rápidamente como "menú") que revela la navegación cuando se hace clic en él. Nuevamente, a los visitantes móviles se les presenta la mayor cantidad de contenido posible, pero tienen opciones de navegación disponibles si las desean.

Solución CSS pura

Usaremos una técnica discutida por Luke, que hace uso de CSS y un enfoque Mobile First. ¿Qué queremos decir con un enfoque Mobile First? En pocas palabras, diseñaremos un diseño móvil sencillo y luego mejoraremos progresivamente el diseño para pantallas más grandes. Usaremos consultas de medios que detectan un aumento constante del tamaño de la pantalla, añadiendo estilo y características a medida que avanzamos.

Esto significa que solo se cargará el mínimo de CSS y recursos cuando nuestro diseño se vea en un dispositivo móvil. También significa que las versiones anteriores de IE (que no reconocen las consultas de medios) se presentarán con el sitio móvil. Consulta Dejando atrás el antiguo Internet Explorer de Joni Korpi para obtener más información al respecto.

1. Formatos

Explicaré las ideas detrás de esta solución a medida que avancemos, así que por el momento juntaremos algunos formatos, comenzando con un documento HTML5 en blanco.

Nota: ¡No olvides la metaetiqueta de la ventana gráfica!

Una vez hecho esto, agregaremos alguna estructura de página. Cosas sencillas y todo para los propósitos de nuestra demostración. Usé texto de relleno del Santo Grial de Monty Python (gracias Chris Valleskey) la cual es una buena manera de poner una sonrisa en tu rostro mientras estás trabajando :)

2. Formato de navegación

Reunimos una página html básica, así que ahora es el momento de la atracción principal; nuestra navegación principal..

Sí, lo viste correctamente, lo añadimos en la línea 68, después del último artículo. No olvides que estamos diseñando para dispositivos móviles ahora, hablaremos del escritorio más adelante. Colocamos la navegación en la parte inferior de nuestra página para que esté completamente fuera del camino. Ahora colocaremos un enlace en la parte superior de nuestra página para que los usuarios puedan encontrar la navegación si lo desean.

3. Reinicio de CSS

Dependiendo de cómo comiences normalmente los proyectos web, este paso puede diferir en tu flujo de trabajo habitual. Siempre he encontrado que el reinicio de Eric Meyer es una base sólida para trabajar, especialmente porque lo ha modificado recientemente. Agregaremos sus reglas de reinicio a una hoja de estilo para iniciar nuestro CSS:

4. Estilos básicos

Por el momento, nuestra página se ve bastante aburrida..

.. así que mejoremos las cosas agregando un estilo sencillo.

Todo esto es algo básico (fuentes, alturas de línea, colores, entre otros), lo que es crucial hasta ahora es que diseñé el botón 'menú' para que flote hacia la derecha dentro del <header>, donde a menudo esperaría que se encontrara la navegación.

Si pasas el cursor sobre él verás el estado de desplazamiento; no es necesario para los dispositivos de pantalla táctil, por supuesto, pero esta experiencia también se entregará a las versiones que no cooperen 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á comentarios cruciales para dispositivos con pantalla táctil. Nuestros usuarios sabrán que han tenido éxito al tocar el botón de menú.

De todos modos, haz clic en él y serás llevado a la navegación, genial.

Ahora modifiquemos un poco el estilo del menú.

5. Estilos de navegación

De hecho, diseñaremos nuestra navegación principal de manera muy similar al ejemplo de London & Partners que se mostró anteriormente, excepto que esta vez obviamente está en la parte inferior de la página.

Mucho mejor. Hicimos que los enlaces del menú sean agradables y grandes (lee más sobre Tamaños de objetivo táctiles en el propio blog de Luke Wroblewski) y una vez más determinamos un estado :focus para los comentarios de los usuarios.

También queda claro que incluimos un enlace "superior" que llevará a los usuarios a la parte superior de la página si es necesario.

6. Cada vez más grande

Bien, nos ocupamos de nuestro diseño móvil sencillo, así que ahora es el momento de realizar algunas mejoras progresivas. Usaremos consultas de medios para determinar cuándo nuestro diseño para dispositivos móviles ya no es apropiado.

Pero, ¿en qué momento se vuelve inapropiado? Hay muchas formas de abordar las consultas de medios, pero trabajaremos partiendo de la base de que una ventana gráfica móvil es de 320 px x 480 px. Tiene 320px de ancho cuando se ve en vertical, 480px de ancho cuando se ve en horizontal, por lo que podríamos establecer con razón nuestra primera consulta de medios para detectar cualquier pantalla de más de 480px.

Sin embargo, el siguiente paso es posiblemente la tableta. El iPad tiene una resolución de 980px x 768px, por lo que podemos asumir con seguridad que cualquier cosa menor que 768px es apropiada para nuestro diseño móvil. Cualquier cosa mayor que 768px puede soportar más diseños de navegación similares a los de un escritorio.

Por lo tanto, podemos comenzar a agregar reglas, así que configuremos una consulta de medios:

Esta consulta de medios ejecutará todos los estilos que contiene cuando la ventana gráfica tenga al menos 768 px de ancho. Ten en cuenta la inclusión de la palabra clave only, lo que garantiza que Internet Explorer 8 no se confunda e intente procesar la consulta. Consulta mi explicación anterior para obtener más detalles.

Comencemos haciendo desaparecer nuestro botón de 'menú':

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

7. Cambio de navegación

Ahora debemos llevar nuestra navegación principal a la parte superior de la página. Lo haremos eliminándola del flujo de documentos, colocándola absolutamente en la parte superior.

Para que eso sea posible, primero tenemos que hacer que su padre (.wrapper) esté relativamente posicionado. Podemos hacerlo aquí en la consulta de medios o determinarlo al comienzo de nuestra hoja de estilo.

Una vez que el menú está posicionado absolutamente, necesitamos eliminar algunos de los estilos de anclaje. No hay mucho que hacer, pero necesitamos que los elementos de la lista se muestren en línea, y debemos eliminar los bordes y el relleno exagerado de los anclajes. Los estados hover que dictamos anteriormente están bien, por lo que no es necesario cambiarlos.

8. Una última cosa

Si has estado prestando atención, habrás notado que todavía tenemos un enlace 'superior' en la navegación; realmente ya no lo necesitamos, ¿eh?

Podemos eliminar esto de varias maneras, pero para estar seguros de lo que está sucediendo, primero agregaremos una clase al elemento de la lista:

Y luego podemos deshacernos de él dentro de nuestra consulta de medios:

Conclusión

¡Eso es todo! Hay un montón de maneras de aprovechar esta idea (la implementación del ícono de lista es solo una) y, por supuesto, puedes seguir agregando consultas de medios para satisfacer el crecimiento de las pantallas. Esperemos que ahora tengas las bases para hacerlo. Creamos una navegación sencilla, adaptable y táctil, a partir de un enfoque mobile first al tiempo que le damos énfasis al contenido y la usabilidad. ¡¿Quién puede pedir más?!

Más recursos

Algunos enlaces útiles mencionados en el tutorial, agrupados en una lista práctica:

Opción Premium

Hay muchas plantillas mobile first para dispositivos móviles disponibles en Envato Market para uso inmediato en tus proyectos.

Por ejemplo, first es un tema del panel de administración/aplicación web para dispositivos móviles con una interfaz de usuario plana basada en Bootstrap 3. Es liviano pero con muchos componentes que se adaptan a tus necesidades. También es totalmente adaptable, y los widgets y componentes son mobile first.

first - Mobile First Web App Themefirst - Mobile First Web App Themefirst - Mobile First Web App Theme
first, tema de aplicación web Mobile First
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.