sábado, 26 de julio de 2014

Consejos CSS para programación en dispositivos moviles




En el articulo anterior mostraba el infierno en el que se ha convertido android para los desarrolladores con sus múltiples versiones.

Ahora les traigo un vídeo de una charla impartido por Angelina Fabbro que ha dado en la JsConf 2014, donde nos brinda muchos consejos útiles que tienes que tomar en cuenta cuando desarrollas para dispositivos móviles.

Básicamente ella dice que cuando programas para android por ejemplo, tienes que tener como meta de compatibilidad con Android 2.3, por que no todas las personas instalan Google Chrome en sus móviles, siempre usan el navegador por defecto que trae Android. Adicional tienes que tener en cuenta todas las marcas de móviles que ni siquiera usan Andriod ó IOS. Por lo tanto Android 2.3 por ahora es tu punto de referencia, ya que aunque no lo quieras Android 2.3 tiene un porcentaje significativo en el mercado.

Y que android 2.3 es el nuevo IE 6.  En el vídeo también habla de propiedades CSS que son comúnmente usadas en escritorio con total confianza pero que en móviles producen desastres.  Por lo cual hay que evitarlas o buscar " css hacks" para repara los errores.

A continuación una lista de las cosas que recomienda usar con mucho cuidado cuando desarrollas para móviles tomando Android 2.3 como base.


  • Position: fixed  No funciona correctamente.
  • min-heigth,min-width, max-heigth,max-width  Tienen comportamientos extraños.
  • overflow: auto  No usarlo
  • z-index : No respeta el orden de los elementos.
  • medidas ems y rems : ni siquiera pienses en usarlas
  • Gradientes : Noooo!!
  • @media queries : Comportamiento extraño.
  • Selector * : No lo uses
  • No escribas clases muy largas.
  • border-radius baja el rendimiento
  • box-shadow baja el rendimiento
  • Transform especificamente rotate  baja el rendimiento


También tenemos el siguiente link donde podrás encontrar una lista de los errores que algunas personas han encontrado en móviles, es un buen punto de partida para ver los errores mas comunes.

https://github.com/scottjehl/Device-Bugs/issues

Si te dedicas a esto de la web tienes que ver este vídeo, aunque están en ingles puedes habilitar los subtitulos.

No hay comentarios:

Publicar un comentario