Diseño de sitios web móviles en 2021: todo lo que necesita saber

El diseño de sitios web móviles es esencial.

¿Por qué? Porque los dispositivos móviles están revolucionando la forma en que nos conectamos y, como resultado, la forma en que operan las empresas. De hecho, la mayor parte del tráfico web ahora viene del móvil dispositivos.

'Los dispositivos móviles se están convirtiendo no solo en el nuevo centro digital, sino también en el puente hacia el mundo físico', dijo Thomas Husson , vicepresidente y analista principal de Forrester Research. 'Es por eso que los dispositivos móviles afectarán más que solo sus operaciones digitales: transformarán todo su negocio'.

En otras palabras, necesita un sitio web con capacidad de respuesta móvil.

Pero, ¿qué es un sitio web optimizado para dispositivos móviles? En este artículo, aprenderá todo sobre los sitios web optimizados para dispositivos móviles y verá nueve de los mejores ejemplos de diseño de sitios web para dispositivos móviles. Además, aprenderá a averiguar si su sitio web está optimizado para dispositivos móviles.

Hagámoslo.

No espere a que alguien más lo haga. Contrate usted mismo y comience a tomar las decisiones.

¿Qué es un sitio web optimizado para dispositivos móviles?

En pocas palabras, un sitio web optimizado para dispositivos móviles es un sitio que está diseñado y optimizado para dispositivos portátiles, como teléfonos inteligentes y tabletas.

Y el diseño móvil adaptable es el proceso de creando un sitio web que se adapta al tamaño de la pantalla en la que se ve.

Aquí en Oberlo, tenemos un diseño de sitio web optimizado para dispositivos móviles. Comparemos cómo se ve en computadoras de escritorio y dispositivos móviles.

lo que necesitas para hacer un canal de youtube

En la imagen a continuación, puede ver que el sitio web de escritorio tiene mucho espacio, los elementos de la página están dispuestos uno al lado del otro en algunos lugares y el texto es relativamente pequeño en comparación con el tamaño de la pantalla.

Por otro lado, cuando visualiza el sitio web en un dispositivo móvil, los elementos de la página se apilan uno encima del otro en una columna larga y hay menos espacio alrededor de cada elemento. Además, los botones son más grandes para facilitar su pulsación y el texto es más grande en relación con el tamaño de la página para facilitar su lectura.

'Las experiencias ricas e interactivas que esperamos de las aplicaciones móviles han creado nuevos estándares y expectativas para todos los medios digitales, incluida la web'. dijo Raj Aggarwal , Director ejecutivo de la empresa de marketing móvil Localytics. 'El resultado es que los sitios web están evolucionando para volverse más parecidos a una aplicación en su rica funcionalidad'.

La importancia del diseño de sitios web móviles

Vayamos al grano: en el último trimestre de 2019, los teléfonos inteligentes fueron responsables de una enorme 52,6 por ciento del tráfico global del sitio web .

Esto significa que el uso de dispositivos móviles ahora domina las computadoras de escritorio.

Más, el número de usuarios móviles Se espera que en todo el mundo crezca a 3.800 millones en 2021.

Como Cyndie Shaffstall , el fundador de la empresa de marketing Spider Trainers, dijo: “Los dispositivos móviles no son el futuro, son el ahora. Conozca a sus clientes en el entorno de su elección, no donde sea conveniente para usted '.

Los dispositivos móviles también están cambiando los hábitos de compra.

Según Google, 59 por ciento de los compradores decir que poder comprar en sus dispositivos móviles es importante a la hora de decidir en qué minorista o marca comprar.

Más, 70 por ciento de los propietarios de teléfonos inteligentes que hicieron una compra en la tienda recurrieron a sus dispositivos móviles para investigar la compra de antemano.

Si eso no es suficiente, el algoritmo de Google da prioridad a los sitios web optimizados para dispositivos móviles en los resultados de búsqueda.

En marzo de 2020, Google dijo , 'Para simplificar, cambiaremos a la indexación de dispositivos móviles primero para todos los sitios web'.

Si se pregunta qué significa esto, el defensor de los desarrolladores de Google John Mueller explica :

“Actualmente, Google analiza la versión de escritorio de un sitio y luego basa cómo clasificará el sitio móvil de acuerdo con esa información. Una vez que se lance esta actualización, sucederá lo contrario. Google comenzará a buscar en su sitio móvil y, a partir de ahí, clasificará el sitio de escritorio '.

La actualización entrará en juego oficialmente en septiembre de 2020, pero 70 por ciento de los sitios web que se muestran en los resultados de búsqueda ya se están clasificando según este algoritmo de indexación de dispositivos móviles.

Finalmente, muchos usuarios cargan sitios web móviles utilizando conexiones telefónicas débiles y lentas. Como resultado, las marcas deben crear un diseño de sitio web móvil que se cargue rápidamente.

Considerándolo todo, el mundo ahora prioriza los dispositivos móviles, y es por eso que necesita un sitio web que responda a los dispositivos móviles.

8 consejos de diseño de los mejores sitios web móviles

En esta sección, analizaremos más de cerca ocho sugerencias de diseño de sitios web para dispositivos móviles que puede utilizar. Además, verá ejemplos de la vida real de algunos de los mejores sitios web móviles en la Web.

1. Utilice botones grandes

Los sitios web optimizados para dispositivos móviles deben tener botones lo suficientemente grandes para que los usuarios los toquen sin tener que hacer zoom.

Además, debe haber espacio entre los hipervínculos. Si los enlaces se colocan demasiado juntos, los usuarios pueden intentar hacer clic en un enlace y accidentalmente hacer clic en uno diferente.

Shopify utiliza botones grandes y deja mucho espacio entre los hipervínculos en el diseño de su sitio web móvil.

Por lo tanto, cuando diseñe su sitio web receptivo para dispositivos móviles, tenga en cuenta el espacio y asegúrese de que se pueda hacer clic fácilmente en todos los hipervínculos.

2.Haga que el texto sea lo suficientemente grande para leer

Este puede parecer un poco obvio, pero también es fundamental para el diseño de sitios web optimizados para dispositivos móviles.

Los usuarios nunca deberían tener que hacer zoom, o desplazarse hacia la izquierda o hacia la derecha, para leer algo. El texto siempre debe ser lo suficientemente grande para leerlo cómodamente.

En el siguiente ejemplo de Beardbrand , puede ver que todo el texto que se muestra se ajusta perfectamente al tamaño de la pantalla.

Haga que su texto sea lo suficientemente grande en pantallas de todos los tamaños para que los usuarios puedan leer fácilmente lo que tiene que decir.

3. Simplifique los menús

Los menús de sitios web de escritorio tienen mucho espacio. Pueden ocupar una barra completa en la parte superior de la pantalla y tener amplias opciones desplegables, todo sin obstaculizar la experiencia del usuario.

Este no es el caso en los dispositivos móviles, simplemente no hay suficiente espacio.

Los sitios web optimizados para dispositivos móviles deben utilizar menús sencillos que presenten una descripción general del sitio web. Los usuarios pueden usar categorías, filtros o la función de búsqueda para concentrarse en lo que buscan.

La mayoría de los sitios web optimizados para dispositivos móviles utilizan el símbolo de la hamburguesa, que consta de dos o tres líneas horizontales, para indicar un menú.

Veamos un buen ejemplo de uno de los mejores sitios web para móviles, Piel de Kylie .

Cuando los usuarios presionan el menú de hamburguesas de dos líneas en la parte superior derecha de la pantalla, se les mostrará un menú de pantalla completa con botones grandes y texto.

Al crear un sitio web adaptable para dispositivos móviles, mantenga sus menús simples para que los usuarios puedan encontrar fácilmente lo que buscan.

4. Proporcione una función de búsqueda simple e intuitiva

La función de búsqueda de su sitio web es especialmente importante para los usuarios de dispositivos móviles.

Como se mencionó anteriormente, los menús simplificados pueden facilitar la navegación móvil. Sin embargo, también pueden dificultar que los usuarios encuentren un artículo específico.

Para que los usuarios encuentren lo que buscan sin esfuerzo, coloque la función de búsqueda al frente y al centro.

Usuario de Shopify Gymshark coloca la función de búsqueda en la barra superior de la página. También hay una función de filtro intuitiva para facilitar a los usuarios la búsqueda de tipos específicos de productos.

¿La clave para llevar? Haga que una función de búsqueda simple y efectiva forme parte del diseño de su sitio web móvil.

5. Facilite el contacto

Si un cliente está buscando sus datos de contacto, es posible que haya tenido problemas, lo que significa que probablemente ya esté un poco frustrado. No agregue un insulto a la lesión al dificultar el contacto con usted.

imágenes libres de derechos para uso comercial sin cargo

Especialmente cuando 84 por ciento de los consumidores considerar Servicio al Cliente ser un factor clave a la hora de decidir si realizar una compra.

Aquí hay otro excelente ejemplo de diseño de sitios web móviles de un usuario de Shopify Bremont . Esta marca de relojes de lujo coloca un ícono de chat en la parte inferior derecha de la pantalla, lo que hace que sea rápido y fácil para los visitantes del sitio web comunicarse con un representante.

Si no puede ofrecer chat en vivo las 24 horas, considere vincularlo a un Chatbot de Facebook , o simplemente proporcione un formulario de contacto al que los usuarios puedan acceder a través de un enlace 'Contacto' en su menú.

6. Cree formularios simples

Los usuarios pueden estar más inclinados a completar un formulario largo en una computadora porque la pantalla es más grande y es más fácil escribir con un teclado.

En los dispositivos móviles, los formularios deben ser más cortos con campos de texto y botones grandes.

Por ejemplo, si solicita a los usuarios que se registren en su lista de correo, no debe pedir más que un nombre y una dirección de correo electrónico.

Si necesita incluir más preguntas, hágalo rápido y fácil de responder.

En este ejemplo de diseño de sitio web móvil del usuario de Shopify QuadLock , puede ver campos grandes con requisitos de formulario simples. Incluso hay un menú desplegable para ayudar a los usuarios a proporcionar información sobre su consulta.

En resumen, asegúrese de que sus formularios sean breves y sencillos.

7. Cree llamadas a la acción llamativas

A llamada a la acción - también conocido como CTA - es una imagen, banner o texto que literalmente llama a los usuarios a realizar algún tipo de acción.

Por ejemplo, puede solicitar a los usuarios que se registren en su lista de correo , obtenga más información sobre una oferta o compre un producto.

Esta táctica de marketing juega un papel esencial en el diseño de sitios web móviles.

Sin embargo, puede ser un desafío crear llamadas a la acción atractivas con un espacio de pantalla tan limitado para jugar.

En este ejemplo de sitio web móvil del usuario de Shopify Cabello Luxy , puede ver dos banners con llamadas a la acción. El primero promociona un nuevo producto que viene con un obsequio y el segundo pide a los usuarios que aprendan más sobre las políticas de cambio de 90 días y envío gratuito de la marca.

Al crear llamadas a la acción para su sitio web optimizado para dispositivos móviles, haga que se destaquen colocándolas en la mitad superior de la página donde los usuarios puedan verlas sin tener que desplazarse hacia abajo.

8. Evite las ventanas emergentes

Seamos realistas: la mayoría de la gente odia las ventanas emergentes. De hecho, si busca en Google 'Odio los anuncios emergentes', encontrará casi 48 millones de resultados.

No es de extrañar que Google haya lanzado una cambio de algoritmo en 2017 que penaliza a los sitios web que ofrecen tipos específicos de ventanas emergentes en dispositivos móviles.

En estos días, es probable que su clasificación de búsqueda se vea afectada si:

• Muestra una ventana emergente que cubre el contenido principal.
• Muestre un intersticial independiente que el usuario debe descartar antes de poder acceder al contenido principal.
• Haga que la parte superior de la página se parezca a un intersticial independiente y coloque el contenido original debajo.

Dicho esto, algunos tipos de ventanas emergentes no deberían afectar negativamente su clasificación, como

• Intersticiales utilizados para cumplir con obligaciones legales como verificación de edad, consentimiento de cookies o GDPR .
• Inicie sesión en ventanas para acceder a contenido privado, como correo electrónico o contenido que se encuentra detrás de un muro de pago.
• Pequeños banners que se pueden descartar fácilmente y 'utilizan una cantidad razonable de espacio en la pantalla', como los banners de instalación de aplicaciones que utilizan Chrome y Safari.

En resumen, las ventanas emergentes móviles frustran a los usuarios y pueden dañar su rankings de búsqueda , por lo que solo utilícelos cuando sea absolutamente necesario.

Cómo averiguar si tiene un sitio web optimizado para dispositivos móviles

Si se pregunta si su sitio web está optimizado para dispositivos móviles, solo le llevará un momento averiguarlo con Herramienta de prueba de Google optimizada para dispositivos móviles - simplemente ingrese un enlace a su sitio web y haga clic en 'Probar URL'.

Esta herramienta evaluará qué tan optimizado es su sitio web para dispositivos móviles y le brindará un desglose detallado de lo que puede hacer para mejorarlo.

Resumen: Diseño de sitios web móviles en 2021

Un sitio web optimizado para dispositivos móviles es aquel que está diseñado para funcionar bien en teléfonos inteligentes y tabletas. Y ahora que el mundo es prioritario para los dispositivos móviles, su sitio web también debería serlo.

En resumen, aquí hay ocho consejos de diseño de sitios web móviles:

1. Haga botones lo suficientemente grandes para que la gente los toque.
2. Asegúrese de que el texto sea lo suficientemente grande como para leerlo sin que los usuarios tengan que hacer zoom.
3. Simplifique su menú para facilitar la navegación en una pantalla pequeña.
4. Coloque la función de búsqueda al frente y al centro y permita a los usuarios filtrar los resultados de la búsqueda.
5. Facilite que los usuarios se pongan en contacto con usted.
6. Cree formularios que sean simples y rápidos de usar.
7. Coloque los llamados a la acción en la mitad superior de la página para que se destaquen.
8. Evite frustrar a los usuarios con ventanas emergentes a menos que sean absolutamente necesarias.

¿Qué opinas sobre el diseño de sitios web móviles? ¿Nos hemos perdido alguna de las mejores prácticas de diseño web móvil? ¡Háganos saber en los comentarios a continuación!

¿Querer aprender más?

• Recesión económica: ¿Qué pasos puede tomar ahora?
• 10 estadísticas de uso de dispositivos móviles que todo profesional de marketing debería conocer en 2021 [Infografía]
• Las 20 mejores aplicaciones de edición de videos móviles que debe usar en 2021
• 47 aplicaciones de marketing móvil para impulsar su negocio desde cualquier lugar