L'email può essere reattiva?

8

Lo adori o lo odi, non si può negare la popolarità delle e-mail HTML. E, come il web precedente, la posta in arrivo è diventata ufficialmente mobile, con oltre il 50 percento di e-mail aperte sui dispositivi mobili.

Quindi l'e-mail può davvero essere reattiva considerando come succhiare l'email HTML?

html responsive-design

— Riad Kanane
fonte

Non dipenderebbe dall'applicazione e-mail, per lo più il modulo e-mail web impedirebbe il tuo obiettivo mentre si avvolge attorno al tuo HTML

— joojaa

Controlla DEVTIPS su YouTube. Sono abbastanza sicuro che ci sia un video sull'e-mail reattiva.

— Komental

Mi piace la tua domanda, ma in questo momento ti dispiace modificarla per adattarla al regno del "design" perché questo potrebbe essere più adatto a SO nel senso di uno garantirebbe che si tratta di una domanda relativa al codice e non di un design domanda correlata.

— DᴀʀᴛʜVᴀᴅᴇʀ

Non è solo una questione di usare% nelle tabelle? Ho già creato un modello mailchimp con solo% che lo ha reso perfetto per ogni dispositivo ..

— rwzdoorn

3

Quindi l'e-mail può davvero essere reattiva

Risposta semplice alla tua domanda .. SÌ

Le e-mail HTML rientrano in qualche modo nella stessa regola dei siti Web, ma in genere sono più difficili da gestire e si basano ancora sul vecchio stile di codice datato utilizzando i <table>tag. C'è un ottimo articolo di Web Design Tuts che vorrei che fosse in giro quando ho iniziato a scrivere e-mail HTML.

Un po 'di tutorial è che spiega come creare un messaggio di posta elettronica reattivo e una nota importante quando si creano messaggi di posta elettronica HTML è che il CSS deve essere in linea alla fine. Discute su come scegliere come target CSS per Yahoo body[yahoo] .class {}e fanno riferimento all'articolo di Tina Ye su " Email HTML responsive: una strategia diversa ".

Dal momento che l'articolo di Webdesign Tuts non è molto dettagliato sull'articolo di Tina, ti consiglio di leggerlo perché entra nel primo metodo di progettazione mobile e mostra come progettare per Lotus 8, Outlook 00-03, Outlook 2007+ e Apple :

Lotus Notes 8 e Outlook 2000-2003

 <!--[if IE]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if IE]>
      </td>
    </tr>
  </table>
<![endif]-->

Outlook 2007+

<!--[if (gte mso 9)|(IE)]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
  </table>
<![endif]-->

Apple Mail

@media only screen and (min-device-width: 541px) {
  .content {
    width: 540px !important;
  }
}

Se esegui una ricerca su Google per modelli di email reattivi, c'è un articolo che si chiama " 32 modelli di email reattivi per la tua piccola impresa " di Mashable.
Discute modelli gratuiti ea pagamento per le tue e-mail e va su Zurb, che consiglierei se stai usando Foundation per il web design.

— DᴀʀᴛʜVᴀᴅᴇʀ
fonte

1

Certamente possono! Ecco un modello che puoi utilizzare per inviare e-mail HTML reattive: http://zurb.com/ink/ . La creazione di un'e-mail HTML da zero richiede molte conoscenze su come i client e-mail analizzano le e-mail. Questo modello assicura che la tua email sia visualizzata correttamente su tutti i client di posta elettronica.

Tutto quello che devi fare è sostituire il contenuto del file con la tua e-mail ed eseguire questo file tramite uno script nell'applicazione che gestisce l'invio di e-mail.

— ronzino
fonte

1

Fornisci maggiori informazioni sul link che hai fornito perché in questo momento è solo una risposta al link e in futuro se il sito dovesse andare in giù potresti ricevere alcuni downgrade.

— DᴀʀᴛʜVᴀᴅᴇʀ

1

Modificata la risposta.

— Nag

Bella risorsa davvero interessante (e ben documentata!).

— user56reinstatemonica8

1

Sì, puoi, ma a meno che tu non abbia una grande passione per questo, non preoccuparti. Immagina di codificare per IE5 e di doverlo testare. Potrebbe essere meglio acquistare un modello per questo tipo di cose piuttosto che fare la tua soluzione su misura.

— C3Lawrence
fonte