El acceso a Internet a través del móvil ha aumentado considerablemente en los últimos años hasta el punto que los desarrolladores y diseñadores web ya no podemos permitirnos el lujo de ignorarlo. El desarrollo de webs para móviles es más complejo que el desarrollo de una simple página web, incrementándose cada día con la aparición de nuevos dispositivos y distintos navegadores. Desde el principio debemos plantearnos un desarrollo multiplataforma. Además, regresan problemas como: el ancho de banda, la resolución de pantalla… Yo ya ni me acordaba!

Navegadores moviles

Una manera de facilitar nuestro trabajo es diferenciar el CSS web del CSS para las visitas que accedan a nuestra página a través de móvil.

No es difícil, de hecho podemos hacerlo de varias maneras, cada uno que elija la que más le convenga:

Del lado del servidor

Esto implica la detección del User Agent visitante mediante un código de servidor (como PHP) en nuestras páginas. Como consecuencia, o bien sirve una hoja de estilos apropiados o redirige al usuario a un subdominio móvil del tipo m.facebook.com donde se garantiza la compatibilidad con el dispositivo móvil.

El único problema es mantener actualizada la lista de UA, ya que cada día aparecen nuevos perfiles.

Del lado del cliente

Una manera sencilla de detectar el dispositivo es por la resolución. Si acceden con una resolución inferior a 480px de ancho podemos deducir que se trata de un dispositivo móvil y redirigir consecuentemente o cargar el CSS para móviles.  Por ejemplo:

<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left;"><link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/></span><link rel="stylesheet" href="mobile.css" media="only pantalla y (max-device width:480px)"/></span>

Acceso directo del usuario

Tan fácil como poner una opción en nuestra web que vincule directamente a las páginas desarrolladas para móviles bajo petición del propio usuario (‘Visita nuestro site con tu móvil’). De esta manera le das al usuario la opción de elegir el modo de visualización que prefiere.

Algunas de los puntos básicos a la hora de diseñar una web para móviles

  • El diseño, debido al reducido tamaño de las pantallas, es más que recomendable que se estructure en única columna.
  • Evitar la carga de imagenes innecesarias, podemos utilizar la propiedad de display(block/none) para diferenciar entre contenido web y movil en nuestro CSS según el caso.
  • Aumentar el tamaño de fuente para movil y facilitar la legibilidad de los textos.
  • Evitar los elementos flotantes
  • No usar flash en nuestros diseños.
  • Evitar los estados de javascript como onMouseOver, ya que muchos dispositivos no lo reconocen.
  • iPhone no es compatible con <input type="file" />

Trucos para hacer webs para móvil mucho más usables

Sencillo y útil para facilitar al usuario una mejor experiencia web móvil:

Número de Teléfono Clicable para llamar automáticamente desde el móvil

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left;"><a href="tel:15032084566" class="phone-link">(503) 208-4566</a></span> <a href="tel:15032084566" class="phone-link"> (503) 208 a 4566</ a></span>

La clase .phone-link activa la posibilidad de hacer click sobre el numero de teléfono solo si visitamos la página desde un móvil.

Usando Input y sus types de HTML5

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left;"><inputtype="tel"/></span> <input type="tel"/></span>

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;"><input type="email"/></span> <input type="email"/></span>

Estos tipos de INPUT de HTML5 permiten que los dispositivos como el iPhone muestren un teclado contextual que se relaciona con el tipo de entrada.  En el ejemplo anterior type="tel" desencadena un teclado numérico ideal para introducir números de teléfono y type="email" desencadena un teclado con @ y . botones.

Detectar la orientación del dispositivo móvil

Para detectar la orientación del dispositivo, podemos utilizar una consulta similar a la detección de dispositivos de cliente que hablamos antes. Dentro de la hoja de estilo, incluimos:

<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">@import url("portrait.css") alland</span> @ Import url("portrait.css") y todos los</span>
<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">(orientation:portrait);</span> (Orientación: vertical);</span>
<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">@import url("landscape.css") alland</span> @ Import url("landscape.css") y todos los</span>
<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">(orientation:landscape);</span> (Orientación: horizontal);</span>

Aquí portrait.css añadido para dispositivos en vertical y la landscape.css será añadido para los visualizados en horizontal.

Via www.smashingmagazine.com

Espero que os sirva de ayuda, seguiré indagando y aportando más información sobre web para móviles, a mi parecer, un futuro muy presente.

About these ads
Comentarios
  1. Eldita Sonoqui dice:

    Holaa!.. muy buen post acerca del desarrollo web, nos da una idea de como realizar una web para los dispositivos moviles ya que existe poca informacion al respecto..

  2. Ricardo dice:

    Una pregunta vi que tu codigo defines un css cuando el dispositivo horizontal y otro cuando es vertical pero no se supone que eso debe de ser flexible?.
    Mira yo tuve un problema cuando hize mi primera web para una clienta que tenia que verse bien la pagina en iPad, iPhone, Pc, Mac no esta desarrollada en base a estandares para moviles lo hize apurado y por que se tenia que entregar pero me gustaria saber como se hace en este caso para no hacer un css cuando el dispositivo sea horizontal y/o vertical se adecue el contenido como es el caso del iPhone y del iPad.

    Gracias

    • Kike Puelles dice:

      Detectar el ancho de pantalla del dispositivo te puede servir para diferenciar entre un portatil o pc y un smartphone o móvil, y en estos casos puedes o bien redirigir a un sitio exclusivo para dispositivos moviles (m.sitiomovil.com) o que tu web se ajuste por CSS (hack). O incluso tener un diseño liquido de capas flotantes con todos los tamaños en porcentaje (incluyendo textos, imgs… TODO). Esto mismo puede ocurrirte con la orientación del móvil como dices. La mejor opción es la de tener tu sitio móvil paralelo a tu sitio web y tener un CSS relativamente flexible, para que se adapte a la anchura.

  3. Liz dice:

    Hola! Muy buen aporte, lo he usado casi todo jejeje.. Pero me gustaría saber que alternativas exiten para subir imágenes por medio del IPhone

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s