A la hora de adaptar tu web a los dispositivos móviles, tienes que partir de una realidad: un móvil tiene unos interfaces distintos a los que tiene un ordenador de sobremesa. El tamaño de la pantalla varia, cambias un teclado y un ratón por una pantalla táctil. Por tanto hay que hacer un reseteo de lo aplicado a la web y adaptarte a los nuevos dispositivos.
¿Cómo crear la adaptación móvil?
La primera pregunta a hacerte es esta, ¿voy a tener a tener desarrollos separados? o en cambio, ¿voy a usar el mismo proyecto para todos los dispositivos?
En cada caso dependerá de las circunstancias de cada proyecto, es decir, no es lo mismo crear un proyecto desde cero, donde desarrolles pensando ya en la adaptabilidad para móvil y web, a tener un proyecto web ya maduro. Opciones:
- Creación de un nuevo proyecto=> Creación de un nuevo site, donde todo este optimizado para dispositivos móviles. Esto te dará mucha más libertad, y permitira adaptar al máximo a los requisitos de pantallas más pequeñas e interfaces tactiles.
- Usar el mismo proyecto para ambas versiones=> Tendrás como ventaja que solo habrá que mantener un website adaptando su formato si es móvil o no. Esto puedes lograrlo cargando una plantilla y css distintos, o usando técnicas como Responsive Design (diseño adaptable).
Optimización de código para dispositivos móviles
Uses una opción u otra, tendrás que tener en cuenta que los móviles disponen de un hardware y una conexión a internet más limitada. Aunque las conexiones y los móviles son cada días más veloces, debes partir de la idea de que todo lo que hagas para móvil debe ser más eficiente. Ten en cuenta que todos los usuarios no tienen el móvil más potente del mercado, ni dispone siempre de la mejor cobertura. Aquí os listo una serie de consideraciones a tener en cuenta:
- Reduce el tamaño del código resultante a la mínima expresión, cada caracter de más debe ser eliminado.
- Más que nunca en los móviles, no uses estilos inline.
- Establece el width y height a las imágenes, asígnale un ancho y un alto para ayudar al navegador a renderizar las imágenes más rápido.
- Evita el flash, aprovecha las nuevas opciones que nos da el HTML 5.
- Usa el user-agent del navegador para redirigir a los dispositivos móviles a la versión móvil. Aquí tienes detectores para la mayor parte de los leguajes: user-agents.
- Prueba el resultado en los diferentes SO y navegadores. Si en las webs de escritorio tenemos problemas entre navegadores, aquí no iba a ser menos. Revisa el resultado, primero en simuladores y finalmente en dispositivos físicos, puedes llevarte alguna sorpresa
Usabilidad en dispositivos móviles
Adaptate al interfaz de visualización, es decir, los móviles disponen menos espacio, por lo que debes adaptar tu contenido a ello:
- Debe existir un menu de navegación tanto al inicio como al fin de una página, debes darle al usuario facilidades para navegar, no hay nada más engorroso que llegar al final de la página y tener que volver a subir para ir a buscar otra opción del menú.
- Piensa en tu pulgar, todo contenido susceptible de ser clickeado, debe tener el tamaño mínimo de un pulgar normal. Si un usuario se equivoca constantemente al usar tu página se cansara y la abandonara.
- Añade la mayor parte de tu contenido a tu versión móvil. Muchas páginas solo ofrecen en una versión limitada de su web, para los usuarios habituales esto puede ser muy frustrante ya que no consiguen acceder a contenidos que tienen en la versión estándar. En mi opinión, si organizas la información debería tener cabida todo, eso sí, prioriza lo que consideres más importante.
- Evita que los usuarios tengan que escribir, lo que con un teclado nos es muy sencillo, a través del móvil se vuelve más tedioso.
- Aprovecha las características de los móviles: puedes acceder a la geolocalización para darle una información más cercana a su entorno. Utiliza las distintas apis para poder moverte a traves de la web mediante gestos.
- Crea siempre un enlace para ir a la versión de escritorio si el usuario lo desea.
Posicionamiento en versiones móviles
Tanto si has creado un nuevo proyecto solo para dispositivos móviles como si usas el mismo, a la hora de montarlo puedes hacerlo de dos maneras:
- Urls distintas, ya sea a traves de dominios,submonios o subcarpetas
- m.dominio.com movil.dominio.com
- www.dominio.mobi
- www.dominio.com/movil/
- Usando la misma estructura de urls, solo variaría la presentación cuando es un móvil o no, google aconseja esta última si es posible.
Si construis una estructura de urls diferente, debéis tener en cuenta una serie de consideraciones para que google distinga que es una versión móvil. Para ello establece canonical's a la versión normal que le indique a google su equivalente.
Useis una opción u otra, es aconsejable crear un sitemap tambien para móviles.