Un e-mail en HTML responsive multi-clients L'e-mail (ou newsletter) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, aucun problème, c'est un standard interprété sans difficulté. En mode HTML c'est un art ô combien délicat en partie dû au nombre de clients lecteurs d'e-mail sur le marché qui ont des comportements bien différents (encore plus désormais que les navigateurs classiques). Cette disparité de l'interprétation des e-mails au format HTML provient de plusieurs facteurs : Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...). Mettons fin immédiatement à vos désirs les plus fous : encore plus que le web, la réalisation d'e-mails graphiques en HTML, au pixel près ou presque, sur toutes les plates-formes, est une utopie. Voici quelques astuces et bonnes pratiques pour obtenir des e-mails au rendu proche sur la majorité des programmes.
Splash Vector Graphics on your Responsive Site - HTML5 Rocks Creating mobile content that dazzles means balancing the amount of data downloaded against maximal visual impact. Vector graphics are a great way to deliver stunning visual results using minimal bandwidth. Many people think of canvas as the only way to draw a mixture of vectors and rasters on the web, but there are alternatives that have some advantages. A great way to achieve vector drawing is through the use of Scalable Vector Graphics (SVG) which is a key part of HTML5. We all know responsive design is a big part of handling varying screen sizes, and SVG is ideal for handling different size screens with ease. SVG is a great way to present vector based line drawings and is a great complement to bitmaps, the latter being better suited for continuous tone images. Popular authoring tools like the Drawing application in Google Drive, Inkscape, Illustrator, Corel Draw and lots of others generate SVG so there are lots of ways to generate content. Scaling fundamentals So what's the big deal?
Responsive web design : Les autres usages Un site web “adaptatif” Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. Aujourd’hui, la multiplication des types de terminaux fait qu’il n’est plus possible de réfléchir de manière binaire (Si l’utilisateur n’est pas sur ordinateur de bureau, alors il est sur un téléphone portable). Une nouvelle tendance est née, celle de la conception adaptative (Responsive Design) . Le Responsive Design est plutôt un concept, une manière de concevoir les interfaces web. Les autres usages du “Responsive Design” E-mail adaptés Le principe est simple. L’approche Viewport Conclusion
Responsive design : définition, fonctionnement, ressources et tutoriels « Design Spartan : Art digital, digital painting, webdesign, illustration et inspiration… Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant. De nos jours, il n’y a pas un client qui demande un site Internet sans demander une version mobile de celui-ci. Le problème est qu’on ne peut pas – ou du moins ce ne serait pas très pratique – développer autant de versions d’un site qu’il y a de résolutions différentes. Définition du responsive web design Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : (Cliquez dessus pour voir en plus grand) Techniquement, dans les grandes lignes Un site et un contenu qui s’adaptent La typo
Utilisez le responsive design pour vos emails marketing Aujourd’hui nous nous intéressons au responsive design et à son utilité pour les entreprises. Les campagnes e-mailing sont en effet un des leviers des plus importants dans le e-commerce. Une très grande majorité des Français possède un smartphone. Cette nouvelle tendance favorise l’apparition du responsive design. Pourquoi ? De ce fait, les internautes doivent pouvoir lire leurs emails de manière optimisée sur leur smartphone. Pourquoi le responsive design est-il important ? Aux vues de l’étude de l’agence Return Path qui a démontré que 88% des possesseurs de smartphone consultent leurs emails depuis une plateforme mobile… vous feriez mieux de vous y mettre ! Notez que les comportements des consommateurs changent. Vous vous devez donc d’adapter vos emails aux nouvelles devices nomades et aux nouveaux comportements afin que les internautes continuent d’ouvrir vos emails. Le responsive design en quelques mots… Comment créer des emails responsive design ? Soyez sympa Partagez ;-)
ProtoFluid. Responsive Design Testing. Email Responsive : les 5 (mauvaises) excuses des annonceurs Selon une récente infographie éditée par notre partenaire Litmus, 47% des emails sont ouverts sur des supports mobiles (smartphones/tablettes). Et si cette tendance poursuit sa course folle, ce taux devrait dépasser les 50% d’ici la fin d’année 2013… Des chiffres qui donnent le vertige et devraient (nous l’espérons) pousser les annonceurs encore réticents – en BtoB comme en BtoC – à envisager (c’est un début) d’utiliser le responsive design pour leurs communications à destination de leurs prospects et clients… Petit florilège des (mauvaises) excuses communément reprises par nos clients et prospects… 1 / « On a déjà des templates bien définis, et notre charte… Il faut respecter la chaaarte ! L’érosion des taux d’ouvertures et de clics, l’engorgement des boîtes de réception, la sanction immédiate que représentent un désabonnement ou une plainte, etc. Statistiques LinkStats – wewmanager – EmailStrategie FAUX ! 1 / Apple iPhone (24%) 2 / Outlook (17%) 3 / Apple iPad (12%) 4 / Google Android (9%)
Detecting and Responding to iPad Orientation Change in Adobe Edge Animate | CHRIS GANNON With the help of Simon Widjaja and friends’ Edge Commons Dirty Little Helpers library I have extended the Flexible Layouts Using Adobe Edge Animate and the Edge Commons Library tutorial to work on an iPad. Simon’s tutorial/demo works well on a browser when resizing and this demo takes that one stage further and uses the ‘window.orientation‘ event to trigger the resize code uses a simple <meta content> tag to ensure the device as it 100% and recognises the change in dimensions. You can still trigger the resize code in your desktop browser but this is designed to detect your iPad’s orientation too. I’ll write it up fully later with a walk-through of the functionality but for now you can just play around with it and look at the (fairly simple) code – also I thought it would be a nice start to the week! I have removed the ‘window.orientation‘ call as it is not required – even simpler! View the demo on your iPad here Download the source here Like this: Like Loading... Related In "3d" MooDisco!
Templates mail responsive 100% compatible clients mails mobiles De nos jours, de plus en plus d'emails sont lus sur les terminaux mobiles. Avec une évolution de la lecture sur mobile aussi marquée , les campagnes d'e-mailing se doivent d'être compatibles avec le plus grand nombre de terminaux. Le studio Zurb l’a bien compris et a donc décidé de réaliser une série de 5 templates mail responsive. Les fêtes de fin d’année approchant, ils sont disponibles en téléchargement gratuit sur le Zurb’s playground. Fonctionnement d’un template mail responsive Étonnamment, les media queries ne sont pas nécessairement requises. Voici le résultat d’un test de compatibilité des media queries au sein de divers clients mails mobiles effectué par Email on acid : Source Zurb n’a pas complètement omis les media queries de ses templates, elles sont implémentées pour les clients mails compatibles. Magie du tag viewport Mise en place du template mail fluide La solution est de fixer la largeur maximale des cellules à 600px. Astuce pour un template mail responsive à deux colonnes
Comment tester un site responsive? (partie 1) Savoir si un site développé se comporte bien en responsive est devenu une nécessité de nos jours. Il est donc important de connaître tous les moyens mis à notre disposition pour réaliser cette étude. Deux lignes de conduites (probablement complémentaires) sont à prendre en compte : soit on teste sur des outils simulant le comportement des appareils, soit on teste directement sur les supports que l'on souhaite prendre en charge. Bien évidemment, la méthode la plus fiable reste celle qui consiste à utiliser le smartphone ou autre appareil dont l'éligibilité est à vérifier. La première méthode est moins fiable mais reste intéressante, voici pourquoi : Avantages Pas d'installation sur le poste et de ce fait, compatible avec toutes les plateformes. Inconvénients L'évènement Touch n'est généralement pas pris en charge. Nous vous proposons dans un premier temps de découvrir les différentes méthodes de simulations proposées par les éditeurs de navigateurs et des services en ligne. Chrome Firefox
15 conseils pour réaliser un bon e-mailing en 2013 L’e-mail marketing – comme tout bon « nouveau » support – a connu ces six dernières années une belle traversée du désert digitale : baisse des investissements, qualité plus que relative, chasse aux s(pam)orcières et une délivrabilité proche de la mission impossible. Victime de son succès l’e-mailing ? Oui, certainement. Mais c’était sans compter sur l’explosion des smartphones et la pugnacité des professionnels du milieu ; pour la plupart tout droit sorti de la grande famille des VPCistes (Vente Par Correspondance) dont on reçoit encore et toujours les catalogues papiers. De retour sur le marché en tant que support mature, l’année 2013 s’annonce donc comme un excellent cru pour l’email marketing. Voici donc quelques conseils avisés pour tous ceux qui souhaiteraient se lancer dans l’aventure ;) 1. 2. Non pas en lui donnant un prénom (n’est-ce-pas Cécile et Alexandra ?) 3. L’objet influence directement la délivrabilité de votre emailing ainsi que son taux d’ouverture. 4. 5. 6. 7. 8. 9.
20 tools to help you create responsive web designs Building responsive design has become a huge trend in the web design world. There is a good reason for that: responsive websites are much more relevant than fixed web designs in a time where a lot of internet traffic comes from mobile devices. In this article we take a look at some of the most useful tool to help you with the creation of responsive designs. Sketching / wireframing tools First things first, responsive design need to be well-thought or you’ll get much more work than you would have otherwise. 1. A common problem you’ll run into when planning a responsive web design is to chose which devices and sizes you’ll design for. 2. Simple PDF templates to help you map out how layout sections will change in different resolutions. 3. Quickly get the CSS for creating your fluid grid website with this simple tool. 4. ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. Responsive design elements 5. 6. 7. 8. 9. 10. Templates and grids 11. 12. 13. 14. 15.
Créer un template d’email responsive Maintenant que nous avons découvert deux solutions concurrentes pour gérer des listes de diffusion et expédier des campagnes emailing, entrons dans le vif du sujet avec la rédaction de notre premier email, plus précisément avec la mise en place de sa structure, puisque notre but aujourd’hui ne sera pas de nous intéresser au contenu de l’email mais de créer un template responsive, c’est à dire qui va s’adapter à tous les écrans en offrant le même confort à tous. Enfin ce dossier spécial emailing devient concret technique ! Pourquoi un email en responsive web design ? D’après le site Email Client Market Share, près d’un email sur 4 est ouvert à partir d’un iPhone, plus qu’à partir du logiciel PC Microsoft Outlook. Et pourquoi ne pas se contenter de faire un tableau sur toute la largeur de l’écran ? Un tableau dans un tableau dans un tableau … Ainsi le découpage en colonnes se fait de la façon suivante : Voilà pour la base, nous allons maintenant construire un email sur ce modèle. deviendra :
15 More Responsive CSS Frameworks & Boilerplates Worth Considering Following on from 15 Responsive CSS Frameworks Worth Considering, which we published last November, today we have 15 more for you to consider. All of the frameworks and boilerplates below have been built with strict compliance to standards and conventions and will, as you would expect from any CSS framework, save your precious time by eliminating the need to write any of the base CSS styles yourself and, more importantly, helping you solve any tricky responsive layout issues you may have. Gumby 960 Grid Responsive CSS Framework Gumby offers a choice of either downloading the 12 column version, 16 column version, hybrid 12/16 column version or absolutely everything in a single bundle. In a nut-shell, Gumby has been built to be the most malleable grid framework you’ve ever used while still maintaining the familiarity and ease-of-use of the grid you’ve always used. Gumby 960 Grid Responsive CSS Framework → Responsive HTML5 Aeon Framework This is version 2 of the Aeon framework. Titan Framework