13 formas de mejorar su juego de contenido móvil

Recientemente, analizamos datos de más de 200 millones de visitantes a los sitios de nuestros clientes de comercio electrónico y descubrimos que el 27% de las visitas al sitio provenían de personas que compraban en teléfonos inteligentes y tabletas.

Para algunos países, como Brasil, casi la mitad de todo el tráfico de comercio electrónico provino de dispositivos móviles. Ahora es una realidad que todas las empresas y editores de la web necesitan una estrategia web móvil .

Así que aquí hay 13 consejos para optimizar su contenido para los visitantes del sitio móvil .

1. Utilice texto de marcador de posición en entradas de formulario comunes

En formularios pequeños donde el contexto es obvio, use texto de marcador de posición en lugar de etiquetas (por ejemplo, formularios de inicio de sesión, cuadros de búsqueda o formularios de dirección).

Por otro lado, si el usuario necesita una etiqueta para comprender cuál es el contexto de la entrada, no confíe en el texto del marcador de posición. Asegúrese de que la etiqueta esté siempre presente, incluso después de que hayan insertado contenido.

2. Menos es más

Ingresar información en formularios es mucho más difícil en un dispositivo móvil, ¿verdad? Por lo tanto, reduzca los campos requeridos al mínimo. O, mejor aún, no incluya entradas de formulario que no necesite.

Pida a sus usuarios que ingresen la información más tarde o que la omitan por completo.

3. Coloque etiquetas sobre las entradas del formulario

Cuando use etiquetas, deben colocarse encima de los elementos del formulario. El uso de etiquetas alineadas en la parte superior asegura que si el navegador móvil acerca la entrada, el usuario no pierde el contexto de la entrada.

4.Asegúrate de que el texto sea siempre texto

Sin texto basado en imágenes. No, ninguno. Aprenda a usar CSS como está destinado a ser utilizado porque las diferentes dimensiones de pantalla y densidades de visualización causarán estragos en su texto si lo aplana en una imagen. Los beneficios adicionales de usar texto para texto incluyen accesibilidad, rendimiento, degradación elegante y usabilidad general.

Servicios como TypeKit , FontSquirrel y Google Web Fonts facilitan el diseño de texto atractivo .

5. Mantenga los encabezados más cortos que cortos

Los encabezados que abarcan más de dos líneas empujan su contenido hacia abajo en la página y, a menudo, fuera del marco para los usuarios. Manténgalos breves, enfocados y descriptivos sin contar la historia completa.

Como en este ejemplo a continuación, aunque probablemente se vea bien en el escritorio, ese es un rumbo muy largo para un teléfono inteligente.

6. Declare su tamaño de fuente en píxeles para un control perfecto

Le recomendamos que utilice píxeles (px) para el tamaño de la fuente porque ofrece un control absoluto sobre el texto. Además, recomendamos utilizar una altura de línea sin unidades porque no hereda un valor porcentual de su elemento principal. En cambio, se basa en un multiplicador del tamaño de fuente. En cuanto al tamaño de la fuente, recomendamos al menos 14 px.

Incluso si eso parece realmente grande, es lo correcto. El único momento para reducir el tamaño (y solo un mínimo de 12 px) es en etiquetas muy precisas para formularios.

7. Trate su contenido como si fuera un rey

Piense detenidamente en el trabajo de cada página. Luego, asegúrese de que todo el contenido de esa página ayude a sus usuarios a realizar ese trabajo.

Sencillo es mejor que bonito. Lo simple también tiende a ser bonito.

8. Mantenga una copia breve

Ser breve. Sea brillante. Vete.

9. Ahorre tiempo con iconos basados ​​en fuentes

¡Somos íconos! Le dan sabor a tus diseños. Para evitar administrar una hoja de sprites con activos de retina e íconos más pequeños, opte por un conjunto de íconos basados ​​en fuentes como: Font Awesome ; glyphish ; iconosdulces ; o conjunto de símbolos o siempre puedes hacer el tuyo propio.

10. Las imágenes también necesitan amor

Las imágenes cuentan una historia y deben cambiarse de tamaño cuidadosamente para garantizar que su historia se traduzca sin problemas a un nuevo tamaño de pantalla. Evite simplemente reducir el tamaño de las imágenes.

El contexto ha cambiado y, por lo tanto, las imágenes también deberían hacerlo si espera que cuenten correctamente su historia.

11. Tenga cuidado con las imágenes

Suelta tus imágenes y botones de degradado y hazlos encantadores con CSS. Los dispositivos móviles admiten algunas de las funciones CSS más avanzadas de cualquier navegador, por lo que prácticamente cualquier cosa que desee hacer en las imágenes puede hacer con el estilo.

Los beneficios adicionales incluyen: mejor escalado, mejores tiempos de carga, usuarios más felices. ¡Yays! todo al rededor.

12. Utilice algo de magia en la gestión de activos

Genere iconos de retina y use el atributo de tamaño de fondo de CSS para reducir su tamaño en dispositivos que no sean de retina. Todavía se verán geniales y no ocuparán mucho más espacio que las versiones más pequeñas.

13. No haga que las contraseñas sean más tediosas de lo que deben ser

Si necesita una contraseña para el inicio de sesión de una cuenta, muestre un poco de piedad y haga que el proceso de inicio de sesión con contraseña sea lo más fácil posible .

Eso significa dar a los usuarios la opción de mostrar o desenmascarar la contraseña para que se les muestre el carácter más reciente ingresado.

Nota del editor: esta publicación está escrita por Ben Terrill para Hongkiat.com. Ben es el Director de Éxito del Cliente de Mobify, una plataforma móvil abierta. Ben tiene más de 10 años de experiencia en la creación de campañas premiadas para marcas como Nike, Electronic Arts y Palm.

Deja un comentario