Les images responsives

Qu'est ce qu'une image responsive ?

Une image responsive est une image qui s'affiche toujours de la meilleure manière dans un site web en prenant en compte le support sur lequel elle s'affiche.

La méthode la plus simple pour rendre une image responsive est d'adapter sa taille au support sur lequel on la consulte sans pour autant changer d'image.

<img src="img/mon-image.jpg" width="300" height="150" alt="ma superbe image">
img {
  max-width: 100%;
  height: auto;
}

Intégration d’emails responsives avec MJML

En tant qu’intégrateur HTML, nous sommes souvent sollicités pour intégrer des newsletters / campagnes promotionnelles pour des clients.

La mise en forme de ces newsletters est assez chronophage car nous devons intégrer les éléments d’une maquette via des tableaux, et aussi veiller à ce que les styles utilisés soient pris en charge par les messageries électroniques les plus utilisées.

Toutes ces problématiques nous ont amenés à chercher un outil qui nous permettrait de créer ces newsletters plus rapidement, tout en s’assurant de leur compatibilité.

mjml

Introduction à Bootstrap Sass

b-sass

Dans le monde du web, deux frameworks sont particulièrement célèbres pour faire l'intégration des sites responsives : Bootstrap de Twitter et Foundation de Zurb. Ils intègrent déjà quelques composants et des plugins JavaScripts basés sur jQuery, prêts à l'emploi.

Dans notre article, nous nous intéressons surtout au premier :  Bootstrap de Twitter. Selon moi, c'est le plus facile à prendre en main et à installer. D'ailleurs, vous pouvez consulter respectivement leurs sites pour le constater.