Krypton Solid

Cómo implementar la navegación fuera del lienzo para un sitio web receptivo – Smashing Magazine

Cómo implementar la navegación fuera del lienzo para un sitio web receptivo – Smashing Magazine

Las diferentes ventanas gráficas con las que se encuentran nuestros sitios web a diario continúan exigiendo más del diseño receptivo. No solo debemos continuar abordando los problemas de la coreografía de contenido, el arte de mantener el orden y el contexto a lo largo del caótico flujo y reflujo del navegador web, sino que también debemos cumplir con las expectativas de los usuarios.

Las diferentes ventanas gráficas con las que se encuentran nuestros sitios web a diario continúan exigiendo más del diseño receptivo. No solo debemos seguir abordando las cuestiones de coreografía de contenido – el arte de mantener el orden y el contexto a lo largo del caótico flujo y reflujo del navegador web, pero también debemos cumplir con las expectativas de los usuarios. No están quietos.

Con los gustos de Firefox OS (Arrancar a Gecko), Sistema operativo Chrome y ahora Ubuntu para teléfonos – un sistema operativo que convierte a las “aplicaciones web” en ciudadanos de primera clase – ofrecer experiencias similares a aplicaciones nativas en la web puede convertirse en una necesidad si los usuarios comienzan a esperarlo. Muchos en nuestro campo han abogado por un grado de separación entre la Web y las plataformas nativas por razones técnicas y filosóficas. Ciertamente es prudente prestar atención, pero a medida que los dispositivos de consumo continúan difuminando los límites, vale la pena pensar en lo que podemos aprender del diseño de aplicaciones nativas.

Otras lecturas en SmashingMag:

Una demostración

En este artículo, recorreré una demostración de compilación que se centra en dos temas. El primero es patrones de diseño receptivo que acogen la ventana gráfica y mejoran la visibilidad del contenido más allá del hipervínculo básico; en este caso, navegación fuera del lienzo. El segundo son las complejidades de implementar tales ideas de una manera accesible y con un alto rendimiento. Estos son dos temas que creo que están en el corazón del futuro de la Web.

Con eso en mente, empecemos a construir.

La base accesible

Todo lo bueno comienza con una base sólida de HTML semántico y CSS ampliamente compatible. En teoría, esta línea de base debería funcionar como una experiencia útil para todos los navegadores que visitan nuestro sitio web. (También podría ser el final experiencia en navegadores con menos capacidad).

Como punto de partida, usaré una técnica muy similar a la de Aaron Gustafson. Navegación móvil inteligente sin hacks. No requiere JavaScript para funcionar.

Demostración de menú sensible fuera del lienzo 1
Paso 1 del menú sensible fuera del lienzo. Enlace corto: bit.ly/offcanvas1

  • Ver demostración 1 Asegúrese de verlo en un dispositivo móvil o en una pantalla pequeña y tómese un tiempo para inspeccionar el código. Aunque nuestro diseño final será significativamente diferente, comenzar de manera simple es vital; modernizar la accesibilidad no es trivial.

El cuerpo HTML se ve así (he eliminado algunos atributos para mayor claridad semántica):

<header id="top" role="banner">
    <h1>Book Title</h1>
    <a href="https://www.smashingmagazine.com/2013/01/off-canvas-navigation-for-responsive-website/#nav">Book navigation</a>
</header>
<nav id="nav" role="navigation">
    <h2>Chapters</h2>
    <ul>
        <li><a href="#">Chapter 1</a></li>
        <li><a href="#">Chapter 2</a></li>
        <li><a href="#">Chapter 3</a></li>
        <li><a href="#">Chapter 4</a></li>
        <li><a href="#">Chapter 5</a></li>
    </ul>
    <a href="https://www.smashingmagazine.com/2013/01/off-canvas-navigation-for-responsive-website/#top">Return to content</a>
</nav>
<article role="main">
    <!-- [main content here] -->
</article>

Podría considerar el HTML solo, con poco o ningún estilo, como un «punto de interrupción cero». Si no es lógico en esta etapa, la accesibilidad no mejorará.

Desglose de la Demo 1

  • Las consultas de medios se basan en un ancho de ventana gráfica de 45em (eso depende del contenido). Por encima de este punto de interrupción, la navegación es visible de forma permanente. Prefiero las unidades em porque permiten que los puntos de interrupción mantengan una relación con el tamaño del texto. Lyza Gardner explica en detalle en su publicación “Los ME lo tienen: ¡Consultas de medios proporcionales FTW!«
  • Estoy usando ambos min-width y max-width consultas de medios para el alcance de CSS. Esto agrega un poco de complejidad. La mayoría de las personas prefieren una compilación de «dispositivos móviles primero», utilizando solo progresivamente más grandes min-width consultas. La desventaja de esa técnica es la cantidad de reiniciando requerido si un elemento tiene estados visuales notablemente diferentes. Ninguno de los métodos es correcto o incorrecto.
  • El quid de esta etapa inicial es el : pseudoclase objetivo selector, utilizado para mostrar y ocultar la navegación. Solo IE8 y versiones inferiores carecen de soporte. Sin embargo, esto no es un problema si entrega una hoja de estilo de escritorio semifluida a los IE antiguos. Jake Archibald, Nicolás Gallagher y Stuart Robson puedo contarte más.

A medida que la demostración vaya tomando forma, seguiré presentando los principales principios de desarrollo. Aún queda un largo camino por recorrer …

Salirse del lienzo

Para algunos sitios web, lo anterior puede ser suficiente, ¡pero no para nosotros! Estamos experimentando con patrones fuera del lienzo y esforzándonos por lograr esa experiencia nativa. Debido a que no podemos ignorar los navegadores más antiguos, ahora es el momento de mejorar progresivamente.

Demostración de menú sensible fuera del lienzo 2
Paso 2 del menú sensible fuera del lienzo. Enlace corto: bit.ly/offcanvas2

  • Ver demo 2 Verá la navegación rediseñada con funcionalidad básica.

Desglose de la demo 2

  • Estoy agregando la clase js-ready al elemento de documento después de la DOMContentLoaded incendios de eventos. El selector .js-ready se utiliza como gancho para cambiar el estilo de la navegación fuera del lienzo de forma segura. Si por alguna razón JavaScript no se carga, entonces la funcionalidad original de la demostración 1 todavía existe.
  • Para mostrar y ocultar la navegación, estoy alternando una clase de js-nav en el elemento del documento cuando el usuario hace clic (o toca) los botones correspondientes. Esto simplemente aplica un estilo de left: 70% hacia #inner-wrap elemento#outer-wrap se utiliza para ocultar cualquier desbordamiento y evitar barras de desplazamiento).

Esta es una mejora bastante básica, pero lo que es más importante, sigue siendo utilizable antes de que JavaScript esté listo. También es notable que no se escriban estilos en línea con JavaScript; solo las clases se utilizan para gestionar estados.

Saltar entre los estados de navegación abiertos y cerrados crea una experiencia de usuario discordante. Los usuarios deben comprender, o incluso ver – cómo ha cambiado una interfaz. Este es a menudo el punto en el que los desarrolladores decepcionan a la Web. Para ser justos, crear interfaces de usuario es increíblemente difícil. Lo que voy a mostrar a continuación está lejos de ser perfecto, pero ciertamente es un paso en la dirección correcta.

Entonces, tenemos la configuración. Ahora agreguemos transiciones.

Transición (el camino equivocado)

Empezaré por hacerlo todo mal, porque así es como lo habría hecho hace unos años, y aprender de los errores es importante.

Demostración de menú sensible fuera del lienzo 3 (jQuery)
El menú sensible fuera del lienzo usando jQuery .animate para transiciones. Enlace corto: bit.ly/offcanvas3

jQuery es un recurso con el que comienzan muchos desarrolladores front-end para aprender JavaScript. Personalmente, soy un gran admirador (nunca culpes a las herramientas), pero desafortunadamente jQuery tiene el hábito de hacer que las cosas parezcan engañosamente simples. Enmascara la complejidad y, con eso, comprensión.

La transición de nuestra navegación fuera del lienzo con jQuery es muy fácil:

$('#nav-open-btn').on('click', function() {
    $('#inner-wrap').animate({ left: '70%' }, 500);
});

$('#nav-close-btn').on('click', function() {
    $('#inner-wrap').animate({ left: '0' }, 500);
});

Visualmente, esto logra el efecto que buscamos, pero pruébelo en el dispositivo móvil y observe cómo la velocidad de fotogramas tartamudea. El rendimiento es terrible.

Este método es malo por varias razones:

Una animación de jQuery actualizando el DOM

  • jQuery’s .animate incrementa el elemento style atributo en cada cuadro de animación (como se puede ver en el GIF anterior). Esto obliga al navegador a recalcular el diseño.
  • Deja estilos en línea en el DOM que tienen muy alta especificidad y eso anulará nuestro CSS bien mantenido. Este es un gran problema si la ventana gráfica cambia de tamaño y activa diferentes puntos de interrupción.
  • A separación de intereses se pierde porque los estilos se definen en archivos JavaScript.

En general, es una pesadilla de rendimiento y mantenibilidad. Hay una mejor manera.

Transición con CSS

Dejando de lado el experimento de jQuery, ahora estoy construyendo de nuevo a partir de la segunda demostración, esta vez usando Transformaciones y transiciones CSS. Estos nos permiten animar sin problemas la navegación fuera del lienzo con un gran rendimiento.

Demostración de menú sensible fuera del lienzo 4
El menú fuera del lienzo con capacidad de respuesta final que utiliza transformaciones y transiciones CSS. Enlace corto: bit.ly/offcanvas4

Desglose de la demostración final

  • Volviendo a CSS, una vez más estoy usando el .js-nav class para alternar la navegación, sin realizar modificaciones de estilo reales con JavaScript.
  • Estoy mejorando progresivamente con las clases .csstransforms3d y .csstransitions (aplicado al elemento de documento por Modernizr).
  • En lugar de mover la navegación con posicionamiento negativo (left: -100%), Estoy usando el transform propiedad: transform: translate3d(-100%, 0, 0).
  • Las transiciones CSS se utilizan para animar transform cambios: transition: transform 500ms ease. Y agregué algunas transformaciones más para mejorar el efecto visual.

Con la ayuda de Modernizr, esto volverá a demo 2 si el navegador no es compatible con las transformaciones y transiciones de CSS. (En teoría, podría recurrir a la animación jQuery, pero realmente no vale la pena). descargar Modernizr, puede incluir solo la detección de funciones que necesita. También incluye el código HTML5 para IE. Considerándolo todo, es un guión muy útil.

Los beneficios aquí son inmensos. En primer lugar, mediante la transición de elementos con transformaciones 3D, el navegador puede generar capas de renderización aceleradas por hardware. En segundo lugar, no es necesario que JavaScript se preocupe por el estilo o los puntos de interrupción de las consultas de medios. JavaScript solo necesita interpretar la interacción del usuario y aplicar clases para mantener los estados; CSS define los cambios visuales.

Podemos profundizar en el rendimiento utilizando las herramientas para desarrolladores de Chrome. Los resultados a continuación son del navegador de escritorio, pero para el rendimiento móvil puede usar Depuración remota USB en dispositivos Android.

Rendimiento de animación jQuery

Rendimiento de la animación de jQuery en las herramientas de desarrollo de Chrome

Los cuatro eventos anteriores representan la apertura y el cierre de la navegación dos veces. En el diagrama, el amarillo representa la ejecución de JavaScript, el púrpura es la representación (recalculando el estilo y el diseño) y el verde es la pintura en la pantalla. En dispositivos móviles, estaríamos disparando muy por debajo de esa línea de 30 FPS. También probé en un iPhone 3GS y, literalmente, pude contar 3 FPS con mis propios ojos, ¡es así de lento!

Rendimiento de transición CSS

Rendimiento de la transición de CSS en las herramientas para desarrolladores de Chrome

¡Que diferencia! El único JavaScript que existe es para gestionar la interacción del usuario antes y después de la transición. El verde que estamos viendo es el mínimo que necesita el navegador para volver a pintar la transición a una velocidad de cuadro respetable, utilizando la aceleración de la GPU.

Posibles preocupaciones

Como ocurre con todos los nuevos estándares web, nada es intrínsecamente perfecto.

En los navegadores basados ​​en WebKit, el suavizado de fuentes puede cambiar a antialiased desde el subpixel-antialiased predeterminado cuando se aplican transformaciones o transiciones CSS. Esto podría resultar en un texto visualmente más delgado, que muchos diseñadores prefieren, pero no es algo que debas «arreglar».

El parpadeo también puede ocurrir si un elemento va entre transformación y no transformación. Para evitar esto, siempre comience con un valor predeterminado como translate3d(0,0,0) en un elemento que se moverá más tarde, para que la capa de render esté compuesta y lista.

El siguiente paso

Mejorando aún más, podríamos detectar y aprovechar los gestos táctiles, como deslizar, para realmente acercar esta implementación a sus contrapartes nativas; «más cerca» es la palabra operativa, pero creo que la brecha está más cerca de lo que muchos querrían. creer.

También es, en mi opinión, una brecha que necesitar al puente.

Hay otras formas inteligentes de aumentar la velocidad de interacción. Los navegadores móviles tienden a esperar alrededor de 300 ms para activar los eventos de clic.

Facilitación de la transición puede cambiar radicalmente el efecto visual y la percepción del usuario de lo que está sucediendo. Ya sea que los elementos necesiten saltar, rebotar o acelerar para entrar en acción, Lea Verou tiene un útil bezier cúbico recurso para generar funciones de aceleración personalizadas.

Con suerte, este artículo ha mostrado las mejoras que se pueden realizar si tenemos especial cuidado en comprender la tecnología que estamos usando.

Descarga el código

Entonces, ahí lo tenemos: un menú interactivo, fuera del lienzo, receptivo de tres niveles. He configurado un Repositorio de GitHub donde puedes ver todo el código. Juega con él; hay algunas partes y piezas que no he cubierto para evitar hinchar este artículo.

Otras lecturas

Para comprender realmente por qué las técnicas destacadas anteriormente son mi solución preferida, le indico la dirección de estos recursos:

Deja un comentario