Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
1 recomendación1,789 vistas
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.
Más contenido relacionado
![Alvaro Ramirez-eCommerce Day Santiago Online [Live] Experience](https://cdn.slidesharecdn.com/ss_thumbnails/alvaroramirez-200430160327-thumbnail.jpg?width=560&fit=bounds)
![Francisca Escobar-eCommerce Day Santiago Online [Live] Experience](https://cdn.slidesharecdn.com/ss_thumbnails/franciscaescobar-200430155557-thumbnail.jpg?width=560&fit=bounds)
![Detrás del Backend [phpDay 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/detrasdelbackendnocmnts-150202122910-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
Similar a Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra (20)
Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
- 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à – [email protected] Responsive, adaptive ...y la tundra (de apps) JOOMLA + GRACIAS = JOOMLACIAS