Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
-
Upload
cata-castillo -
Category
Technology
-
view
424 -
download
1
description
Transcript of Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
Jordi Catà – arambee.com - @jordicata
Responsive, adaptive
...y la tundra (de apps)
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à
¿ Conoceis el concepto Responsive ?
¿ Y adaptive ?
¿ cuantos developers ?
¿ cuantos diseñadores ?
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
NO ES UNA CHARLA TÉCNICA, ... al menos lo interaré
HABLAREMOS/DEBATIREMOS SOBRE
Tendencias mobile...
“Conceptos” sobre Estrategias de “movilización”: Responsive, adaptive, WebApp, App, ...
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ 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
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 crecimiento de 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
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
90 cm es la distancia máxima entre usuario y su móvil
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
–
¿Desde dónde se compra?40% sala de estar23% dormitorio19% cocina14% exterior10% baño
63% compra via tables -> En 2017 subirá hasta el
78%
TENDENCIAS ESPAÑA
En España se preve un crecimientoanual 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
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
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
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
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ INTERESANTE, NO ?
Como afrontamos la “movilización”, estrategias
●Responsive
●Adaptive
●App
●WebApp
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
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
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ como lo veis ?
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...
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...
RESPONSIVE WEB DESIGN: 1W– N DISPOSITIVOS
WEB
500KB para todos los dispositivos !!!!
Créditos: Designing for mobile devices – Ester Serrano
UNA WEB PARA GOVERNARLOS A TODOS...
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ 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
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
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
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
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
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 Commerce Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
ADAPTIVE ?
82% de los top 100 Site en Alexa usa algun tipo de detección de móviles en el servidor
RESS: RESPONSIVE + SERVER SIDE
EJEMPLO
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
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 Commerce Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
¿ para vuestra web una web responsive, adaptive, app ?
DIFERENCIAS ENTRE WEB - APP
Créditos: Mobile Commerce & Payment – Miriam Peláez
Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
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 Commerce Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
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
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
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
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
Jordi Catà – [email protected]
Responsive, adaptive
...y la tundra (de apps)
JOOMLA + GRACIAS= JOOMLACIAS