Thread by @SeGo

1/34 Hilo: Sevilla FC vs Bayern Munich - Web oficial de contrincantes en la UEFA Champions League cc @SevillaFC @fcbayernes @FCBayern
#FrontEndReviews

2/ Calidad CSS
Un dato revelador de la limpieza y calidad de un CSS es su reducido número de selectores.
Este dato puede resultar un grave problema si tenemos que dar soporte a IE<10.
ℹ️: blogs.msdn.microsoft.com/ieinternals/20…

3/ Calidad CSS
En ambas webs estos números son bastante mejorables. En el caso de la web del Sevilla es ya escandaloso con sus más de 14.000 selectores y su 1.20Mb de peso.

4/ Calidad CSS Colores
Otro dato que demuestra coherencia, una guía de estilo definida y un buen diseño es el reducido número de colores empleados. Más importante aún que un número reducido de colores es la no repetición de colores similares.

5/ Calidad CSS Colores
La web del Sevilla tiene hasta 108 colores. Con una simple unificación de grises, azules y rojos se podría reducir el número a menos de la mitad.
La web del Bayern tiene 59 colores que podrían quedarse perfectamente en unos 35.

6/ Idiomas
La web del Bayern está desarrollada hasta en nueve idiomas, mientras que la del Sevilla lo está en seis

7/ PageSpeed
Un dato muy importante tanto para desarrolladores como para cliente es la PageSpeed de una web. Consejos básicos de cómo mejorarla:
- Optimización de imágenes.
- Mejorar la carga y peso de recursos (CSS, JS, HTML).
ℹ️: developers.google.com/speed/pagespee…

8/ Sevilla - PageSpeed
En el caso del Sevilla, el dato de móvil es realmente bueno, mientras que en escritorio es malísimo.
Nos dice que se podría reducir el tamaño de las imágenes hasta 5,4Mb, lo que supone un 90%

9/ Bayern - PageSpeed
En el caso del Bayern, aunque los datos son peores en móvil, globalmente son mejores que los del Sevilla. Creo que optimizando algo las imágenes y mejorando la carga del CSS y JS (cargándolo de forma asíncrona) se llegaría fácilmente a un 85/100

10/ Certificado SSL
El certificado SSL es algo que sirve para brindar seguridad al visitante de su página web. Es una manera de decirles a sus clientes que el sitio es auténtico, real y confiable para ingresar datos personales.
ℹ️: computerhoy.com/noticias/softw… @computerhoy

11/ Favicon
El favicon, del inglés favorites icon (icono de favoritos) es el icono que nos identifica una web en la barra del navegador. Una web muy sencilla que suelo usar para que me genere todas las versiones del mismo es favicomatic.com

12/ Sevilla - Favicon
En el caso de la web del Sevilla, simplemente han cargado la versión básica del favicon de 16x16px, algo que hace que se vea totalmente pixelado en pantallas retina y que, si guardamos la web como favoritos en el móvil, no aparezca un icono asociado.

13/ Bayern - Favicon
En el caso de la web Bayern, están correctamente cargamos todos los formatos de favicons 👍🏻

14/ Open Graph
El protocolo Open Graph de Facebook nos permite mejorar la forma de compartir nuestra web en redes sociales mediante unos meta tags (datos configurados en el código de nuestra web).
ℹ️: developers.facebook.com/docs/sharing/w…

15/ Sevilla - Og:image
En el caso del Sevilla, no tiene configurada una ‘og:image’, por lo que no tenemos control sobre qué imagen va a mostrar Facebook y él automáticamente coge las que encuentra en la página

16/ Bayern - Og:image
En el caso del Bayern, estos metadatos están correctamente configurados en el código y le decimos a Facebook qué imagen debe compartir y dónde encontrarla: ‘fcb_social_media.png’, que se encuentra en la carpeta ‘fcb/images/opengraph’ 👍🏻

17/ Cookies
Un clásico, ¿dónde ponemos el molesto mensaje de cookies? Personalmente, siempre opto por la opción del Bayern: abajo, para que no tape información básica de la web (logo, menú, imagen de cabecera, etc.)

18/ Sevilla - Cabecera
La cabecera del Sevilla la veo algo sosa, los elementos (burger menu, logo e icono de búsqueda) están “flotando”, su alineación no es perfecta y el logo no está centrado al tener un margen derecho que hereda de los estilos en escritorio 👎🏻

19/ Bayern - Cabecera
La cabecera del Bayern, a pesar de no tener alineaciones perfectas, tiene puntos que me gustan:
- Color de fondo que “recoge” elementos
- Logo + nombre
- Logo del patrocinador 👍🏻

20/ Primera carga
He cogido un elemento clave para comparar su primera carga: la imagen de la primera noticia. Es muy interesante crear placeholder de imágenes grandes, es decir, dejar su espacio reservado para evitar saltos.
ℹ️: jmperezperez.com/more-progressi… @jmperezperez

21/ Sevilla - Primera carga
En el caso del Sevilla, este espacio está reservado (no hay salto y el titular de la noticia está en su sitio correcto en todo momento), aunque la imagen no está optimizada y tarda varias décimas de segundo en cargar

22/ Bayern - Primera carga
En el caso del Bayern, además de reservar el espacio tienen correctamente optimizada la imagen y, como extra, tienen implementada una animación “loading” y un “fade in” que mejora bastante la experiencia de usuario 👍🏻

23/ Publicidad
Suelo navegar con Adblock (bloqueador de publicidad) activado en el navegador. En la web del Sevilla veía un espacio en blanco y resulta que había bloqueado 6 banners vitales. Estos banners tienen un “ad” en la clase CSS, lo que interpreta AdBlock como publicidad

24/ Navegabilidad
He hecho una prueba básica para comprobar la navegabilidad en las webs. Quería conocer la clasificación de ambos equipos en Champions…

25/ Sevilla - Navegabilidad
Proceso: Inicio > Equipos > Primer equipo > Clasificación
Número de clics: 4
Resultado: No se muestra la clasificación en la Champions, únicamente en @LaLiga

26/ Bayern - Navegabilidad
Proceso: Inicio > Partidos > Clasificación
Número de clics: 3 + 2 para llegar a Champions
Resultado: Correcto, aunque previamente se muestra la clasificación en la Bundesliga

27/ Buscador
He hecho otra prueba básica con el buscador. He buscado “champions”. Evidentemente, no esperaba encontrar una página con la clasificación en el caso del Sevilla, pero sí la he echado de menos en el caso del Bayern.

28/ Sevilla - Buscador
👍🏻: Velocidad
👎🏻: Maquetación del ítem, no hay imagen asociada en la noticia, paginador mal maquetado y poco usable

29/ Bayern - Buscador
👍🏻: Maquetación del ítem (fecha y categoría en distintos colores para destacar), posibilidad de mostrar ítems sin imagen, número de resultados, “más resultados” en lugar de paginador
👎🏻: No me ha mostrado la página de clasificación en Champions

30/ Contenidos
En una web corporativa de este tipo creo que es más intereante mostrar datos como el palmarés (el Sevilla lo oculta en móvil). Toda la web debe mostrar un aspecto elegante y moderno ya que la audiencia a la que se dirije es mayoritariamente joven.

31/ Sevilla - Footer
👍🏻: -
👎🏻: Logos de patrocinadores gigantes. Aspecto clásico, datos de contacto innecesarios. Links legales inaccesibles.

32/ Bayern - Footer
👍🏻: Aspecto moderno. Links accesibles. Muy bien estructurado.
👎🏻: Logos de patrocinadores algo pequeños.

33/ Sevilla - 404
👍🏻: Humor. Muestra inicio y mapa web.
👎🏻: Aparece un breadcrumb (rastro de migas) poco usable en móvil.

34/ Bayern - 404
👍🏻: Humor. Muestra preguntas frecuentes, inicio y tienda
👎🏻: El vídeo no se muestra correctamente en móvil

35/ Conclusiones
La web del @FCBayernES gana por goleada en muchos aspectos:
- Rendimiento
- Diseño
- Usabilidad
La semana que viene, @juventusfces vs @realmadrid en #FrontEndReviews ⚽️