Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
ANDR...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
ANDR...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Mage...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
L’im...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Acqu...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
MLN ...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
MLN ...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
MLN ...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
MLN ...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Osse...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
E’ i...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SI M...
Image Credits: http://goo.gl/ymY37B
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Qual...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Sito...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cos’...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
E’ u...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
VANT...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cost...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cost...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cost...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cost...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SVAN...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Temp...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Temp...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Alcu...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
A Bo...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Chou...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Book...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Emph...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Tecn...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Layo...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.con...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.con...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.mai...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Layo...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Medi...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Cosa...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Nuov...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
dime...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
dime...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Come...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<lin...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
@med...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Stru...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Stru...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Stru...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Medi...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Medi...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Orie...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Orie...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Inte...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
FOUN...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
BOOT...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Come...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scar...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scar...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scar...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Copi...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Copi...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Copi...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
	js
...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
	js
...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<xml...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<act...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
<act...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
jQue...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
INTE...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
INTE...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
INTE...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.con...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
.con...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Inte...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Inte...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Scar...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Tips...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Imma...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Help...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Util...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SENZA
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
SENZ...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Util...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Test...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
View...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
View...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
View...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
“Mas...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
Mast...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
GRAZ...
ANDREA SACCA’ Creare un tema Responsive per Magento
Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
DOMA...
Upcoming SlideShare
Loading in …5
×

Creare un tema Responsive per Magento con Bootstrap

14,322 views

Published on

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

Published in: Mobile
  • Be the first to comment

Creare un tema Responsive per Magento con Bootstrap

  1. 1. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14
  2. 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. 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. 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. 5. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 L’importanza del “Mobile Commerce”
  6. 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. 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. 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. 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. 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. 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. 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. 13. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SI MA QUALI?
  14. 14. Image Credits: http://goo.gl/ymY37B
  15. 15. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Quale soluzione scegliere?
  16. 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. 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. 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. 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. 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. 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. 22. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 VANTAGGI DEL RWD
  23. 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. 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. 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. 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. 27. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SVANTAGGI DEL RWD
  28. 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. 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. 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. 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. 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. 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. 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. 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. 36. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Layout Fluido1
  37. 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. 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. 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. 40. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Layout Fluido1
  41. 41. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Media Queries2
  42. 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. 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. 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. 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. 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. 47. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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...
  48. 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. 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. 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. 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. 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. 53. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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 */ }
  54. 54. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Orientamento “PORTRAIT” @media only screen and (min-width : 320px) and (orientation : portrait) { /* Styles */ }
  55. 55. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Orientamento “LANDSCAPE” @media only screen and (min-width : 320px) and (orientation : landscape) { /* Styles */ }
  56. 56. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Integrare un Framework “Mobile First”
  57. 57. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 FOUNDATION 5.0 http://foundation.zurb.com
  58. 58. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 BOOTSTRAP 3 http://getbootstrap.com
  59. 59. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Come integrare Bootstrap in un tema Magento
  60. 60. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Scarica i files INTEGRARE BOOTSTRAP NEL TEMA 1
  61. 61. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Scarica i files - Download Bootstrap http://getbootstrap.com INTEGRARE BOOTSTRAP NEL TEMA 1
  62. 62. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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
  63. 63. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Copia i files nella skin del tema INTEGRARE BOOTSTRAP 3 2
  64. 64. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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] /
  65. 65. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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  
  66. 66. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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 
  67. 67. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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
  68. 68. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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 /
  69. 69. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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
  70. 70. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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 /
  71. 71. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 jQuery.noConflict(); jQuery(document).ready(function) { // inserisci qui i tuoi script jQuery }); jQuery No Conflict INTEGRARE BOOTSTRAP 3 4 JS
  72. 72. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 INTEGRARE BOOTSTRAP 3 Struttura Base della griglia: 5 Integra la griglia di bootstrap
  73. 73. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 INTEGRARE BOOTSTRAP 3 Struttura Base della griglia: 5 .container Integra la griglia di bootstrap
  74. 74. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 INTEGRARE BOOTSTRAP 3 Struttura Base della griglia: 5 .row .container Integra la griglia di bootstrap
  75. 75. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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
  76. 76. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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
  77. 77. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Integra la griglia di bootstrap INTEGRARE BOOTSTRAP 3 <section> <div class=”container”> <div class=”row”> <div class=”col-md-4”>SIDEBAR</div> <div class=”col-md-8”>MAIN</div> </div> </div> </section> Struttura Base della griglia: 5
  78. 78. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Integra la griglia di bootstrap INTEGRARE BOOTSTRAP 3 ... <div class=”container”> <div class=”row”> <div class=”col-md-4”> <?php echo $this->getChild(‘left‘)?> </div> <div class=”col-md-8”> <?php echo $this->getChild(‘main‘)?> </div> </div> </div> ... Applicata al file strutturale 2columns-left.phtml 5
  79. 79. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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
  80. 80. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tips & Tricks
  81. 81. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Immagini Responsive SENZA CON class=”img-responsive” Lorem ipsum dolor sit amet, consectetur adi- pisicing elit Lorem ipsum dolor sit amet, consectetur adi- pisicing elit
  82. 82. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Helper Classes per nascondere / mostrare elementi
  83. 83. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Utilizzo del META “viewport” Indica al dispositivo di usare la sua larghezza effettiva per visualizzare il sito.
  84. 84. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SENZA
  85. 85. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SENZA CON
  86. 86. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Utilizzo del META “viewport” <meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”> da inserire nella <head> del tema, nel file head.phtml
  87. 87. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Testare il Responsive
  88. 88. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Viewport Resizer Bookmark http://lab.maltewassermann.com/viewport-resizer/
  89. 89. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Viewport Resizer Bookmark http://lab.maltewassermann.com/viewport-resizer/
  90. 90. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Viewport Resizer Bookmark http://lab.maltewassermann.com/viewport-resizer/
  91. 91. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 “Mastering Magento Theme Design”
  92. 92. ANDREA SACCA’ Creare un tema Responsive per Magento Meet 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
  93. 93. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 GRAZIE per l’attenzione!
  94. 94. ANDREA SACCA’ Creare un tema Responsive per Magento Meet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 DOMANDE? andreasacca.it info@andreasacca.it @andreasacca   

×