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

1,138 views

Published on

En esta charla realizada en el Joomla!Day 2013 Albacete, Hablo sobre Responsive, Adaptive , apps a nivel conceptual con el objetivo de diferenciar las diferentes técnicas para adaptar la web a los diferentes dispositivos.

El incremento de acceso a webs vía dispositivos móviles está en aumento. El ratio de conversión de compras vía app desde tableta es más alto que vía ordenador. Las webs tienden a ser multidispositivo: la misma web se puede visualizar en ordenador, móvil, tablet, Smart TV.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,138
On SlideShare
0
From Embeds
0
Number of Embeds
598
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Jordi Catà – arambee.com - @jordicata Responsive, adaptive ...y la tundra (de apps)
  2. 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. 3. ¿ Conoceis el concepto Responsive ? ¿ Y adaptive ? ¿ cuantos developers ? ¿ cuantos diseñadores ? Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
  4. 4. NO ES UNA CHARLA TÉCNICA, ... al menos lo interaré
  5. 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. 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. 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. 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. 9. 90 cm es la distancia máxima entre usuario y su móvil Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
  10. 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. 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. 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. 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
  14. 14. 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
  15. 15. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce ¿ INTERESANTE, NO ?
  16. 16. Como afrontamos la “movilización”, estrategias ● Responsive ● Adaptive ● App ● WebApp Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
  17. 17. 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
  18. 18. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce ¿ como lo veis ?
  19. 19. 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...
  20. 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. 21. RESPONSIVE WEB DESIGN: 1W– N DISPOSITIVOS WEB 500KB para todos los dispositivos !!!!
  22. 22. Créditos: Designing for mobile devices – Ester Serrano UNA WEB PARA GOVERNARLOS A TODOS... Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
  23. 23. ¿ 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. RESS: RESPONSIVE + SERVER SIDE EJEMPLO Joomla! Day Albacete – spain 2013 Arambee.com: Mobile CommerceJoomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce
  30. 30. 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
  31. 31. Joomla! Day Albacete – spain 2013 Arambee.com: Mobile Commerce ¿ para vuestra web una web responsive, adaptive, app ?
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Jordi Catà – jordi.cata@arambee.com Responsive, adaptive ...y la tundra (de apps) JOOMLA + GRACIAS = JOOMLACIAS

×