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

facebook

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(icon@2x.png) 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 asier@simettric.com @asiermarques linkedin/in/asier