El documento presenta una charla sobre estrategias para la movilización de sitios web, incluyendo diseño responsive, adaptive y el uso de aplicaciones móviles. Explica conceptos como responsive, adaptive, webapp y app, y discute las ventajas e inconvenientes de cada enfoque para diferentes tipos de proyectos web. También analiza tendencias del comercio electrónico móvil y la importancia de optimizar los sitios para dispositivos móviles.

1. Jordi Catà – arambee.com - @jordicata
Responsive,
adaptive
...y la tundra (de apps)

2. Ingeniero Informático > 12 años de experiencia
Web, programación 3D: motores gráficos, ...
Empecé con Mambo en el 2005 y luego Joomla ...
El día a día: Ecommerce, Joomla, Symfony 2, Prestashop, Scrum...
Conferenciante
– Joomla!Day 2009, 2010, 2012, Hoy :-)
– PHPConference 2009
– EcommRetail (2010, 2011), Eshow Madrid 2012
– Jornadas de Software Libre
– Yuzz Girona (2011, 2012)
www.arambee.com Mobile Commerce
www.webactualizable.com Expertos en Joomla
www.animalesadopcion.com Adóptalo y cuídalo
Reviewer de:
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
Sobre mi: Jordi Catà

3. ¿ Conoceis el concepto Responsive ?
¿ Y adaptive ?
¿ cuantos developers ?
¿ cuantos diseñadores ?
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

4. NO ES UNA CHARLA TÉCNICA, ... al menos lo interaré

5. HABLAREMOS/DEBATIREMOS SOBRE
Tendenciasmobile...
“Conceptos” sobre Estrategias de “movilización”:
Responsive, adaptive, WebApp, App, ...
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

6. ¿ que uso haceis del móvil ?
¿ y de la tablet ?
¿ realizais compras vía móvil/tablet ? Desde
donde ?
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

7. 22% de las búsquedas en Google son
desde dispositivos móviles
Más del 30% de les visitas son a traves de
dispositivos móviles
Constante crecimientode les compras
via móvil, sobretodo tablets
1 de cada 3 europeos compra desde
móviles
TENDENCIAS GENERALES
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

8. 63% penetración dispositivos móviles
24% penetración de tablets
44% de internatuas entre 16 y 55 años compra
online recurrentemente
¿Y qué compramos?
Fuente: I estudio anual eCommerce IAB Spain
TENDENCIAS ESPAÑA

9. 90 cm es la distancia máxima entre usuario y su móvil
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

10. –
¿Desde dónde se compra?
40% sala de estar
23% dormitorio
19% cocina
14% exterior
10% baño
63% compra via tables -> En 2017 subirá hastael
78%
TENDENCIAS ESPAÑA

11. En España se preve un crecimiento
anual hasta 2017 del 18%, llegando
a los 9.100 M €
España es el cuarto país de Europa en
número compradores en internet.
En 2012 el volúmen global de venta en
e-commerce fue de: 447.058 M €
Fuente: http://www.marketingdirecto.com/actualidad/digital/el-e-commerce-crecera-un-183-a-nivel-mundial-este-2013/
MERCADO ECOMMERCE -> mobile commerce
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

12. piensa en una web a la que hayas
accedido con un móvil y/o tablet ...
¿ Que experiencias habeis tenido ?
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

13. Qué les pasa a nuestros clientes con
ecommerce?
> 30% visitas via móbiles y tablet
Tiendas no optimizadas para estos
dispositivos. Sólo el 20% de las empresas adaptan su
web al móvil
Se pierden el 40% de
potenciales transacciones
NECESIDADES A RESOLVER
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

15. Sólo el 20% empresas adaptan su web al móvil
62% abandonos cuando accedemos a una web no
adaptada a dispositivos móviles
Tendencia al alza de uso de dispositivos móviles !!!
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

16. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ INTERESANTE, NO ?

17. Como afrontamos la “movilización”, estrategias
●
Responsive
●
Adaptive
●
App
●
WebApp
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

18. RESPONSIVE WEB DESIGN
podríamos definir el diseño Responsive como aquel que se ajusta de
forma fluida a los cambios y responde para ajustarse a cualquier
tamaño de pantalla o dispositivo
Se basa en:
-Fluid Grids
-Flexible Media
-Media Queries
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

19. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ como lo veis ?

20. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
Créditos: Beyond Media Queries: Anatomy of an Adaptive Web Design – Brad Frost
UNA WEB PARA GOVERNARLOS A TODOS...

21. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
Créditos: Beyond Media Queries: Anatomy of an Adaptive Web Design – Brad Frost
UNA WEB PARA GOVERNARLOS A TODOS...

22. RESPONSIVE WEB DESIGN: 1W– N DISPOSITIVOS
WEB
500KB para todos los
dispositivos !!!!

23. Créditos: Designing for mobile devices – Ester Serrano
UNA WEB PARA GOVERNARLOS A TODOS...
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

24. ¿ RESPONSIVE WEB DESIGN PARA TODO ?
-Imágenes flexibles
-Videos flexibles
-todo flexible
Supongamos que la web envia 500 KB
Esto es para todos los dispositivos
Un movil puede gestionar tanta información ?
Como gestiona el móvil el “formato” via jQuery ?
No podemos definir estratégia móvil para cada dispositivo...
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

25. Créditos: Beyond Media Queries: Anatomy of an Adaptive Web Design – Brad Frost
PERO EL RWD ES SOLO EL PRINCIPIO
RESPONSIVE
ADAPTIVE
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

26. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
PERO EL RWD ES SOLO EL PRINCIPIO
Créditos: Beyond Media Queries: Anatomy of an Adaptive Web Design – Brad Frost

27. ADAPTIVE WEB DESIGN
Se basa en la Mejora Progresiva (Progressive enhancement: PE)
se basa en tres capas:
-Content layer = rich semantic HTML markup
-Presentation layer = CSS and styling
-Client-side / server side scripting layer = JavaScript or
jQuery behaviors
Podríamos definir el Adaptive Web design como aquel que cambiará para ajustarse a
un conjunto de tamaños de pantalla y dispositivos predefinidos.
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
82% de los top 100 Site en Alexa usa algun tipo
de detección de móbiles en el servidor

28. ADAPTIVE WEB DESIGN
Ideal para mejorar la experiencia de
usuario en su dispositivo y no sobrecargar
Servimos el layout y medias especificos para
cada dispositivo
Dispositivo 1
-layout 1, imagenes 1
Dispositivo 2
-layout 2, imagenes 2
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

29. RESS: RESPONSIVE + SERVER SIDE
Detección del navegador
Detección de prestaciones del dispositivo
Mejora progresiva: Imagenes, videos, css
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile CommerceJoomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
AD
A
PTIVE
?
82% de los top 100 Site en Alexa usa algun tipo
de detección de móviles en el servidor

31. RESS: RESPONSIVE + SERVER SIDE
EJEMPLO
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile CommerceJoomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

32. APPs
Notoriedad e imagen de marca
Fidelización con el cliente
Generación de ingresos
Canal de venta
Alta experiencia de usuario
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile CommerceJoomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

33. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ para vuestra web una web
responsive, adaptive, app ?

34. DIFERENCIAS ENTRE WEB - APP
Créditos: Mobile Commerce & Payment – Miriam Peláez
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile CommerceJoomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

35. LA WEBAPP EVOLUCIÓN
Convina lo mejor de los dos mundos
-App nativa para acceso a hardware y experiencia de
usuario
-Web responsive/adaptive para el resto
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile CommerceJoomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

36. Diseño responsive
y adaptive para que la
tienda se adapte a
cualquier dispositivo
Arquitectura
y estructura específica
para cada dispositivo
Contenidos y comunicación enfocada a cada
dispositivo
Desktop Tablet Movil
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

37. Cada aproximación: Responsive, Adaptive, WebApp o Apps
tienes tiene ventajas e inconvenientes
Hay que valorar la mejor opción en cada
proyecto.
Concepto: mobile first
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

38. Una posible aproximación
-Responsive para webs estandars
-Adaptive para webs cuya experiencia de usuario/interacción
sea importante y diferente para cada dispositivo
-Web app, para aplicaciones que requieran acceso hardware y el
resto Web responsive/adaptive
-Apps para fidelización, compras recurrentes, imágen de marca,
acceso a hardware y experiencia
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce

39. Una posible aproximación
-Responsive para webs estandars
-Adaptive para webs cuya experiencia de usuario/interacción
sea importante y diferente para cada dispositivo
-Web app, para aplicaciones que requieran acceso hardware y el
resto Web responsive/adaptive
-Apps para fidelización, compras recurrentes, imágen de marca,
acceso a hardware y experiencia

40. Jordi Catà – jordi.cata@arambee.com
Responsive,
adaptive
...y la tundra (de apps)
JOOMLA + GRACIAS
= JOOMLACIAS