De web a web, mobile web.
Asier Marqués @asiermarques
“El contenido es el rey”
¿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”
airbnb
Badoo
Cloudsound
¿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
¿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
¿Será opcional crear una web app mobile en el 2015?
Cómo hacerlo• SPA, single page application vs MVC tradicional
• Respetando convenciones de diseño de cada plataforma vs Diseño propio
Frameworks• ionic framework
• onsen ui
• chocolat chip ui
• app.js
• mobile angular ui
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é
Touch events• 300ms delay
• Eventos
• touch: touchstart, touchend, touchmove
• touch-action
Touch events• Hammer.js + ngHammer
• touchejs
Notificaciones• Safari Push Notifications
• HTML5 notification
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)
“Links don’t open apps.” Jason Grigsby
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
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
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"/>
Para AndroidjQuery Smart Banners
http://jasny.github.io/jquery.smartbanner/
Media• YUI Compressor
• Retina, CSS
• Porcentaje de calidad en imágenes
• Minimizado
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
Retina CSS
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
}
Retina CSS -webkit
background-image: webkit-image-set(
url(icon.png) 1x,
url([email protected]) 2x
);
Retina JSif (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);
});
}
Cache• Manifest
• Proxy Caché HTTP, varnish
• LocalStorage
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.
Fuentes y rendimientoUtilizar 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
Fuentes y rendimientoOpció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>
Fuentes y rendimientoOpció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
}
Mapas• Leaflet
• Angular Google Maps
• MarkerCluster o Leaflet.markercluster para obtener mejor rendimiento
• Cuidado con los tiles si usamos visualizaciones procesadas por nosotros!
Mapas, rendimiento
Monitorización, gestión de errores
• caliper.io
• bugsnag.com
• rescue.js
Tests A/B• easyab -> http://romainstrock.com/easyAB/
• Abba -> https://github.com/maccman/abba
• vwo.com
UI, Convenciones, Diseñohttp://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/
GraciasAsier Marqués [email protected] @asiermarques linkedin/in/asier
Top Related