Una base sólida
Una base sólida es el requisito básico para compilar AWP excelentes. Para implementar esta base, debes usar algunos principios para diseñar y codificar en función de las limitaciones de la Web:
- Usa los dispositivos móviles para limitar el enfoque. Asegúrate de que cada vista de tu diseño se centre solo en el contenido y las interacciones esenciales.
- Enfatiza el contenido y la funcionalidad principal del proceso de diseño.
- Mejora continuamente cuando sea necesario. Comienza por compilar el contenido principal y la funcionalidad de un componente con las herramientas más sencillas y disponibles. Haz que sea accesible. Luego, prueba las funciones avanzadas que te gustaría usar y mejora tu componente con ellas.
- Ofrece una experiencia del usuario rápida y buena que se enfoque en métricas de rendimiento web centradas en el usuario, obtén métricas de usuarios reales y envía el rendimiento a todos los usuarios, sin importar su conexión de red, tipo de entrada, CPU o potencia de GPU.
Si sigues estos principios y mejoras con patrones y funciones web modernos, podrás crear experiencias increíbles y rápidas con diseños realmente intrínsecos. Diseños basados en restricciones en lugar de píxeles, que permiten a todos los usuarios acceder a tu contenido y a tu funcionalidad principal de la manera más adecuada para su contexto de navegación específico.
Diseño web responsivo
Desde el artículo A List Apart 2010 de Ethan Marcotte sobre Diseño web adaptable, se ha incentivado a los diseñadores y desarrolladores a crear experiencias flexibles para que haya interfaces de usuario que funcionen en un espectro de tamaños de pantalla y dispositivos.
Sin embargo, en algún momento, eso se acortó a los tamaños de dispositivos móviles, tablets y computadoras de escritorio, con anchos muy influenciados por los tamaños de las pantallas de iOS. Con un CSS moderno y un enfoque renovado en la intención original del diseño adaptable, podemos devolver el aplauso a los sitios squisivos.
El diseño web adaptable presenta tres ingredientes técnicos:
- Cuadrículas fluidas
- Medios flexibles
- Consultas de medios
Ethan concluye que estos requisitos técnicos no son suficientes: el avance también requiere otra forma de pensar.
El mito del usuario de dispositivos móviles
En los primeros días, se hicieron suposiciones sobre el diseño adaptable para facilitar el diseño de los sitios. Por ejemplo, las experiencias pequeñas eran para teléfonos, las experiencias medianas eran de 320 px en las tablets y 1,024 px de ancho, más grandes para las computadoras de escritorio. Las pantallas pequeñas tenían capacidades táctiles, pero las grandes, no. Los usuarios de teléfonos estaban apresurados y distraídos, y, por lo tanto, 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 soporta el escrutinio.
Tomemos, por ejemplo, una AWP de redes sociales que se puede instalar hoy mismo en dispositivos móviles y computadoras de escritorio. En computadoras de escritorio, muchos usuarios pueden mantener una ventana estrecha con el feed en un lado de la pantalla mientras trabajan, y suponer que están en un dispositivo móvil debido al ancho disponible sería incorrecto.
El mundo de las AWP, que está fuera de la pestaña del navegador, incluso agrega nuevos desafíos al mundo del diseño responsivo, como el modo en miniatura y el trabajo con dispositivos plegables.
Modo mini
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 o más pequeña que la viewport de un dispositivo móvil. Esto es algo nuevo en la Web: podemos admitir un modo mini, una ventana que puede tener un mínimo de 200 x 100 píxeles CSS.
En la actualidad, cuando se crea una AWP, es una buena idea pensar en qué ofrecer en el modo en miniatura, gracias al diseño web adaptable, como solo los botones de control en un reproductor de música, la información del panel o las acciones rápidas.
En una computadora de escritorio, una AWP se puede renderizar en una ventana más pequeña que la más pequeña que hayas diseñado para el navegador. Agrega un nuevo punto de interrupción para tu diseño web adaptable: el modo mini.
Plegables e híbridas
En la actualidad, los dispositivos híbridos y plegables también son comunes:
- Teléfonos convencional 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.
- Luego, los teléfonos se pueden convertir a computadoras de escritorio mediante un concentrador.
Si bien el desafío existe para todos los sitios web, con una Progressive Web App, tú estás en control y es 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.
Todo lo primero
Pero ¿por dónde deberías empezar? ¿Primero los dispositivos móviles, el contenido primero y sin conexión? Al diseñar para la flexibilidad de la Web, ¿qué es? Bueno, la respuesta es sí, primero todo. El término dispositivos móviles primero se interpretó de muchas maneras desde que Luke Wroblewski lo creó por primera vez en 2009: desde emular patrones de IU y UX específicos de la plataforma en la Web hasta compilar aplicaciones para dispositivos móviles antes de compilar aplicaciones web y simplemente usar consultas de medios de ancho mínimo y dar por terminado el día. Su intención original, sin embargo, es la siguiente: los dispositivos móviles te obligan a concentrarte. 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. Tienes que priorizar. Por lo tanto, cuando un equipo diseña Mobile First, el resultado es una experiencia centrada en las tareas clave que los usuarios desean llevar a cabo sin los desvíos ni la suciedad de la interfaz que desordenan los sitios web a los que hoy se accede desde computadoras de escritorio. Eso es una buena experiencia del usuario y bueno para la empresa.
Luke Wroblewski
Enfoca cada vista de tu sitio web únicamente en las tareas esenciales que un usuario desea realizar allí y no agregues más elementos a la idea solo porque tienen más espacio en pantalla.
El segundo principio se indaga en el diseño web adaptable: el «gradiente de diferentes experiencias». Una experiencia única, idéntica y de píxeles perfecta para todos los usuarios no debería ser el objetivo de su trabajo; es todo menos imposible.
En lugar de considerar tus experiencias web como elementos fijos, considéralas como un conjunto de recomendaciones que el dispositivo del usuario usará para crear la mejor experiencia para su contexto actual. Para ello, 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, comenzando por HTML, CSS y JavaScript estándar, y agregando capas de capacidades con resguardos apropiados cuando una API no está disponible.
¿Cómo lo mejoras? La detección de funciones es un patrón en el que se realiza una prueba de compatibilidad y se reacciona en función de los resultados de esa prueba. Hay varias herramientas y prácticas de plataforma web integradas 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 tanto a las propiedades como a los valores de CSS. Si se admite una propiedad y un valor no, la propiedad fallará, al igual que una propiedad no compatible. El código JavaScript puede acceder a esto a través de la CSSSupportsRule
La mayoría de las funciones nuevas de la plataforma web se adjuntan a objetos existentes, por lo que la "función" en la detección de estilo de objetos funciona bien en JavaScript, al igual que otras búsquedas similares, como la comprobación de propiedades o métodos en los elementos.
Para lanzar JavaScript moderno, puedes usar el patrón de módulo/no módulo para proporcionar funciones más sólidas con una carga útil más pequeña para navegadores más modernos y una experiencia de resguardo en navegadores más antiguos. Esto tiene el beneficio de garantizar un nuevo modelo de referencia de funciones de JavaScript, como promesas, clases, funciones de flecha, y const y let disponibles para navegadores que admiten módulos de ES.
Incluso puedes combinar múltiples formas de detección de atributos para crear un modelo de referencia mejorado. Acuñado por el equipo de BBC News, la serie se llama Cutting the Mustard y te permite enviar una experiencia central a todos y comenzar a mejorarla solo después de que se haya detectado una función específica.
Evita la detección de dispositivos
Debes probar directamente la compatibilidad de la función en lugar de hacer suposiciones de compatibilidad basadas en la cadena de usuario-agente.
Las cadenas usuario-agente nunca fueron realmente confiables. Depende de tener un conocimiento casi perfecto de cada combinación de navegador, sistema operativo y dispositivo existente para "adivinar bien". Aun así, son susceptibles de falsificar la identidad de los usuarios. Por ejemplo, los redireccionamientos a sitios para computadoras de escritorio en navegadores para dispositivos móviles suelen ser tan simples como la falsificación de la identidad de una cadena de usuario-agente para computadoras de escritorio.
Además, los navegadores están trabajando para congelar sus cadenas de usuario-agente, con strings 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 más poco confiables que antes para identificar a un usuario y un dispositivo.
Primero el contenido
Otro principio a seguir para diseñar para la Web es lo siguiente: comienza primero por el contenido. Por ejemplo, una cotización 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 a lo largo de un tiempo, quizás 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, quizás con CSS, SVG o Canvas. Pero el núcleo comienza con el contenido.
Diseño intrínseco
- Los dispositivos móviles como limitación principal para la experiencia del usuario.
- Hacer hincapié en el contenido y la funcionalidad principal en el proceso de diseño.
- Mejora progresivamente con funciones avanzadas cuando estén disponibles.
Estos principios se combinan para proporcionarnos 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 CSS modernas, como Grid, Flexbox, el diseño de flujo y los modos de escritura, para diseñar y compilar interfaces de usuario. Con estas herramientas, dice:
Pueden 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 algo de control sobre el diseño, pero lo hace de una manera que se alinee con los últimos principios del diseño web. En lugar de crear formularios fijos basados en tamaños de pantalla fijos, debes definir reglas basadas en el contenido mediante las cuales se produce el diseño aprovechando 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 hacer realidad tu diseño a medida que interactúa con tu contenido sin necesidad de controlar la ubicación de cada píxel.
Los diseños intrínsecos llevan la conversación sobre el control en la Web como un círculo completo, lo que le da definición. El control en la web no tiene que ver con establecer dispositivos o tamaños de pantalla, colores, fuentes, diseños o capacidades para cada visitante de tu sitio. El control en la web consiste en escribir las reglas que un navegador usará para organizar tu experiencia, compilándola de manera única para cada usuario de tu Progressive Web App.
Rendimiento web
La última base, pero no menos importante, para nuestra AWP es el rendimiento web. Es obligatorio ofrecer una experiencia excelente a los usuarios, ya que generará más conversiones de todas las formas posibles.
El rendimiento web implica varios pasos:
- Comprende las métricas clave centradas en el usuario que están disponibles.
- Establece objetivos para cada métrica.
- Medir 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 del contexto del usuario.
Actualmente, las métricas de rendimiento web miden qué tan rápido aparece tu contenido en la pantalla, pero también qué tan interactivo es tu sitio web y cómo perciben los usuarios la experiencia.
Métricas web
Durante la última década, lidiamos con diferentes métricas para medir el éxito en el rendimiento web. Actualmente, un conjunto de métricas recomendadas se agrupa en el proyecto Métricas web. Las Métricas web se enfocan en las métricas en tres áreas clave que afectan el rendimiento y la percepción de la Web:
- Cargando
- Interactiva
- Estabilidad visual
Con las Métricas web esenciales, puedes saber de un vistazo qué tan buena o mala es tu AWP en cuanto al rendimiento web y la experiencia del usuario.
Bases de la AWP
Es importante que tu AWP tenga una base sólida en cuanto al diseño responsivo, los dispositivos móviles y todo lo primero, el diseño intrínseco y el rendimiento web como base para brindar una gran experiencia a todos tus usuarios.