Creare un tema Responsive per Magento con Bootstrap

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

ANDREA SACCÀ

Magento CertifiedFront End Developer

ANDREA SACCÀ

L’importanza del“Mobile Commerce”

Acquisti fatti da dispositivi mobili: smartphone o tabletMobile Commerce

MLN di €

ANNO 2011 2012 2013

Volume di affari in ITALIA

MLN di €

ANNO 2011 2012 2013

MLN di €

ANNO 2011 2012 2013

MLN di €

ANNO 2011 2012 2013

Osservatorio eCommerce B2c di Netcomm e della School of Management del Politecnico di Milanohttp://www.osservatori.net/ecommerce_b2c

+254%rispetto al 2012

E’ importanteavere un sito“Mobile Friendly”ottimizzato per tuttii dispositivi.

SI MA QUALI?

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

Quale soluzionescegliere?

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’è ilResponsive Web Design?

E’ una tecnica di sviluppo grazie alla qualesi 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 esempidi siti responsive

A Book Aparthttp://.abookapart.com

ChouChou Couturehttp://chouchoucouture.com

BookStore Themedal libro Mastering Magento Theme Design

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

Tecniche per ilResponsive Web Design

Layout Fluido1

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

Layout Fluido1

.containerlarghezza 100%

larghezza massima 960px

Layout Fluido1

.main { width:60%; float:left;}

.sidebar { width:30%; float:right;}

.containerlarghezza 100%

larghezza massima 960px

Layout Fluido1

Media Queries2

Cosa sono leMedia Queries?

Nuove funzionalità CSS3,che permettono di definire degli stili specifici

in base al “Media” Utilizzato(tv, print, screen)...

Media Queries2

dimensionewidth, height, max-width, max-height

... ma anche in base a:

Media Queries2

dimensionewidth, height, max-width, max-height

orientamento del devicelandscape, portrait

... ma anche in base a:

Media Queries2

Come utilizzare leMedia Queries

Nel codice HTML, nella HEAD...

@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 (min-width : 768px) and (max-width : 1024px) {

/*Styles*/

Orientamento “PORTRAIT”

@media only screen and (min-width : 320px) and (orientation : portrait) { /*Styles*/

Orientamento “LANDSCAPE”

@media only screen and (min-width : 320px) and (orientation : landscape) { /*Styles*/

Integrare unFramework “Mobile First”

FOUNDATION 5.0http://foundation.zurb.com

BOOTSTRAP 3http://getbootstrap.com

Come integrare Bootstrapin un tema Magento

Scarica i files

INTEGRARE BOOTSTRAP NEL TEMA

Scarica i files

- Download Bootstrap http://getbootstrap.com

Scarica i files

- Download Bootstrap http://getbootstrap.com

- Download jQuery http://jQuery.com.com/download

Copia i files nella skin del tema

INTEGRARE BOOTSTRAP 3

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

Copiare i files nella skin del tema

STRUTTURA TEMA MAGENTO

APP PHTML - XML

SKIN CSS - JS - Fonts - Immagini

bootstrap.js

jQuery.min.js

bootstrap.js

jQuery.min.js

bootstrap.min.css

styles.css

//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[ROOT] / app /design / frontend / [package] / [theme] / layout /

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

[ROOT] / app /design / frontend / [package] / [theme] / layout /

jQuery.noConflict();

jQuery(document).ready(function){

//inserisciquiituoiscriptjQuery

jQuery No Conflict

Struttura Base della griglia:

5 Integra la griglia di bootstrap

.container

Integra la griglia di bootstrap

.container

12 colonne

.container

12 colonne { .col-xs-X.col-sm-X.col-md-X.col-lg-X

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

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

Scarica Bootstrap e jQuery

Copia i Files nella SKIN del tema

Risolvi conflitto jQuery - Prototype

Integra classi e le griglie di Bootstrap

RICAPITOLANDO...

Tips & Tricks

Immagini Responsive

SENZA CON

class=”img-responsive”

Loremipsumdolorsitamet,consecteturadi-pisicingelit

Helper Classes pernascondere / mostrare elementi

Utilizzo del META “viewport”

Indica al dispositivo di usarela sua larghezza effettiva

per visualizzare il sito.

SENZA CON

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

Testare il Responsive

Viewport Resizer Bookmarkhttp://lab.maltewassermann.com/viewport-resizer/

“Mastering MagentoTheme Design”

Mastering Magento Theme Design

300 pagine

Lingua Inglese

Esempi pratici

Autore: Andrea Saccà

http://goo.gl/Ti3MOJ

GRAZIEper l’attenzione!

DOMANDE?

andreasacca.it info@andreasacca.it @andreasacca

Creare un tema Responsive per Magento con Bootstrap

Mobile

Transcript of Creare un tema Responsive per Magento con Bootstrap

Applicazioni web e web design responsive

Magento: Oltre la configurazione standard di Google Analytics

Workshop - Sviluppare un e-commerce con Magento

Responsive Web Design - GiovanniResponsive Web Design Realizzazione di pagine web e interfacce adattive con HTML5, CSS3 e la libreria BOOTSTRAP Unità Didattica UD02: Esempi di layout

Autoscaling Magento in the cloud

RESPONSIVE IMAGES · RESPONSIVE IMAGES CR E ATE 3. @chumillas srcset=“large.jpg 1440w, ...

RESPONSIVE WEB DESIGNtokolokomedia.com/files/93sample-bootstrap.pdf · 2016-01-06 · RESPONSIVE WEB DESIGN dengan PHP & BOOTSTRAP Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)

Come sviluppare un e-commerce con Magento

Strumenti di automazione in Magento 2

Introduzione a Twitter Bootstrap

Creare temi custom con _s, Bootstrap e LESS

Cliente soddisfatto, cliente che torna - Meet Magento 2016

Responsive content strategy

Supporting Information Responsive Micellar System

Photothermal-responsive nanosized hybrid polymersome as ... · Photothermal-responsive nanosized hybrid polymersome as versatile therapeutics codelivery nanovehicle for effective

Responsive content

Revenue Responsive

Stile CSS Web Responsive con Bootstrap...2 2. HEADER L’header, ovvero la sezione di pagina che compare in alto è di colore blu chiaro e contiene al suo interno il Logo del sito

Grids com Bootstrap 3

Focused Responsive Credible Visionary