Diseños web adaptados a dispositivos móviles

Si queríamos hace un par de años que nuestra página web se adaptara a los diferentes dispositivos móviles de lectura (ordenador, Tablet, móvil o iPod) era necesario codificar y programar de manera individual versiones específicas de una misma página, crear aplicaciones móviles o cambiar de dominio en caso de que accedieras desde un dispositivo distinto al ordenador, tal como se ha comentado en varias de las noticias sobre diseño web que he consultado.

Esto no solo implicaba muchas veces tener una dirección distinta para cada dispositivo de lectura móvil sino que indexarlas todas en los motores de búsqueda resultaba complicado.

Sin embargo todo eso se ha ido con la llegada del diseño web responsive o adaptativo, una técnica de diseño web que busca que una misma página se adapte correctamente a cada dispositivo desde el cual se acceda a ella sin la necesidad de trabajar en codificaciones individuales para cada tamaño de pantalla.

Google, el principal buscador del mundo y actual líder en herramientas de medición web, anunció el pasado 26 de febrero que a partir del 21 de abril de este año actualizaría sus algoritmos de búsqueda para móviles para darle prioridad en su buscador a aquellos sitios cuyo diseño es adaptativo.

Esto no quiere decir que tu página desaparecerá ni que dejará de estar indexada; tampoco implica ningún tipo de multa por parte de Google. Pero si tu página no tiene un diseño responsive Google la ubicará en posiciones mucho más inferiores al momento de mostrarle resultados a un usuario que hace la búsqueda desde su móvil.

 

Ventajas de un diseño web responsive

La primera gran ventaja del diseño web responsive o Responsive Web Design es que te ahorra tiempo y dinero, pues solo es necesario mantener una sola versión de tu página web que cubra los ordenadores y de más dispositivos móviles (Tablet, móvil, iPod).

Luego nos encontramos con que los usuarios se llevan una mejor experiencia al navegar por tu sitio web ya que no tienen que mover la pantalla para leer el contenido que se queda por fuera o aplicarle zoom para leer las letras de manera óptima.

El diseño responsive es benéfico para tu posicionamiento web; tener una sola URL te ahorra problemas de duplicidad de contenidos, fallos o enlaces entrantes.

Por último, este tipo de diseño te permite revisar las estadísticas de visitas de tu página web en distintos dispositivos desde la misma cuenta, contrario a lo que ocurría en el pasado que tenían que analizarse por separado.

 

Consejos para adaptar tu página con un diseño responsive

A continuación te daré tips básicos que no debes olvidar al momento de diseñar tu página web de manera responsive:

  • Evita software que no sean compatibles con todos los dispositivos móviles. Un error muy común que sirve de ejemplo es usar Flash para reproducir videos en tu página web cuando este no es compatible con todos los sistemas operativos.
  • Utiliza un tipo de fuente que sea legible, pero sin ser demasiado grande. Lo recomendable es que el tamaño mínimo de tu letra sea de 12 px para configurar las fuentes, de manera que el lector pueda leer el texto con facilidad y sin necesidad de hacerle zoom.
  • Lo más aconsejable es que no utilices el scroll horizontal, pues no es amigable con una pantalla pequeña y obliga al lector a desplazarse o a usar el incómodo zoom. La mejor opción es que organices tu contenido con el scroll vertical, que es perfectamente adaptable a cualquier tamaño de pantalla.
  • Ubica tus enlaces con suficiente espacio de separación el uno del otro, de manera que al momento de hacer click sobre ellos usando el dedo sea cómodo y no se abra uno cuando se quiere abrir el otro. Lo mismo con los botones que pongas: lo idea es que tengan un mínimo de 48 dp y un margen de 8 dp.

Extra tips: Una herramienta sencilla para saber si tu página web se adapta fácilmente a los diferentes tipos de pantalla es Test my site, una herramienta creada por el mismo Google para medir qué tan responsive es tu web.

También de Google tienes WebMaster, que en cuestión de segundos te presenta un informe detallado sobre los problemas de adaptación que tiene tu web y un par de pistas para resolverlos.

 

Leave a Reply

Your email address will not be published. Required fields are marked *