Contexte & missions


adopt-a-design.com est un site qui vend des composants graphiques (flyers, affiches, templates, etc.) prêts à l’emploi. Ma mission a été de concevoir la maquette graphique et le gabarit html de la newsletter.

La mise en page de la newsletter est fluide et responsive pour s’adapter harmonieusement à n’importe quelle largeur d’écran (Desktop, tablette, smartphone).

Newsletter responsive

Design visuel & interactions

Conçus pour les mobiles

images rétina

Une qualité d'affichage irréprochable sur les écrans HD ( haute définition)

Taille des caractères

La taille des titres a été réduites et la taille du texte courant augmenté pour une lisibilité optimale sur smartphones.

Espaces négatifs repensés

Les marges latérales ont été réduites pour augmenter la longueur des lignes de textes.

Boutons "finger friendly"

Des boutons élargis pour faciliter l'interaction tactile sur petits écrans

Intégration html


Code robuste

Le code a été développé pour répondre aux nombreuses contraintes des outils de messagerie. Il a été vérifié auprès du W3C afin de s'assurer qu'il ne comporte aucune erreur.

Rendu testé

Le code a été testé dans près de 50 outils de messagerie (logiciels de messagerie, webmails et appli mobile ios et android) via l'outil de test-rendering Email on Acid.

Images optimisées

Les images ont fait l'objet d'une compression minutieuse afin de réduire les temps de chargement notamment sur smartphone.

Code modulaire

Le code a été conçu sous forme de fragments de code pour être facilement réutiliser et manipuler . Il peut être ainsi facilement intégré dans n'importe quel outil d'email templating.

Exemple de Test de rendu dans Email on Acid
Exemple de Test de rendu dans Email on Acid