creare un tema responsive per magento con bootstrap
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/bookTRANSCRIPT
![Page 1: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/1.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
![Page 2: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/2.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
ANDREA SACCÀ
@andreasacca - www.andreasacca.it
Web Designer & Developer
![Page 3: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/3.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
ANDREA SACCÀ
@andreasacca - www.andreasacca.it
Web Designer & Developer
Magento CertifiedFront End Developer
![Page 4: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/4.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Magento CertifiedFront End Developer
ANDREA SACCÀ
@andreasacca - www.andreasacca.it
Web Designer & Developer
![Page 5: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/5.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
L’importanza del“Mobile Commerce”
![Page 6: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/6.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Acquisti fatti da dispositivi mobili: smartphone o tabletMobile Commerce
![Page 7: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/7.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 8: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/8.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 9: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/9.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 10: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/10.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 11: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/11.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Osservatorio eCommerce B2c di Netcomm e della School of Management del Politecnico di Milanohttp://www.osservatori.net/ecommerce_b2c
+254%rispetto al 2012
![Page 12: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/12.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
E’ importanteavere un sito“Mobile Friendly”ottimizzato per tuttii dispositivi.
![Page 13: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/13.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SI MA QUALI?
![Page 14: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/14.jpg)
Image Credits: http://goo.gl/ymY37B
![Page 15: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/15.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Quale soluzionescegliere?
![Page 16: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/16.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito web MobileSito web Mobile
QUALE SOLUZIONE SCEGLIERE?
![Page 17: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/17.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito web Mobile
Applicazione
Sito web Mobile
Applicazione
QUALE SOLUZIONE SCEGLIERE?
![Page 18: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/18.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito web Mobile
Applicazione
Sito web RESPONSIVE
Sito web Mobile
Applicazione
QUALE SOLUZIONE SCEGLIERE?
![Page 19: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/19.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito web Mobile
Applicazione
Sito web RESPONSIVE
QUALE SOLUZIONE SCEGLIERE?
![Page 20: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/20.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cos’è ilResponsive Web Design?
RWD
![Page 21: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/21.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
E’ una tecnica di sviluppo grazie alla qualesi rende un sito web adattabile
a tutti i tipi di dispositivo
![Page 22: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/22.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
VANTAGGI DEL RWD
![Page 23: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/23.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Costi Inferiori
VANTAGGI DEL RWD
![Page 24: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/24.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Costi Inferiori
Facilità di aggiornamento
VANTAGGI DEL RWD
![Page 25: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/25.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Costi Inferiori
Facilità di aggiornamento
Sito visibile ovunque
VANTAGGI DEL RWD
![Page 26: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/26.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Costi Inferiori
Facilità di aggiornamento
Sito visibile ovunque
Ottimizzazione SEO
VANTAGGI DEL RWD
![Page 27: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/27.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SVANTAGGI DEL RWD
![Page 28: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/28.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Tempi di Caricamento
SVANTAGGI DEL RWD
![Page 29: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/29.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Tempi di Caricamento
Tempi di progettazione lunghi
SVANTAGGI DEL RWD
![Page 30: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/30.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Alcuni esempidi siti responsive
![Page 31: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/31.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
A Book Aparthttp://.abookapart.com
![Page 32: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/32.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
ChouChou Couturehttp://chouchoucouture.com
![Page 33: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/33.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
BookStore Themedal libro Mastering Magento Theme Design
![Page 34: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/34.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Emphasis Magento Theme http://goo.gl/HVLGYi
![Page 35: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/35.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Tecniche per ilResponsive Web Design
![Page 36: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/36.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Layout Fluido1
![Page 37: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/37.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.container { width:100%; max-width: 960px; margin:0 auto;}
Layout Fluido1
![Page 38: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/38.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.containerlarghezza 100%
larghezza massima 960px
Layout Fluido1
![Page 39: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/39.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.main { width:60%; float:left;}
.sidebar { width:30%; float:right;}
.containerlarghezza 100%
larghezza massima 960px
Layout Fluido1
![Page 40: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/40.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Layout Fluido1
![Page 41: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/41.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Media Queries2
![Page 42: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/42.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cosa sono leMedia Queries?
![Page 43: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/43.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 44: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/44.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
dimensionewidth, height, max-width, max-height
... ma anche in base a:
Media Queries2
![Page 45: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/45.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
dimensionewidth, height, max-width, max-height
orientamento del devicelandscape, portrait
... ma anche in base a:
Media Queries2
![Page 46: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/46.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Come utilizzare leMedia Queries
![Page 47: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/47.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<link rel=”stylesheet” media=”only screen and(max-width: 400px)” href=”mobile.css”/>
Nel codice HTML, nella HEAD...
![Page 48: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/48.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 49: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/49.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Struttura di una Media Query
@media only screen Dispositivo Media
![Page 50: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/50.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 51: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/51.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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
![Page 52: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/52.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet 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*/
}
![Page 53: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/53.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Media Query per Tablet
@media only screen and (min-width : 768px) and (max-width : 1024px) {
/*Styles*/
}
![Page 54: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/54.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Orientamento “PORTRAIT”
@media only screen and (min-width : 320px) and (orientation : portrait) { /*Styles*/
}
![Page 55: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/55.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Orientamento “LANDSCAPE”
@media only screen and (min-width : 320px) and (orientation : landscape) { /*Styles*/
}
![Page 56: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/56.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Integrare unFramework “Mobile First”
![Page 57: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/57.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
FOUNDATION 5.0http://foundation.zurb.com
![Page 58: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/58.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
BOOTSTRAP 3http://getbootstrap.com
![Page 59: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/59.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Come integrare Bootstrapin un tema Magento
![Page 60: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/60.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scarica i files
INTEGRARE BOOTSTRAP NEL TEMA
1
![Page 61: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/61.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scarica i files
- Download Bootstrap http://getbootstrap.com
INTEGRARE BOOTSTRAP NEL TEMA
1
![Page 62: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/62.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scarica i files
- Download Bootstrap http://getbootstrap.com
- Download jQuery http://jQuery.com.com/download
INTEGRARE BOOTSTRAP NEL TEMA
1
![Page 63: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/63.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Copia i files nella skin del tema
INTEGRARE BOOTSTRAP 3
2
![Page 64: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/64.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Copia i files nella skin del tema
INTEGRARE BOOTSTRAP 3
2
[ROOT] / skin / frontend / [package] / [theme] /
![Page 65: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/65.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Copiare i files nella skin del tema
INTEGRARE BOOTSTRAP 3
2
[ROOT] / skin / frontend / [package] / [theme] /
STRUTTURA TEMA MAGENTO
APP PHTML - XML
SKIN CSS - JS - Fonts - Immagini
![Page 66: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/66.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
js
bootstrap.js
jQuery.min.js
Copia i files nella skin del tema
INTEGRARE BOOTSTRAP 3
2
[ROOT] / skin / frontend / [package] / [theme] /
js
![Page 67: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/67.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
js
bootstrap.js
jQuery.min.js
bootstrap.min.css
styles.css
Copia i files nella skin del tema
INTEGRARE BOOTSTRAP 3
2
[ROOT] / skin / frontend / [package] / [theme] /
css
js
css
![Page 68: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/68.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<xml><default> <reference name=”head”>
//Inserire qui i CSS e i JS
</reference></default>
Dichiara i JS e i CSS nel file local.xml
INTEGRARE BOOTSTRAP 3
3[ROOT] / app /design / frontend / [package] / [theme] / layout /
![Page 69: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/69.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<action method=”addItem”> <type>skin_js</type> <name>js/bootstrap.min.js</name></action>
Dichiara i JS e i CSS nel file local.xml
INTEGRARE BOOTSTRAP 3
3[ROOT] / app /design / frontend / [package] / [theme] / layout /
JS
![Page 70: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/70.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<action method=”addItem”> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet></action>
Dichiara i JS e i CSS nel file local.xml
INTEGRARE BOOTSTRAP 3
3
CSS
[ROOT] / app /design / frontend / [package] / [theme] / layout /
![Page 71: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/71.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
jQuery.noConflict();
jQuery(document).ready(function){
//inserisciquiituoiscriptjQuery
});
jQuery No Conflict
INTEGRARE BOOTSTRAP 3
4
JS
![Page 72: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/72.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
INTEGRARE BOOTSTRAP 3
Struttura Base della griglia:
5 Integra la griglia di bootstrap
![Page 73: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/73.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
INTEGRARE BOOTSTRAP 3
Struttura Base della griglia:
5
.container
Integra la griglia di bootstrap
![Page 74: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/74.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
INTEGRARE BOOTSTRAP 3
Struttura Base della griglia:
5
.row
.container
Integra la griglia di bootstrap
![Page 75: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/75.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.container
.row
INTEGRARE BOOTSTRAP 3
Struttura Base della griglia:
5
12 colonne
Integra la griglia di bootstrap
![Page 76: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/76.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.container
.row
INTEGRARE BOOTSTRAP 3
Struttura Base della griglia:
5
12 colonne { .col-xs-X.col-sm-X.col-md-X.col-lg-X
Integra la griglia di bootstrap
![Page 77: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/77.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Integra la griglia di bootstrap
INTEGRARE BOOTSTRAP 3
<section> <divclass=”container”> <divclass=”row”> <divclass=”col-md-4”>SIDEBAR</div> <divclass=”col-md-8”>MAIN</div> </div> </div></section>
Struttura Base della griglia:
5
![Page 78: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/78.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Integra la griglia di bootstrap
INTEGRARE BOOTSTRAP 3
... <divclass=”container”> <divclass=”row”> <divclass=”col-md-4”> <?php echo $this->getChild(‘left‘)?> </div> <divclass=”col-md-8”> <?php echo $this->getChild(‘main‘)?> </div> </div> </div>...
Applicata al file strutturale 2columns-left.phtml
5
![Page 79: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/79.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scarica Bootstrap e jQuery
Copia i Files nella SKIN del tema
Dichiara i JS e i CSS nel file local.xml
Risolvi conflitto jQuery - Prototype
Integra classi e le griglie di Bootstrap
RICAPITOLANDO...
INTEGRARE BOOTSTRAP 3
1
2
3
4
5
![Page 80: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/80.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Tips & Tricks
![Page 81: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/81.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Immagini Responsive
SENZA CON
class=”img-responsive”
Loremipsumdolorsitamet,consecteturadi-pisicingelit
Loremipsumdolorsitamet,consecteturadi-pisicingelit
![Page 82: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/82.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Helper Classes pernascondere / mostrare elementi
![Page 83: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/83.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Utilizzo del META “viewport”
Indica al dispositivo di usarela sua larghezza effettiva
per visualizzare il sito.
![Page 84: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/84.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SENZA
![Page 85: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/85.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SENZA CON
![Page 86: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/86.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Utilizzo del META “viewport”
<metaname=”viewport”content=”width=device-width, initial-scale=1, user-scalable=no”>
da inserire nella <head> del tema, nel file head.phtml
![Page 87: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/87.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Testare il Responsive
![Page 88: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/88.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Viewport Resizer Bookmarkhttp://lab.maltewassermann.com/viewport-resizer/
![Page 89: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/89.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Viewport Resizer Bookmarkhttp://lab.maltewassermann.com/viewport-resizer/
![Page 90: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/90.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Viewport Resizer Bookmarkhttp://lab.maltewassermann.com/viewport-resizer/
![Page 91: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/91.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
“Mastering MagentoTheme Design”
![Page 92: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/92.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Mastering Magento Theme Design
300 pagine
Lingua Inglese
Esempi pratici
Autore: Andrea Saccà
http://goo.gl/Ti3MOJ
![Page 93: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/93.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
GRAZIEper l’attenzione!
![Page 94: Creare un tema Responsive per Magento con Bootstrap](https://reader034.vdocuments.site/reader034/viewer/2022052411/557ae7c8d8b42a590b8b5525/html5/thumbnails/94.jpg)
ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
DOMANDE?
andreasacca.it [email protected] @andreasacca