Due settimane fa ho iniziato a parlare di design responsivo per la posta elettronica: date le prime indicazioni di massima, qualcuno avrà pensato che alla guida mancasse “qualcosa”. Quel qualcosa è il codice — ovvero, quanto concretamente dev’essere inserito nei sorgenti delle e-mail. Oggi illustrerò, passaggio per passaggio, quali elementi devono essere inseriti e come. Eviterò di dilungarmi sugli aspetti che contraddistinguono le diverse versioni di HTML e CSS, concentrandomi sugli elementi essenziali che non possono mancare.

<!DOCTYPE html>
<html dir="ltr" lang="it-IT">

Come per tutte le pagine web, è importante la Document Type Declaration (DTD): ho scelto quella di HTML5 perché è retro-compatibile e non implica l’utilizzo di nuovi elementi o attributi e a <html> ho aggiunto soltanto i marcatori che identificano la lingua italiana.

<head>
<style>
body {
background-color: #fff;
color: #000;
}
div {
width: 100%;
}
@media only screen and (max-width: 640px) {
div {
width: 50%;
}
}
</style>
<head>

Ecco l’integrazione dei CSS: non dovrebbero essere controllati da un file esterno, bensì scritti direttamente nella <head> (che non ha bisogno d’includere meta-dati) dove usare le media query. Potete omettere il <title> oppure impostarlo come l’oggetto del messaggio.

<body>
<div>
<p>hello, world</p>

Il corpo del messaggio è formattato come qualunque altra pagina web: ricordatevi d’escludere JavaScript e impostate delle unità proporzionali nei CSS per evitare dei problemi di visualizzazione. Non è possibile correggere i margini o le dimensioni jQuery, ad esempio.

<img alt="foo bar" src="http://domain.ext/image.jpg" />
</div>
</body>
</html>

Tanto nei CSS, quanto in HTML le immagini devono essere inserite con l’indirizzo completo: sarebbe impossibile recuperarle da un percorso relativo. Omettete height="" e width="" e impostate le dimensioni esclusivamente negli stili, per rendere il layout più “fluido”.

Il codice d’esempio è piuttosto banale e – se volete vedere la corretta indentazione – dovete consultare i sorgenti di questa pagina, ahimè. L’assenza di JavaScript impone un ricorso esclusivo alle media query e la riduzione del markup all’essenziale: non potete modificare il Document Object Model (DOM) in base al client di posta elettronica dell’utente. Terminata l’impaginazione, dovete comunque spedire la e-mail in un doppio formato e la settimana prossima affronteremo la funzione mail() di PHP per riassumere il procedimento.

Photo Credit: Webbfredag via Compfight (CC)