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.

El infierno de Android Browser para nosotros los frontends

Si un amigo tuyo te dice :

" He probado mi aplicación en navegadores android y funciona perfecto ".

Lo que tienes que hacer es lanzar una risa malvada y mostrarle la siguiente presentación :




Personalmente por esta razón es que la gente le gusta desarrollar para iphone, este tipo de problemas  son poco frecuentes. Este tema de compatibilidad en android realmente se ha salido de control....

Si a esto sumas el nuevo mobile OS de firefox y el nuevo movil de amazon, esto deja de ser divertido.

Si quieres saber consejos muy buenos a tener en cuenta cuando desarrolles para android te aconsejo  leer el siguiente  articulo con muchos consejos sobre android y como afrontar estos problemas, este articulo se centro en putos muy importantes como por ejemplo:

• Software
• Hardware
• Pantallas 
• Drivers
• chipset
• etc

y en cada una de estos puntos hacen muy buenas recomendaciones sobre lo que necesitas saber para no tener problemas en el futuro. Como dije antes muy buen articulo

link: http://www.smashingmagazine.com/2014/10/02/what-every-app-developer-should-know-about-android/

Comparte tus Bookmark : http://unitedbookmark.com/

Consejos para hacer tu web app super rapida...deja de hacer perder el tiempo a tus usuarios.

No es secreto que las redes moviles dejan mucho que desear, comparadas con la conexión de nuestro hogar. Y nada frustra mas a los usuarios de móviles que tiempos de espera de carga muy largooos, lo cual resulta en que piense que tu web app es una porquería por que les hace perder el tiempo.

El co-fundador de Instagram Mike Krieger dice : " ¿Quien quiere esperar mientras esta esperando? ".

Y eso es por lo general lo que la mayoría de las web apps hacer cuando están esperando confirmación de sus acciones. El proceso por lo general es el siguiente:

1. El usuario hace algo en la aplicación.
2. La aplicación envia una petición al server diciendo que algo paso.
3. El server recibe la petición y realiza la acción correspondiente.
4. La aplicación espera la respuesta del server y después actualiza la pantalla con el resultado.

Todos este proceso es mucho tiempo esperando, aunque sea el proceso normal de cualquier aplicación, y en redes móviles puede parecer una eternidad. La popular aplicación móvil Instagram usa unos trucos muy interesantes para generar la impresión de que la aplicación es super rápida , los cuales nosotros podemos emplear en las nuestras y tener a nuestros usuarios contentos.

A continuación les dejo una presentación donde Mike Krieger muestra las técnicas "secretas" que usan en Instragram para lograr esto. Muy recomendado que lo vean.




link: https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
Comparte tus Bookmark : http://unitedbookmark.com/