Charla para el evento Sevilla Mobility Day.
Desde hace pocos años, desarrollar sitios y aplicaciones web aplicando diseños responsive ha dejado de ser opcional.
Para dispositivos móviles, empieza a ser necesario ir más allá y crear experiencias de usuario dedicadas a estos entornos.
3. ¿Responsive vs Mobile
Web?
• El contenido es el rey pero la UX también debe
serlo.
• El tamaño importa
• El responsive en dispositivos móviles puede “no
escalar”
8. ¿Web Mobile VS Nativo/
Híbrido?
PROS
• Estamos libres de las políticas de App Stores
• Actualizar la aplicación no es un infierno
• El soporte es directo
• Podemos medir mejor
9. ¿Web Mobile VS Nativo/
Híbrido?
CONTRAS
• No estamos en el canal de aplicaciones
• Nos perdemos ciertos beneficios de integración
con el hardware
• No podemos aprovechar el hardware del
dispositivo para crear aplicaciones complejas
13. Hacernos nuestro
framework
• HTML 5 + “cosas” de cada plataforma
• CSS 3, transiciones y animaciones!important
• Javascript (¿jQuery/Zepto?)
• Angular
• Media (Imágenes+Video+Audio) y assets
• Caché
17. CSS3 Transitions, ¿por qué?
• En una app mobile, las animaciones y transiciones
son parte de la UI y esenciales en la UX
• Deben tener un sentido, en cada plataforma (si
seguimos las convenciones)
• No se trata de poner gatitos que saluden o copos
de nieve (al menos en verano)
19. Las APPs nativas no son el
enemigo
• Esquema de url personalizados: nombre_app://
• Debemos asegurarnos de que la app esté
instalada
• Ideal para lanzar apps conocidas como
WhatsApp o similares
• Smart Banners
20. Detectar si una app puede
estar instalada en el móvil
• Cookies al registrarse en el servicio o redirigir a la
app store
• Smart Banners
21. Smart Banners
<meta name="apple-itunes-app" content=“app-id=
myAppStoreID"/>
Afiliados
<meta name="apple-itunes-app" content="app-id=
myAppStoreID, affiliate-data=myAffiliateData”/>
Pasar datos a la app
<meta name="apple-itunes-app" content="app-id=
myAppStoreID, app-argument=myURL"/>
22. Para Android
jQuery Smart Banners
http://jasny.github.io/jquery.smartbanner/
23. Media
• YUI Compressor
• Retina, CSS
• Porcentaje de calidad en imágenes
• Minimizado
24. Retina
• En pantalla retina tenemos el doble de densidad
para mostrar elementos gráficos
• Debemos preparar imágenes alternativas para
estas pantallas
• Evitar el uso de imágenes para los iconos,
utilizando WebFonts en su lugar
29. Angular, rendimiento
• {{ ::value }}
• $scope.$digest en lugar de $scope.$apply
• cuidado con ng-repeat y directivas tipo ng-hide,
ng-show, puede ser interesante considerar
gestionarlos fuera de angular
• Los filtros dentro de los ng-repeat pueden cargar
también la app.
30. Fuentes y rendimiento
Utilizar siempre .woff
Cuidado con cargar directamente las web fonts de Google o
similares.
• Opción 1: cargar las fuentes de forma asíncrona
• Opción 2: generar nuestro css para nuestras fuentes en woff
y cargarlas en local storage
http://bdadam.com/blog/loading-webfonts-with-high-performance.
html
32. Fuentes y rendimiento
Opción 2
if (localStorage.whateverSans) {
//añadimos el contenido css al DOM
} else {
var request = new XMLHttpRequest();
request.open('GET', '/path/to/whatever-sans.woff.css', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
localStorage.sourceSansPro = request.responseText;
//añadimos el contenido css al DOM
}
request.send
}
33. Mapas
• Leaflet
• Angular Google Maps
• MarkerCluster o Leaflet.markercluster para obtener
mejor rendimiento
• Cuidado con los tiles si usamos visualizaciones
procesadas por nosotros!