El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com dissenyar i donar format als correus electrònics per assegurar-nos que siguin atractius, llegibles i efectius. El disseny i el format adequats poden augmentar significativament les taxes d'obertura i de clics, així com millorar l'experiència general del subscriptor.

Importància del Disseny i Format

Per què és important?

Primera Impressió: Un bon disseny crea una primera impressió positiva.
Llegibilitat: Facilita la lectura i la comprensió del contingut.
Conversió: Un disseny ben estructurat pot guiar els subscriptors cap a l'acció desitjada.
Branding: Reflecteix la identitat de la marca i enforteix la seva imatge.

Elements Clau del Disseny d'Emails

2.1. Capçalera

Logotip: Inclou el logotip de la teva marca per a reconeixement immediat.
Assumpte: Ha de ser clar i atractiu.
Preheader: Un text breu que complementa l'assumpte i proporciona més context.

2.2. Cos del Correu

Salutació Personalitzada: Utilitza el nom del destinatari per fer el correu més personal.
Contingut Principal: Ha de ser rellevant i ben estructurat.
Imatges: Utilitza imatges de qualitat que complementin el text.
Botons de Crida a l'Acció (CTA): Clarament visibles i fàcils de clicar.

2.3. Peu de Pàgina

Informació de Contacte: Inclou informació de contacte de la teva empresa.
Enllaços a Xarxes Socials: Facilita l'accés a les teves xarxes socials.
Enllaç de Desubscripció: Ha de ser fàcil de trobar i utilitzar.

Bones Pràctiques de Disseny

3.1. Simplicitat

Evita el Desordre: Mantén el disseny net i senzill.
Ús de Colors: Utilitza una paleta de colors coherent amb la teva marca.
Tipografia: Utilitza fonts llegibles i de mida adequada.

3.2. Responsivitat

Disseny Responsiu: Assegura't que el correu es vegi bé en tots els dispositius.
Prova en Diferents Plataformes: Verifica com es veu el correu en diferents clients de correu electrònic.

3.3. Accessibilitat

Text Alternatiu per a Imatges: Inclou text alternatiu per a les imatges per a persones amb discapacitats visuals.
Contrastos de Color: Assegura't que hi hagi suficient contrast entre el text i el fons.

Eines per Dissenyar Emails

4.1. Editors de Plantilles

Mailchimp: Ofereix plantilles personalitzables i eines de disseny.
Constant Contact: Proporciona una àmplia gamma de plantilles i eines d'edició.
Canva: Permet crear dissenys visuals atractius que es poden integrar en els teus correus.

4.2. Proves i Optimització

Litmus: Permet provar com es veuran els teus correus en diferents clients de correu.
Email on Acid: Ofereix eines per a proves i optimització de correus electrònics.

Exemples Pràctics

Exemple 1: Capçalera Simple

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#ffffff">
      <img src="https://www.tevaempresa.com/logo.png" alt="Logotip de la teva empresa" width="200" style="display: block;">
    </td>
  </tr>
</table>

Exemple 2: Botó de Crida a l'Acció

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#ffffff">
      <a href="https://www.tevaempresa.com/oferta" style="background-color: #ff0000; color: #ffffff; padding: 10px 20px; text-decoration: none; font-size: 16px; border-radius: 5px;">Descobreix l'Oferta</a>
    </td>
  </tr>
</table>

Exercicis Pràctics

Exercici 1: Dissenya un Correu Electrònic

Objectiu: Crear un correu electrònic senzill amb una capçalera, cos i peu de pàgina utilitzant HTML i CSS.

Instruccions:

Crea una capçalera amb el logotip de la teva empresa.
Afegeix un cos amb un text de benvinguda i una imatge.
Inclou un botó de crida a l'acció.
Finalitza amb un peu de pàgina amb informació de contacte i enllaços a xarxes socials.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Correu Electrònic</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .container { width: 100%; max-width: 600px; margin: 0 auto; }
    .header, .footer { background-color: #f4f4f4; padding: 20px; text-align: center; }
    .content { padding: 20px; }
    .cta { background-color: #ff0000; color: #ffffff; padding: 10px 20px; text-decoration: none; font-size: 16px; border-radius: 5px; display: inline-block; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <img src="https://www.tevaempresa.com/logo.png" alt="Logotip de la teva empresa" width="200">
    </div>
    <div class="content">
      <h1>Benvingut a la nostra Newsletter!</h1>
      <p>Estem encantats de tenir-te amb nosaltres. A continuació trobaràs les últimes novetats i ofertes exclusives.</p>
      <img src="https://www.tevaempresa.com/imatge.jpg" alt="Imatge destacada" width="100%">
      <p><a href="https://www.tevaempresa.com/oferta" class="cta">Descobreix l'Oferta</a></p>
    </div>
    <div class="footer">
      <p>Contacta'ns: [email protected]</p>
      <p>Segueix-nos a les nostres xarxes socials:</p>
      <p>
        <a href="https://www.facebook.com/tevaempresa">Facebook</a> |
        <a href="https://www.twitter.com/tevaempresa">Twitter</a> |
        <a href="https://www.instagram.com/tevaempresa">Instagram</a>
      </p>
    </div>
  </div>
</body>
</html>

Exercici 2: Prova de Responsivitat

Objectiu: Verificar que el correu electrònic creat en l'exercici 1 es veu correctament en diferents dispositius i clients de correu.

Instruccions:

Utilitza una eina com Litmus o Email on Acid per provar el teu correu electrònic.
Ajusta el disseny segons sigui necessari per assegurar-te que es veu bé en tots els dispositius.

Conclusió

El disseny i el format dels correus electrònics són elements crucials per a l'èxit de les teves campanyes d'email marketing. Un bon disseny no només millora l'experiència del subscriptor, sinó que també pot augmentar les taxes de conversió. Recorda seguir les bones pràctiques de simplicitat, responsivitat i accessibilitat per assegurar-te que els teus correus electrònics siguin efectius i inclusius.

Disseny i Format d'Emails