1.- Ten en cuenta la diversidad de pantallas
Como primer punto, lo más fundamental en torno de los dispositivos móviles, las sensibles diferencias de tamaños de pantallas y de resolución. Ten en cuenta que estás diseñando para pantallas por lo general pequeñas, pero además que existen distintos tipos de definiciones. Si en ordenadores de escritorio ya debíamos tener en cuenta este detalle, al desarrollar para móviles todavía cobra mayor importancia.
2.- El foco no es tu sitio
Lo dicho anteriormente, quizás los usuarios están accediendo a tu sitio mientras llevan a cabo otras tareas, así que no vas a pretender que el visitante tenga los 5 sentidos dedicados a tu web. Analiza qué es lo que quieres mostrar, sintetiza, llama la atención sobre los puntos que consideres más importantes y descarta aquellos que no merezcan la pena. En la medida de lo posible, reduce la cantidad de contenido que estás distribuyendo en tu página para móviles.
3.- El layout debe estar pensado para móviles
En la web de escritorio utilizamos rejillas que tienen 12 o 16 columnas, sin embargo, en la web para móviles quizás con una columna tienes más que suficiente. En cualquier caso, ten en cuenta que funcionan mejor los layouts fluidos, que se adaptan a la anchura de cada tipo de pantalla. Si vas a utilizar varias columnas, considera 2 o 3 a lo sumo. Sin embargo, también es cierto que algunos dispositivos como los tablets pueden soportar perfectamente layouts más complejos, por lo que no existe una regla fija. Lo mejor sería tener varios layouts y utilizar uno u otro dependiendo de las dimensiones de la pantalla. Más adelante veremos cómo hacer eso.
4.- La navegación en la parte de arriba no suele funcionar
En la web para escritorio es habitual tener un navegador en la parte de arriba de la página, con un listado de las secciones principales de un sitio web. Pero debemos tener en cuenta que en dispositivos de movilidad, con pantallas pequeñas, ese listado de links puede ocupar todo el espacio disponible, lo que obligaría al usuario a hacer scroll para ver el contenido de la página. Algo que no es deseable. En la portada del sitio web puede ser una buena idea mantener la navegación en la parte de arriba del documento, pero en el resto de páginas queda mejor si la situamos abajo.
5.- Uso responsable de las imágenes
Esa imagen que en las pantallas de los ordenadores queda tan bien, posiblemente tenga un tamaño excesivo para visualizarse en una pantalla pequeña de un teléfono. Posiblemente la definición de la foto sea superior a la de la pantalla de tu dispositivo, con lo que estás desperdiciando espacio y ancho de banda para su transferencia. Usa imágenes con tamaños adaptados a móviles y elimina determinados usos de imágenes que aportan poco o nada a la utilidad de tu documento, como imágenes de fondo, que pueden molestar la lectura más que otra cosa.
6.- Se trabaja con los dedos y no con el ratón
Este punto es de vital importancia, puesto que la pantalla táctil utiliza el dedo como señalador y tiene muchas diferencias con respecto al puntero del ratón de nuestro ordenador personal. Ten en cuenta detalles como que el espacio para hacer un tap (tap es como se llama al clic realizado con el dedo sobre una pantalla táctil) es mayor que el que señalaríamos con el puntero del ratón (se supone que un dedo en la pantalla ocupa entre 40 y 80 píxeles de ancho). Dicho de otro modo, no se puede comparar la precisión de un clic con el ratón y con el dedo, que puede cambiar mucho de una persona a otra y también la forma de posicionarlo en la pantalla. En general tu sitio web funcionará mejor cuando pongas botones o enlaces con tamaño mayor. Así mismo, sería recomendable dejar un mayor espacio en blanco entre los botones o enlaces de tu sitio web.
7.- Entrada de texto en teclados virtuales
En el ordenador personal utilizamos un teclado para introducir texto, sin embargo, en dispositivos móviles se suele usar un teclado virtual que a menudo resulta mucho más incómodo. Este detalle y varios otros que tienen que ver con la entrada de datos en general lo veremos en el siguiente artículo sobre usabilidad en formularios optimizados para móviles.
8.- No se dispone de plugins
Flash es el ejemplo más claro de plugin que no disponemos en todos los dispositivos y que por tanto no deberíamos usar en páginas que queremos que se vean bien en móviles. Pero hay otros, como los Applets de Java, Shockwave, etc. Sin olvidar que no todos tienen compatibilidad con ciertas capacidades de scripting. Sugerir la actualización del navegador, o la instalación de otro cliente web, no es la solución en muchos de los casos, pues no siempre el usuario tiene oportunidad de actualizar su sistema operativo o instalar otro software para la navegación web.
9.- Los tipos de eventos cambian
El clic en pantallas táctiles se llama Tap. Realmente es un nuevo modo de llamar a la misma cosa, pero existen otros eventos que sí tienen cambios importantes, o que no están disponibles en las pantallas táctiles. Por ejemplo, el hover no existe al trabajar con los dedos. Además, hay otra serie de eventos que sólo existen en móviles como deslizamiento de los dedos, zoom, girar la pantalla etc.
10.- Existen diversas utilidades específicas que se pueden aprovechar Los dispositivos móviles a menudo integran algunas habilidades que no se disponen en los ordenadores de escritorio, como localización geográfica, cámaras, grabación, orientación, etc. En la mayorá de los casos estos mecanismos sólo se disponen en aplicaciones nativas, pero gracias a HTML 5, algunos ya están disponibles en sitios web. En el futuro la tendencia es integrar aun más estas capacidades en la web.
fuente.desarrolloweb, w3c