Con el auge del mcommerce o mobile commerce son cada vez más los negocios que deciden adaptar sus páginas web para los teléfonos móviles o a la creación de una app.
Cada día más usuarios disponen de un smartphone que consultan a diario en busca de ofertas, promociones o simplemente productos que necesitan, un mercado que es necesario cubrir por parte de las tiendas online, pues nunca se sabe donde puede estar una venta.
Adaptar una página web para smartphones no es una tarea tan sencilla como parece, pues es necesario cuidar ciertos aspectos teniendo en cuenta las dimensiones de la pantalla de cada dispositivo o la usabilidad de la web. Es por ello que a continuación comparto una serie de consejos para el diseño de páginas web para móviles:
1. Lo primero que debemos tener en cuenta es la sencillez y simplicidad, que se convertirán en nuestros aliados. En un teléfono móvil la información será clara y directa, no nos complicaremos con demasiada información o una web demasiado saturada, pues eso no gusta a los usuarios.
2. En relación al punto 1, el uso de imágenes en una web adaptada para el móvil es válido. Sin embargo, cuantas menos utilices más rápido cargará la página (la media de espera de los usuarios es de 10 segundos, por lo que la web no debe tardar más tiempo). Lo ideal es que las imágenes sean de alrededor de 72 dpi, 640 px x 960 de altura. El peso total de la página debe rondar los 20 kb, siempre sin pasarse de esta cifra.
3. La usabilidad debe basarse en un diseño vertical, como las pantallas de los smartphones, con una navegación en una sola dirección.
4. Los títulos serán cortos y de gran visibilidad, pues en las pantallas es necesario destacar las principales secciones para facilitar la navegación. Lo más recomendable es utilizar tipografías de unos 14 puntos para los titulares y en negrita.
5. Los textos serán cortos y directos, describiendo las principales características de los productos (ten en cuenta que si en la web no gusta leer textos largos, en un teléfono móvil mucho menos). Este factor también ayudará a la velocidad de carga de las páginas.
6. Utiliza un diseño con los colores adecuados para la lectura en pantallas de baja resolución o lugares con luminosidad reducida.
7. Los enlaces deben estar destacados y separados del texto para que los usuarios puedan hacer click sobre ellos sin problema.
8. Las ventanas emergentes o pop-ups no sn recomendables, pues los navegadores móviles no están preparadas para ellas y además no gustan a los usuarios. Del mismo modo, algunas marcas de smartphones no aceptan cookies, por lo que la página estará adaptada a esas limitaciones.
9. Los porcentajes funcionan mejor que los tamaños absolutos en cuanto al diseño de páginas web para móviles, pues ofrecen mayor adaptabilidad a la pantalla.
10. Por último, es importante contar con que cada teléfono móvil tiene una resolución de pantalla diferente, por lo que la web debe estar adaptada y ser visible correctamente desde cualquier terminal. Algunas de las resoluciones más utilizadas son:
  • 768×1024 para iPad.
  • 640×960 para iPhone 4.
  • 480×360 para Blackberry (Torch, Storm y Bold).
  • 320×240 para Blackberry (Curve 8530 y PearlFlip), Android (Motorola Charm, Sony Ericsson Xperia X10 Mini y otros) y Symbian OS (Nokia E63 y otros).
  • 320×480 para Apple OS (iPhone y iPod) y Android (HTC Dream, HTC Hero, Droid Pro, i7500 Galaxy, Samsung Moment y otros).
  • 360×640 para Symbian OS (Nokia N8, Nokia C6-01 y otros).
  • 480×800 para Android (Liquid A1, HTC Desire, Nexus One, i9000 Galaxy S y otros), Maemo – Linux (Nokia 900 y otros), Windows Mobile 6 (Sharp S01SH) y Windows 7 Phone (Venue Pro, Samsung Omnia 7, HTC 7 Pro y otros).
  • 1280×800 para Android (Motorola Xoom y Samsung Galaxy Tab 10.1) , Windows OS (Asus Eee Pad EP121) y Apple OS (Axiotron Modbook).