144. Buenas prácticas para la versión móvil

En el episodio de hoy comentaremos muchas de las cosas que nos molestan al navegar en la versión móvil de las webs e intentaremos dar solución a algunas de ellas.

Novedades

Comenzamos hablando sobre el nuevo logotipo de la Real Federación Española de Futbol (RFEF). El vídeo de presentación de la marca está muy chulo, pero el logo ¿qué os parece?

https://youtu.be/10THve3EyAU

https://twitter.com/rfef/status/1374327589859377152

En La Máquina del Branding tenéis ya disponibles 2 nuevos episodios del proyecto Arkham donde Yannick nos explica cómo funcionan los productos simples y variables en WooCommerce y cómo aplicarles diseño en Elementor.

https://lamaquinadelbranding.com/producto-simple-de-woocommerce-configuracion-y-diseno/

https://lamaquinadelbranding.com/producto-variable-de-woocommerce-configuracion-y-diseno/

Os traemos también un nuevo trailer del siguiente directo de Yannick donde hablará acerca de las distintas opciones que se nos presentan en un futuro cercano para realizar las webs con WordPress. ¿Perderá mucha cuota de mercado Elementor PRO?

https://www.youtube.com/watch?v=Oohc_omcPek&ab_channel=LaM%C3%A1quinadelBranding

https://www.youtube.com/watch?v=Z8t1xPIiZb0&ab_channel=LaM%C3%A1quinadelBranding

Buenas prácticas para las páginas web en versión móvil y cosas que nos molestan

Aquí tenéis la lista de puntos que repasaremos durante el podcast.

Consumir la información sin florituras.FuentesTextos a un tamaño mínimo de 16px.Tamaños de fuente coherentesAncho de línea óptimo entre 35 y 65 caracteres (7-12 palabras).Interlineado de 120%Ver fotografías a tamaño completo, pudiendo hacer zoom.Lightbox with PhotoSwipeNo tener que hacer scrolls infinitos para volver a un menú tras leer un artículo o contenido.Cabecera fixed?Sin popups que ocupen toda la pantalla.Sin 100mil anunciosBuena velocidad de carga.No abrir nuevas pestañas (a no ser que sea estrictamente necesario)Cuidado con dejar demasiado padding en los textos.Cuidado con el margen de los elementos de lista.Diferenciar entre imágenes de contenido, complementarias y de fondo. (Iconos en listas de highlights que ocupan todo el ancho de la pantalla, imágenes de fondo que solo entorpecen...)Mismo contenido (el relevante) en PC que en móvil a ser posible.Cuidado con los HoverMenú complejosOjo con el orden de columnas.Ojo con elementos que "salen" del contenido, animaciones, etc.Forms en multisteps.

Herramientas

Zoom Escaper
Activa efectos de sonido durante tus videollamadas de Zoom y sabotea tu propio streaming.

Enlaces

La Real Federación Española de Fútbol estrena nueva identidad visualProducto SIMPLE de WooCommerce - Configuración y diseñoProducto VARIABLE de WooCommerce - Configuración y diseño