¿Qué es el diseño web responsivo?
Con el diseño web responsivo, usted configura su sitio para que se adapte a diferentes tamaños de pantalla.
Por lo general, el contenido de tu sitio web responsivo se mantiene igual en todos los dispositivos, pero es posible que veas diferencias en el diseño y el tamaño de los elementos de tu sitio.
Por ejemplo, digamos que en un ordenador de sobremesa, tu página de inicio tiene un párrafo de texto a la izquierda y un formulario a la derecha. Un monitor de ordenador suele ser mucho más ancho que la pantalla de un teléfono, por lo que cuando esta página se carga en un teléfono, el párrafo de texto se sitúa por encima del formulario.
No quieres que la gente pellizque y haga zoom para ver tu sitio web en sus teléfonos, por lo que el diseño responsivo trata de evitarlo cuando se ajusta a los diferentes dispositivos.
Cuando se quiere que los sitios web sean aptos para móviles, el diseño responsivo es sólo el principio. Hay muchos elementos que intervienen en la creación de un sitio adaptado a los dispositivos móviles, de los que hablaré más adelante.
Cómo comprobar si su sitio es apto para móviles
No necesita 100 dispositivos diferentes para comprobar la compatibilidad de su sitio con los dispositivos móviles.
Puede comprobarlo de varias maneras.
En primer lugar, hay muchos sitios de SEO que pueden analizar la compatibilidad de su sitio con los dispositivos móviles.
En segundo lugar, Google dispone de una herramienta de comprobación de la compatibilidad con los dispositivos móviles que puedes utilizar. De hecho, sólo tienes que buscar en Google “prueba de compatibilidad con dispositivos móviles”, pegar tu URL en el recuadro e iniciar la prueba.
En tercer lugar, otra forma divertida de ver si tu sitio es receptivo es ir a cualquier página de tu sitio, hacer clic con el botón derecho del ratón, seleccionar “Inspeccionar” y luego ir a través de las opciones de dispositivo en la parte superior de la página para ver cómo se ve tu sitio en diferentes pantallas.
Esto te dará una idea de cuánto trabajo tienes por delante. Esperemos que no sea mucho. El diseño de páginas web para dispositivos móviles puede parecer mucho trabajo.
¿Cuál es el coste de hacer un sitio web apto para móviles?
Desgraciadamente, no hay una cifra exacta para saber cuánto hay que invertir en un sitio web adaptado a los dispositivos móviles. Realmente depende del alcance de su proyecto y de sus necesidades.
Si un sitio web tiene 20 páginas que necesitan optimización para móviles y otro tiene 200, el proyecto de 20 páginas llevará menos tiempo y requerirá menos recursos.
Si te encargas tú mismo del diseño web responsivo o para móviles, el coste depende de las herramientas que utilices y del valor que asignes a tu tiempo.
¿Qué hace que un sitio web sea apto para móviles? 5 consejos clave
No te centres en el diseño responsivo e ignores otros elementos de tu sitio web. Puedes hacer mucho para mejorar la experiencia móvil de tus usuarios más allá de tener páginas responsivas.
1. Olvídese del ratón
Cuando la gente utiliza sus teléfonos o tabletas, es probable que no tengan un ratón que les ayude a navegar por sus páginas.
Tienes que asegurarte de que tu sitio web es apto para el toque.
Un pulgar es mucho más grande que un cursor, por lo que tener elementos “cliqueables” que estén demasiado juntos o que no funcionen al tocarlos puede crear una mala experiencia de usuario y ahuyentar a la gente de tu negocio.
- Acelera las cosas
La gente no es paciente. Si tu sitio web tarda más de unos segundos en cargarse, vas a perder clientes potenciales.
Si introduces tus páginas en la herramienta PageSpeed Insights de Google, podrás ver lo rápido que se cargan y lo que tienes que hacer para que sean más rápidas.
Puedes considerar el uso de páginas móviles aceleradas (AMP), que pueden ayudar a que tu sitio se cargue súper rápido en los dispositivos móviles.
Asegúrate de que todas las imágenes y gráficos que utilices estén comprimidos. Te sorprenderá la diferencia que puede suponer un archivo comprimido.
Si utilizas vídeos, asegúrate de que no los alojas directamente en tu sitio. Esa puede ser una de las principales razones por las que tus páginas son lentas.
En lugar de alojar los vídeos tú mismo, incrústalos a través de un proveedor de alojamiento de terceros como YouTube o Wistia. Una ventaja añadida es que tendrás acceso a muchos datos que te dirán cómo están funcionando tus vídeos.
- Haz menos preguntas
En tus formularios, claro.
En general, es mejor que los formularios de tu sitio web sean cortos. Elimine los campos innecesarios para que la gente pueda dar rápidamente la información que importa.
Pero piense en la experiencia móvil. Escribir en un teléfono no siempre es divertido. El teclado es pequeño. Las letras están demasiado juntas.
Cuanto menos tenga que escribir en un teléfono, mejor.
Limítate a la información más importante que necesitas para comunicarte con tus clientes y recorta todo lo demás.
- Cuidado con las ventanas emergentes
En un ordenador, tienes mucho espacio para que una ventana emergente entre en la pantalla y no interrumpa completamente la lectura de la gente.
En un dispositivo móvil, una ventana emergente puede ocupar la pantalla de alguien.
¿Cómo te sentirías si estuvieras leyendo un artículo en tu teléfono y, de repente, apareciera un gran recuadro rosa ocultando el texto? A mí me vienen a la mente las palabras “frustrado” y “molesto”.
Y lo que es peor, si alguien no sabe cómo cerrar la ventana emergente, puede abandonar el sitio por completo.
Es posible que quieras evitar las ventanas emergentes -o utilizarlas con moderación- en los dispositivos móviles para evitar crear una mala experiencia de usuario.
- Corta los párrafos largos
Rompa con los bloques de texto largos, porque me aburro.
Mientras que un párrafo de cuatro frases puede parecer pequeño en un monitor más grande, ocupará mucho más espacio en un teléfono.
No tienes que escribir menos. Basta con dividir los párrafos grandes en otros más pequeños.
Los párrafos más cortos pueden facilitar la lectura del contenido.
También puedes dividir tu contenido en secciones más pequeñas.
Empieza con un título principal y añade subtítulos que se correspondan con diferentes subtemas.
Añadir elementos multimedia puede ayudar a separar las cosas, pero ten en cuenta que los vídeos y las fotos pueden ralentizar tus páginas si no están bien optimizados.
Si actualizas tu contenido siguiendo estos cinco consejos, seguro que consigues que tu sitio web sea apto para móviles.
Si necesitas ayuda con el diseño web responsivo o con la preparación de diferentes elementos de tu sitio para los usuarios móviles, no dudes en ponerte en contacto conmigo, yo estaré encantado de ayudarte.