Creando la versión para dispositivos móviles de tu sitio (1)

Creando la versión para dispositivos móviles de tu sitio (1)

Publicado por Helmer Galvis1 Comentario
sábado, agosto 28, 2010

Diseño web movil con HGR Design iphone, ipad, android, windows phone

Aunque para muchos de nosotros ya es una realidad que los dispositivos móviles han llegado para que nuestra forma de acceder a Internet cambie totalmente dejando atrás los ordenadores de toda la vida, muchas empresas aún no disponen de su página web adaptada para estos dispositivos. Las personas acceden a Internet desde dispositivos móviles como teléfonos, iPods, tablets, pda’s, etc. Con una frecuencia bastante alta y van en aumento cada día.
El uso de dispositivos móviles ha crecido en un 140% en 2009, según Apple. Según los expertos, en 2013 habrán en circulación 1.1 billones de dispositivos de estas características.

¿Cómo empezamos?

La verdad es que si ya estás familiarizado con lenguajes de programación como HTML, PHP, hojas de estilos CSS y demás, te resultará muy sencillo crear la versión móvil de un sitio.
Opera Mini y Opera Mobile navegadores para moviles

Resoluciones

Venimos trabajando en las webs con una resolución mas o menos estandar para las pantallas de hoy en día, entorno a unos 1024×768 pixeles, en el caso de estos dispositivos la resolución más comun es la de 240×320 o 320×480 pixeles (iPhone, HTC, Samsung, etc). Podríamos  trabajar en base a esta medida, pero también podemos maquetar el sitio de forma flexible, que se adapte a la resolción del navegador o dispositivo usado para acceder al sitio web.

Soportes

Tenemos que pensar en las compatibilidades con soportes tipo java o flash, en este caso, la mayoría de dispositivos o los más usados no soportan tecnología flash, como es el caso del IOS (iPhone / iPod). Pero debemos tener en cuenta que muchas veces, por ejemplo, el flash, puede no verse o ejecutarse tan fluidamente como en un ordenador y navegador convencional, por lo que es recomendable hacer nuestro trabajo lo más simple posible, HTML5 y CSS3 más JavaScript es el mejor camino a seguir.

Los dispositivos: Tenemos que adaptar nuestro sitio para que sea accesible y usable desde la mayoría de dispositivos y navegadores, pero podemos basarnos en los más usados. Según un estudio de la web  web develovepers notes, el dispostivo más usado es el Iphone / Ipod Touch con un  64,8%, como vemos el iPhone es el aparato más usado para acceder a internet desde cualquier lugar, le siguen los teléfonos basados en el SO de Google, Android, con casi un 9% de mercado y subiendo, en el resto de lugares encontramos a JAVA, Symbian, Windows mobile, BlackBerry, etc

Ahora veamos los navegadores más usados, en primer lugar tenemos como es evidente a Safari que tiene una cuota muy alta de uso, luego en menor medida vemos a los navegadores nativos de cada dispositivo, alternativas como opera mini, dolphin, etc. Y el sistema de búsqueda más usado es Google con un 97,5% de uso.

Safari, navegador por defecto del iPhone

Más información en http://www.webdevelopersnotes.com/articles/mobile-web-browser-usage-statistics.php

CMS: Si estamos usando algún gestor de contenidos o CMS, hay que tener claro que muchos plugins o extensiones que estemos usando en el sitio pueden ser incompatibles o no funcionar en los móviles, también pueden afectar en la experiencia del usuario al visitar nuestra web de forma negativa, desorden, lentitud, constantes errores, etc. Lo mejor es usar algun plug in adaptado para el CMS. En el caso de WordPress, existen decenas de plugins que te ayudarán a resolver este problema de forma sencilla.

Conexiones: Debemos tener en cuenta que muchas conexiones móviles no son tan rápidas como el ADSLo el cable que tenemos en nuestra casa u oficina, así que, debemos de trabajar en una versión móvil lo más liviana, limpia y optimizada posible. Hay que tener especial cuidado con las imágenes que usemos, si son muy grandes, pueden desencajarnos la web o hacerla lenta, hay que adaptar las imágenes a una medida estándar, que pueda ser escalable con el tipo de navegador y dispositivo que el usuario este usando.

Con estos datos hasta el momento, ya sabemos los primeros pasos para encaminar nuestro proyecto móvil. En el próximo post, veremos las diferentes formas de poner en marcha la versión móvil de tu web.

Saludos!

Creando la version para dispositivos móviles de tu sitio (2)

Te puede interesar: Frameworks para desarrollo web móvil