Cas client : Mise en place d une créa d Responsive RESPONSIVE DESIGN

Transcription

1 Cas client : Mise en place d une créa d Responsive RESPONSIVE DESIGN

2 La demande : Un de nos clients nous interroge pour faire évoluer ses s de recrutement prestataires, vers du responsive. Comme souvent... la demande est claire : Je veux la même chose, mais responsive, parce que maintenant tout le monde lit ses s sur son smartphone ou sa tablette. Le contexte : Les s en question, sont créées dynamiquement à partir d un gabarit unique et relativement simple, par une mécanique de contextualisation géographique, en liaison à leur système de gestion des demandes de devis... La demande est claire... le contexte maitrisé... alors, regardons si nous pouvons simplement faire la même chose... et comment ;)

3 Le coût de mise en place d un design responsive est plus élevé que celui d un design non responsive (en moyenne x2) Il faut valider la nécessité de l action (ROI, gain d image,...) En étudiant les ouvreurs (Statistique détaillée de campagne dans HAPPY Mails) Par des études Par l analyse des d usage de la cible statistiques du client &

4 r Le responsive design impose des contraintes de forme, d architecture et de hiérarchie des contenus Forme Si c est responsive, c est au carré! Qu il soit basé sur une grille ou non, les redimensionnements de bloc ou les glissements de blocs laissent moins de liberté au designer Contenu Qui passe devant? Notre change de forme, les blocs adaptent leur largeur, glissent les uns en dessous des autres... il faut définir ce qui est prioritaire dans notre message

5 Il faut ensuite, et avant de lancer les maquettes, définir les ciblages matériels

6 L étude du mail initial, fait apparaitre que plusieurs points sont problématiques : - Lisibilité des textes mis à l échelle - Présence d éléments image incompatibles - Structuration du tableau - Construction du footer

7 Nous devons donc proposer au client des maquettes modifiées : - Avec des contenus hiérarchisés - Une construction en grille - Des textes plus lisibles - Des images sans raccord - Un tableau plus adapté à l écran... finalement c est plus vraiment pareil!

8 Il faut maintenant construire notre template responsive... Mais pour qui? Le ciblage des plateformes et des clients mails à une incidence sur la méthode de développement, le temps de travail et donc le budget. Notre ing du fait de sa construction responsive, doit maintenant embarquer des déclarations pour le rendre compatible avec des appareils mobiles, des stations, à chaque fois sous des systèmes, des versions, des moteurs de rendus et autres, différents... De quoi rendre fou le développeur et faire exploser le budget, si le ciblage n est pas clairement défini. Il faut faire des choix! ou alors... penser autrement

9 Il n y a pas que les Medias Queries dans la vie... d un Prise en charge du responsive selon les clients mail (en utilisant des médias, queries) Désolé... mais si vous souhaitez vraiment avoir des s responsive et universel (ou presque) Vous ne devez pas seulement utiliser les Media Queries! Trop de templates appuient leur design responsive sur eux, et brident le responsive à certaines plateformes au détriment d'autres susceptibles d'être utilisées par votre cible... Dans le cadre de mise en place de gabarits avec une durée d exploitation longue, un ciblage large ou des contraintes de rendu multiplateforme, il ne faut pas se reposer uniquement sur les médias Queries. C est long... On est souvent en mode test and learn... Mais quand c est calé, c est calé quasiment partout!

10 Exemple de code //Exemple de style pour iphone et tous les devices qui utilisent les médias queries <style screen and (max-width: 480px) { td. colsplit{ width:100%!important; float:left!important; } table. wrapto100pc, img. wrapto100pc { width:100%!important; height:auto!important;} } </style> //style pour Outlook <!--[if gte mso 9]> <style>... #wrapper_ {width:650px;}"; table.menu_3links{display:none!important;}";... </style> <![endif]--> //style spécifique à outlook, sorte de margin left ou margin-right mso-table-lspace: 0; mso-table-rspace: 0; //tableaux en gauche droite sur PC, au dessus, en dessous sur smartphone <table align='left' width='317' class='table_block_resp wrapto100pc' cellpadding='0' cellspacing='0' valign='top' style='display:inline-block;'> <tr> <td>lorem Ipsum</td> </tr> </table> <table align='left' width='317' class='table_block_resp wrapto100pc' cellpadding='0' cellspacing='0' valign='top' style='display:inline-block;'> <tr> <td>lorem Ipsum</td> </tr> </table> // la largeur max est celle du device, l'échelle est forcée à 1, la taille des éléments <meta name="viewport" content="width=device-width, initial-scale=1.0"/> //responsive td table <table align="left"> <tr> <td style="background:#ccc"> <p style="display:inline-block;">demande du 02/11/2013</p> <p style="display:inline-block;">30984</p> <p style="display:inline-block;">femme de ménage</p> <p style="display:inline-block;">vesancy</p> <p style="display:inline-block;">pris en charge</p> </td></tr> <tr><td> <p style="display:inline-block;">demande du 02/11/2013</p> <p style="display:inline-block;">30984</p> <p style="display:inline-block;">femme de ménage</p> <p style="display:inline-block;">vesancy</p> <p style="display:inline-block;">pris en charge</p> </td> </tr> <tr> <td style="background:#ccc"> <p style="display:inline-block;">demande du 02/11/2013</p> <p style="display:inline-block;">30984</p> <p style="display:inline-block;">femme de ménage</p> <p style="display:inline-block;">vesancy</p> <p style="display:inline-block;">pris en charge</p> </td></tr> </table>

11 La mise en place d un design responsive à permis une augmentation moyenne de 6% en ouverture Fort de ce constat, le client à souhaité passer en responsive, son gabarit de notification de demande de devis à pourvoir, impliquant une transformation (achat de la demande) Plus adaptée à un passage en responsive, du fait de la fréquence et des heures d envoi, qui implique une lecture sur le terrain et majoritairement sur smartphone, cette seconde mise en place à générée un bond moyen d ouverture de +8% et de transformation de +14%

12