Le guide ultime pour bien travailler en web marketing : utilisez les bons outils online et offline !

Pour bien travailler dans le milieu du web marketing, il faut essentiellement du jus de cervelle. Accessoirement, il faut aussi un pc avec un accès internet.
Ensuite, comme dans beaucoup de métiers, la suite MS Office avec le combo excel+word+powerpoint permet de globalement faire son taf’.
Mais il existe aussi une multitude d’outils super utiles qui permettent de travailler vite et mieux.
J’ai décidé de partager avec vous ceux que j’utilise dans un ‘Ultimate Guide’, en espérant que cela pourra vous être utile.
Bien sûr, si vous avez d’autres suggestions, n’hésitez surtout pas à partager…

Online
Dans le web marketing, on est amené à travailler avec une multitude de plateformes en ligne pour gérer un certain nombre d’opérations (emailing, achats de liens sponso, cms, adserving, web analytics, affiliation, crm, etc…)
Voici quelques tips pour exploiter au mieux certaines plateformes:

  • Avec les outils Google = utilisez Chrome !

Que ce soit adwords, analytics, youtube, webmaster tools, doubleclick for publishers, toutes les plateformes de google fonctionnent correctement avec n’importe quel navigateur.
En revanche, il arrive qu’il y est quelques plantages quand on manipule beaucoup de datas (grosses campagnes dans adwords - notamment avec un compte ‘agence’ - ou bien segmentations avancés avec beaucoup de datas dans analytics par exemple).
Et bien, sachez que Chrome, le navigateur de Google, apporte un fonctionnement plus stable et surtout beaucoup plus rapide des applis google que les autres navigateurs.
1er tip donc: quand vous travaillez sur les plateformes Google, utilisez Chrome.

  • Internet Explorer: c’est quand même bien…

Je viens de vous indiquez que Chrome est un excellent navigateur, particulièrement adapté pour travailler sur les plateformes de Google.
En revanche, pour la plupart des autres plateformes online, Internet explorer me semble plus adapté, et cela pour 2 raisons.
Premièrement, Internet explorer est le navigateur le plus utilisé: si vous travaillez sur vos sites avec firefox ou chrome 100% de votre temps, vous mettrez peut-être du temps à réaliser qu’il y a un problème spécifique (css, javascript) qui touchent les internautes sous IE (et ça arrive très fréquemment)
Deuxièmement, Internet explorer est le navigateur le plus utilisé: du coup, la plupart des plateformes online (emailing, adserving, etc…) sont conçues pour fonctionner sans souci avec IE, et pas nécessairement avec les autres.
Un cas concret = Salesforce
Cette plateforme CRM est sans doute très utilisée par vos équipes commerciales. Elles adorent y suivre leur piste de prospections, reportées leur activité, faire des forecasts, etc…
Salesforce propose notamment un module de publipostage pour cibler des emailings sur ces clients ou prospects. Manque de chance, ce module est totalement incompatible avec firefox. Il me semble que les FAQs de Salesforce indiquent que le problème a été identifié courant 2007 et devait-être corrigé dans le trimestre qui suivait… cela n’a jamais été corrigé  depuis.
Vous pouvez généraliser cet exemple à pas mal de plateforme d’emailing, adserving, etc…
2eme tip donc: quand vous travaillez sur les plateformes autre que Google, utilisez Internet Explorer.
A NOTER: en revanche et bien évidemment, fuir comme la peste internet explorer 6.0 …

  • Firefox: c’est parfois vraiment bien…

Bon, je vais quand même vous parlez également de firefox, étant donné que c’est le navigateur que j’utilise le plus souvent.
Si vous travaillez avec des outils d’e-marketing, je vous encourage à utiliser IE ou Chrome, pour les raisons listées plus haut. En revanche, si vous travaillez avec votre designer ou intégrateur, passez sous firefox.
C’est quand même le navigateur le plus intéressant, notamment grâce à des plugins comme firebug et yslow qui permettent gagner un temps considérable.
3eme tip: quand vous travaillez sur du design web, utilisez Firefox + firebug + yslow
ATTENTION QUAND MEME: Internet Explorer étant le navigateur le plus utilisé, fait un check sous IE une fois que vos templates sont intégrés avant de vérifier leur comportement…

  • Les liens sponsorisés de Yahoo search marketing = utilisez la version desktop (AIR)

La solution d’achat de liens sponsorisée de Yahoo n’est pas un exemple de stabilité/intuitivité.
Heureusement, Yahoo a sorti une version desktop, qui fonctionne sous Adobe AIR, et qui se montre vraiment très chouette.
Curieusement, Yahoo n’en fait pas beaucoup la publicité, et c’est bien dommage
4eme tip : si vous administrez des campagnes de liens sponsos sur Yahoo search marketing, alors utilisez la version desktop, que vous pouvez télécharger ici.

  • Vous adorez Adblock: ok mais pas pour bosser…

Adblock est vraiment un super plugin qui permet d’économiser beaucoup de bande passante et de filtrer pas mal de crappy content. Mais, ce plugin peut poser pas mal de problème d’un point de vue professionnel en web marketing:
Certains sites, certains services, certaines fonctionnalités peuvent se retrouver coincer par Adblock, vous empêchant ainsi de travailler.
Ici, je vous fais vraiment par de mes retours d’expérience. J’ai parfois perdu un temps fou pour arriver à faire un truc tout bête en ligne, avant de réaliser qu’Adblock empêchait un service en ligne de fonctionner normalement.
5eme tip: je vous déconseille d’utiliser Adblock sur votre machine de bureau si vous êtes amenés à travailler sur des plateformes d’e-marketing.

Offline

  • Abandonnez le Bloc note Windows pour passer sous Notepad++

C’est le même, mais en moins bien mieux!

  • Faites des croquis : les outils magiques…

Si vous devez designer des protos, ou décrire un process pour votre direction, il va vous falloir réaliser des schémas.
Rapidement, cette nécessité de faire des maquettes va vous prendre la tête, car vous allez devoir faire plein d’ajustements et retouches sur vos croquis.

Pour m’aider à faire du sketching vite et bien, voici les différents outils que j’utilise:
- Microsoft Powerpoint
C’est pour les noobs, mais ca permet de disposer rapidement 3/4 éléments sur un schéma avant de formaliser.

- Microsoft Visio
A l’inverse de Powerpoint, ce soft n’est pas du tout conçu pour les noobs. Il vous permettra de faire pas mal de maquettes, mais il est surtout particulièrement adapté pour concevoir des schémas directeurs avec les enchainements logiques.
En revanche, ca prend du temps…

- Gadwin printscreen (version gratuite)
Le petit soft génial pour faire des screenshots à inclure dans vos croquis: lorsque vous faites une capture d’écran, il permet de sélectionner extactement les éléments que vous voulez capturer avec votre souris .
C’est gratuit et ça se télécharge ici.

- Balsamiq Mockups
Un de mes préférés. Ca tourne sur Adobe AIR et ca permet de mettre en forme très simplement des croquis vraiment très chouettes.
YouTube Preview Image
Ca se télécharge ici et bien évidemment, c’est payant (mais pour le prix, c’est top)

- Mes outils préférés : du papier et des stylos!


Comme je vous l’indiquais plus haut, le sketching nécessite beaucoup d’allers-retours et de corrections, surtout si vous travaillez en mode task force > méthodo agile
Si vous voulez explorer rapidement vos idées avec vos équipes et avancez de manière efficace, alors je préconise de revenir aux bonnes vieilles méthodes.

  • Pour le papier, je vous encourage par commencer à sauver la forêt et à utiliser toutes les feuilles qui trainent en général autour des imprimantes professionnels dans les locaux de votre employeur.
    Plutôt que de jeter directement vos impressions erronées/obsolètes, garder ses feuilles et écrivez au verso : ca vous fera du brouillon pour pas cher…
  • Pour les stylos, investissez ! voici le matos que j’utilise:
    - 3 stabilos boss (orange+vert+bleu)
    - 1 porte-mine 0.7 mm (Bic matic)
    - 4 stylos billes (ou roller) bleu/noir/rouge/vert
  • Pour le reste:
    - des post-its
    - une règle 30 cm
    - une paire de ciseaux
    - une agrafeuse
    - un rouleau de scotch
    - une gomme

Avec tout ça sous la main, vous êtes armé pour faire des sketches sympas comme celui-ci:

Quand vous sketches sont finalisés, vous pouvez alors les accrocher au mur de votre bureau, et détaillez des enchainements de process online en concevant un sketchboard. Cela va aboutir à quelque chose comme cela:

L’intérêt du sketching est de permettre de travailler vite et bien, et de donner de la visibilité aux équipes impliquées dans des projets online.
En cas d’erreur, il suffit de passer un coup de gomme et de changer un post it, et ça repart…

Enfin, comme je suis un mec sympa, je vous file également quelques templates de sketching vierge qui pourront vous servir à réaliser vos maquettes:

- Mes préférées, les grilles de chez 960 grid system (.pdf)

- Les grilles custom de jason robb (.pdf)

- Grille single page sous powerpoint

- Grille multi page sous powerpoint

Voilà, c’est la fin de cet article. N’hésitez pas à l’enrichir si vous avez des suggestions.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

17 commentaires pour “Le guide ultime pour bien travailler en web marketing : utilisez les bons outils online et offline !”

  1. Sir_carma dit :

    Merci pour l’article, y’a de bonnes choses !

    Je suis par contre pas du tout d’accord sur ton “court” passage sur Powerpoint.

    C’est loin d’être pour les noobs. Alors oui c’est facile d’utilisation pour le premier venu, mais c’est un outil bien complexe et très riche.
    Un powerpoint bien maitrisé c’est 100 fois plus complet que Balsamiq.
    Après 3 ans de travail quotidien sur des maquettes PPT, t’as tous les templates qu’il te faut, tous les blocs/fonctionnalités préparés dans un cas client ou un autre. Bref, impossible de passer à un autre outil.
    En partant du zoning simpliste (filaire/blocs) à une maquette fonctionnelle ultra détaillé sur laquelle il ne manque plus qu’une couche de peinture et du dév.
    A la limite je dirais plutôt que c’est Balsamiq qui est pour les noobs et les feignants. On en atteint très vite les limites.
    Mais bon, PPT c’est comme tous les outils de MS office, et un peu comme notre cerveau, tout le monde utilise que 10% des capacités…

    Sinon pour les quelques autres outils, tu pourrais parler de tout ce qui est Firebug, web developper toolbar et consors (car en web marketing faut quand même s’y connaitre en technique, et on a un jour ou l’autre les mains dans le cambouis), Adobe BrowserLab (test le rendu d’un site sur toutes les browsers possibles), YSlow (chargement de la page), Netvibes & Twitter pour la veille, Smashing Magazine pour toutes ses best practices, un site comme Icones.pro ou Iconlet.com pour trouver des icones sympas pour ses maquettes, etc. etc.
    Et puis tous les services type Yooda, Alexa, Google AdWords: Keyword Tool, Traffic estimator, Website optimizer…

    J’en oublies surement un paquet !

  2. xandar dit :

    C’est pas vraiment du web marketing mais voici un plugin uniquement pour IE qui permet de tester la sécurité de son site web.

    J’ai jamais testé, je sais pas ce que ça vaut et si c’est efficace mais j’en ai entendu du bien autour de moi au boulot :

    https://www.isecpartners.com/SecurityQAToolbar.html

    Si ça peut servir à quelqu’un…

  3. polioman dit :

    Très bon article, c’est le genre de sujet qui ne m’intéresse pas en général mais là, j’ai adoré :) Ca me donnerais presque envie de me reconvertir ^^

  4. fqboy dit :

    J’en veux encore des articles comme ça.

  5. zejulio dit :

    Merci les fanboys…
    je ne sais pas si j’arriverais à fournir, mais en attendant, consulter des trucs sympa comme smashing mag…

    @sir_carma:
    merci pour tes remarques pertinentes. je suis à 100% en phase avec ce que tu dis.
    loin de moi l’idée également de cracher sur powerpoint: c’est un super outil, mais souvent utiliser à 10% des capacités comme tu le dis…
    En revanche, je persiste à dire que dans une approche de sketching, pour faire du quick and dirty, balsamiq est plus adapté car les boxes déjà toutes pretes sont vraiment super pratiques.
    Après, quand tu cherches à produire un truc plus carré et à avoir une maquette de base clean pour construire un proto, alors là powerpoint peut etre une vraie alternative (mais visio aussi…)

    Au final, je n’ai pas la prétention de connaitre tous les outils de la terre: il y en a surement d’autres avec leurs avantages/inconvénients.
    Comme souvent, c’est donc l’utilisateur qui choisit quoi et comment s’en servir…

  6. Grendel dit :

    Cacoo : excellent wireframe online
    Mindmeister : mindpam online collaboratif. Limité, mais suffisamment utile pour de petits projets

  7. necromando dit :

    Merci beaucoup pour cet article très instructif !

  8. TheBigBang dit :

    fqboy a dit :
    J’en veux encore des articles comme ça.

    Idem, c’est vraiment excellent. Merci beaucoup !

  9. Regnareb dit :

    Mouais.

    ATTENTION QUAND MEME: Internet Explorer étant le navigateur le plus utilisé, fait un check sous IE une fois que vos templates sont intégrés avant de vérifier leur comportement…

    Il ne faut pas faire un check sous IE (différentes versions), mais en faire un sur tout les navigateurs, dont Opera, Safari, Chrome, etc)

  10. zejulio dit :

    oui, tu as raison, mais quitte a gagner du temps, il faut se concentrer sur ceux qui ont la + grosse par de marché (IE et firefox donc)

    quant a chrome et safari, ils utilisent le meme engine (webkit) donc ‘a priori’, si ca tourne sous chrome, ca tourne sous safari
    reste opéra qui a une part de marché tres négligeable + le reste (mais si on veut bien faire, il faut tout tester, tu as raison…)

    il existe pas mal de solutions de testing multinavigateur (sir_carma cite notamment Adobe BrowserLab), mais aucune ne m’a reellement convaincue: souvent, conflits ou incompatiblité javascript… c’est pas terribe - si il ne faut en retenir qu’une seule, ce sera effectivement celle d’Adobe…

  11. Regnareb dit :

    Il n’y a pas de parts de marché négligeables ;)
    Ça n’existe pas, il faut le faire point, ou alors on n’a rien d’un professionnel.

    PS : Opera n’a jamais porté d’accent… en tout cas pas le logiciel.

  12. zejulio dit :

    Désolé, mais je ne suis pas entièrement d’accord avec toi:
    - oui, il faut s’assurer que tout fonctionne correctement
    - mais, en revanche, un professionnel doit faire face à un certain nombre de contraintes de temps et de rentabilité. Mesure ton ROI si tu as 5 jours/homme de travail pour rendre une feature clean avec un navigateur qui représente 0.03% de ton audience. Une décision business sera alors de dire : utilisons cette ressources sur d’autres sujet qui bénéficieront à l’ensemble des utilisateurs.
    Exemple: tu recettes 100% des pages et fonctionnalités de tes sites sous maxthon toi?

    En revanche, si tu bosses chez google et qu’il y a 4000 dev à disposition, ca aide…

    ps: tu as raison pour opera - je tapais ca vite et tard.

  13. Grendel dit :

    Il faut privilégier l’usage et anticiper les évolutions de ceux-ci. Partant de là, tu te concentres sur une segmentation “acceptable” de tes usagers par rapport aux outils qu’ils utilisent (OS/Browser/version). L’idée est de limiter le spécifique le plus possible, quand son usage est marginal.

    Je reviens sur Adobe BrowserLab. Je ne comprends pas dans quelle circonstance ça peut présenter une utilité. Ca ne propose que 2 OS déjà, ensuite ça te fait qu’une restitution graphique… si quelqu’un qui l’utilise peut m’expliquer, je pense passer à côté d’un truc.

  14. Sir_carma dit :

    Grendel a dit :…

    Franchement tu charies, c’est pas les OS qui font la différence…
    Y’a 12 browsers disponibles, c’est largement suffisant.

    Moi je le trouve pratique quand tu fais des modifs de CSS/html/Php par exemple sur un wordpress (donc en ligne), ca te permet de vérifier rapidement si ça passe bien partout (visuellement évidemment) .

    C’est gratos, c’est pratique, c’est mieux que rien. Si t’as mieux, fait tourner !

    Après c’est sûr, rien ne vaudra jamais le test en live sur toutes les configs… Mais bon, hein…

  15. Grendel dit :

    Merci c’est ce que je voulais savoir. Non je n’ai pas mieux en stock :)

  16. fqboy dit :
  17. zejulio dit :

    arf - les copieurs…

    j’adore celui-ci en tout cas:
    http://www.design-police.org/

Laisser un commentaire

Si vous avez un compte sur WeFrag, connectez-vous pour publier un commentaire.

Vous pouvez, entre autres, utiliser les tags XHTML suivant :
<a href="" title="">...</a>,<b>...</b>,<blockquote cite="">...</blockquote>,<code>...</code>,<i>...</i>