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.

1. De web a web, mobile
web.
Asier Marqués
@asiermarques

2. “El contenido es el
rey”

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”

4. airbnb

5. facebook

6. Badoo

7. Cloudsound

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

10. ¿Será opcional crear una
web app mobile en el 2015?

11. Cómo hacerlo
• SPA, single page application vs MVC tradicional
• Respetando convenciones de diseño de cada
plataforma vs Diseño propio

12. Frameworks
• ionic framework
• onsen ui
• chocolat chip ui
• app.js
• mobile angular ui

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é

14. Touch events
• 300ms delay
• Eventos
• touch: touchstart, touchend, touchmove
• touch-action

15. Touch events
• Hammer.js + ngHammer
• touchejs

16. Notificaciones
• Safari Push Notifications
• HTML5 notification

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)

18. “Links don’t open apps.”
Jason Grigsby

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

25. Retina CSS
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
}

26. Retina CSS -webkit
background-image: webkit-image-set(
url(icon.png) 1x,
url(icon@2x.png) 2x
);

27. Retina JS
if (window.devicePixelRatio > 1) {
var images = $('img');
images.each(function(i) {
var lowres = $(this).attr('src');
var highres = $(this).attr(‘data-src-retina‘);
$(this).attr('src', highres);
});
}

28. Cache
• Manifest
• Proxy Caché HTTP, varnish
• LocalStorage

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

31. Fuentes y rendimiento
Opción 1
<style>
@font-face {
font-family: 'Whatever Sans';
src: local('Whatever Sans'),
url(http://fonts.gstatic.com/s/.../ODelI1aHBYDBqgeIA...Oz0jw624.woff)
format('woff');
}
</style>

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!

34. Mapas, rendimiento

35. Monitorización, gestión de
errores
• caliper.io
• bugsnag.com
• rescue.js

36. Tests A/B
• easyab -> http://romainstrock.com/easyAB/
• Abba -> https://github.com/maccman/abba
• vwo.com

37. UI, Convenciones, Diseño
http://www.mobile-patterns.com/
http://www.lovelyui.com/
http://www.pttrns.com/
http://ui.theultralinx.com/
http://inspired-ui.com/
http://inspirationmobile.tumblr.com/
http://www.android-app-patterns.com/

38. Gracias
Asier Marqués
asier@simettric.com
@asiermarques
linkedin/in/asier