Optimización para mobile (segunda parte)

Esto lo hace Carlos Cámara CTO de hepta.es, desarrollador web especializado en PrestaShop y Joomla! y  Antonio Torres CTO de devblinders.com, analista programador especializado en PrestaShop.

Optimización para mobile

• Cabecera: debe de estar muy simplificada y muy bien encajada metiendo la información necesaria mediante iconos y formas visuales
• Cabecera flotante: no está de más tener una cabecera flotante, para poder moverte fácilmente por la web, pero no debe estar siempre activa molestando, lo mejor es que solo aparezca en el momento que haces scroll hacia arriba
• Menú: parece un estándar el icono de hamburguesa para desplegar el menú, también lo es que en los ecommerce este icono suele estar a la izquierda para mostrar el carrito, login, etc a la derecha
• Menú open: muy olvidado en general y pocos lo haces bien, lo mejor es abrir un modal que ocupe el total o casi el total de la pantalla de ancho, sobreponiéndose encima del contenido de la web, en este tipos de menús podemos meter los elementos que no nos caben en la cabecera mobile pero si en la desktop como puede ser el teléfono, envío gratuito, etc
• Menú navegación: que la navegación entre categorías sea amigable, no que sean desplegables sin más y que sea un scroll super grande, lo mejor es hacer como un desplazamiento lateral y sobreponer las subcategorías donde estaban las categorías padres.
• Cuidado con las ventanas emergentes (popups):
  • Pueden interrumpir el proceso de compra
  • Interfieren con el SEO en ocasiones
• Listado de productos: hay que mostrar los productos adecuados por fila, para un mobile en vertical y con un card de producto genérico se suele mostrar dos por fila.
• Carruseles: jugar con estos elementos para distintas secciones como novedades, más vendidos, crossselling, etc, dando fácil navegación desplazando horizontalmente con el dedo.
• Filtros: al igual que el menú es otro gran olvidado, se suele meter con calzador en cualquier parte de la web con un desplegable, lo mejor es hacer como con el menú con una navegación similar.
• Sticky producto: mostrar el botón de comprar junto con el precio y la cantidad en un flotante en la parte inferior de la web, teniendo muy fácil añadir al carrito en cualquier momento.
• Combinaciones: es muy difícil encajar las combinaciones con el sticky, una buena opción es que en el mismo sticky haya un botón para desplegar hacia arriba todas las combinaciones.
• Footer: es meramente informativo por lo que tendremos todos los elementos posibles plegados de forma vertical.
• Muestra un indicador de progreso en el proceso de compra
• Facilita las compras como invitado

FEEDBACK

Jose moviltecno.com
Hola amigos tenéis toda la razón sobre lo importante que es que el diseño se vea bien en el móvil. Yo que estoy diseñando mi nueva web ahora, cada cambio que hago de tamaño de fuente, botones, módulos, etcétera lo voy comprobando en diferentes móviles y adaptando para que se vea bien en todos. Es entretenido pero se está quedando muy bien. Saludos.

Eva Cebrian
ja, ja siempre innovando, ahora un poscast para mudos. Muy interesante el programa, parece increible lo rapido que va todo. Hace tan solo 5 o 6 años a nadie se le ocurría optimizar primero movil y hoy dia parece increíble lo contrario. Quien sabe, quizas dentro de otros cinco compremos solo a traves del navegador o de redes sociales y los ecommerce de ahora queden tan vintage como los blogs o el email o myspace :-)

Y esto es todo en este último podcast y te pedimos por favor que nos ayudes escribiendo tu feedback sobre qué te ha parecido este podcast y tus críticas, así como temas que te gustaría que hablásemos, tanto en redes sociales como Apple Podcast, o con tus me gusta en Ivoox

Recordarte también que hemos creado un nuevo canal de Youtube, en el grupo de Telegram sobre PrestaShop, y el nuevo grupo de Signal sobre PrestaShop