HAI BISOGNO DI INFORMAZIONI?
+39 06452216038
LIVE SUPPORT
Parla con un operatore

Hosting Per Te - HelpDesk

LIVE SUPPORT
Parla con un operatore
 
 Categorie Notizie
(15)Domini (3)dominio (42)Blog (72)Sicurezza (55)Wordpress (1)Cross-Site (1)vulnerabilità (8)wordpress (1)zero day (8)sicurezza (1)sitelock (21)News (2)google (1)indicizzazione (1)mobilegeddon (11)seo (21)Hosting (4)hosting (1)multi (1)reseller (1)rivenditore (1)provider (23)Email (34)Server (4)email (2)imap (1)imapsync (2)migrazione (1)posta (1)affiliazione (2)guadagnare (84)Ecommerce (4)e-commerce (2)ecommerce (4)VPN (1)wi-fi (1)backup (2)server (34)marketing (2)ppc (1)search-engine-optimization (1)seo pay-per-click (1)domini (2)gTLD (2)IP (1)IP-condiviso (1)IP-dedicato (2)cloud (1)virtuale (3)vps (21)Blogging (4)blog (2)blogging (46)CMS (3)cms (1)sito di successo (1)campagne e-mail (1)criptare dati (2)ssl (1)plugin e-commerce (1)newsletter (1)rivenditori (1)server vps smtp (1)SMTP (1)design responsivo (1)responsive design (1)responsive web design (2)hacking (5)malware (1)phishing (1)server upgrade (2)prestashop (2)campagna e-mail (3)e-mail marketing (1)contenuti sito (1)struttura pagina web (1)call-to-action (1)promozione sito (1)ottimizzare sito (1)cookie law (1)psicologia web design (1)vendita siti (1)website flipping (1)titolo (1)alternativa google analytics (2)monitoraggio (1)keyword (1)programmazione (1)facebook marketing (1)colori (2)clienti (1)privacy whois (1)crimini informatici (1)Cyber crime (1)search console di google (1)supporto managed (1)hacker (1)copyright (1)referrer spam (1)Split testing A/B (1)freelance (4)magento (1)Linux (2)Windows (1)upgrade piani hosting (1)Google SpeedTest (1)landing page (1)seo friendly (1)struttura link (1)errori wordpress (2)psicologia dei prezzi (2)metodi di pagamento (1)effetti sonori (3)APP (1)webmaster (1)fatturazione elettronica (1)sito web (1)backup wordpress (1)fan facebook (1)Exchange ActiveSync (1)POP3 (1)firma e-mail (1)web agency (1)ergonomia (1)editor (3)adwords (1)quality score (1)errori ecommerce (24)startup e business (1)errori azienda (1)sql injection (1)monetizzare (1)regole successo (1)nameserver (2)mailing list (2)responsive email (3)pec (3)bootstrap (1)Bing (1)Bing Ads (1)Foundation (4)framework (1)statistiche mobile (1)adwords per mobile (1)about page (1)chi siamo (1)seo vs ppc (1)errori webmaster principianti (25)SEO (1)PDF e SEO (1)ottimizzare pdf (63)strumenti (1)relazionarsi con i clienti (1)FAQ (1)tld srl (1)traffico (1)keywords (1)parole chiave (1)trend estero (4)statistiche (1)K.I.S.S. (1)plugin sicurezza wordpress (2)certificato ssl (1)template (1)black hat (1)Creative Common Zero (1)blog ecommerce (1)Google Smart Goals (1)web design (1)facebook ads (1)SFTP (1)FTP (2).htaccess (1)statistiche e-commerce (1)url brevi (2)cloud computing (1)HDD (1)grafici (1)librerie js (2)antivirus (1)framework css (1)Google Panda (2)Internet of Things (2)ransomware (1)TeslaCrypt (2)tecnologia (1)telelavoro (1)mobile friendly (1)proxy (2)cryptolocker (1)Processore AMD (1)rapporto clusit 2016 (2)truffe online (1)plugin monitoraggio (2)bug linux (1)ranking tools (1)social network (1)deep web (1)tor (1)plugin sottoscrizioni (1)link building (3)plugin wordpress (1)design (1)siti di successo (1)ottimizzare immagini (2)widget (1)sito monopagina (1)VPS Economici (1)trend del marketing (1)realtà aumentata (1)ip dinamico (1)progettazione sito (1)Redirect 301 e 302 (1)notifiche push (1)velocità sito (1)ottimizzazione contenuti (1)guadagnare con un blog (1)costi e-commerce (1)social media (1)frode amichevole (1)e-commerce wordpress (4)drupal (4)joomla (1)travel blog (2)php (1)chargeback (1)e-mail (1)plug-in video wordpress (1)sito sportivo (1)plug-in seo (1)drupal vs magento (1)portfolio (1)plug-in portfolio (1)sottodomini di terzo livello (1)sicurezza e-commerce (1)pubblicità su facebook (1)visualizza numero utenti (1)affiliate marketing (1)cartella nascosta android (1)creare app (2)Infiniband (1)Intel LGA 3647 (1)furto di dati sensibili (1)marketing diretto (1)record DNS (2)ddos (1)Mobile shopping (1)Malware su Skype (1)virus (1)youtube (1)seo immagini (1)web marketing (1)vendita online (1)food blogger (1)Plesk Onyx (1)Bug Fedora ed Ubuntu (1)Micro SSD (1)IoT (1)Chip Kaby Lake (1)primo e-commerce (1)blog di fitness (2)plug-in WordPress (1)SPF e DKIM (1)Cyber sicurezza (1)file robots.txt (1)AMD Naples (1)Vulnerabilità REST API WordPress (1)trasferimento da Blogger a WordPress (1)plug-in WordPress per musicisti (1)Crittazione (2)CPU (1)Legge antibufale (1)Strumenti di marketing (1)CPU AMD (1)nda (1)Let's Encrypt (1)Hosting Linux o Windows (1)progress bar (1)blog di cucina (1)PrestaShop oppure WooCommerce (1)carte di credito (1)librerie javascript (1)DDR5 (1)plugin monetizzazione (1)Wireless (2)drag and drop (1)web server (1)Curricula digitali (1)name server (2)Autenticazione a due fattori (1)Trend Tech (1)business online (1)Keylogger (1)infopreneur (1)E-book (1)WanaKiwi (1)file LNK (1)hub (1)router (1)switch (1)pdf (1)hosting provider gratuito (1)Shopify (1)Usabilità web (1)temi (1)confronto file (1)quiz (1)mockup (1)hosting provider (2)chat (1)ristoranti (1)database (1)spam (1)tool (1)Javascript (1)automazione (1)forum (1)compressione (2)webserver (1)Caching (1)video (1)Normative (1)Collaborazione (1)unicorn (2)robots.txt (1)funnel (1)redirect (1)Markdown (2)Google Tag Manager (1)apache (1)Ajax (1)wamp (1)xampp (1)browser (1)OSCommerce (1)Blockchain (1)sottodominio (1)sviluppo Web (1)Moduli
Feed RSS
Notizie
ago
28

Il 50% delle email vengono aperte e lette tramite dispositivi mobili. Questo è ormai un fatto acclarato che non può essere ignorato. È quindi arrivato il momento di rendere le tue e-mail mobile responsive. In questo articolo spiegheremo quali sono i principi base da seguire per creare e-mail HTML responsive utilizzando i CSS Media Queries.

 

 

 

Quanto segue non richiede particolari competenze informatiche ma una minima infarinatura di html e CSS è comunque necessaria per capire la logica alla base della creazione di una e-mail responsiva e soprattutto per poter adattare l’esempio riportato alla fine di questo articolo alle tue esigenze.

 

La struttura base di ogni e-mail HTML è caratterizzata da una dichiarazione doctype, un head ed un body. Nell’head dovranno essere definiti il set caratteri e la larghezza (width) del dispositivo.

Se vuoi rendere responsiva l’e-mail dovrai utilizzare un meta viewport che comunicherà al client di posta di visualizzare la mail con la larghezza massima possibile in funzione del dispositivo in uso. Di seguito una dichiarazione con tutti i tag necessari:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

 

<html>

    <head>

        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

    </head>

    <body>

    <p>

        Hello world

    </p>

    </body>

</html>

 

Struttura base

La struttura base è caratterizzata da due contenitori posizionati uno affianco all’altro ed inseriti all’interno di un paio di tabelle. Nella e-mail, ogni contenitore, per far sì che sia visualizzabile in maniera corretta in tutti i clienti di posta, deve essere inserito all’interno di una tabella. Iniziare con una Tabella di background, poi inserire un wrapper ed infine una tabella per i contenuti.

Occorre utilizzare due elementi “td”. Come si comporteranno questi due elementi quando visualizzati su uno schermo di piccole dimensioni (i.e. smartphone) lo stabiliranno i media queries.

<table width=”100%”>

    <tr>

        <td class=”wrapper” width=”600″ align=”center”>

            <table cellpadding=”0″ cellspacing=”0″>

                <tr>

                    <td class=”column” width=”300″>

                        <table>

                            <tr>

                                <td align=”left”>

                                    <h2>Left column</h2>

                                </td>

                            </tr>

                        </table>

                    </td>

                    <td class=”column” width=”300″>

                        <table>

                            <tr>

                                <td align=”left”>

                                    <h2>Right column</h2>

                                </td>

                            </tr>

                        </table>

                    </td>

                </tr>

            </table>

        </td>

    </tr>

</table>

 

 

CSS Media Queries

I media Queries utilizzano una regola @media per determinare se includere o meno un blocco di proprietà CSS. I media sono caratterizzati da tre elementi: Il media type, una condizione e gli stili da applicare. La regola@media only screen and {max-width: 600px}”  significa che “se la mail viene visualizzata su uno schermo con dimensioni inferiori a 600 px occorre utilizzare le seguenti regole CSS” in caso contrario verranno applicate le impostazioni CSS inline.

I Media Queries vengono specificati nella sezione <head> del documento e funzionano solo se implementate all’interno dell’HTML; Questo significa che non è possibile utilizzare le media queries negli stili inline. Le regole applicabili sono diverse, ma per il nostro esempio utilizzeremo solo la proprietà max-width

<style rel=”stylesheet” type=”text/css”>

    @media only screen and (max-width: 600px) {

        .wrapper table {

            width: 100% !important;

        }

 

        .wrapper .column {

            // fa sì che la colonna abbia la dimensione massima possibile sui dispositivi dotati di schermi con dimensioni ridotte e consente l’incolonnamento degli elementi

            width: 100% !important;

            display: block !important;

        }

    }

</style>

 

 

Importante testare le e-mail create su vari client di posta per accertarsi la massima compatibilità e divulgazione della comunicazione inoltrata. A tal fine consigliamo Litmus o Email on Acid

 

 

Template email responsiva

<!DOCTYPE html><html>

  <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

    <meta name=”viewport” content=”width=device-width,

      initial-scale=1.0″>

    <title>Esempio di mail responsiva su due colonne</title>

    <style>

        /* css reset */

        body,table,thead,tbody,tr,td,img {

            padding: 0;

            margin: 0;

            border: none;

            border-spacing: 0px;

            border-collapse: collapse;

            vertical-align: top;

        }

 

        /* Aggiungere il padding per schermi di piccole dimensioni */

        .wrapper {

            padding-left: 10px;

            padding-right: 10px;

        }

 

        h1,h2,h3,h4,h5,h6,p {

            margin: 0;

            padding: 0;

            padding-bottom: 20px;

            line-height: 1.6;

            font-family: ‘Helvetica’, ‘Arial’, sans-serif;

        }

 

        p,a,li {

            font-family: ‘Helvetica’, ‘Arial’, sans-serif;

        }

 

        img {

            width: 100%;

            display: block;

        }

 

        @media only screen and (max-width: 620px) {

 

            .wrapper .section {

                width: 100%;

            }

 

            .wrapper .column {

                width: 100%;

                display: block;

            }

        }

    </style>

  </head>

  <body>

    <table width=”100%”>

      <tbody>

        <tr>

          <td class=”wrapper” width=”600″ align=”center”>

            <!– Immagine Header –>

            <table class=”section header” width=”600″ cellspacing=”0″

              cellpadding=”0″>

              <tbody>

                <tr>

                  <td class=”column”>

                    <table>

                      <tbody>

                        <tr>

                          <td align=”left”> <img

                              src=”//picsum.photos/id/101/600/100″

                              alt=”picsum” width=”600″>

                            <h2>Header</h2>

                            <p style=”text-align:justify;”>Lorem ipsum

                              dolor sit amet, consectetur adipiscing

                              elit, sed do eiusmod tempor incididunt ut

                              labore et dolore magna aliqua.</p>

                            <p style=”text-align:justify;”>Ut enim ad

                              minim veniam, quis nostrud exercitation

                              ullamco laboris nisi ut aliquipex ea

                              commodo consequat</p>

                          </td>

                        </tr>

                      </tbody>

                    </table>

                  </td>

                </tr>

              </tbody>

            </table>

            <!– Due colonne –>

            <table class=”section” cellspacing=”0″ cellpadding=”0″>

              <tbody>

                <tr>

                  <td class=”column” width=”290″ valign=”top”>

                    <table>

                      <tbody>

                        <tr>

                          <td align=”left”> <img

                              src=”//picsum.photos/300/100″

                              alt=”picsum” width=”300″>

                            <h2>Left column</h2>

                            <p style=”text-align:justify;”>Lorem ipsum

                              dolor sit amet, consectetur adipiscing

                              elit, sed do eiusmod tempor incididunt ut

                              labore et dolore magna aliqua..</p>

                          </td>

                        </tr>

                      </tbody>

                    </table>

                  </td>

                  <td class=”column” width=”20″ valign=”top”>

                    <table>

                      <tbody>

                        <tr>

                          <td> &nbsp; </td>

                        </tr>

                      </tbody>

                    </table>

                  </td>

                  <td class=”column” width=”290″ valign=”top”>

                    <table>

                      <tbody>

                        <tr>

                          <td align=”left”> <img

                              src=”//picsum.photos/id/903/300/100″

                              alt=”picsum” width=”300″>

                            <h2>Right column</h2>

                            <p style=”text-align:justify;”>Excepteur

                              sint occaecat cupidatat non proident, sunt

                              in culpa qui officia deserunt mollit anim

                              id est laborum. Ut enim ad minim veniam.</p>

                          </td>

                        </tr>

                      </tbody>

                    </table>

                  </td>

                </tr>

              </tbody>

            </table>

          </td>

        </tr>

      </tbody>

    </table>

  </body>

</html>

 

 

L'articolo Come creare una e-mail mobile responsive sembra essere il primo su Blog Hosting Per Te.





Hosting Per Te
© 2015 - ARMADA
Partita IVA 00873530943
REA IS-38469
Tel +39 06452216038
Fax +39 0689280222
Il tuo IP: 18.208.159.25
Hosting Per Te Facebook   Hosting Per Te Twitter   Hosting Per Te Blog
ARMADA
Chiedi ad un nostro Operatore