El sitio web de CDS, creado de forma interna por nuestro propio Paul Lewis, mostró cómo crear una excelente experiencia web móvil para los visitantes de la conferencia.
Contenido tras bambalinas
Es destacable la fluidez con la que se ejecuta el sitio en los distintos navegadores para dispositivos móviles. Usa los ciclos de diseño y pintura del navegador de la mejor manera posible.
Nuevas funciones de plataforma web utilizadas
- Trabajador de servicio
- Manifest
- Color del tema
Patterns
- Tarjetas de gastos
- Cuadrícula adaptable
- Material Design
Código fuente
La entrevista
Desarrollo
Cuando Paul se dispuso a construir el sitio, una prioridad clave era adoptar la Mejora progresiva. En lugar de diseñar para computadoras de escritorio, lo creó primero para pantallas pequeñas y, luego, para pantallas más grandes, lo que mejoró de forma progresiva en lugar de degradarse elegantemente. Eso requería muchas búsquedas de medios, pero también un poco de libertad para observar pequeños cambios entre los puntos de interrupción clave. Hacer un seguimiento de los distintos tamaños de pantalla le dio una idea de dónde se dañaría el contenido, por lo que pudo solucionarlo rápidamente.
Otro aspecto importante del PE es ser lo más retrocompatible posible. Paul decidió usar flotantes sobre Flexbox porque sentía que esto aumentaría la cantidad de navegadores en los que funcionaría el sitio. Para el diseño específico del sitio, esto no resultó ningún problema. Si necesitara Flexbox, habría usado un EP para agregarlo.
Uno de los principales desafíos del sitio fue la función de expansión y contracción de tarjetas, que requería pensar en una nueva forma de hacer que las animaciones funcionen. Paul diseñó una estrategia que llamó FLIP, que implica configurar los elementos de animación a su estado final. A partir de ahí, aplica propiedades compatibles con el compositor, como transformadores y opacidad, para invertir los cambios y devolver el elemento a su posición inicial. Por último, habilita las transiciones en las propiedades transformaciones y opacidad, y quita esos cambios. ¡Esto hace que los elementos se muevan a sus posiciones finales una vez más! Paul reconoce que es un poco inesperado, pero funciona muy bien y mejora el rendimiento.
Rendimiento
Al conocer a Paul Lewis como el gurú del rendimiento que es, no me sorprendió descubrir que la potencia era una consideración muy importante a la hora de construir el sitio. Defiendió en gran medida WebPageTest para obtener el valor del Índice de velocidad lo más bajo posible. Sin la incorporación de YouTube, Paul pudo llegar a menos de 1,000 con una conexión por cable, lo que significaba que la mayoría de los usuarios obtendrían una renderización inicial en menos de un segundo.
La mayor parte del trabajo para lograrlo se realizó en tareas de Grunt con el objetivo de concatenar, minimizar y comprimir imágenes tanto como fuera posible. El sitio también aplaza las imágenes no esenciales hasta después de la carga de la página para que el contenido real se renderice en la pantalla más rápido.
Para mejorar aún más el tiempo de carga de la página, Paul incluyó un service worker. Así, independientemente de si estás en línea o no, se puede entregar una visita a la página desde la caché, lo que garantiza que llegues al contenido incluso cuando la conectividad es inestable (muy importante cuando usas la red Wi-Fi de la conferencia). El sitio de CDS es uno de los primeros sitios de producción en usar la nueva función, lo que hizo que Paul se encontrara con varios "problemas de usuario pionero", aunque el gran aumento del rendimiento lo compensó. De hecho, ahora lo lleva a todos los sitios que crea.
El rendimiento, por supuesto, no solo depende de qué tan bien se carga un sitio, sino también qué tan bien se ejecuta. Paul sabía que las animaciones iban a ser un desafío, por lo que se le ocurrió FLIP. Además de eso, se desvió de su camino para asegurarse de que nada obstaculizara la entrada táctil o el desplazamiento. A pesar de que el sitio no es muy complejo, adoptó una metodología de RAIL modificada para la compilación (no necesitaba mucho tiempo de inactividad) y ayudó mucho.
Diseño
Como el sitio fue creado por una sola persona, Paul era tanto el diseñador como el desarrollador del proyecto, lo que generó niveles de comprensión sin precedentes sobre las preocupaciones de los demás en los dos "equipos". Le gusta diseñar el escritorio (lo opuesto a la mejora progresiva, que usó durante el desarrollo), porque le da una idea de lo que debe incluir el proyecto. Luego, Paul baja a la vista móvil, que le permite definir mejor las cosas de manera significativa y asegurarse de que los aspectos más importantes reciban más atención. Eso informa a la versión de escritorio, ya que, invariablemente, la arquitectura de la información y la prioridad deberán actualizarse.
No todo salió bien. En aquel momento, los lineamientos de Material Design no eran claros sobre cómo crear un sitio de contenido, por lo que no era el caso. El diseño tampoco tuvo en cuenta el horario y la información de la sesión relacionados y, al final, la UX significa que las personas iban a la agenda y se frustraban porque no podían acceder directamente a la información de la sesión.
Dicho esto, creo que Paul hizo un gran trabajo al transportar las especificaciones de Material Design a un sitio de contenido, y estoy muy contento con las imágenes y el movimiento. Tiene ese aspecto único de Material Design, y la información y el aspecto fomentan la interacción y la jerarquía.
Completado correctamente
- Se lanzó correctamente todo el sitio en GitHub (más de 200 estrellas) para que funcione como texto estándar e inspiración para los desarrolladores web.
- Se incorporó lo mejor y lo más reciente de la plataforma web: service worker, manifiesto web y colores del tema dinámico. El efecto neto es algo que se siente realmente integrado en la plataforma cuando se ejecuta en dispositivos Android. Si se agrega a la pantalla principal del usuario, se percibe como una app que usaría, y eso es realmente genial.
- ~73.7k vistas de página, ~73.7k clics a las subsecciones del sitio significaron que los usuarios realmente lo usaron e interactuaron con él, mucho más de lo esperado.
En conjunto, fue una gran inspiración para los desarrolladores web actuales y un sitio web de conferencias muy exitoso.