Creare un tema Responsive per Magento con Bootstrap

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

ANDREA SACCÀ
Magento Certified
Front End Developer

Magento Certified
Front End Developer
ANDREA SACCÀ

L’importanza del
“Mobile Commerce”

Acquisti fatti da dispositivi mobili: smartphone o tablet
Mobile Commerce

MLN di €
500
400
300
200
100
ANNO 2011 2012 2013
Volume di affari in ITALIA

MLN di €
500
400
300
200
100
ANNO 2011 2012 2013
74

MLN di €
500
400
300
200
100
ANNO 2011 2012 2013
14474

MLN di €
500
400
300
200
100
ANNO 2011 2012 2013
510
14474

Osservatorio eCommerce B2c di Netcomm e della School of Management del Politecnico di Milano
http://www.osservatori.net/ecommerce_b2c
+254%
rispetto al 2012

E’ importante
avere un sito
“Mobile Friendly”
ottimizzato per tutti
i dispositivi.

SI MA QUALI?

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

Quale soluzione
scegliere?

Sito web MobileSito web Mobile
QUALE SOLUZIONE SCEGLIERE?

Sito web Mobile
Applicazione
Sito web Mobile
Applicazione



Sito web Mobile
Applicazione
Sito web RESPONSIVE
Sito web Mobile
Applicazione




Sito web Mobile
Applicazione
Sito web RESPONSIVE




Cos’è il
Responsive Web Design?
RWD

E’ una tecnica di sviluppo grazie alla quale
si rende un sito web adattabile
a tutti i tipi di dispositivo

VANTAGGI DEL RWD

Costi Inferiori
VANTAGGI DEL RWD

Costi Inferiori
Facilità di aggiornamento


VANTAGGI DEL RWD

Costi Inferiori
Sito visibile ovunque



VANTAGGI DEL RWD

Costi Inferiori
Sito visibile ovunque
Ottimizzazione SEO




VANTAGGI DEL RWD

SVANTAGGI DEL RWD

Tempi di Caricamento
SVANTAGGI DEL RWD

Tempi di Caricamento
Tempi di progettazione lunghi


SVANTAGGI DEL RWD

Alcuni esempi
di siti responsive

A Book Apart
http://.abookapart.com

ChouChou Couture
http://chouchoucouture.com

BookStore Theme
dal libro Mastering Magento Theme Design

Emphasis Magento Theme
http://goo.gl/HVLGYi

Tecniche per il
Responsive Web Design

Layout Fluido1

.container {
width:100%;
max-width: 960px;
margin:0 auto;
}
Layout Fluido1

.container
larghezza 100%
larghezza massima 960px
Layout Fluido1

.main {
width:60%;
float:left;
}
.sidebar {
width:30%;
float:right;
}
.container
larghezza 100%
larghezza massima 960px
Layout Fluido1

Media Queries2

Cosa sono le
Media Queries?

Nuove funzionalità CSS3,
che permettono di definire degli stili specifici
in base al “Media” Utilizzato
(tv, print, screen)...
Media Queries2

dimensione
width, height, max-width, max-height
... ma anche in base a:
Media Queries2

dimensione
width, height, max-width, max-height
orientamento del device
landscape, portrait
... ma anche in base a:
Media Queries2

Come utilizzare le
Media Queries

@media only screen and(max-width: 400px) {
.box {
color:#17ACCB;
font-size:16px;
position: relative;
}
}
... o nel CSS

Struttura di una Media Query
@media only screen Dispositivo Media

@media only screen
and (max-width: 400px) {
Dispositivo Media
Condizioni Logiche

@media only screen
and (max-width: 400px) {
.box {
color:#17ACCB;
font-size:16px;
position: relative;
}
}
Informazioni CSS
Dispositivo Media
Condizioni Logiche

Media Query per Smartphone
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}

Media Query per Tablet
@media only screen
and (max-width : 1024px) {
/* Styles */
}

Orientamento “PORTRAIT”
@media only screen
and (orientation : portrait) {

/* Styles */
}

Orientamento “LANDSCAPE”
@media only screen
and (orientation : landscape) {

/* Styles */
}

Integrare un
Framework “Mobile First”

FOUNDATION 5.0
http://foundation.zurb.com

BOOTSTRAP 3
http://getbootstrap.com

Come integrare Bootstrap
in un tema Magento

Scarica i files
INTEGRARE BOOTSTRAP NEL TEMA
1

Scarica i files
- Download Bootstrap
1

Scarica i files
- Download Bootstrap
- Download jQuery
http://jQuery.com.com/download
1

Copia i files nella skin del tema
INTEGRARE BOOTSTRAP 3
2

2
[ROOT] / skin / frontend / [package] / [theme] /

Copiare i files nella skin del tema
2
STRUTTURA TEMA MAGENTO
APP
PHTML - XML
SKIN
CSS - JS - Fonts - Immagini
 

js

bootstrap.js
jQuery.min.js
2
js



js

bootstrap.js
jQuery.min.js
bootstrap.min.css
styles.css


2
css
js


 css

<xml>
<default>
<reference name=”head”>
//Inserire qui i CSS e i JS
</reference>
</default>
Dichiara i JS e i CSS nel file local.xml
3
[ROOT] / app /design / frontend / [package] / [theme] / layout /

<action method=”addItem”>
<type>skin_js</type>
<name>js/bootstrap.min.js</name>
</action>
3
JS

<action method=”addItem”>
<type>skin_css</type>
<stylesheet>css/bootstrap.min.css</stylesheet>
</action>
3
CSS

jQuery.noConflict();
jQuery(document).ready(function) {
// inserisci qui i tuoi script jQuery
});
jQuery No Conflict
4
JS

Struttura Base della griglia:
5 Integra la griglia di bootstrap

5
.container
Integra la griglia di bootstrap

5
.row
.container

.container
.row
5
12 colonne

.container
.row
5
12 colonne
{.col-xs-X
.col-sm-X
.col-md-X
.col-lg-X

<section>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4”>SIDEBAR</div>
<div class=”col-md-8”>MAIN</div>
</div>
</div>
</section>
5

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

Scarica Bootstrap e jQuery
Copia i Files nella SKIN del tema
Risolvi conflitto jQuery - Prototype
Integra classi e le griglie di Bootstrap
RICAPITOLANDO...
1
2
3
4
5

Tips & Tricks

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

Helper Classes per
nascondere / mostrare elementi

Utilizzo del META “viewport”
Indica al dispositivo di usare
la sua larghezza effettiva
per visualizzare il sito.

SENZA

SENZA CON

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

Testare il Responsive

Viewport Resizer Bookmark
http://lab.maltewassermann.com/viewport-resizer/

“Mastering Magento
Theme Design”

Mastering Magento
Theme Design
300 pagine
Lingua Inglese
Esempi pratici
Autore: Andrea Saccà



http://goo.gl/Ti3MOJ

GRAZIE
per l’attenzione!

DOMANDE?
andreasacca.it info@andreasacca.it @andreasacca
  

Creare un tema Responsive per Magento con Bootstrap

Recommended

Recommended

More Related Content

Similar to Creare un tema Responsive per Magento con Bootstrap

Similar to Creare un tema Responsive per Magento con Bootstrap (20)

Creare un tema Responsive per Magento con Bootstrap