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?
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.
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?
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.
- Fuentes
- Textos a un tamaño mínimo de 16px.
- Tamaños de fuente coherentes
- Ancho 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.
- No 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 anuncios
- Buena 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 Hover
- Menú complejos
- Ojo 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.