Share
Au cours des dernières semaines, notre équipe a eu la tâche plutôt ardue de concevoir dix modèles de courrier électronique à temps pour le lancement de Canvas, un nouveau logiciel de création de bulletin électronique facile à utiliser dans Campaign Monitor..
Outre les exigences habituelles liées à la création de modèles pour un service de marketing par courriel utilisé par les concepteurs (par exemple, les campagnes ont belle allure, même sur les appareils mobiles!), Nous devions régler quelques problèmes supplémentaires. Avant tout, il y avait une collaboration avec la conception, les tests et bien sûr parmi les codeurs de courrier électronique pour réaliser ce projet. En fait, développer un processus autour de cela était en fait un projet à part entière.
Travailler au sein des équipes et entre elles est a) difficile et b) exige la mise en place immédiate d'outils et de processus. Si vous ne parvenez pas à obtenir les résultats souhaités dans vos projets de conception, même s'ils ne sont pas liés au courrier électronique, vous aurez probablement à vous en tenir à ces points. Avec un peu de chance, nos expériences vous seront utiles pour surmonter vos propres défis grâce à la collaboration en équipe..
En tant que programmeur de courrier électronique qui, depuis de nombreuses années, a adopté une brève approche> livraison> du code pour les tâches, utiliser une approche similaire en cascade semblait naturel lors du développement de chacun des modèles Canvas. Pour vous donner une idée de la complexité de la tâche, chacun des dix modèles est composé de plusieurs dispositions et d'une sélection d'éléments (champs de texte, boutons, etc.), chaque élément nécessitant une collaboration étroite entre nos équipes de code de messagerie et de conception. Comme ce fut le cas lorsque j'ai commencé il y a des années, la collaboration peut être périlleuse, même parmi les plus sages d'entre nous.
Alors, voici un aperçu des sept étapes, du lancement au test, en passant par le transfert, que notre équipe a travaillées pour créer les modèles. Encore une fois, même si ces réflexions concernent un projet de courrier électronique, vous trouverez probablement ces conseils de flux de travail comme s’appliquant au Web..
Il était vraiment important que nous trouvions un moyen de collaborer et de partager entre la conception, le codage du courrier électronique et quiconque souhaitait se lancer dans le projet..
Nous avons essayé un certain nombre d'approches pour discuter et clarifier des problèmes, notamment l'utilisation de Shipment (pour les revues de conception), de LayerVault (pour le contrôle de version) et d'une salle HipChat (pour le chat en équipe). À la fin de la journée, nous avons sélectionné Basecamp, une application de collaboration d'équipe très populaire. Non seulement était-il déjà utilisé et familier par de nombreuses personnes dans Campaign Monitor, mais il était très utile pour organiser des tâches de codage et faciliter des discussions plus approfondies en équipe..
Nous utilisons Basecamp pour collaborer en interne et entre les équipesPour les problèmes de modèle (par exemple, le rendu des problèmes), JIRA, une application de suivi des problèmes et des projets, a été sélectionné - un outil également très familier à l'équipe. L'utilisation de JIRA nous a également permis de boucler nos cohortes au sein de l'équipe de test, sans les obliger à utiliser des outils en dehors de leur flux de travail existant..
Une fois que tout le monde a opté pour les outils de collaboration, il était temps de recevoir les simulacres Photoshop au format PSD de l'équipe de conception. Ce fut un peu une phase de découverte (et peut-être pas si chouette après tout), obligeant les développeurs de messagerie comme moi à bien regarder les versions PSD des versions de modèle de bureau et mobile.
Une maquette de bureau pour le modèle MasonLes éléments sur lesquels nous nous sommes concentrés incluaient l'identification des mises en page standard que les codeurs d'email connaissent généralement bien (par exemple, 1 à 3 colonnes statiques), par opposition à celles non standard et plus aventureuses. Voir comment la même disposition ou le même élément a l'air traduit entre bureau et mobile est toujours très intéressant; Heureusement, nos concepteurs sont assez habitués à travailler avec des courriels réactifs (et leurs bizarreries), ils ne sont donc pas enclins à faire des demandes scandaleuses en matière de mise en page.!
Quiconque a codé une conception Web ou une conception de courrier électronique à partir de zéro le sait souvent, savoir ce qui fonctionne ou non sur de multiples plates-formes peut être tout à fait un processus exploratoire. Avec nos modèles, certains éléments devaient être codés et testés en plus du modèle en cours, afin de garantir leur intégration dans la conception. Comme toujours, certaines choses peuvent ne pas sembler identiques sur tous les clients de messagerie (ou les navigateurs, comme c'est le cas avec le Web), mais elles devraient au moins se dégrader avec élégance - et avoir une belle apparence..
De plus, si quelque chose dans une maquette s'avérait réellement impossible à réaliser, il était bon de donner cette rétroaction plus tôt, car les modifications de conception peuvent souvent avoir des effets d'entraînement..
Une fois convaincu que les modèles de modèles fournis par nos concepteurs pourraient être transformés en un modèle de courrier électronique solide, il était temps de couper et de créer des actifs. Cela inclut à la fois des éléments graphiques dans le modèle et des photos d’espace réservé de la maquette..
Pour nous assurer que les images sont optimisées pour les écrans Retina, nous les avons exportées à partir des fichiers PSD fournis au format 2x, puis redimensionnées à 1x en utilisant les attributs width et height de l'image. Oui, c'est quelque chose que les concepteurs d'email font aussi!
Une des icônes, zoomée pour un travail détailléLes images d’arrière-plan (par exemple, celles utilisées dans les boutons pare-balles), qui étaient généralement exportées aux formats 1x et 2x.
Alors que chaque modèle Canvas est conçu pour être assez dynamique en ce qui concerne la combinaison de dispositions et d’éléments, nous avons constaté que le codage d’un fichier HTML long et statique avec un contenu réservé nous permettait d’envisager le produit final. Nous avons développé un framework à partir de rien basé sur LESS, avec le fichier styles.less de chaque modèle contenant un certain nombre de variables pour les styles de base et les calculs, suivis de styles spécifiques au modèle. CodeKit a été utilisé pour traiter les fichiers LESS et accélérer les tests du navigateur..
De plus, Stig, toujours utile, de notre équipe, a créé une extension Chrome permettant de superposer les conceptions PSD sur des pages HTML. Appelé Blueprint, cette extension a permis à l’équipe d’atteindre un degré de perfection de pixel sans précédent..
Bien que beaucoup de gens s'opposent à l'idée de rendre les choses «identiques» sur tous les clients de messagerie - ou les navigateurs d'ailleurs -, il est certainement vertueux d'aspirer à cet objectif: atteindre un niveau de qualité et peut-être même apaiser un client difficile. Un certain degré!
En ce qui concerne le test des versions "de bureau" et "mobile" d'une conception de courrier électronique, notre processus n'était pas si différent de ce qui se passe sur le Web. Malheureusement, mais sincèrement, nous ferions beaucoup de compressions et d’extensions du navigateur..
Toutefois, au moins en ce qui concerne les tests, il ne suffit jamais de consulter le modèle dans Chrome (ou le navigateur de votre choix). À ce stade, nous importons généralement la campagne dans Campaign Monitor pour exécuter un test rapide de conception et de spam (projet de messagerie électronique) et / ou dans Litmus (qui fournit également des captures d'écran automatisées du navigateur). Si la conception donnait des résultats lors de tests virtuels, nous passerions aux tests de périphériques en direct..
En plus d'utiliser quelques machines virtuelles dans VMware, nous nous sommes également tournés vers notre "laboratoire de périphériques", composé en grande partie de combinés mobiles, pour effectuer des tests aussi approfondis que possible. Si vous ne disposez pas d'un laboratoire de périphériques sur votre lieu de travail, consultez OpenDeviceLab pour voir s'il existe une collection de périphériques accessible au public dans votre région..
Une fois satisfait de notre travail, la codification de ces modèles n’a pas été différente de tout autre projet. Chez Campaign Monitor, nous utilisons GitHub pour engager notre travail et collaborer sur les problèmes de rendu en suspens, ainsi que pour effectuer des tests et créer des boucles si nécessaire. Si vous n'avez jamais utilisé GitHub auparavant, readwrite propose un excellent guide du débutant pour vous aider à démarrer..
Certes, le plus souvent, ces étapes se superposent ou se répètent; Le codage et les tests Web et par courrier électronique sont rarement rapides, propres ou sans incident. Cependant, les résultats finaux parlent d'eux-mêmes: un premier lot de dix modèles robustes, livrés à temps et prêts à être utilisés par tout le monde. Jetez un coup d'œil à Canvas lorsque vous devrez envoyer un bulletin d'information par courrier électronique qui aura fière allure sur les appareils mobiles, ainsi que sur Gmail, Apple Mail et tous les clients habituels..
Les processus et les outils utilisés pour créer et collaborer avec d’autres ne nous sont pas parvenus en un instant - mais étant donné le calendrier de plusieurs semaines du projet et le fait que nous ayons travaillé à plusieurs reprises sur des tâches similaires, nous avions l’avantage d’être capable d'améliorer notre flux de travail au fur et à mesure. Suite à ce projet, nos recommandations aux autres sont les suivantes:
Les étapes ci-dessus ont été décrites dans notre wiki interne avant le début des travaux. le fait que ce guide / cette spécification soit accessible à tout le monde a permis au personnel débutant et distant de se mettre au diapason très rapidement, tout en donnant une visibilité aux autres équipes sur le fonctionnement des codeurs. Ce document a été affiné au fur et à mesure, fournissant ainsi à chacun les informations les plus récentes.
Même s'il est toujours tentant de "magasiner" pour le plus récent et le plus efficace au début d'un nouveau projet, obliger tout le monde à adopter des applications inconnues peut créer des défis inutiles. Discutez avec les autres équipes de ce qu'elles utilisent pour collaborer et voyez comment elles peuvent être adaptées à vos propres tâches..
Qu'il s'agisse de projets de courrier électronique ou de projets Web, il peut y avoir des déconnexions entre ce que les concepteurs, les équipes marketing, les ventes et d'autres pensent est possible et ce qui peut être fait en tant que codeur… Surtout lorsqu'il existe des délais. Prenez le temps de faire votre propre découverte et de définir vos attentes - passer quelques jours de plus à expérimenter et à discuter de tâches est toujours mieux que de rater un jalon important ou de donner des résultats insuffisants.!
À quoi ressemble votre conception sur les appareils Android? Même si vous n'en utilisez pas personnellement, 33% des États-Unis l'utilisent - et ce pourcentage est beaucoup plus élevé ailleurs. Plus vous pourrez tester de plateformes, mieux ce sera..
Ainsi, bien qu'il puisse y avoir de grandes différences entre la manière dont le courrier électronique et le travail Web sont codés et produits, les étapes nécessaires pour donner vie à la vision du concepteur sont tout aussi pertinentes. Espérons que nos expériences vous aideront à élaborer un plan pour votre prochain projet de code et à garantir que votre équipe reste heureuse et productive en collaborant ensemble..
Accentsconagua