Porqué no podemos usar cualquier elemento en un sitio móvil?
Si te tomas en serio el desarrollo para móviles, tienes que hacer todo lo posible para que tu sitio sea visible en la mayor cantidad de dispositivos, hay una enorme diversidad en el mercado y cada uno con características distintas.
Recuerda que no estamos trabajando para equipos de escritorio, aquí funcionan algunas reglas distintas. Un dispositivo móvil por su tamaño a veces tiene limitaciones importantes como el procesador, la memoria, los dispositivos de entrada y en especial el tamaño de la pantalla. Muchos elementos del HTML no están diseñados para funcionar correctamente bajo estas condiciones.
Para poder brindar una experiencia consistente, debes tomar en cuenta todas estas variables y comprender que hay algunos elementos de un sitio web que pueden tener un impacto negativo en un móvil. Los elementos que debes evitar usar a toda costa son:
Iframes
Para este punto no deberías usar iframes bajo ninguna circunstancia por los problemas de usabilidad que tienen, por ejemplo, el botón de back pierde su uso natural y no puedes guardar o compartir un link porque puede mostrar resultados incorrectos. Ademas de estos problemas propios del Iframe, esta práctica se debe evitar aun mas en la plataforma móvil ya que muchos equipos no tienen soporte para este elemento y pueden mostrarlo incorrectamente o no hacerlo del todo.
El mismo sitio con iframes , renderizado en diferentes equipos
Técnicas alternativas: Si usas frames para definir el layout de tus paginas: considera usar técnicas mas modernas como el CSS. Si los usas para mantener y repetir elementos de navegación: utiliza SSI o incluyelos por programación. Si necesitas mantener datos a lo largo de la navegación,utiliza campos de texto ocultos o usa variables de sesión.
imágenes mapeadas
Las imágenes mapeadas son aquellas que incluyen elementos interactivos dentro de sí mismas, utilizado la etiqueta <map>, este sistema da problemas de usabilidad en muchos dispositivos, en especial en los que la navegación es solo a través del teclado.
Esta navegación, sencilla de utilizar con mouse o touchscreen, se vuelve muy incómoda con un dispositivo que solo tiene navegación por teclado.
Técnica alternativa: En vez de poner áreas interactivas en la imagen, despliega guías gráficas en la imagen estática y usa una lista de enlaces:
- Mexico
- Centro América
- Caribe
- Sudamérica
Popups
Los Popups son esas infames ventanas emergentes, una practica ampliamente odiada , en el mundo móvil no debes siquiera pensar en usarlas, imagina todos esos popups apareciendo en una pantalla al menos 4 veces mas pequeña que la de tu PC! Una sola ventana emergente puede obstaculizar la navegación de todo tu sitio, por esa razón es que muchos dispositivos no soportan del todo este elemento.
Un popup en un espacio reducido, puede afectar todo tu sito.
Técnica alternativa: Muestra el mensaje en tu pagina en un apartado destacado, así puedes comunicar tu mensaje sin dañar la experiencia:
Por otra parte hay otros elementos que aunque puedes usarlos con seguridad, debes hacerlo siempre con cuidado para evitarle problemas a tus usuarios:
Cookies
Gran cantidad de dispositivos no tienen soporte para cookies o tienen serias restricciones debido a la falta de espacio para almacenarlas, otros como los equipos Blackberry tienen esta característica deshabilitada por defecto y un enorme porcentaje de usuarios no tienen idea de como activarlo. La inconsistencia de soporte para cookies en móviles nos exige que no desarrollemos un sitio en el que esta característica sea indispensable.
Técnica alternativa: intenta no utilizar cookies o al menos procura enviar las variables por URL o POST, si esto no es una opción y son realmente indispensables, muestra una advertencia a tus usuarios antes de comenzar a navegar en una zona que requiere cookies y realiza una autenticación de esa característica para estar seguro.
CSS, colores y fuentes
El tema del layout para móviles es muy amplio e interesante, tanto que se sale del objetivo y alcances de este curso, sin embargo hay algunos aspectos indispensables que debes tomar en cuenta :
- Toma en cuenta en que equipos vas a desarrollar y analiza sus paletas de color
- Revisa bien el contraste y el tamaño de los textos
- Utiliza medidas relativas como EM o %, nunca uses tamaños en pixels que pueden darte resultados indeseados en pantallas pequeñas, o con resoluciones diferentes.
- No desperdicies código haciendo hovers complejos, el concepto es escaso o nulo en la vasta mayoría de dispositivos
- No confíes en las tipografías, muchos equipos solo tienen una fuente disponible y la mayoría solo unas cuantas.
Scripts y Objects
Recordemos que el objetivo principal de un dispositivo móvil es ser portable, eso implica que utiliza componentes muy pequeños y a veces restringidos, por ejemplo el procesador o la memoria son mucho mas pequeños que los de tu computador, esto se refleja en el desempeño, así que debes ser cuidadoso con tus scripts, optimiza, debuggea y elimina lo que no sea necesario, porque pueden poner a trabajar excesivamente el dispositivo, gastar rápidamente la batería del móvil o dar un rendimiento inferior a lo esperado
Los objects son "trozos" de otros programas que corren en el browser, por ejemplo applets de JAVA o Flash, por los mismos motivos que los scripts, no todos los dispositivos pueden ejecutar todos los objects que a veces damos por sentados en las paginas para PC, el mejor ejemplo es Flash Player 10 que no funciona en el navegador de muchos equipos móviles (al momento de escribir esto).
Técnica Alternativa: Evita usar objects y procura que este elemento no sea indispensable para la navegación de tu sitio, ofrece contenido alternativo. Si en tu sito es indispensable incluir un object que afecta la navegación, muestra una advertencia al usuario y realiza una validación.
Tablas
Independientemente de que sean correcta y semánticamente aplicadas, las tablas sencillamente no se llevan bien con los móviles, la forma básica de una tabla con sus columnas horizontales y verticales no siempre se despliega bien en una pantalla pequeña, mira este ejemplo:
Como puedes ver, esta es una tabla perfectamente valida, que no puede desplegarse bien en una pantalla de móvil, mostrando resultados confusos para el usuario.
Tecnica alternativa: Utiliza un definition list ( <dl> ) para mostrar la información clasificada jerárquicamente, aquí está la misma tabla, pero usando el formato de lista:
Conclusión
Ahora conocemos qué elementos no debemos usar y cuales debemos usar con precaución en nuestros sitios, basados en las limitaciones y características de los dispositivos móviles. Aprendimos técnicas alternativas para no limitar el contenido de nuestros sitios y al mismo tiempo ofrecerle una experiencia agradable a todos nuestros usuarios de móviles.
En la próxima - y última - clase conversaremos sobre el proceso de pruebas y control de calidad para un sitio web móvil.
