Les principes

Les principes, en tant qu’intégrateur, j’en ai plein. J’ai même construit ma vie professionnelle dessus, comme la plupart de ceux de ma race. La sémantique, la séparation contenu/contenant, la non-intrusivité des scripts, les standards, l’accessibilité, la rétro-compatibilité, les performances, vous connaissez la chanson par cœur.

C’est ce qui fait que je prétends faire un boulot de qualité. Mais la qualité dans un contexte de production, c’est quoi en intégration ?

L’idéal

Dans un monde idéal, j’aimerais que tous les sites que je sors soient accessibles AAA et surfables sur Netscape 4. Voilà, c’est clair, c’est très noble et c’est très évident. Mais ça reste un vœu pieux parfaitement vain.

La réalité

Intégrer un site moderne, accessible à tous et rétro-compatible jusqu’à l’Antiquité, ça a un coût. Et ce coût peut rapidement prendre des proportions pharaoniques : dans un contexte de projet commercial dans la vraie vie, il n’est jamais, jamais budgété à la hauteur de ce qu’il devrait idéalement (dans le monde merveilleux du paragraphe précédent).

C’est la raison pour laquelle il arrive que des sites imparfaits sortent encore de nos jours. Et j’ajouterai même (scoop) : TOUS les sites qui sortent de nos jours sont imparfaits.

La cible

Alors je lis ici et là que « la cible de l’intégrateur, c’est le web » ou « c’est les humains ». C’est très honorable, le principe d’universalité, encore une fois moi j’adhère totalement. D’ailleurs je suis aussi pour sauver les bébés phoques et le Darfour.

Mais dans la vraie vie, évidemment, on ne sauvera pas tout le monde sans les moyens qui vont avec. Ces moyens faisant (systématiquement) défaut, que faisons-nous ? On élague, on priorise, on fait au mieux avec les contraintes qui sont les nôtres. C’est là qu’intervient la (vraie) notion de cible.

Une cible, en terme de communication, ce n’est pas « tout le monde ». On ne peut pas parler efficacement à tout le monde, et parfois d’ailleurs ce n’est tout simplement pas l’objectif. Une cible, c’est un groupe identifié à qui on veut s’adresser en priorité, en utilisant si possible les codes qui sont les siens de façon efficace pour qu’il comprenne instinctivement qu’il est directement interpellé.

Une cible, en terme d’intégration dans la vraie vie, ce n’est pas non plus tout le monde (et encore une fois c’est dommage, oui). Dans un contexte de production lambda, on met par exemple systématiquement de côté le support des anciens navigateurs, la seule question pertinente étant de savoir où l’on s’arrête (IE 7 ? IE 6 ? Avant ? Après ?). On peut aussi s’engager à respecter tel niveau d’accessibilité, mais là même question : où s’arrête-t-on ? A ? AA ? AAA ?

En d’autres termes on va se montrer pragmatique, pas par choix mais bien par nécessité, afin de respecter le plus grand nombre d’utilisateurs à la mesure de nos moyens. Et tout cela en résonance avec la cible principale de notre projet courant (qui sera probablement différente de celle du prochain), pour être certain de distribuer ces moyens le plus efficacement et le plus intelligemment possible : en clair nous sommes ici dans une démarche d’optimisation, rien de plus, rien de moins.

Le boulot de l’intégrateur

Le boulot d’un intégrateur avisé, c’est de savoir placer intelligemment un curseur. Un curseur entre toutes les problématiques métier dont il a la charge sur un site et qui constituent son cœur de métier. Et de le placer sciemment en fonction de la pertinence desdites problématiques vis-à-vis du projet sur lequel il travaille, tout en essayant de garder le meilleur niveau de qualité générale. C’est un métier fait de tiraillements et de compromis complexes qui engagent une responsabilité certaine.

Le boulot d’un intégrateur avisé, ce n’est pas de faire passer aveuglément ses dogmes avant l’intérêt du projet. De proclamer, par exemple, que « la créa est moins importante que le poids de la page » et de démolir en conséquence tout le boulot effectué en amont par les designers au prétexte que ses tables de la loi lui professent qu’une page web ne doit jamais dépasser 150 Ko. Les exemples de comportements butés du même tonneau sont aussi nombreux que navrants. Un peu de souplesse ! Un peu de recul !

Un intégrateur avisé respecte l’expertise des autres corps de métier (même les marketeux).

Un intégrateur avisé admet sa moindre compétence sur les domaines dont il n’a pas la charge.

Un intégrateur avisé reconnaît parfois la priorité d’impératifs autres que les siens pour le bien du projet.

Un intégrateur avisé n’est pas appelé en conseil pour créer de nouveaux problèmes mais pour trouver des solutions à ceux qui existent.

En somme, comme le disait très bien Marie dernièrement, il convient de faire preuve de pragmatisme, d’écoute et d’humilité… non seulement entre nous mais aussi envers les autres : ils nous le rendront bien (sauf les graphistes, cette maudite engeance).

À droite deux variantes envisagées un temps, puis abandonnées.

La commande incluait de nombreuses illustrations, et pour coller au positionnement artisanal « de proximité » des prestations offertes par la société, j’ai opté pour une ambiance sépia et un style rough proche de l’aquarelle. L’entreprise souhaitait également se démarquer par sa présence parisienne (à l’opposé de ses concurrents offshore), ce pourquoi j’ai mis un fort accent sur Paris dans les visuels.

Mon travail sur l’identité visuelle peut être consulté de façon plus complète dans la partie du portfolio qui lui est consacrée.

STPo a été d’une aide très précieuse pour mettre en formes les idées que nous avions en tête et a su créer une identité cohérente (et très belle !) pour notre agence ; il a réussi à saisir l’esprit et la personnalité de notre société avec son coup de pinceau ravageur, et les avis des visiteurs que nous avons eus depuis l’ont bien confirmé !

Harold, co-fondateur de Switch

J’ai également réalisé pour eux des cartes de visite et la direction artistique de leur site vitrine (visible dans la section ad hoc du portfolio).

J’ai d’abord proposé une illustration vectorielle colorée afin de coller au positionnement souhaité et au parti pris vectoriel « clean » que l’on retrouvait déjà ailleurs sur le site (pictogrammes notamment). La piste n’ayant pas été retenue, j’ai opté pour une solution plus institutionnelle basée sur des photos de stock, en prenant soin de les mettre en valeur de façon à transmettre confiance, chaleur et complicité.

J’ai également réalisé plusieurs écrans plus fonctionnels (tableaux de données, fiches de profil, etc.) où l’accent a davantage été mis sur la hiérarchie visuelle et la lisibilité d’une information plus complexe.

Ce que ça fait :

• Concevoir, définir et réaliser le concept créatif d’un projet en répondant aux problématiques posées par ce dernier.
• Contacter, briefer et diriger (aiguiller) les ressources nécessaires à la traduction de ce concept en images, en mots, en sons, en code, et s’assurer qu’elles le comprennent et le respectent au mieux.
• Coordonner la cohérence de l’ensemble et être garant de l’unité créative du projet.

Ce que ça ne fait pas :

• Le chef.
• L’artiste.
• Le buzz.

Si on résume, il faut lire :

• « Direction » comme : axe, sens, intention, objectif.
• « Artistique » comme : culturelle, contextuelle, émotionnelle.

« Si on ne comprend rien à ce terme, c’est qu’il faut le changer. »

Tu sais ce que c’est, un technicien en charge des examens non-destructifs ? Moi non plus, et pourtant personne ne changera la dénomination de ce métier pour nous, sois-en bien sûr. Faisons avec, connaissons et faisons connaître notre écosystème professionnel à ceux qui sont concernés (et devraient déjà le connaître, ne serait-ce que par curiosité).

« Directeur Artistique “Junior”, pfffr je pouffe. »

Eh bin tu devrais pas. Comme dans tout métier, il existe des juniors et des seniors en fonction de l’expérience qu’ils ont accumulée dans leur domaine de compétences. Un directeur artistique junior, c’est un directeur artistique qui a peu d’années d’expérience. Un senior, il en a davantage. Tu vois, c’est facile.

« Ça sert à rien ces caprices d’artiste, laisse-moi faire mes CSS. »

Si la direction artistique n’est pas de l’art, elle est encore moins une surcouche de peinture facultative déposée au hasard sur du HTML. Une bonne créa sert son projet autant qu’un code bien écrit, les « fioritures » graphiques (tant honnies par d’encore trop nombreux développeurs) ont bel et bien une fonction, et pas uniquement technique : renforcer un propos, situer un projet dans un contexte, clarifier un positionnement, interpeler une cible. Ce n’est PAS gratuit, ce n’est PAS pour se faire plaisir sur Photoshop : c’est pour servir son sujet, en utilisant d’autres outils que des mots ou des balises.

Alors oui, une bonne direction artistique ne s’évalue pas à coups de critères de conformité et de checklists Opquast, mais on peut facilement (avec le bagage nécessaire) décréter qu’elle répond (ou non) aux objectifs fixés dans le brief créatif. Un bon directeur artistique saura tirer le meilleur parti des intervenants qui travailleront sur son projet afin que le résultat final soit le plus proche possible de l’intention initiale. Un mauvais directeur artistique, il fera ça.

C’est bon ?

La semaine prochaine, on expliquera aux DA la différence entre un développeur front-end et un développeur back-end, ça vous dit ?

Ça ressemble à une liste de contre-indications ergonomiques pour débutant affligeante de banalité, et pourtant je rencontre encore aujourd’hui ce genre de guignoleries plusieurs fois par jour… Alors, cher designer, cher marketeur, pourquoi ton taux de rebond est-il si élevé ?

L’overlay d’entrée de jeu

Un gros layer de promo me jaillit au visage à l’arrivée sur la page, masquant tout le contenu que j’étais venu voir, et avec un bouton « fermer » pas toujours facile à trouver. À moins que ma vie ne dépende de ce que je suis venu chercher chez toi, j’ai déjà fermé le site.

Viadeo et LinkedIn sont évidemment les champions toutes catégories reconnus de la discipline, mais nombre de journaux en ligne sont également accros à cette drogue dévastatrice. Brûlez en enfer.

Scoop.it et les autres

Je clique un lien, au lieu d’aller sur le site original j’atterris sur une espèce d’agrégateur imbitable avec à boire et à manger dedans, des boutons partout, des machins qui clignotent, des pushes (et parfois même un overlay comme celui décrié ci-dessus — coup double !).

Pourquoi me fais-tu ça ? Je croyais que nous étions amis… Évidemment, je quitte immédiatement cet inextricable capharnaüm et oublie à jamais le contenu que tu viens d’envoyer. Liez les articles originaux, pitié.

L’appli Twitter qui poste sur mon compte dans mon dos

Aaah. Je me connecte à ton service avec mon compte Twitter et je me retrouve sans prévenir avec une grosse pub bien lâche publiée sur ma timeline avec un argumentaire de vendeur de poisson qui fleure bon Rungis. Salaud.

C’est la raison pour laquelle sauf exception dûment identifiée je ne m’inscris plus jamais à aucun service avec Twitter. Traumatisme.

Les social buttons intrusifs

Julien en parlait très bien dernièrement, et si l’overdose de boutons de partages sociaux ne me fera pas (toujours) fermer ton site dans la seconde, il mettra très fortement en cause la crédibilité de ton contenu (au passage ces boutons ne me serviront jamais, JAMAIS, à partager quoi que ce soit, je suis assez grand pour copier/coller un lien, merci).

Bref, ces guirlandes de liens criards me feront surtout assimiler ton site à une ferme de contenus en mal de popularité qui me hurle à quel point ce que je consulte est génial et mérite d’être partagé. Effet inverse garanti, évidemment.

Pour pallier ça, j’ai désormais installé Ghostery et c’est merveilleux.

Le formulaire d’inscription long comme le bras

Je suis assez atterré de constater que cette pratique tant décriée sévit encore : j’arrive sur un site qui propose un service, et avant même de voir le moindre bout de contenu on m’assomme avec un formulaire d’inscription démesuré dont tous les champs sont obligatoires. Ça t’intéresse mes données persos, pas vrai ? Va mourir, tu m’as vu pour la dernière fois.

Dernièrement, saluons la belle performance de Rdio dans le domaine.

La pub

Évidemment, la pub : le classique, la mère de tous les vices sur le web et ailleurs. Les bannières qui gigotent de partout, de toutes les tailles, en haut, en bas. Qui s’expandent et couvrent le contenu, voire hurlent quand on a le malheur de les survoler. Qui ralentissent ton affichage, qui polluent tes contenus, qui défigurent ta superbe charte graphique. Alors oui, certains gros sites vivent de la pub, mais toi sur ton blog ou ton forum à 50 visites/mois, n’espère pas un jour dégager un salaire de ta réclame parasite, alors sois aimable d’épargner ton prochain.

Nous autres avec Adblock d’installé depuis toujours, on oublierait presque que d’innombrables inconscients surfent encore sur un web-TF1 terrifiant…

Le lien caché sur tout le fond du site

Et dans la famille des pubs, voilà sans doute la race la plus pénible et la plus sournoise du net. Je vais sur ta page web, tu mets de la pub en fond de site ; c’est laid mais bon, admettons. Je scrolle, je fais autre chose sur une autre fenêtre puis je reviens sur ta page en cliquant sur le fond du site pour reprendre le focus dessus. Et là : tornade de pubs indigentes qui poppent de partout. MON DIEU QU’AI-JE TOUCHÉ ? Ah, rien, tu as juste planqué un gros lien bien vicelard en fond de site (sur toute sa hauteur) qui renvoie vers de la merde en l’échange de quelques piastres.

Je HAIS ça, c’est d’une incommensurable lâcheté et ça détruit tout lien de confiance avec ton visiteur. Ne fais pas ça. Jamais.

Le carrousel trop chiant

J’essaie de voir des photos, et on m’impose une espèce de widget mal codé en JavaScript (voire pire, en Flash) qui masque l’ensemble de la collection d’images et contraint toute liberté de navigation avec des règles qui lui sont propres (et ne sont pas nécessairement les miennes). C’est nul, c’est pénible, ça ne flatte que ton designer (et en plus ça te fait perdre des clients).

Rien ne vaut un bon empilement d’images plein pot à la Big Picture.

Les articles paginés

Je lis un blogpost, tranquille, quand soudain en bas de page : « Aller à la page 1 / 2 / 3 ». Je sais que tes annonceurs ont besoin que tu leur prouves que ton site génère plein de hits, mais tu ne trouves pas que tout ça va trop loin ? Tu avais juré que personne ne serait blessé !

Bref, « sur le web, pas de pagination pour les articles. » — L’humanité reconnaissante.

Les stock-photos génériques

Ah, ces femmes qui rient seules avec une salade ou cette équipe-projet melting-pot travaillant de concert derrière son laptop… Tout un poème. Mais à force de les voir évidemment on n’y croit plus du tout et on ne regarde même plus de quoi parle ton site, qui ressemble à un template de Thème WordPress outsourcé en Inde. Fenêtre > fermer.

La splash-page inutile

« Bienvenue sur mon site, cliquez ici pour entrer. » J’ai DÉJÀ cliqué pour arriver sur ta page, je SAIS que je suis sur ton site, pourquoi me prends-tu la tête avec cette introduction dispensable ? Pour me prévenir que tu as bien optimisé ton affichage pour Internet Explorer 6 en 800×600 ? Soyons sérieux, donne-moi du contenu, pas des pages hôtesses d’accueil.

Le site full-Flash

Allons bon, un site en Flash… Soit tu as été extrêmement mal conseillé sur tes choix techniques, soit tu vas me proposer une « expérience immersive » super brandée saturée d’animations qui va castrer ma liberté de surf. Dans les deux cas c’est non, je n’ai pas de temps à perdre avec des bornes interactives multimédia : adieu.

La musique/vidéo qui se lance automatiquement

Croyez-le ou non, certains sites font encore ça. Comment dire ?…

Bonus : Super-Logout

Sans doute le site que j’arrive à quitter le plus rapidement grâce à un redoutable entraînement. Comment ça tu connais pas le Super-Logout ?

Conclusion

Elle est simple : ne faites pas tout ça s’il-vous-plaît, ayez pitié. Nos enfants nous jugeront.

Cette année, j’ai peu écrit sur ce blog mais j’ai encore moins dessiné, ce qui est très mal. Ma super carte de vœux constitue l’un des rares efforts que j’ai fournis dans ce domaine :

Quoi de neuf ici donc ?

Activité professionnelle

2012 a été ma première année complète en freelance depuis 2005 (comprendre : 12 mois à plein temps), l’occasion d’un point un peu plus fin que l’année dernière sur ce qui marche et ne marche pas.

• La première nouvelle n’en est pas vraiment une, mais elle fait du bien à énoncer : j’aime cette vie. J’aime choisir mes projets, j’aime choisir mes clients, j’aime choisir mes outils, j’aime choisir mes contraintes, j’aime choisir l’orientation de mon activité, j’aime travailler de chez moi, j’aime aller faire la vaisselle quand j’attends un retour client au lieu de faire semblant de travailler, j’aime décider de mes vacances seul, j’aime prendre une matinée off à l’improviste pour aller acheter des fringues, j’aime n’avoir aucun supérieur hiérarchique, j’aime choisir combien je serai payé, j’aime les périodes de bourre, j’aime les périodes de creux, bref tout ça me plaît furieusement et je ne me vois pas rempiler en CDI avant un moment.

• En 2013, je fais toujours 80% de mon chiffre d’affaire sur de l’intégration HTML/CSS/JS. C’est normal, on me connaît et on vient me chercher pour ça, et on me propose souvent dans ce domaine des missions plus longues que les missions créa (ce qui correspond donc à un chiffre généré plus important). Pas de différence avec 2012 sur ce point donc, la créa reste mathématiquement une activité minoritaire dans mon offre mais me permet de respirer de temps en temps.

• Mon réseau professionnel continue à grandir tout seul et c’est bien agréable. Je ne sais pas exactement pourquoi, mais j’ai bien quelques idées (assez peu modestes) : une expérience déjà significative dans le petit monde du web francophone, une offre claire et compréhensible, des clients satisfaits, une refonte de folio réussie, quelques articles de blog (peu nombreux mais qui ont bien tourné)… J’ai donc eu le plaisir de bosser cette année pour des agences chez qui je ne connaissais encore personne, et pas des petites ni des nulles (Marcel Worldwide, BBDO, Publicis Consultants, Uzik…). Bref : youpi.

• En presque deux ans de freelance à temps plein, je compte en moyenne une mission casse-couilles par an (sur un total de 25-30). En 2011 c’était une mission créa, cette année une mission intégration. Et à chaque fois c’est (aussi) de ma faute : un projet mal défini en amont mais auquel je dis amen, une concession sur la nature du boulot alors que je me suis juré de ne pas faire ce type de taf, un agenda intenable et peu lisible… Incompréhension, quiproquos, tensions. Généralement ça se lisse assez facilement, mais si le client est en stress, communique ce stress et commence à partir au conflit, ça vire vite au cauchemar. Comme chaque erreur jusqu’ici, une bonne leçon pour l’avenir : on ne m’y reprendra plus.

• D’un autre côté, en presque deux ans de freelance à temps plein, tout le reste a été exclusivement composé de missions qui se passent parfaitement bien. Ça a l’air idiot mais je ne cesse de m’émerveiller d’entretenir des relations de travail aussi saines avec mes clients petits ou gros, d’être rappelé régulièrement par eux et d’être payé à l’heure ou presque. Comme quoi c’est pas si compliqué de bosser normalement !

• Les finances sont toujours bonnes : 61k€ HT de chiffre d’affaire cette année, contre 42k€ l’année dernière sur 9 mois, ce qui fait une petite progression de 5k€ si on compte de façon proportionnelle. Et ceci sans compter les 9k€ d’impayés que j’ai facturés sur la fin de l’année et qui me seront réglés début 2013. Pas si mal, surtout en période de crise (même si dans le web l’emploi se porte plutôt bien).

• En revanche, je suis passé au régime réel (simplifié) cette année : TVA, frais réels, plus d’abattement forfaitaire de 34%, ça picote ! Surtout quand comme dans nos métiers les frais professionnels sont plutôt faibles (si j’exclue ces fumiers d’Adobe et leurs tarifs scandaleux)… Enfin c’est plutôt une bonne nouvelle quand-même (ça signifie que l’activité se développe), mais heureusement que j’ai pris une expert-comptable pour gérer toute cette paperasse chronophage.

• J’ai aussi suivi les formations données par mon AGA : croyez-le ou non mais avec des titres aussi alléchants que « Comment tenir sa compatibilité » ou « Immobilisations et Amortissements », elles se révélèrent étonnamment passionnantes !

• Question logistique, je suis passé à un système de back-up en ligne (Crashplan) pour assurer mes arrières en cas de catastrophe sur ma bécane de boulot et j’ai ouvert un nouveau compte bancaire chez une nouvelle banque après avoir fait la guerre à l’ancienne. Je vous épargne les détails mais ce fut pénible (et épuisant).

• Être freelance et ne pas avoir de téléphone portable, en 2012 c’était toujours possible, merci le télétravail… mais honnêtement je ne sais pas si ça va durer (ma copine commence à hurler).

Activité personnelle

Année de stabilisation professionnelle bien remplie, le personnel a en conséquence été un peu moins riche que par le passé. J’ai quand-même réussi à :

• Refondre mon site. Ça faisait un moment que c’était nécessaire, je me suis fait violence et ça devrait tenir quelques années comme ça. D’ailleurs en l’écrivant, je me dis que ça devrait entrer dans « activité professionnelle » et pas « personnelle », ça…

• Faire un joli site pour ma maman qui se lance dans une nouvelle activité d’écrivain public (elle est super, donnez-lui du travail !).

• Faire des bricoles idiotes.

• Refaire un peu plus de musique, désormais j’ai deux groupes (dont un de rap, ne le dites pas à mon moi de 12 ans, merci).

• Refaire un peu de modèle vivant grâce à Bérénice qui m’a branché sur sa petite troupe de joyeux lurons dessinophiles « Téton Qui Pointe ». Ça décrasse, déjà quatre séances cette année !

• Faire du yoga, comme une vieille pie arthritique. Eh bin, c’est dur.

What next?

En 2013, j’ai quelques projets mais je ne vais pas trop en parler parce que je prends doucement la mauvaise habitude de ne pas les réaliser. En quelques mots :

• On m’a proposé récemment de donner des cours de HTML/CSS/JS dans une école privée. Même si je ne suis absolument pas à l’aise avec la prise de parole et que je souffre comme tout le monde du syndrôme de l’imposteur, j’avoue que l’aventure me tente… Depuis le temps que je mouche du noob à longueur de forum sur Alsacréations, Café Salé ou Kob-One bien à l’abri derrière mon écran, je me dis que ça pourrait être rigolo de le faire en vrai. On verra !

• Il faudrait vraiment que je me repenche sur le design de W3Qualité. J’en avais parlé l’année dernière, je n’ai rien fait. Espérons que je trouve le temps cette année…

• Cette année normalement je commande ma guitare chez Wild. A priori, je pars sur une Metal Snake (avec quelques gadgets personnalisés) !

• Pour finir, mon projet un peu fou de 2013, ce serait d’éditer un bouquin de « Demain J’arrête », mon blog BD. Mais je voudrais faire ça en auto-prod complète, à la roots, en choisissant moi-même l’imprimeur, en distribuant moi-même le bouquin via Internet, peut-être en lançant le truc via un Kickstarter ou quelque chose du genre. L’expérience m’intrigue beaucoup, j’aimerais voir à quel point on peut se passer des éditeurs et de leur voracité proverbiale pour distribuer correctement un livre, en utilisant des canaux de communication à la portée de tous (le web) et en rentrant un minimum dans ses frais. Beaucoup de choses à réfléchir sur ce petit do it yourself en travaux, je continue à peaufiner l’idée dans un coin…

Et voilà pour ce millésime, j’ai fini.

Bonne année à tous !