Creare un tema Responsive per Magento con Bootstrap

Click here to load reader

  • date post

    12-Jun-2015
  • Category

    Mobile

  • view

    878
  • download

    1

Embed Size (px)

description

Presentazione realizzata per il primo Meet Magento Italy 2014. Temi trattati: Mobile Commerce, Responsive Web Design, Magento Front End Design, Framework Frontend Foundation e Bootstrap, Media Queries, e il libro Mastering Magento Theme Design disponibile qui: http://www.packtpub.com/mastering-magento-theme-design/book

Transcript of Creare un tema Responsive per Magento con Bootstrap

  • 1. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

2. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 ANDREA SACC @andreasacca - www.andreasacca.it Web Designer & Developer 3. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 ANDREA SACC @andreasacca - www.andreasacca.it Web Designer & Developer Magento Certified Front End Developer 4. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Magento Certified Front End Developer ANDREA SACC @andreasacca - www.andreasacca.it Web Designer & Developer 5. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Limportanza del Mobile Commerce 6. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Acquisti fatti da dispositivi mobili: smartphone o tablet Mobile Commerce 7. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 MLN di 500 400 300 200 100 ANNO 2011 2012 2013 Volume di affari in ITALIA 8. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 MLN di 500 400 300 200 100 ANNO 2011 2012 2013 74 Volume di affari in ITALIA 9. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 MLN di 500 400 300 200 100 ANNO 2011 2012 2013 14474 Volume di affari in ITALIA 10. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 MLN di 500 400 300 200 100 ANNO 2011 2012 2013 510 14474 Volume di affari in ITALIA 11. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Osservatorio eCommerce B2c di Netcomm e della School of Management del Politecnico di Milano http://www.osservatori.net/ecommerce_b2c +254% rispetto al 2012 12. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 E importante avere un sito Mobile Friendly ottimizzato per tutti i dispositivi. 13. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SI MA QUALI? 14. Image Credits: http://goo.gl/ymY37B 15. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Quale soluzione scegliere? 16. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web MobileSito web Mobile QUALE SOLUZIONE SCEGLIERE? 17. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web Mobile Applicazione Sito web Mobile Applicazione QUALE SOLUZIONE SCEGLIERE? 18. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web Mobile Applicazione Sito web RESPONSIVE Sito web Mobile Applicazione QUALE SOLUZIONE SCEGLIERE? 19. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web Mobile Applicazione Sito web RESPONSIVE QUALE SOLUZIONE SCEGLIERE? 20. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Cos il Responsive Web Design? RWD 21. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 E una tecnica di sviluppo grazie alla quale si rende un sito web adattabile a tutti i tipi di dispositivo 22. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 VANTAGGI DEL RWD 23. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori VANTAGGI DEL RWD 24. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori Facilit di aggiornamento VANTAGGI DEL RWD 25. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori Facilit di aggiornamento Sito visibile ovunque VANTAGGI DEL RWD 26. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori Facilit di aggiornamento Sito visibile ovunque Ottimizzazione SEO VANTAGGI DEL RWD 27. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SVANTAGGI DEL RWD 28. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tempi di Caricamento SVANTAGGI DEL RWD 29. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tempi di Caricamento Tempi di progettazione lunghi SVANTAGGI DEL RWD 30. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Alcuni esempi di siti responsive 31. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 A Book Apart http://.abookapart.com 32. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 ChouChou Couture http://chouchoucouture.com 33. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 BookStore Theme dal libro Mastering Magento Theme Design 34. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Emphasis Magento Theme http://goo.gl/HVLGYi 35. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tecniche per il Responsive Web Design 36. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Layout Fluido1 37. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 .container { width:100%; max-width: 960px; margin:0 auto; } Layout Fluido1 38. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 .container larghezza 100% larghezza massima 960px Layout Fluido1 39. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 .main { width:60%; float:left; } .sidebar { width:30%; float:right; } .container larghezza 100% larghezza massima 960px Layout Fluido1 40. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Layout Fluido1 41. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Media Queries2 42. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Cosa sono le Media Queries? 43. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Nuove funzionalit CSS3, che permettono di definire degli stili specifici in base al Media Utilizzato (tv, print, screen)... Media Queries2 44. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 dimensione width, height, max-width, max-height ... ma anche in base a: Media Queries2 45. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 dimensione width, height, max-width, max-height orientamento del device landscape, portrait ... ma anche in base a: Media Queries2 46. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Come utilizzare le Media Queries 47. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Nel codice HTML, nella HEAD... 48. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 @media only screen and(max-width: 400px) { .box {color:#17ACCB;font-size:16px;position: relative; } } ... o nel CSS 49. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Struttura di una Media Query @media only screen Dispositivo Media 50. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Struttura di una Media Query @media only screen and (max-width: 400px) { Dispositivo Media Condizioni Logiche 51. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Struttura di una Media Query @media only screen and (max-width: 400px) { .box {color:#17ACCB;font-size:16px;position: relative; } } Informazioni CSS Dispositivo Media Condizioni Logiche 52. ANDREA SACCA Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Media Query per Smartphone @media only screen and (min-width : 320px) and (max-width : 480px) { /* Styles */ } 53. ANDREA SACCA Creare un tema Responsive per Magent