• Agence
  • Services
    • Stratégie numérique
      • Gestion de communauté
      • Stratégie des médias sociaux
      • Stratégie de contenu
      • Stratégie influenceurs
    • Conception web
      • Développement e-commerce
      • Création de site web
      • Design web (UI)
      • Développement web & programmation
      • Expérience utilisateur (UX)
      • Gestion de contenu CMS
    • Services Conseils
      • Accompagnement stratégique
      • Formation
      • Transformation numérique
      • Intégration CRM
    • Marketing web
      • Mesure de performance
      • Référencement naturel (SEO)
      • Référencement payant (SEM & PPC)
      • Solutions Web
      • Programmatique
  • Projets
  • Carrières
  • Industries
    • Secteurs d’activités
      • Détaillants
      • Manufacturiers et distributeurs
      • Services professionnels
      • Obnl
  • Nous joindre
  • Blogue
  • Accueil
  • Agence
  • Services
    • Stratégie numérique
      • Gestion de communauté
      • Stratégie des médias sociaux
      • Stratégie de contenu
      • Stratégie influenceurs
    • Conception web
      • Développement e-commerce
      • Création de site web
      • Design web (UI)
      • Développement web & programmation
      • Expérience utilisateur (UX)
      • Gestion de contenu CMS
    • Services Conseils
      • Accompagnement stratégique
      • Formation
      • Transformation numérique
      • Intégration CRM
    • Marketing web
      • Mesure de performance
      • Référencement naturel (SEO)
      • Référencement payant (SEM & PPC)
      • Solutions Web
      • Programmatique
  • Projets
  • Carrières
  • Industries
    • Secteurs d’activités
      • Détaillants
      • Manufacturiers et distributeurs
      • Services professionnels
      • Obnl
  • Nous joindre
  • Blogue
  • Accueil

Archives

Zurb Foundation : faciliter la création de courriels en mode adaptatif

Connaissez-vous Zurb Foundation? Ce framework vous permet de simplifier l’intégration des infolettres. Comme certaines applications de courriel, comme Outlook, ne supportent pas très bien certaines fonctionnalités ni les versions adaptatives, il faut savoir trouver l’outil idéal.

Nous vous présentons Zurb Foundation, un framework parfait pour le développement de courriels et d’infolettres.

Pour faciliter le travail, il est nécessaire de développer vos courriels avec des standards assez stricts et d’utiliser un framework. Celui proposé par Zurb est basé sur Foundation, semblable à Bootstrap. Allez lire notre billet sur Bootstrap, framework idéal pour le développement adaptatif des sites Web,  pour avoir plus d’information à son sujet.

Les différents tableaux de Zurb Foundation

Comme au tout début de la création de sites Web, l’intégration des courriels HTML se fait encore à l’aide de <table> (tableaux). Pour l’intégration HTML, il faut utiliser Container (Conteneur), Row (rangée) et Columns (colonnes).

Container (Conteneur)

À l’intérieur de la balise <center> (centre) nous commençons avec le Container qui sert à définir la largeur maximale pour contenir nos éléments.

Container

Row (rangée) 

À cette étape-ci, nous bâtissons la grille. Une rangée regroupe les colonnes.

Rangée

Columns (colonnes)

Les colonnes, ce sont les sections qui contiennent les éléments les uns à la suite des autres sur les grands écrans et les uns par-dessus les autres sur un mobile. Il est également possible de spécifier certaines proportions voulues en mobile.

Colonnes

La grille pour les colonnes est très semblable à celle de BootStrap, sur 12 colonnes.

Dans l’exemple ci-dessus, nous utilisions la classe .small-12  pour la version mobile avec colonne pleine largeur et .large-6 pour la version bureaux avec 2 demi- colonne l’une à côté de l’autre.

Pour ajouter de l’espacement à gauche, il faut mentionner .first sur la première colonne tandis que pour de l’espacement à droite, il faut ajouter .last sur la dernière colonne.

Pour enlever complètement l’espacement, il faut ajouter la classe .collapsing à la rangée.

La classe .espander, quant à elle, aide à forcer Outlook à prendre la pleine largeur des colonnes.

Les classes d’alignement 

Il est possible de contrôler facilement l’alignement des contenus et d’y ajouter des dimensions spécifiques.

Par exemple, la classe .text-right positionne le texte à droite tandis que .small-text-right fait la même chose, mais en mobile uniquement. Par défaut, le positionnement est à gauche.

Classes dalignement

Pour centrer une image, il suffit d’ajouter la classe .float-center et l’attribut align=‘center’ dans la balise <img />.

Pour Outlook, il faut également englober la balise <img /> par la balise <center>.

Après ce survol très rapide du fonctionnement du framework Foundation pour les courriels, vous pouvez obtenir plus d’information sur le site Web du framework. Vous y trouverez toutes les fonctionnalités et composants intéressants pour faciliter l’intégration d’infolettres en mode adaptatif dans toutes les applications de courriels populaires.

Luc Hamel
Intégrateur Web

Source :
http://foundation.zurb.com/emails/docs/css-guide.html

Par Webit Interactive - le 17 août 2016
Partager

Contactez-nous

En voilà d'autres

Archives
ADOBE COMP CC : L’APPLICATION MIRACLE
Lire la suite
Archives
Retour sur l’une des tendances 2015 en web design : les grosses typographies.
Lire la suite
Archives
Tendances à surveiller sur les médias sociaux
Lire la suite
Archives
ADOBE COMP CC : L’APPLICATION MIRACLE
Lire la suite
Archives
Retour sur l’une des tendances 2015 en web design : les grosses typographies.
Lire la suite
Archives
Tendances à surveiller sur les médias sociaux
Lire la suite

Suivez-nous

170 Boul. Taschereau, Bureau 245, La Prairie,
(Québec) J5R 5H6

Itinéraire
+1 (514) 932-4840

Tenez-vous à jour

Avis légal

© Webit Interactive 2021