La guía del profesional para el diseño web adaptable

Contenido

• Imágenes receptivas
• Actuación
• Carga condicional y diferida
• Tipografía receptiva
• Consultas de medios en JavaScript
• Mejora progresiva
• Diseño
• Diseño de cuadrícula CSS
• Finalmente

El diseño web receptivo suena increíblemente simple. Opte por cuadrículas flexibles para el diseño, use medios flexibles (imágenes, video, iframes) y aplique consultas de medios para actualizar estas medidas para organizar mejor el contenido en cualquier ventana gráfica. En la práctica, hemos aprendido que no es tan fácil. Los pequeños problemas que surgen durante cada proyecto nos mantienen rascándonos la cabeza y, en ocasiones, incluso tallando zanjas en las uñas en nuestros escritorios.

Desde que comencé a seleccionar el boletín informativo Responsive Design Weekly, he tenido la suerte de hablar con muchos miembros de la comunidad web y escuchar sus experiencias. Quería saber exactamente lo que la comunidad realmente quería aprender, así que distribuí una encuesta a los lectores. Aquí están los mejores resultados:

1. Imágenes receptivas
2. Mejorando el desempeño
3. Tipografía receptiva
4. Consultas de medios en JavaScript
5. Mejora progresiva
6. Diseño

Con esos temas en mente, publiqué una serie de podcasts pidiendo sus opiniones a algunos de nuestros líderes de la industria. En sus respuestas, un punto fue unánime: concéntrese en obtener los conceptos básicos antes de comenzar a preocuparse por técnicas emocionantes y avanzadas. Si volvemos las cosas a lo básico, podemos crear una interfaz sólida para todos, incorporando funciones cuando el dispositivo o el contexto del usuario lo permitan.

"Entonces ... ¿qué hay de estas técnicas avanzadas?", Te escucho preguntar. Creo que Stephen Hay lo resumió mejor cuando dijo: 'La última técnica de RWD es comenzar sin utilizar ninguna técnica avanzada de RWD. Comience con contenido estructurado y avance. Solo agregue un punto de interrupción cuando el diseño se rompa y el contenido lo dicte y ... eso es todo ".

En este artículo, comenzaré con lo básico y agregaré capas de complejidad a medida que la situación lo permita, para desarrollar esas técnicas avanzadas. Empecemos.

Imágenes receptivas

Los medios fluidos eran una parte clave de RWD cuando Ethan Marcotte lo definió por primera vez. ancho: 100%; , ancho máximo: 100%; todavía funciona hoy en día, pero el panorama de la imagen receptiva se ha vuelto mucho más complicado. Con un número cada vez mayor de tamaños de pantalla, densidad de píxeles y dispositivos de soporte, anhelamos un mayor control.

Las tres preocupaciones principales fueron definidas por el Responsive Images Community Group (RICG):

1. El tamaño en kilobytes de la imagen que estamos enviando por cable.
2. El tamaño físico de la imagen que estamos enviando a dispositivos de alto DPI.
3. La imagen se recorta en forma de dirección de arte para el tamaño particular de la ventana gráfica.

Yoav Weiss, con la ayuda de Indiegogo, ha realizado la mayor parte del trabajo en la implementación de Blink, la bifurcación de WebKit de Google, y cuando esté leyendo esto se enviará en Chrome y Firefox. Safari 8 enviará srcset, sin embargo, el atributo de tamaños está solo en compilaciones nocturnas y la imagen> aún no está implementada.

Con la llegada de algo nuevo a nuestro proceso de desarrollo web, puede ser difícil comenzar. Repasemos un ejemplo paso a paso.

img! - Declare la imagen alternativa para todos los navegadores que no admiten imágenes -> src = "horse-350.webp"! - Declare todos los tamaños de imagen en srcset. Incluya el ancho de la imagen usando el descriptor w para informar al navegador del ancho de cada imagen .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Los tamaños informan al navegador del diseño de nuestro sitio. Aquí estamos diciendo que para cualquier ventana gráfica de 64ems o más grande, use una imagen que ocupe el 70% de la ventana gráfica -> tamaños = "(ancho mínimo: 64em) 70vw,! - Si la ventana gráfica no es así grande, entonces para cualquier ventana gráfica que sea de 37.5ems o más, use una imagen que ocupe el 95% de la ventana gráfica -> (ancho mínimo: 37.5em) 95vw,! - y si la ventana gráfica es más pequeña que eso, entonces use una imagen que ocupa el 100% de la ventana gráfica -> 100vw "! - siempre tiene texto alternativo .--> alt =" Un caballo "/>

Desde el punto de vista del rendimiento, no importa si usa el ancho mínimo o el ancho máximo en el atributo tamaños, pero el orden de origen sí importa. El navegador siempre utilizará el primer tamaño coincidente.

Además, recuerde que estamos codificando el atributo de tamaños para que se defina directamente con nuestro diseño. Esto puede causar problemas para avanzar. Por ejemplo, si rediseña su sitio, tendrá que volver a visitar todas las imágenes o imágenes y redefinir los tamaños. Si está utilizando un CMS, esto puede superarse como parte de su proceso de compilación.

WordPress ya tiene un complemento para ayudar. Define el srcset en las variedades de imágenes estándar de WP y le permite declarar tamaños en una ubicación central. Cuando la página se genera a partir de la base de datos, intercambia cualquier mención en img> y la reemplaza con el marcado de imagen.

Básico

• Piense si realmente necesita incluir una imagen. ¿Es el contenido central de la imagen o es decorativo? Una imagen menos significará un tiempo de carga más rápido
• Optimice las imágenes que necesita incluir usando ImageOptim
• Configure los encabezados de expiración para sus imágenes en su servidor o archivo .htaccess (consulte los detalles en "Rendimiento")
• PictureFill proporciona compatibilidad con polyfill para imágenes

Avanzado

• Carga diferida tus imágenes con el complemento Lazy Load de jQuery
• Utilice HTMLImageElement.Sizes y HTMLPictureElement para la detección de características.
• El complemento avanzado PictureFill WP, que se encuentra en Github, le permitirá definir valores de tamaños y anchos de imagen personalizados

Actuación

Para obtener el rendimiento percibido más rápido en nuestras páginas, necesitamos todo el HTML y CSS necesarios para representar la parte superior de nuestra página dentro de la primera respuesta del servidor. Ese número mágico es 14kb y se basa en el tamaño máximo de la ventana de congestión dentro del primer tiempo de ida y vuelta (RTT).

Patrick Hamann, líder técnico de frontend en The Guardian, y su equipo han logrado romper la barrera de los 1000ms utilizando una combinación de técnicas de frontend y backend. El enfoque de The Guardian es garantizar que el contenido requerido, el artículo, se entregue al usuario lo más rápido posible y dentro del número mágico de 14 kb.

Veamos el proceso:

1. El usuario hace clic en un enlace de Google a una noticia.
2. Se envía una única solicitud de bloqueo a la base de datos del artículo. No se solicitan historias o comentarios relacionados
3. El HTML se carga con CSS crítico
4. en la cabeza>
5. Se lleva a cabo un proceso de "Cortar la mostaza" y se cargan todos los elementos condicionales basados ​​en las funciones del dispositivo del usuario.
6. Cualquier contenido relacionado con el artículo en sí o que lo respalde (imágenes de artículos relacionados, comentarios de artículos, etc.) se carga de forma diferida en su lugar.

Optimizar la ruta de renderización crítica como esta significa que el encabezado> tiene 222 líneas de largo. Sin embargo, el contenido crítico que el usuario llegó a ver todavía se encuentra dentro de la carga útil inicial de 14kb cuando se comprime con gzip. Es este proceso el que ayuda a romper la barrera del renderizado de 1000 ms.

Carga condicional y diferida

La carga condicional mejora la experiencia del usuario según la función de su dispositivo. Herramientas como Modernizr le permiten probar estas funciones, pero tenga en cuenta que solo porque un navegador diga que ofrece soporte, eso no siempre significa soporte completo.

Una técnica consiste en retrasar la carga de algo hasta que el usuario muestre la intención de utilizar esa función. Esto se consideraría condicional. Puede retrasar la carga en los íconos sociales hasta que el usuario pase el mouse sobre los íconos o los toque, o puede evitar cargar un mapa de Google iframe en ventanas más pequeñas donde es probable que el usuario prefiera vincularse a una aplicación de mapas dedicada. Otro enfoque es "Cortar la mostaza"; consulte el recuadro de arriba para obtener detalles sobre esto.

La carga diferida se define como algo que siempre tiene la intención de cargar en la página (imágenes que forman parte del artículo, comentarios u otros artículos relacionados) pero que no es necesario que el usuario comience a consumir el contenido.

Básico

• Habilite gzipping para archivos y configure encabezados de expiración para todo el contenido estático (netm.ag/expire-260)
• Utilice el complemento jQuery de Lazy Load. Esto carga imágenes al acercarse a la ventana gráfica o después de un cierto período de tiempo.

Avanzado

• Configure Fastly o CloudFlare. Las redes de entrega de contenido (CDN) entregan su contenido estático a los usuarios más rápido que su propio servidor y tienen algunos niveles gratuitos
• Habilite SPDY para navegadores habilitados para http2 para aprovechar las funciones de http2, como las solicitudes http paralelas
• Social Count permite la carga condicional de sus iconos sociales
• El uso de la API de mapas estáticos le permitirá cambiar los mapas interactivos de Google por imágenes. Eche un vistazo al ejemplo de Brad Frost en netm.ag/static-260.
• El patrón de inclusión de Ajax cargará fragmentos de contenido de un atributo de datos antes, datos después o reemplazo de datos

Tipografía receptiva

La tipografía se trata de hacer que su contenido sea fácil de digerir. La tipografía receptiva amplía esto para garantizar la legibilidad en una amplia variedad de dispositivos y ventanas gráficas. Jordan Moore admite que la tipografía es algo en lo que no está dispuesto a ceder. Suelta una imagen o dos si lo necesitas, pero asegúrate de tener una buena letra.

Stephen Hay sugiere establecer el tamaño de fuente HTML al 100 por ciento (léase: déjelo como está) porque cada fabricante de navegador o dispositivo establece un valor predeterminado razonablemente legible para una resolución o dispositivo en particular. Para la mayoría de los navegadores de escritorio, es de 16 píxeles.

Por otro lado, Moore usa la unidad REM y el tamaño de fuente HTML para establecer un tamaño de fuente mínimo para ciertos elementos de contenido. Por ejemplo, si desea que la firma de un artículo sea siempre 14px, configúrelo como el tamaño de fuente base en el elemento HTML y configure .byline {font-size: 1rem;}. A medida que escala el cuerpo: tamaño de fuente: para adaptarse a la ventana gráfica, no afectará el estilo .by-line.

Una buena longitud de línea de lectura también es importante: apunte a entre 45 y 65 caracteres. Hay un marcador que puede utilizar para comprobar su contenido. Si admite varios idiomas con su diseño, la longitud de la línea también puede variar. Moore sugiere usar: lang (de) article {max-width: 30em} para cubrir cualquier problema allí.

Para mantener el ritmo vertical, establezca margin-bottom contra bloques de contenido, ul>, ol>, blockquote>, table>, blockquote> y así sucesivamente, al mismo nivel que su altura de línea. Si el ritmo se interrumpe con la introducción de imágenes, puede corregirlo agregando Baseline.js o BaselineAlign.js.

Básico

• Base su fuente en el 100% del cuerpo
• Trabajar en unidades relativas de em
• Establezca sus márgenes a la altura de su línea para mantener el ritmo vertical en su diseño

Avanzado

• Mejore el rendimiento de carga de fuentes con Enhance.js o carga diferida de fuentes
• Utilice Sass @includes para títulos semánticos.
• A menudo necesitamos usar el estilo h5 en un widget de barra lateral que requiere marcado h2. Utilice los Mixins tipográficos de Bearded para controlar el tamaño y permanecer semántico con el siguiente código:

.sidebar h2 {@include header-5}

Consultas de medios en JavaScript

Desde que pudimos controlar el diseño en una variedad de ventanas gráficas a través de consultas de medios, hemos estado buscando una forma de vincular eso con la ejecución de nuestro JavaScript también. Hay algunas formas de activar JavaScript en ciertos anchos, alturas y orientaciones de la ventana gráfica, y algunas personas inteligentes han escrito algunos complementos JS nativos fáciles de usar como Enquire.js y Simple State Manager. Incluso podrías construirlo tú mismo usando matchMedia. Sin embargo, tiene el problema de que necesita duplicar sus consultas de medios en su CSS y JavaScript.

Aaron Gustafson tiene un truco ingenioso que significa que no tiene que administrar y hacer coincidir sus consultas de medios en su CSS y su JS. La idea vino originalmente de Jeremy Keith y en este ejemplo Gustafson la ha llevado a una implementación completa.

Usando getActiveMQ (netm.ag/media-260), inyecte div # getActiveMQ-watcher al final del elemento del cuerpo y ocúltelo. Luego, dentro del conjunto de CSS # getActiveMQ-watcher {font-family: break-0;} a la primera consulta de medios, font-family: break-1; al segundo, font-family: break-2; al tercero y así sucesivamente.

El script usa watchResize () (netm.ag/resize-260) para verificar si el tamaño de la ventana gráfica ha cambiado y luego vuelve a leer la familia de fuentes activa. Ahora puede usar esto para conectar mejoras de JS como agregar una interfaz con pestañas a un dl> cuando la ventana gráfica lo permita, cambiar el comportamiento de una caja de luz o actualizar el diseño de una tabla de datos. Consulte el getActiveMQ Codepen en netm.ag/active-260.

Básico

• Olvídese de JavaScript para diferentes ventanas gráficas. Proporcione contenido y funciones del sitio web a los usuarios de manera que puedan acceder a él en todas las ventanas gráficas. Nunca deberíamos necesitar JavaScript

Avanzado

• Amplíe el método de Gustafson utilizando Breakup como una lista predefinida de consultas de medios y automatizando la creación de la lista de familias de fuentes para getActiveMQ-watcher

Mejora progresiva

Un error común sobre la mejora progresiva es que la gente piensa: "Bueno, no puedo usar esta nueva función", pero en realidad es lo contrario. La mejora progresiva significa que puede ofrecer una función si solo es compatible con uno o incluso ningún navegador, y con el tiempo las personas obtendrán una mejor experiencia a medida que lleguen nuevas versiones.

Si observa la función principal de cualquier sitio web, puede entregarla como HTML y hacer que el lado del servidor haga todo el procesamiento. Pagos, formularios, Me gusta, uso compartido, correos electrónicos, paneles: todo se puede hacer. Una vez que se construye la tarea básica, podemos superponer las increíbles tecnologías encima de eso, porque tenemos una red de seguridad para atrapar a aquellos que caen. La mayoría de los enfoques avanzados de los que hemos hablado aquí se basan en la mejora progresiva.

Diseño

El diseño flexible es simple de decir, pero tiene muchos enfoques diferentes. Cree diseños de cuadrícula simples con menos marcado utilizando: selector nth-child ().

/ * declara el primer ancho móvil para la cuadrícula * / .grid-1-4 {float: left; ancho: 100%; } / * Cuando la ventana gráfica sea de al menos 37.5em, configure la cuadrícula al 50% por elemento * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Limpia el flotante cada segundo elemento DESPUÉS del primero. Esto apunta al 3, 5, 7, 9 ... en la cuadrícula. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (ancho mínimo: 64em) {.grid-1-4 {ancho: 25%; } / * Elimina el anterior clear * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Limpia el flotante cada cuarto elemento DESPUÉS del primero. Esto apunta al 5, 9 ... en la cuadrícula. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}

Dile adiós al uso de la posición y la flotación para tus diseños. Si bien nos han servido bien hasta la fecha, su uso para el diseño ha sido un truco necesario. Ahora tenemos dos nuevos niños en el bloque que ayudarán a solucionar todos nuestros problemas de diseño: Flexbox y Grids.

Flexbox es ideal para módulos individuales, controlando el diseño de piezas de contenido dentro de cada uno de los módulos. Hay diseños que intentamos ofrecer que se pueden lograr más fácilmente con Flexbox, y esto es aún más cierto con los sitios receptivos. Para obtener más información sobre esto, consulte la guía de trucos de CSS para Flexbox o Flexbox Polyfill.

Diseño de cuadrícula CSS

Grid es más para el diseño de nivel macro. El módulo de diseño de cuadrícula le brinda una excelente manera de describir su diseño dentro de su CSS. Si bien todavía está en la etapa de borrador en este momento, recomiendo este artículo sobre el diseño de CSS Grid de Rachel Andrew.

Finalmente

Estos son solo algunos consejos para ampliar su práctica receptiva. Cuando se acerque a un nuevo trabajo receptivo, retroceda un paso y asegúrese de obtener los conceptos básicos correctamente. Comience con su contenido, HTML y capas de experiencias mejoradas sobre ellos y no habrá ningún límite a dónde puede llevar sus diseños.

Este artículo apareció originalmente en el número 260 de revista neta.