Embed Size (px)
Citation preview
SEND è organizzato da
#SEND2014
EMAIL E MOBILE: TUTTO QUELLO CHE DEVI SAPERE
SUL RESPONSIVE DESIGN
Fabio De Capitani
Head of Production
Sabrina Di Giorgio
Team Leader Art Director
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
I VOSTRI UTENTI LEGGONO LE EMAIL SEMPRE PIÙ DA
DISPOSITIVI MOBILE
Piattaforma ContactLab aprile 2011-ottobre 2014
Le aperture mobile sono in continua crescita rispetto alle aperture desktop:
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
La qualità della visualizzazione dell’email da parte
dell’utente è uno dei driver verso l’azione
Una visualizzazione non corretta può nuocere al
brand
“If an email does not display correctly, 71,2% will
delete it immediately” BlueHornet “Consumer Views of Email Marketing” (2014)
I BRAND DEVONO FACILITARE LA FRUIZIONE MOBILE
DELLE EMAIL
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
Adaptive
Fluid Standard (fixed)
COME?
Responsive
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
STANDARD (FIXED): dimensioni fisse
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
MOBILE FRIENDLY: visualizzazione ottimizzata ma non si
adatta al device
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
FLUID: resize in funzione del dispositivo
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
ADAPTIVE: stacking dei moduli in funzione del dispositivo
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
RESPONSIVE: i contenuti si adattano al dispositivo
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
Una combinazione di ADAPTIVE, MOBILE FRIENDLY e FLUID
Struttura, testi e immagini si adattano alle dimensioni del display del device utilizzato in
termini di:
• Stacking: riorganizzazione dei blocchi in colonna con comportamenti a scelta
• Ridimensionamento immagini
• Testo che si adatta alla larghezza del display
Il messaggio varia tra desktop e mobile
• Mostrando e nascondendo contenuti
• Mostrando immagini diverse
Visualizzazione ultra compatibile: corretta su tutti i principali device e persino su BlackBerry!
RESPONSIVE: UN COMPORTAMENTO REATTIVO
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
UN RIPENSAMENTO DELLA FRUIZIONE DELL’EMAIL
Il mouse diventa un dito: pensare Touch
Pre-header
Subject brevi
Immagini ad alta definizione per display Retina
Concisione: eliminare i contenuti a bassa priorità
Testi con dimensioni maggiori di 14 pt
Contrasto cromatico
Integrazioni col dispositivo mobile:
• Telefonare
• Aggiungere appuntamenti al calendario
• Interagire con le App installate
• Inviare messaggi diretti con Whatsapp
Minimo = 30 px
Raccomandato = 45 px
Margine = 15 px
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
EMAIL RESPONSIVE… CON LANDING PAGE RESPONSIVE
Email Landing con form di registrazione
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
UNA USER EXPERIENCE COERENTE
Email Website
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
IL RESPONSIVE PONTE TRA OFFLINE E ONLINE
Landing con form di registrazione Thank you email
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
IL PAGEBUILDER ORA È RESPONSIVE!
Struttura studiata ottimizzata secondo best practice
Customizzazione per soddisfare le brand guidelines
20 moduli con grande varietà di combinazioni
Add ons attivabili:
• Feed RSS
• Box condizionali in base ai contenuti del db
• Contenuti video visibili direttamente nelle email (dove
supportati)
Anteprima di visualizzazione desktop / mobile al momento
dell’editing
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
MASTER LAYOUT
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
INVII EFFETTIVI
un evento organizzato da #SEND2014
This document is the intellectual property of ContactLab and was created for demonstration purposes only. It may not be modified, organized or reutilized in any way without the express written permission of the rightful owner.
GRAZIE Sabrina Di Giorgio - [email protected]
Fabio De Capitani - [email protected]
