Una base sólida
Una base sólida es el requisito fundamental para crear excelentes AWP. Para implementar esta base, debes diseñar y codificar para las restricciones de la Web con un par de principios:
- Usa dispositivos móviles como una restricción de enfoque. Asegúrate de que cada vista de tu diseño se enfoque solo en el contenido y las interacciones esenciales.
- Enfatiza el contenido y la funcionalidad principal en el proceso de diseño.
- Mejora de forma progresiva cuando sea necesario. Comienza por compilar el contenido y la funcionalidad principales de un componente con las herramientas más sencillas y disponibles. Haz que sea accesible. Luego, prueba las funciones avanzadas que deseas usar y mejora tu componente con ellas.
- Ofrece una experiencia del usuario rápida y buena centrada en las métricas de rendimiento web centradas en el usuario, obtén métricas de usuarios reales y mejora el rendimiento para todos tus usuarios, independientemente de su conexión de red, tipo de entrada, CPU o potencia de la GPU.
Si sigues estos principios y los mejoras con patrones y funciones web modernos, puedes crear experiencias excelentes y rápidas con diseños verdaderamente intrínsecos. Diseños potenciados por restricciones en lugar de píxeles, que permiten que todos los usuarios accedan a tu contenido y a la funcionalidad principal de una manera que se adapte mejor a su contexto de navegación particular.
Diseño web responsivo
Desde el artículo de A List Apart de Ethan Marcotte de 2010, Diseño web responsivo, a los diseñadores y desarrolladores se los animó a crear experiencias flexibles, lo que genera interfaces de usuario que funcionan en un amplio espectro de tamaños de pantalla y dispositivos.
Sin embargo, en algún momento, se acortaron a tamaños para dispositivos móviles, tablets y computadoras de escritorio, con anchos muy influenciados por los tamaños de pantalla de iOS. Con un CSS moderno y un enfoque renovado en el objetivo original del diseño responsivo, podemos volver a aplicar la compresión en los sitios flexibles.
El diseño web responsivo presenta tres ingredientes técnicos:
- Cuadrículas fluidas
- Medios flexibles
- Consultas de medios
Ethan concluye que estos requisitos técnicos no son suficientes; la solución también requiere una forma de pensar diferente.
El mito de los usuarios de dispositivos móviles
En los primeros días del diseño responsivo, se hicieron suposiciones en nombre de facilitar el diseño de los sitios. Por ejemplo, las experiencias pequeñas eran para teléfonos y tenían un ancho de 320 px, las experiencias medianas eran para tablets y tenían un ancho de 1,024 px, y todo lo que fuera más grande era para computadoras de escritorio. Las pantallas pequeñas tenían capacidades táctiles, pero las grandes no. Los usuarios de teléfonos estaban apurados y distraídos, por lo que necesitaban una experiencia “ligera”.
Nada de esto es cierto. Son mitos sobre los dispositivos móviles que se perpetúan por la suposición de que las necesidades de un usuario son fundamentalmente diferentes según el tamaño de la pantalla o el tipo de dispositivo. Esto no permite el escrutinio.
Por ejemplo, una AWP de red social que puedes instalar hoy en dispositivos móviles y computadoras. En computadoras de escritorio, muchos usuarios pueden mantener una ventana estrecha con el feed a un lado de la pantalla mientras trabajan, y sería incorrecto suponer que están en un dispositivo móvil debido al ancho disponible.
El mundo de las AWP que está fuera de la pestaña del navegador incluso está agregando nuevos desafíos al mundo del diseño responsivo, como el modo mini y el trabajo con dispositivos plegables.
Modo reducido
Con una AWP instalada en un dispositivo de escritorio, una ventana puede volverse muy pequeña, más pequeña que la de un navegador y más pequeña que la viewport de un dispositivo móvil. Esto es algo nuevo en la Web: admitimos el modo mini, es decir, una ventana que puede tener un tamaño mínimo de 200 x 100 píxeles CSS.
Cuando creas una AWP en la actualidad, es una buena idea pensar en qué ofrecer en el modo mini, gracias al diseño web responsivo, como solo botones de control en un reproductor de música, información del panel o acciones rápidas.
En computadoras, una AWP se puede renderizar en una ventana más pequeña que la ventana más pequeña que hayas diseñado para el navegador. Agrega un nuevo punto de interrupción para tu diseño web responsivo: el modo mini.
Plegables y híbridos
En la actualidad, los dispositivos plegables e híbridos también son comunes:
- Teléfonos convencionales pequeños.
- Dispositivos plegables que se pueden usar como teléfonos o tablets.
- Laptops que se pueden transformar en tablets.
- Tablets que pueden funcionar como laptops con teclado y panel táctil.
- Los teléfonos se pueden convertir en computadoras de escritorio con un concentrador.
Si bien el desafío existe para todos los sitios web, con una Progressive Web App tú tienes el control y eres responsable de la ventana cuando se instala la app. Por lo tanto, tu diseño debe reaccionar y ofrecer la mejor experiencia en cada contexto.
Primero todo
¿Por dónde empezar? ¿Prioridad para los dispositivos móviles, para el contenido o para la conexión sin red? Cuando se diseña para la flexibilidad de la Web, ¿cuál es? La respuesta es sí, primero todo. El término prioridad para los dispositivos móviles se ha interpretado de muchas maneras desde que Luke Wroblewski lo acuñó en 2009: desde emular patrones de IU y UX específicos de la plataforma en la Web hasta compilar apps para dispositivos móviles antes de compilar apps web, o simplemente usar consultas de medios de ancho mínimo y dar por terminado el día. Sin embargo, su intención original es la siguiente: los dispositivos móviles te obligan a enfocarte. Como dijo Luke:
Los dispositivos móviles requieren que los equipos de desarrollo de software se enfoquen solo en los datos y las acciones más importantes de una aplicación. Simplemente, no hay espacio en una pantalla de 320 por 480 píxeles para elementos innecesarios. Debes priorizar. Por lo tanto, cuando un equipo diseña enfocándose primero en los dispositivos móviles, el resultado es una experiencia centrada en las tareas clave que los usuarios quieren realizar sin los desvíos ni los elementos innecesarios de la interfaz que inundan los sitios web a los que se accede desde computadoras de escritorio en la actualidad. Eso es una buena experiencia del usuario y bueno para la empresa.
Luke Wroblewski
Enfoca cada vista de tu sitio web solo en las tareas esenciales que un usuario quiere realizar allí y no agregues más elementos a la idea solo porque tengan más espacio en pantalla.
El segundo principio se insinúa en el diseño web responsivo: el “gradiente de diferentes experiencias”. El objetivo de tu trabajo no debe ser crear una experiencia única, idéntica y perfecta para cada usuario, ya que es prácticamente imposible.
En lugar de pensar en tus experiencias web como algo fijo, considéralas un conjunto de recomendaciones que el dispositivo del usuario usará para crear la mejor experiencia para su contexto actual. Para hacerlo, se debe adoptar la mejora progresiva.
Mejora progresiva
La mejora progresiva es un patrón que nos permite escribir código que se ejecuta en todas partes, a partir de HTML, CSS y JavaScript estándar, y agregar capas de funciones sobre eso con resguardos adecuados cuando una API no está disponible.
¿Cómo lo puedes mejorar? La detección de funciones es un patrón en el que realizas una prueba de compatibilidad y reaccionas según los resultados de esa prueba. Existen varias herramientas y prácticas integradas en la plataforma web para hacerlo.
Con @supports, verifica la compatibilidad del navegador con una función de CSS y aplica reglas según el resultado.
Esto se aplica a las propiedades y los valores de CSS. Si una propiedad es compatible y un valor no lo es, fallará, al igual que una propiedad no compatible. El código JavaScript puede acceder a esto a través de CSSSupportsRule.
La mayoría de las funciones nuevas de las plataformas web se adjuntan a objetos existentes; por lo tanto, “feature” en la detección de estilo de objeto funciona bien en JavaScript, al igual que otras búsquedas similares, como la comprobación de propiedades o métodos en los elementos.
Para enviar JavaScript moderno, puedes usar el patrón module/nomodule para proporcionar funciones más sólidas con una carga útil más pequeña a los navegadores más modernos y una experiencia de resguardo a los navegadores más antiguos. Esto tiene la ventaja de garantizar un nuevo modelo de referencia de las funciones de JavaScript, como las promesas, las clases, las funciones de flecha y const y let, que están disponibles para los navegadores compatibles con los módulos ES.
Incluso puedes combinar varias formas de detección de atributos para crear un modelo de referencia mejorado. El equipo de BBC News acuñó el término Cutting the Mustard, que te permite enviar una experiencia principal a todos y comenzar a mejorarla solo después de alcanzar una barra específica detectada por la función.
Evita la detección de dispositivos
Debes probar directamente la compatibilidad con las funciones en lugar de hacer suposiciones de compatibilidad en función de la cadena de usuario-agente.
Las cadenas de usuario-agente nunca fueron realmente confiables. Para "adivinar bien" se basan en tener un conocimiento casi perfecto de cada navegador, sistema operativo y combinación de dispositivo. Incluso así, son susceptibles a la falsificación de identidad del usuario. Por ejemplo, los redireccionamientos de sitios para computadoras de escritorio en navegadores para dispositivos móviles suelen ser tan simples como falsificar una cadena de usuario-agente para computadoras de escritorio.
Además, los navegadores están trabajando para inmovilizar sus cadenas de usuario-agente, con cadenas de usuario-agente para la detección de funciones que se mencionan específicamente como un motivo de baja, lo que las hace aún menos confiables de lo que eran antes para identificar un usuario y un dispositivo.
Primero el contenido
Otro principio del diseño para la Web es comenzar con tu contenido en primer lugar. Por ejemplo, un ticker de acciones en tiempo real con un gráfico de los precios de una acción es, en esencia, una tabla de acciones con su precio durante un período, tal vez con un vínculo para actualizar el sitio.
Eso se puede mejorar con JavaScript y solicitudes de recuperación para actualizar los valores de la tabla en un cronómetro o con sockets para proporcionar actualizaciones basadas en envíos en tiempo real. Se puede volver a mejorar para graficar los resultados, tal vez con CSS, quizás con SVG, tal vez con Canvas. Pero el núcleo comienza con el contenido.
Diseño intrínseco
- Los dispositivos móviles como una restricción de enfoque para la experiencia del usuario
- Hacer hincapié en el contenido y la funcionalidad principal en el proceso de diseño
- Se mejora de forma progresiva con funciones avanzadas cuando están disponibles.
Estos principios se combinan para ofrecer algo nuevo: el diseño intrínseco. En su charla Cómo diseñar diseños intrínsecos, Jen Simmons habla sobre el uso de herramientas modernas de CSS, como Grid, Flexbox, diseño de flujo y modos de escritura, para diseñar y compilar interfaces de usuario. Con estas herramientas, dice lo siguiente:
Puedes hacer que el diseño sea intrínseco al contenido que tenemos y al diseño que queremos hacer.
Jen Simmons
Este nuevo CSS permite a los diseñadores recuperar cierto control sobre el diseño, pero de una manera que se alinee con los principios de diseño web más recientes. En lugar de crear formularios fijos en función de tamaños de pantalla fijos, puedes definir reglas basadas en el contenido mediante las cuales se produce el diseño al aprovechar las propiedades intrínsecas de ese contenido, como qué tan pequeño o grande puede ser, el tamaño del texto y el espacio disponible, todo a la vez. Te permiten realizar tu diseño a medida que interactúa con tu contenido sin necesidad de controlar la posición de cada píxel.
Los diseños intrínsecos hacen que la conversación sobre el control en la Web se cierre en un círculo y le da definición. El control en la Web no consiste en determinar los dispositivos o los tamaños de pantalla, los colores, las fuentes, los diseños o las capacidades para cada visitante de tu sitio. El control en la Web consiste en escribir las reglas que usará un navegador para ensamblar tu experiencia y compilarla de forma exclusiva para cada usuario en tu app web progresiva.
Rendimiento web
El último, pero no menos importante, fundamento de nuestra AWP es el rendimiento web. Es obligatorio ofrecer una gran experiencia a los usuarios, ya que esto generará más conversiones de todas las formas posibles.
El rendimiento web implica varios pasos:
- Comprende las métricas clave centradas en el usuario disponibles.
- Establece objetivos para cada métrica.
- Mide nuestra AWP.
- Mejorar nuestras métricas aplicando técnicas y prácticas recomendadas de forma estática en nuestro código o servidor
- Vuelve a medir.
- Mejora la experiencia de cada usuario, en vivo, en función de su contexto.
Actualmente, las métricas de rendimiento web miden la rapidez con la que tu contenido aparece en la pantalla, pero también la interactividad de tu sitio web y la forma en que los usuarios perciben la experiencia.
Métricas web esenciales
Durante la última década, hemos trabajado con diferentes métricas para medir el éxito del rendimiento web. Hoy en día, un conjunto de métricas recomendadas, conocida como Métricas web esenciales, se enfoca en tres áreas clave que afectan el rendimiento y la experiencia del usuario:
- Carga: Representada por Largest Contentful Paint (LCP)
- Interactividad: representada por Interaction to Next Paint (INP).
- Estabilidad visual: Representada por el Cambio de diseño acumulado (CLS).
Con las métricas web esenciales, puedes ver de un vistazo qué tan buena o mala es tu AWP en cuanto al rendimiento y la experiencia del usuario.
Fundamentos de las AWP
Es importante que tu AWP tenga una base sólida en cuanto al diseño responsivo, los dispositivos móviles y todo lo demás, el diseño intrínseco y el rendimiento web, como base para brindar una gran experiencia a todos tus usuarios.