How to create a Responsive Magento Theme - Meet Magento Italy 2014

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 ANDREA SACCÀ @andreasacca - www.andreasacca.it Web Designer & Developer

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 ANDREA SACCÀ @andreasacca - www.andreasacca.it Web Designer & Developer Magento Certified Front End Developer

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Magento Certified Front End Developer ANDREA SACCÀ @andreasacca - www.andreasacca.it Web Designer & Developer

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 L’importanza del “Mobile Commerce”

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Acquisti fatti da dispositivi mobili: smartphone o tablet Mobile Commerce

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 MLN di € 500 400 300 200 100 ANNO 2011 2012 2013 Volume di affari in ITALIA

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 MLN di € 500 400 300 200 100 ANNO 2011 2012 2013 144 74 Volume di affari in ITALIA

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 MLN di € 500 400 300 200 100 ANNO 2011 2012 2013 510 144 74 Volume di affari in ITALIA

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 E’ importante avere un sito “Mobile Friendly” ottimizzato per tutti i dispositivi.

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SI MA QUALI?

Image Credits: http://goo.gl/ymY37B

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Quale soluzione scegliere?

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web Mobile Sito web Mobile  QUALE SOLUZIONE SCEGLIERE?

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web Mobile Applicazione Sito web Mobile Applicazione   QUALE SOLUZIONE SCEGLIERE?

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web Mobile Applicazione Sito web RESPONSIVE Sito web Mobile Applicazione    QUALE SOLUZIONE SCEGLIERE?

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Sito web Mobile Applicazione Sito web RESPONSIVE    QUALE SOLUZIONE SCEGLIERE?

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Cos’è il Responsive Web Design? RWD

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 VANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori  VANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori Facilità di aggiornamento   VANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori Facilità di aggiornamento Sito visibile ovunque    VANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Costi Inferiori Facilità di aggiornamento Sito visibile ovunque Ottimizzazione SEO     VANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SVANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tempi di Caricamento  SVANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tempi di Caricamento Tempi di progettazione lunghi   SVANTAGGI DEL RWD

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Alcuni esempi di siti responsive

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 A Book Apart http://.abookapart.com

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 ChouChou Couture http://chouchoucouture.com

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 BookStore Theme dal libro Mastering Magento Theme Design

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Emphasis Magento Theme http://goo.gl/HVLGYi

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tecniche per il Responsive Web Design

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Layout Fluido 1

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 .container { width:100%; max-width: 960px; margin:0 auto; } Layout Fluido 1

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 .container larghezza 100% larghezza massima 960px Layout Fluido 1

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 Fluido 1

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Layout Fluido 1

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Media Queries 2

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Cosa sono le Media Queries?

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 Queries 2

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 dimensione width, height, max-width, max-height ... ma anche in base a: Media Queries 2

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 Queries 2

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Come utilizzare le Media Queries

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...

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Struttura di una Media Query @media only screen Dispositivo Media

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Struttura di una Media Query @media only screen and (max-width: 400px) { Dispositivo Media Condizioni Logiche

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Media Query per Smartphone @media only screen and (min-width : 320px) and (max-width : 480px) { /* Styles */ }

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Media Query per Tablet @media only screen and (min-width : 768px) and (max-width : 1024px) { /* Styles */ }

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Orientamento “PORTRAIT” @media only screen and (min-width : 320px) and (orientation : portrait) { /* Styles */ }

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Orientamento “LANDSCAPE” @media only screen and (min-width : 320px) and (orientation : landscape) { /* Styles */ }

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Integrare un Framework “Mobile First”

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 FOUNDATION 5.0 http://foundation.zurb.com

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 BOOTSTRAP 3 http://getbootstrap.com

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Come integrare Bootstrap in un tema Magento

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Scarica i files INTEGRARE BOOTSTRAP NEL TEMA 1

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Scarica i files - Download Bootstrap http://getbootstrap.com INTEGRARE BOOTSTRAP NEL TEMA 1

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Copia i files nella skin del tema INTEGRARE BOOTSTRAP 3 2

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Copia i files nella skin del tema INTEGRARE BOOTSTRAP 3 2 [ROOT] / skin / frontend / [package] / [theme] /

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  

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 

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

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 /

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

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 /

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 INTEGRARE BOOTSTRAP 3 Struttura Base della griglia: 5 Integra la griglia di bootstrap

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 INTEGRARE BOOTSTRAP 3 Struttura Base della griglia: 5 .container Integra la griglia di bootstrap

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 INTEGRARE BOOTSTRAP 3 Struttura Base della griglia: 5 .row .container Integra la griglia di bootstrap

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

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

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

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

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Tips & Tricks

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Helper Classes per nascondere / mostrare elementi

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.

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SENZA

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 SENZA CON

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Testare il Responsive

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 Viewport Resizer Bookmark http://lab.maltewassermann.com/viewport-resizer/

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 “Mastering Magento Theme Design”

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

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 GRAZIE per l’attenzione!

Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14 DOMANDE? andreasacca.it [email protected] @andreasacca   

How to create a Responsive Magento Theme - Meet...

How to create a Responsive Magento Theme - Meet Magento Italy 2014

More Decks by Andrea Saccà

Other Decks in Programming

Featured

Transcript