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à

http://www.arambee.com/

http://www.webactualizable.com/

http://www.animalesadopcion.com/

¿ Conoceis el concepto Responsive ?

¿ Y adaptive ?

¿ cuantos developers ?

¿ cuantos diseñadores ?


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, ...


¿ que uso haceis del móvil ?

¿ y de la tablet ?

¿ realizais compras vía móvil/tablet ? Desde donde ?


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


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


–

¿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


piensa en una web a la que hayas accedido con un móvil y/o tablet ...

¿ Que experiencias habeis tenido ?


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


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 !!!



¿ INTERESANTE, NO ?

Como afrontamos la “movilización”, estrategias

●Responsive

●Adaptive

●App

●WebApp


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



¿ como lo veis ?


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...


¿ 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...



PERO EL RWD ES SOLO EL PRINCIPIO

RESPONSIVE

ADAPTIVE



PERO EL RWD ES SOLO EL PRINCIPIO


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.


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


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


APPs

Notoriedad e imagen de marca

Fidelización con el cliente

Generación de ingresos

Canal de venta

Alta experiencia de usuario



¿ para vuestra web una web responsive, adaptive, app ?

DIFERENCIAS ENTRE WEB - APP

Créditos: Mobile Commerce & Payment – Miriam Peláez


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


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


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


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

Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra

Technology

Transcript of Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra