El diseño responsivo ha sido una práctica estándar durante más de una década y casi todas las empresas le dirán que su sitio es responsivo. Lo que suelen decir es que no se rompe en un teléfono.
No romperse y funcionar bien son estándares diferentes, y la diferencia entre ellos cuesta dinero real.
El dispositivo se dividió
Para la mayoría de las empresas de servicios y de consumo, los dispositivos móviles representan más de la mitad del tráfico (con frecuencia, mucho más). Sin embargo, la mayoría de los equipos todavía diseñan en un monitor de escritorio grande, revisan en un monitor de escritorio grande y cierran sesión en un monitor de escritorio grande.
Esto produce un sitio que se adapta a la minoría de visitantes y defrauda a la mayoría.
Donde realmente falla la conversión móvil
Toca objetivos que son demasiado pequeños
Los dedos son imprecisos. Los elementos interactivos más pequeños que aproximadamente 44 por 44 píxeles producen errores, y los errores producen frustración. Esto se muestra de manera más dañina en los menús de navegación, campos de formulario y botones de pago, exactamente los elementos con los que la gente no puede permitirse el lujo de luchar.
Los enlaces que están demasiado juntos causan un problema relacionado: las personas tocan el enlace equivocado, regresan y algunos simplemente se van.
Formularios diseñados para teclados
Los formularios son el lugar más común donde se pierde la conversión móvil. Cada campo requiere más esfuerzo en un teléfono que en una computadora de escritorio, y el esfuerzo se acumula.
Soluciones prácticas: elimine todos los campos que realmente no necesita, use tipos de entrada apropiados para que aparezca el teclado correcto, habilite el autocompletar con atributos de autocompletar adecuados, valide en línea en lugar de enviarlo y nunca borre un formulario en caso de error.
Si solicita un número de teléfono, el nombre de una empresa y un puesto de trabajo en un formulario de consulta inicial, está intercambiando una tasa de conversión por datos que probablemente no utilizará.
Contenido oculto para simplificar el diseño
Un atajo común es ocultar contenido secundario en pantallas más pequeñas para mantener limpio el diseño. El problema es que el contenido oculto es frecuentemente lo que un comprador indeciso necesitaba: precios, información de entrega, especificaciones, tranquilidad.
La paridad de contenido es importante. Si la información ayuda a alguien a decidirse por el escritorio, también le ayuda a decidirse por el móvil. Reorganízalo, colócalo formando un acordeón, pero no lo quites.
Rendimiento en redes reales
El rendimiento móvil no se trata solo del tamaño del archivo. Los teléfonos tienen menos potencia de procesamiento y las redes móviles tienen mayor latencia y ancho de banda variable. Una página que se carga en un segundo en el wifi de la oficina puede tardar ocho en una conexión móvil en un edificio con mala señal.
JavaScript es particularmente costoso aquí, porque debe descargarse, analizarse y ejecutarse, y el análisis depende de la CPU, que es donde los teléfonos son más débiles en comparación con las computadoras de escritorio.
alcance del pulgar
Las personas sostienen los teléfonos de maneras específicas y la zona de alcance cómodo para el pulgar es la parte inferior y media de la pantalla. Las acciones principales ubicadas en la parte superior de una página larga, o en la esquina superior derecha, son mucho más difíciles de alcanzar en teléfonos más grandes.
Esta es la razón por la que las barras inferiores adhesivas para llamadas a la acción principales funcionan bien en dispositivos móviles. Esto no es una tendencia. Se desprende de cómo una mano sostiene el dispositivo.
Prueba en dispositivos reales
Cambiar el tamaño de una ventana del navegador de escritorio es útil para comprobar los puntos de interrupción del diseño y nada más. No puede mostrarle la precisión del tacto, el alcance del pulgar, cómo el teclado en pantalla oscurece el campo en el que está escribiendo o cómo se comporta la página en un teléfono Android de gama media con una conexión lenta.
Pruebe en un dispositivo real, idealmente uno de gama media sin complicaciones en lugar del modelo insignia más nuevo. Eso se acerca más a lo que utilizan la mayoría de sus visitantes.
Mobile-first es un método de trabajo
Diseñar primero los dispositivos móviles no se trata de mejorar la versión móvil a expensas de la versión de escritorio. Es una limitación que obliga a establecer prioridades: con un espacio de pantalla limitado, tienes que decidir qué es lo que realmente importa, y esa disciplina tiende a mejorar también la versión de escritorio.
Comenzar con la pantalla pequeña y mejorar hacia arriba produce una jerarquía más clara que comenzar en grande y reducirla. Construimos de esta manera como estándar en todos proyecto de diseño weby la diferencia de conversión suele ser visible en el primer mes después del lanzamiento.
El diseño responsive es solo la mitad del trabajo: descubre cómo un sitio orientado a la conversión se paga solo, o lee nuestras preguntas frecuentes sobre diseño web sobre plazos y propiedad.
¿Quiere que esto se gestione por usted?
Creamos y optimizamos sitios como este todas las semanas. Reserva una llamada gratuita de minutos 30 y te diremos exactamente qué cambiaríamos en el tuyo.
Obtenga una revisión gratuita del sitio
