Cómo hacer un diseño web compatible con dispositivos móviles

Diseño responsive para compatibilidad con dispositivos móviles

Aunque los teléfonos inteligentes y las tabletas existen desde hace algunos años, el acceso a Internet móvil ya ha superado al acceso de escritorio. En 10 países, incluidos Estados Unidos y Japón, se realizan más búsquedas en Google en dispositivos móviles que en computadoras.

Google ha estado hablando de esta tendencia desde hace algún tiempo y recientemente realizó cambios en su algoritmo de búsqueda para mejorar la clasificación de los sitios web optimizados para dispositivos móviles en los resultados de búsqueda y penalizar a los sitios que no lo son. Comúnmente conocidos como “Mobilegaddons”, muchos sitios han visto caer significativamente su clasificación en Google después de estos cambios, y muchos más están luchando para que sus sitios sean compatibles. Sin embargo, todavía tenemos sitios web que simplemente no funcionan bien en móviles. Incluso nuevos sitios web.

La optimización de motores de búsqueda no es sólo dominio de los especialistas en marketing de Internet. El diseño del sitio web y su implementación tienen un impacto en los resultados de los motores de búsqueda.

Como diseñadores y desarrolladores, debemos dar un paso atrás y evaluar nuestro trabajo. Los sitios web que creamos no pueden ser simplemente hermosos. Deben satisfacer las necesidades de los usuarios y generar ingresos para nuestros clientes. No dejes la prueba de compatibilidad al final de tu proyecto. Incorpórelo a tu diseño y desarrollo.

Para ayudarte, aquí hay una lista de las preguntas principales que debe hacerte para comprender mejor qué tan optimizado es tu sitio.

1. ¿Se muestra bien en diferentes dispositivos?

Los dispositivos móviles vienen en muchos tamaños y formas. Estos van desde teléfonos inteligentes con pantallas de 3 ″ hasta tabletas con pantallas de 7 ″ y más. Primero verifica si tu sitio web se muestra correctamente en todos los dispositivos. Algunas herramientas que puedes utilizar para este propósito son:

  • https://designmodo.com/responsive-test/
  • https://responsivetest.net
  • https://www.studiopress.com/responsive/

En el pasado, los sitios utilizaban URL separadas para la versión móvil del sitio u ofrecían contenido diferente para el acceso móvil y de escritorio. Dada la amplia gama de tamaños de pantalla, utilizar un diseño responsivo para tu sitio es probablemente la mejor opción hoy en día.

2. ¿Con qué facilidad pueden los usuarios completar tareas comunes?

El espacio de pantalla de un celular o tablet es más pequeño que el de una computadora de escritorio. El tacto es el modo de entrada principal. Ingresar datos en formularios es, en el mejor de los casos, doloroso cuando se intenta escribirlos en un teclado virtual con teclas pequeñas. Esto hace que la interacción del usuario sea diferente a la de un escritorio.

Facilita a los usuarios la interacción con tu sitio en un teléfono inteligente. Cosas simples como usar un tamaño de fuente que sea legible en pantallas pequeñas o permitirles que te llamen con un solo clic contribuyen en gran medida a mejorar la experiencia del usuario.

3. ¿El llamado a la acción es central y destacado?

El objetivo principal de cualquier sitio web suele ser aumentar la participación y los ingresos de los usuarios. Esto requiere CTA claras y prácticas ubicadas estratégicamente en tu sitio web. La CTA diseñada para colocarse estratégicamente en la esquina superior derecha de tu página de inicio podría reposicionarse en la pantalla 3 cuando se vea en un dispositivo móvil. O peor aún, es posible que no se escale correctamente y haga que los campos de entrada cruciales desaparezcan en la mitad inferior de la página. Verifica la ubicación, el diseño y la apariencia de tu CTA.

4. ¿Hay menús profundos de varios niveles?

Hasta hace poco, tener menús de tres o incluso cuatro niveles de profundidad era una práctica común, una forma de mostrar todo lo que tienes para ofrecer. Lamentablemente, muchos sitios web hoy en día todavía lo tienen. No todo el mundo aprecia la sencillez y elegancia de una navegación limpia y ordenada. Pero en un dispositivo móvil eso no es una opción, es una necesidad. Los sitios móviles suelen tener el menú condensado en un icono en la parte superior de la pantalla que se expande cuando se toca. Es poco probable que los usuarios tengan la paciencia para hacer varios toques o desplazarse por una larga lista de opciones. Mantén los menús breves y aptos para dispositivos móviles.

5. ¿Qué tan fácil es volver a tu página de inicio?

Cuando un usuario ha atravesado niveles profundos en la jerarquía de páginas o publicaciones de blog o productos, ¿qué tan fácil les resulta a los usuarios encontrar el camino de regreso a la página de inicio? En este estudio de Google, los participantes esperaban volver a la página de inicio cuando hacían clic en el logotipo del sitio y se frustraban cuando no funcionaba. Claro, también podrían tocar para abrir el menú y luego tocar «Inicio», pero ¿por qué no hacerlo más fácil para los usuarios? ¿Por qué utilizar dos grifos en lugar de uno? El simple hecho de vincular tu logotipo a la página de inicio puede ahorrarle frustración, toques y también liberar algo de espacio en el menú.

6. ¿Es fácil buscar en el sitio?

Permite que los usuarios encuentren rápida y fácilmente lo que buscan. Implemente funciones de «búsqueda inteligente» como autocorrección y autocompletar. Agregar filtros específicos, especialmente para sitios de comercio electrónico, ayuda a los usuarios a encontrar productos relevantes más rápido.

7. ¿Los módulos son adecuados para teclados virtuales?

A pocas personas les gusta completar formularios en pequeños teclados virtuales. Haz que los formularios móviles sean lo más simples posible. Ayuda al usuario completando los campos predefinidos y haciendo que el autocompletado esté disponible. Para cada tipo de campo, utilice el método de entrada más simple y adecuado. Por ejemplo, con las fechas, utilice un calendario emergente donde el usuario pueda tocar una fecha, en lugar de tener que escribirla en formato DD/MM/AAAA.

8. ¿Se puede hacer zoom de manera práctica?

La capacidad de pellizcar y hacer zoom era popular cuando se introdujeron las pantallas táctiles por primera vez. Ya no. Los usuarios de hoy son expertos y quieren acceso instantáneo. No deberían tener que pellizcar y hacer zoom en la página para obtener información general. Haz que la fuente sea lo suficientemente grande para que sea legible en una pantalla pequeña.

Lo contrario ocurre con las imágenes de productos. Los usuarios quieren poder hacer zoom y ver el producto en un nivel más granular. Deberás equilibrar la calidad de la imagen con el tamaño de la imagen.

9. ¿Es posible rastrear todo el sitio?

Google reconoce tres configuraciones diferentes para dispositivos móviles:

  • Diseños responsive donde el diseño se ajusta al tamaño de la pantalla.
  • Servicio dinámico donde los servidores web envían HTML diferente según el archivo UserAgentString.
  • URL separadas que entregan código diferente a cada dispositivo, en diferentes URL.

Independientemente del método que utilices, si el robot de Google no rastrea tu sitio correctamente, afectará los resultados de búsqueda. Asegúrate de que Googlebot pueda ver su sitio como un usuario promedio. Mantén su CSS, JavaScript e imágenes rastreables. Puedes consultar tu robots.txt con esta herramienta gratuita de Google.

10. ¿Todo el contenido se reproduce en dispositivos móviles?

Es posible que algunos tipos de contenido, especialmente vídeos, no se puedan reproducir en todos los modelos. Por ejemplo, Flash no funciona en muchos dispositivos móviles. Esto también se aplica a los formatos de vídeo no compatibles. Si el contenido no se puede reproducir, puede resultar bastante incómodo para los usuarios y frustrar su propósito. En su lugar, podría ser una mejor idea utilizar etiquetas HTML5 para todo el contenido de audio y vídeo.

11. ¿Has verificado las redirecciones y enlaces cruzados?

Si mantienes URL separadas para móviles y computadoras de escritorio, cada vez que los usuarios accedan a su página, deberás configurar una redirección a la página móvil adecuada. No redirija todos los inicios de sesión de escritorio a la página de inicio móvil, ni viceversa.

12. ¿Cómo manejas tareas complejas e información confidencial?

Muchos usuarios se sienten incómodos al realizar tareas complejas o tareas que requieren ingresar información confidencial. Todavía se percibe que los ordenadores de sobremesa son más seguros. Una buena solución es proporcionar un botón de «hacer clic para llamar» para que a los usuarios les resulte más fácil completar la transacción. Otra forma es permitir que el usuario transfiera la interacción a otro dispositivo. Por ejemplo, los usuarios que navegan por un sitio de búsqueda de empleo podrían apreciar la posibilidad de enviarse por correo electrónico una lista de trabajos adecuados, para poder postularse más tarde, tal vez desde una computadora de escritorio.

Para obtener más detalles sobre cómo hacer que tu sitio sea compatible y, mejor aún, obtener una mejor clasificación en SEO móvil, Google tiene un conjunto de pautas mucho más detallado disponible aquí.

¿Cómo se desempeña tu sitio web según estos criterios? ¿Estás haciendo un esfuerzo consciente para facilitar las cosas a los usuarios?

Deja un comentario