<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Marie Guillaumet</title>
	<atom:link href="https://marieguillaumet.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://marieguillaumet.com/</link>
	<description>Web designer et intégratrice web à Rennes (Bretagne)</description>
	<lastBuildDate>Sat, 15 Jul 2023 04:28:17 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Activer la prise de focus sur MacOS : Firefox et Safari</title>
		<link>https://marieguillaumet.com/activer-la-prise-de-focus-dans-firefox-sur-macos/</link>
					<comments>https://marieguillaumet.com/activer-la-prise-de-focus-dans-firefox-sur-macos/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Fri, 29 Mar 2019 18:00:47 +0000</pubDate>
				<category><![CDATA[Carnet technique]]></category>
		<category><![CDATA[accessibilité]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[tabulation]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=10038</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/activer-la-prise-de-focus-dans-firefox-sur-macos/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-280x280.jpeg" class="attachment-medium size-medium wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-280x280.jpeg 280w, https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-160x160.jpeg 160w, https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-110x110.jpeg 110w, https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-130x130.jpeg 130w, https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-280x280@2x.jpeg 560w, https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-160x160@2x.jpeg 320w, https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-110x110@2x.jpeg 220w, https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-130x130@2x.jpeg 260w" sizes="(max-width: 280px) 100vw, 280px" /></a><br /><br />Si vous n’arrivez pas à tabuler dans une page web sous MacOS avec Firefox ou Safari, lisez ce tuto ! De vieilles astuces, mais comme on me les demande souvent, les poser par écrit m’a paru utile.]]></description>
										<content:encoded><![CDATA[<p><span class="post-it post-it-inline">Attention : cet article date de 2019 ! Une version mise à jour de ce tutoriel est disponible sur le site d’Access42 : <a href="https://formations.access42.net/documentation/activer-prise-focus-sous-macos/">Activer la prise de focus sous macOS</span></a></p>
<p>En créant un nouveau profil dans Firefox, je me suis rendue compte que <strong>je n’arrivais plus à tabuler</strong>, au clavier, dans les pages web que je consulte.</p>
<p>C’est pourtant quelque chose que j’ai pris l’habitude de faire, non seulement pour vérifier l’ordre de tabulation des sites que j’intègre et que j’audite, mais aussi parce que c’est souvent très pratique <strong>si</strong> le site est bien fait, c’est-à-dire si l’ordre de tabulation est cohérent et qu’il n’y a pas de piège au clavier.</p>
<p>J’ai ensuite mis à jour mon billet pour expliquer comment faire sous Safari, car on me l’a demandé.</p>
<ol>
<li><a href="#firefox">Activer la tabulation dans Firefox</a></li>
<li><a href="#macos">Activer la tabulation dans MacOS</a></li>
<li><a href="#safari">Activer la prise de focus dans Safari</a></li>
</ol>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_10208" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard.jpeg" class="block-link thumb custom-thumb" title=""><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2019/03/macos-keyboard-640x429.jpeg" alt="" /></a><figcaption id="figcaption_attachment_10208" class="wp-caption font-2" style="width: 45.714285714286em">Clavier Mac – photo Sergi Kabrera pour <a href="https://unsplash.com/photos/2xU7rYxsTiM">Unsplash</a>.</figcaption></figure></div>
<h2 id="firefox">Activer la tabulation dans Firefox</h2>
<p>En réalité, quand on utilise Firefox avec MacOS, il faut <strong>expressément activer l’option qui permet de tabuler</strong> d’élément interactif en élément interactif.</p>
<ol>
<li>Dans Firefox, allez dans <code lang="en">about:config</code>.</li>
<li>Cherchez d’abord dans le moteur de recherche des filtres si la règle <code lang="en">accessibility.tabfocus</code> existe. Note : la règle <code lang="en">accessibility.tabfocus_applies_to_xul</code> est un autre paramètre qui n’est pas celui qui nous intéresse ici.</li>
<li>Si la règle <code lang="en">accessibility.tabfocus</code> existe déjà, vérifier que sa valeur à 7, sinon modifiez-la et passez-la à 7.</li>
<li>Si la règle <code lang="en">accessibility.tabfocus</code> n’existe pas&nbsp;: faites clic droit, choisissez l’option « Nouvelle… » pour l’ajouter.
<ol>
<li>choisir « Nombre entier »,</li>
<li>saisir <code>accessibility.tabfocus</code> comme nom de règle,</li>
<li>saisir 7 comme valeur,</li>
<li>redémarrer Firefox.</li>
</ol>
</li>
</ol>
<p>La&nbsp;tabulation devrait être dorénavant possible.</p>
<p><strong>Note :</strong> si vous changez de profil, ou si vous ajoutez un nouveau profil à Firefox, il faudra refaire cette manipulation à chaque fois.</p>
<p>Merci à Stephan qui a partagé l’astuce sur <a href="https://forum.alsacreations.com/topic-6-2038-1-Probleme-de-tabulation-dans-Firefox-pour-OS-X.html">Alsacréations</a> il y a fort longtemps. Ça date, mais ça sert toujours !</p>
<h2 id="macos">Activer la tabulation dans MacOS</h2>
<p>Si cela ne suffit pas et que vous n’arrivez toujours pas à tabuler dans votre navigateur (y compris Safari), vérifiez que vous avez bien <strong>activé la tabulation dans les réglages de MacOS</strong>.</p>
<p>Dans MacOS Mojave, ça se trouve dans&nbsp;: Préférences Système &gt; Clavier &gt; onglet Raccourcis &gt; en bas de la fenêtre, activer l’option « tous les contrôles » dans la liste « Accès complet au clavier ». </p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_10127" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2019/03/tabulation-macos.jpg" class="block-link thumb custom-thumb" title=""><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2019/03/tabulation-macos-640x488.jpg" alt="" /></a></figure></div>
<p>Merci à <a href="https://twitter.com/nbfolio/status/1111584720964456449">NB Design</a> pour ce rappel ! J’ai fait cette manipulation il y a si longtemps que j’aurais complètement oublié de vous en parler.</p>
<p><strong><span lang="en">Edit</span> du 30 avril 2019</strong> : en bonus, l’article <a href="https://www.scottohara.me/blog/2014/10/03/link-tabbing-firefox-osx.html" lang="en">No, tabbing is not broken. Yes, I was confused too.</a> explique comment activer la prise de focus dans Safari. (Via <a href="https://twitter.com/webetcaetera/status/1123162080750731264">Véro</a>.)</p>
<h2 id="safari">Activer la prise de focus dans Safari</h2>
<p><strong>Edith – 28 novembre 2019</strong> : si vous utilisez Safari sous MacOS, vous devrez faire une modification supplémentaire pour que la tabulation fonctionne bien.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_10206" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2019/03/tabulation-safari.png" class="block-link thumb custom-thumb" title=""><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2019/03/tabulation-safari-640x320.png" alt="" /></a></figure></div>
<ol>
<li>Lancer Safari.</li>
<li>Aller dans Safari > Préférences… > Rubrique « Avancées »</li>
<li>Cocher la case « La&nbsp;touche Tab permet de mettre en surbrillance les objets des pages web ».</li>
</ol>
<p>Et voilà !</p>
<h3>Autres notes</h3>
<p>J’en profite pour vous conseiller de <strong>prendre l’habitude de tester les sites que vous fabriquez (ou que vous recettez) au clavier</strong> : c’est un problème d’accessibilité <a href="https://disic.github.io/guide-impacts_utilisateurs/navigation.html#ordre">majeur</a> pour les utilisateurs qui naviguent exclusivement au clavier (personnes handicapées moteur, personnes aveugles et déficientes visuelles notamment).</p>
<p>Pour en savoir plus :</p>
<ul>
<li><strong>Critères RGAA 4</strong> – Référentiel général d’amélioration de l’accessibilité, le référentiel français en matière d’accessibilité numérique :
<ul>
<li><a href="https://numerique.gouv.fr/publications/rgaa-accessibilite/methode/criteres/#crit-12-8">Critère 12.8. Dans chaque page web, l’ordre de tabulation est-il cohérent ?</a>,</li>
<li><a href="https://numerique.gouv.fr/publications/rgaa-accessibilite/methode/criteres/#crit-12-9">Critère 12.9. Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?</a>.</li>
</ul>
</li>
<li><strong>Critères de succès WCAG 2.1</strong> (Règles pour l’accessibilité des contenus web, éditées par le W3C, en anglais) :
<ul>
<li><a href="https://www.w3.org/TR/WCAG21/#focus-order">2.4.3 <span lang="en">Focus order</span> (A)</a>,</li>
<li><a href="https://www.w3.org/TR/WCAG21/#keyboard">2.1.1 <span lang="en">Keyboard</span> (A)</a>,</li>
<li><a href="https://www.w3.org/TR/WCAG21/#no-keyboard-trap">2.1.2 <span lang="en">No keyboard trap</span> (A)</a>.</li>
</ul>
</li>
</ul>
<h2>À part ça</h2>
<p>Je viens de donner une conférence <a href="https://wordpress.access42.net/">WordPress et accessibilité</a> au <a href="https://2019.bordeaux.wordcamp.org/"><span lang="en">WordCamp</span> Bordeaux</a>. J’y parle d’ordre de tabulation, mais aussi de plein d’<strong>autres points d’accessibilité à vérifier dans votre thème WordPress</strong>. </p>
<p>Le <span lang="en">WordCamp</span> lui-même était fort sympathique. Les conférences étaient centrées autour du thème de l’<strong>éco-responsabilité</strong>, ça m’a beaucoup parlé. Il y a eu des échanges très intéressants. J’ai appris des trucs. J’ai revu des personnes que j’apprécie, et j’ai fait de nouvelles rencontres. La&nbsp;cerise sur le gâteau, c’était le buffet végétalien prévu le midi, et les succulents canelés que l’on m’a offerts. #ventre Bref, une super expérience, <span lang="en">100% would recommend</span> !</p>
<p>J’ai aussi commencé à publier des billets plus détaillés sur l’<strong>accessibilité des thèmes WordPress</strong> sur le blog d’<a href="https://access42.net/">Access42</a> :</p>
<ol>
<li><a href="https://access42.net/wordpress-accessibilite-structure-theme">WordPress et accessibilité&nbsp;: bien structurer les modèles de pages de son thème</a></li>
<li><a href="https://access42.net/wordpress-accessibilite-faciliter-la-navigation-partie1">WordPress et accessibilité&nbsp;: faciliter la navigation (1ère partie)</a></li>
</ol>
<p>C’est une série de billets qui va continuer pendant quelques mois ! Je rajouterai les liens ici au fur et à mesure.</p>
<h2>Et sinon</h2>
<p>Ouais, je sais, c’est bizarre et inhabituel que je poste un <i lang="en">quick tip</i> comme ça, après un long silence bloguesque. </p>
<p>Alimenter ce blog-ci à raison d’un billet par an est le maximum que je puisse faire actuellement, et c’est déjà pas mal.</p>
<p><strong>Écrire ici plus régulièrement me manque quand même un peu.</strong> J’ai plein de réflexions métier sur le feu qui attendent leur tour.</p>
<p>Mais cela ne sera sans doute pas avant une refonte – <em>simple</em> – de ce site, que je ne peux plus voir en peinture. Je m’oriente vers un design très épuré (hé ui, je sais, moi aussi ça me surprend), avec une page d’accueil, un CV, un blog, et c’est tout.</p>
<p>En attendant, je continue à publier ce que je fais professionnellement et à partager quelques lectures intéressantes sur <a href="https://twitter.com/kreestal">mon profil Twitter</a>, si jamais.</p>
<p>J’espère que vous allez toutes et tous bien !</p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/activer-la-prise-de-focus-dans-firefox-sur-macos/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>Convaincre les designers des bienfaits de l’accessibilité, oui, mais comment ?</title>
		<link>https://marieguillaumet.com/convaincre-les-designers-des-bienfaits-de-l-accessibilite/</link>
					<comments>https://marieguillaumet.com/convaincre-les-designers-des-bienfaits-de-l-accessibilite/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Mon, 31 Jul 2017 05:00:49 +0000</pubDate>
				<category><![CDATA[Cogitations]]></category>
		<category><![CDATA[accessibilité]]></category>
		<category><![CDATA[web design]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=9544</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/convaincre-les-designers-des-bienfaits-de-l-accessibilite/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="" decoding="async" srcset="https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-280x280@2x.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-130x130@2x.jpg 260w" sizes="(max-width: 280px) 100vw, 280px" /></a><br /><br />Retour sur les chapeaux de roues avec une réflexion métier : critique d’un article publié sur UX Magazine, et proposition d’arguments en faveur de la prise en compte de l’accessibilité web par les designers.]]></description>
										<content:encoded><![CDATA[<p><strong>Salut tout le monde !</strong> Ça me fait plaisir de me remettre à publier par ici.</p>
<p>J’avoue que je ne pensais pas que ce retour prendrait la forme d’un billet métier. Je m’attendais plutôt à un <a href="https://marieguillaumet.com/deux-ans-plus-tard/">bilan de la pause que j’ai faite vis-à-vis du net et des réseaux sociaux</a>. La&nbsp;publication de mon billet <a href="https://marieguillaumet.com/wake-up-from-the-illusion/"><i lang="en">Wake up from the illusion</i></a> l’été dernier a marqué le début d’une aventure personnelle dont j’ai hâte de vous parler.</p>
<p>Pour l’heure, je reprends la plume pour poursuivre <a href="https://twitter.com/kReEsTaL/status/882938529088753665">un débat</a> qui a commencé sur Twitter il y a quinze jours. <strong>Ce débat concerne certains arguments utilisés pour convaincre les designers des bienfaits de l’accessibilité web.</strong> J’ai beaucoup de choses à dire sur le sujet, aussi j'ai créé un sommaire pour vous permettre de naviguer plus rapidement à l'intérieur de ce billet.</p>
<h2>Sommaire (pour aller plus vite si besoin)</h2>
<ol>
<li><a href="#petite-introduction-accessibilite-web">Petite introduction pour celles et ceux qui ne savent pas très bien ce qu’est l’accessibilité web</a>
<ol>
<li><a href="#accessibilite-liberte-fondamentale">Une liberté fondamentale</a></li>
<li><a href="#accessibilite-obligation-legale">Une obligation légale</a></li>
<li><a href="#resistances-accessibilite">Les résistances à l’accessibilité</a></li>
</ol>
</li>
<li><a href="#venons-en-au-fait">Venons-en au fait</a>
<ol>
<li><a href="#conception-orientee-utilisateur">On ne conçoit pas pour soi, ni pour son client</a></li>
<li><a href="#arguments-grotesques">L’accessibilité mérite mieux que des arguments grotesques</a></li>
<li><a href="#simuler-un-handicap">Simuler un handicap : une pratique excluante et contre-productive</a></li>
</ol>
</li>
<li><a href="#alors-on-fait-quoi">Alors on fait quoi&nbsp;?</a>
<ol>
<li><a href="#donner-parole-personnes-handi">Donner la parole aux personnes handicapées</a></li>
<li><a href="#demonstrations-technologies-assistance">Assister à des démonstrations de technologies d’assistance</a></li>
<li><a href="#formations-accessibilite">Se former à l'accessibilité</a></li>
<li><a href="http://partager-retours-experience">Partager nos retours d’expérience</a></li>
<li><a href="#tenir-tete-employeurs-clients">Apprendre à tenir tête à nos employeurs et à nos clients</a></li>
</ol>
</li>
<li><a href="#conclusion">Conclusion</a></li>
</ol>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_9603" style="width: 47.142857142857em" class="post-img-figure"><span class="thumb custom-thumb"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2017/07/201707_diversity-640x490.jpg" alt="" /></span></figure></div>
<h2 id="petite-introduction-accessibilite-web">Petite introduction pour celles et ceux qui ne savent pas très bien ce qu’est l’accessibilité web</h2>
<p>Mais avant de reprendre le fil de ce débat, je tiens à faire <strong>un petit rappel à propos de l’accessibilité web</strong>. Si vous connaissez déjà tout ça par cœur, vous pouvez sauter directement au prochain chapitre de ce billet, intitulé <a href="#venons-en-au-fait">Venons-en au fait</a>.</p>
<h3 id="accessibilite-liberte-fondamentale">Une liberté fondamentale</h3>
<p><strong>La&nbsp;<span lang="en">Web Accessibility Initiative</span> (<abbr>WAI</abbr>) du <abbr title="World Wide Web Consortium" lang="en">W3C</abbr> définit l’accessibilité web comme une composante importante du web</strong> : <q>L'accessibilité du Web signifie que les personnes en situation de handicap peuvent utiliser le Web. Plus précisément, qu'elles peuvent percevoir, comprendre, naviguer et interagir avec le Web, et qu'elles peuvent contribuer sur le Web. L'accessibilité du Web bénéficie aussi à d'autres, notamment les personnes âgées dont les capacités changent avec l'âge. L'accessibilité du Web comprend tous les handicaps qui affectent l'accès au Web, ce qui inclut les handicaps visuels, auditifs, physiques, de parole, cognitifs et neurologiques</q>. </p>
<p>L’accessibilité a été reconnue comme <strong>un droit universel</strong> par l'article 9 de la <a href="http://www.un.org/esa/socdev/enable/rights/convtextf.htm">Convention relative aux droits des personnes handicapées</a> adoptée en 2006 par l'Organisation des Nations unies.</p>
<p>Concrètement, <strong>l’accessibilité web permet aux personnes en situation de handicap d’accéder à Internet</strong>, et ce faisant de participer de plein droit à la vie en société et de jouir de leurs libertés fondamentales.</p>
<p>Bien que les bienfaits de l’accessibilité soient nombreux et rayonnent souvent au-delà du handicap, <strong>ce sont bien les personnes handicapées qui sont le plus discriminées, socialement et professionnellement, lorsqu’un dispositif numérique n’est pas accessible</strong>. De la même façon qu’un bâtiment public sans rampe d’accès ou sans ascenseur empêche les personnes à mobilité réduite d’y accéder, un dispositif numérique qui n’est pas accessible crée une inégalité de traitement entre les citoyen·ne·s pouvant y accéder et celles et ceux qui ne le peuvent pas.</p>
<p>D’ailleurs, <strong>le handicap n’est pas tant une question de corps ou d’esprit présentant une ou plusieurs déficiences, mais d’environnement</strong> : une marche quand on est en fauteuil, un signal visuel quand on est aveugle, ou un signal sonore quand on est sourd.</p>
<p>A contrario, <strong>un environnement adapté permet de nuancer le handicap</strong>. C’est pourquoi la mise en œuvre de l’accessibilité est si importante : elle est une condition <i lang="la">sine qua non</i> pour que les personnes handicapées puissent exercer leur citoyenneté, travailler, ou se divertir comme tout le monde.</p>
<h3 id="accessibilite-obligation-legale">Une obligation légale</h3>
<p><strong>Mais l’accessibilité est surtout une obligation légale</strong> : en France, depuis la <a href="https://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXT000000809647">Loi n° 2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées</a> et, en particulier, <a href="https://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXT000000809647&fastPos=1&fastReqId=1497340759&categorieLien=cid&oldAction=rechTexte#LEGIARTI000006682279">son article 47</a>, les sites web publics ont l’obligation d’être accessibles.</p>
<p><a href="https://www.legifrance.gouv.fr/eli/loi/2016/10/7/ECFI1524250L/jo/article_106">L’article 106 de la loi du 7 octobre 2016 pour une République Numérique</a> prévoit d’étendre cette obligation aux sites délégataires d’une mission de service public, ainsi qu'aux sites d’entreprises privées dont le chiffre d’affaires dépassera un certain montant. Progressivement, l’accessibilité va donc devenir obligatoire pour de plus en plus de sites web, ce qui est une très bonne chose.</p>
<p><strong>Mais comment évalue-t-on l’accessibilité d’un site web ? À l’aide du Référentiel Général d'Accessibilité des Administrations (RGAA 3).</strong> Il s’agit d’un référentiel opérationnel qui permet de vérifier l’application des <span lang="en">Web Content Accessibility Guidelines</span> (<abbr>WCAG</abbr>, soit Règles pour l'accessibilité des contenus Web en français), publiées par le W3C. À noter : les WCAG ont été transposées en <a href="https://www.iso.org/fr/news/2012/10/Ref1670.html">norme ISO/CEI</a> depuis 2012.</p>
<p>Le cadre juridique est donc là. Le hic, c’est que <strong>la mise en œuvre de l’accessibilité web en France a pris un énorme retard</strong>, en raison d’un manque d’investissement public et politique patent, mais aussi de l’absence de sanctions sérieuses. L’article 106 évoqué plus haut prévoit certes une sanction financière annuelle d’un montant de 5 000 € en cas de manquement à l’obligation légale d’accessibilité, mais cela ne sera pas vraiment contraignant pour les entreprises au chiffre d’affaire élevé. </p>
<p>Par contre, <strong>le Code pénal</strong>, s’il est invoqué en cas de plainte d’un utilisateur, sera beaucoup plus sévère : il prévoit entre 3 et 5 ans d’emprisonnement, et entre 45 000 et 75 000 € d’amende au maximum en cas de discrimination avérée.</p>
<p><strong>Il est important de rappeler tout ce cadre juridique, car les bons sentiments suffisent rarement à convaincre qui que ce soit de mettre en œuvre l’accessibilité.</strong></p>
<p>Une autre piste pour accélérer la mise en accessibilité des sites web en France consisterait à amender le dispositif d’action collective, actuellement réservé aux problèmes d’entente illégale du marché : l’étendre aux situations concernant la santé ou la discrimination suffirait.</p>
<p>Pour <a href="http://access42.net/accessibilite-RGAA-obligations-legales.html">en savoir plus sur les obligations légales liées à l’accessibilité numérique</a>.</p>
<h3 id="resistances-accessibilite">Les résistances à l’accessibilité</h3>
<p>Le sujet de l’accessibilité web est donc toujours d’actualité, juridiquement parlant. Pourtant, quand on travaille dans le web comme moi, on se rend compte que <strong>l’accessibilité se heurte à de nombreuses résistances</strong>. </p>
<p>Côté métier, l’accessibilité a du mal à décoller en France <strong>faute de sensibilisation appropriée</strong> dans les parcours de formation des web designers, UX et UI designers, intégrateurs, développeurs et managers (directions, chefs de projet, et al.). Or, je crois que si on avait pris l’habitude de former systématiquement les futur·e·s professionnel·le·s du web à l’accessibilité, elle serait rentrée dans les usages depuis longtemps. Il est donc plus que temps de revoir les programmes pédagogiques à cet effet.</p>
<p>L’autre difficulté concerne les professionnels du web en poste, qui se divisent grosso modo en deux groupes : d’une part, les ardents défenseurs de l’accessibilité, certain·e·s d’entre eux étant <strong>experts</strong> <a href="http://www.accessiweb.org/">AccessiWeb</a> en évaluation ; d’autre part celles et ceux pour qui l’accessibilité est une <strong>discipline vague</strong>, voire inconnue, à laquelle ils n’ont jamais eu l’opportunité de se former.</p>
<p>La&nbsp;pédagogie autour de l’accessibilité depuis 20 ans n’a pas toujours réussi à convaincre ces derniers, en partie parce que les exemples de sites accessibles qui existaient alors ne vendaient pas du rêve. <strong>On a longtemps cru qu’un site accessible était forcément moche</strong> : les designers ont ainsi boudé l’accessibilité, ce qui a eu des conséquences dramatiques dont l’utilisabilité du web paye encore le prix aujourd'hui.</p>
<p>Aujourd’hui toutefois, l’essor des méthodes UX, qui entendent mettre l’humain au cœur de la conception numérique, peut offrir à l’accessibilité l’opportunité de devenir un sujet majeur de l’innovation numérique et de la production web.</p>
<h2 id="venons-en-au-fait">Venons-en au fait</h2>
<p>Le débat sur Twitter que j'évoquais en introduction concernait l’article <a href="http://uxmag.com/articles/we-re-just-temporarily-abled"><i lang="en">We're Just Temporarily Abled</i></a>. J'ai lu cet article avec intérêt, en particulier parce qu’une UX designer y parle d'accessibilité (le texte est en anglais).</p>
<p>J’ai découvert l’existence de ce papier grâce à <a href="https://twitter.com/HTeuMeuLeu/status/882893176389988352">HTeuMeuLeu</a> : il demandait à ses abonnés Twitter de l’aider à trouver une traduction pour l’expression « <span lang="en">temporarily abled</span> », qui est utilisée dans cet article. Comme je voyais passer pas mal de réponses à ce tweet, j’ai eu envie de savoir dans quel contexte était utilisée cette expression.</p>
<p>J’ai donc lu l’article en question et… ça a été un drame. En effet, cet article véhicule des idées très problématiques sur l’accessibilité. Je vais vous expliquer pourquoi.</p>
<h3 id="conception-orientee-utilisateur">On ne conçoit pas pour soi, ni pour son client</h3>
<p><strong>Le premier conseil que donne l’article est : <q><span lang="en">Design for the future you</span></q> (« Faites du design pour votre futur vous »).</strong> L’idée est de convaincre les designers réfractaires à l’accessibilité de s'imaginer vieux et impotents, en train d’essayer leurs propres sites ou produits. Ainsi, ces designers pourraient comprendre à quel point leurs créations sont difficiles à utiliser, faute d’être accessibles. Alors que s’ils tenaient compte de l’accessibilité dès aujourd’hui, cela leur servirait également « dans 20 ou 30 ans ». (Comme si un site web restait deux voire trois décennies en ligne tel quel, m’enfin.)</p>
<p>En matière de sensibilisation à l’accessibilité web, l’argument qui consiste à dire à des designers : « Imaginez-vous vieux et handicapés, alors vous comprendrez la gêne que cause votre site aux seniors et aux personnes en situation de handicap qui essaient de l’utiliser » est ancien. Il n’en est pas moins douteux.</p>
<p><strong>En effet, quand on est designer, on ne conçoit jamais des interfaces pour soi, ni pour ses clients : on conçoit des interfaces pour <em>les utilisateurs finaux</em> de ces interfaces.</strong> La&nbsp;conception orientée utilisateurs a justement pour objectif d’adapter le produit à ces utilisateurs-là, plutôt que d’imposer un mode de fonctionnement choisi par les concepteurs eux-mêmes, qui sont rarement les utilisateurs du produit qu’ils contribuent à créer.</p>
<p>La&nbsp;conception orientée utilisateurs tient donc compte des besoins, des attentes et des caractéristiques personnelles des utilisateurs finaux du site ou de l’application concernés. Ces utilisateurs sont généralement identifiés à l’aide d’études qualitatives (études de marché, <span lang="en">focus groups</span>, etc.). De là peuvent naître :</p>
<ul>
<li>des personas, c’est à dire des utilisateurs fictifs utilisés lors de la phase de conception pour faire des choix ;</li>
<li>des tests utilisateurs, pour vérifier que les résultats du processus de design répondent bien aux attentes des utilisateurs à qui va servir le produit ou le site web.</li>
</ul>
<p>Par ailleurs, la conception orientée utilisateurs est définie par la <a href="https://www.iso.org/fr/standard/52075.html">norme ISO 9241-210</a> : ce n’est donc absolument pas un processus subjectif laissé au bon vouloir ou à l’imagination de chaque individu, comme le laisse entendre l’article.</p>
<p>En somme, créer du design pour soi est <strong>l’exact opposé de ce qu’il faut faire</strong>. Donner ce « conseil » à des designers relève selon moi de la désinformation pure et simple – de la désinformation involontaire, je n’en doute pas, mais il est important de le souligner.</p>
<h3 id="arguments-grotesques">L’accessibilité mérite mieux que des arguments grotesques</h3>
<p>Le second argument avancé dans l'article <i lang="en">We're Just Temporarily Abled</i> concerne le fait que les utilisateurs finaux d’un projet numérique peuvent être <strong>« distraits »</strong> en naviguant sur un site ou en utilisant une appli, et que cela justifierait le recours à l’accessibilité.</p>
<p>Pour illustrer ce point, dont je ne vois déjà pas très bien le rapport avec l’accessibilité, trois exemples sont utilisés.</p>
<ol>
<li><strong>Le premier consiste à dire que si un utilisateur vient de se disputer avec quelqu’un</strong>, il va être contrarié, et va « fracasser sa souris sur son bureau » tout en essayant d’utiliser le site. Personnellement, j’ai beau chercher, je ne vois toujours pas le rapport entre cette situation et l’accessibilité.</li>
<li><strong>Le deuxième exemple évoque un utilisateur en train de pleurer</strong> : les larmes dans ses yeux l’empêcheraient alors de bien voir l’écran et le clavier, et il serait ainsi « temporairement malvoyant ». Bon, là ça commence à déraper sec, niveau argumentation. Ça me fait penser à cet exemple qu’on donne souvent d’un utilisateur qui ne peut pas lire son écran parce qu’il marche en plein soleil : certes, il a momentanément du mal à lire, mais l’accessibilité ne peut rien pour lui.</li>
<li><strong>Le dernier exemple quant à lui tente de convaincre des bienfaits de l’accessibilité en évoquant le cas d'<em>une personne ivre qui tenterait d’utiliser Internet</em>.</strong> Heureusement, l’article ne rentre pas dans les détails, et se contente d’une pirouette humoristique pour se sortir au plus vite de cette démonstration que je trouve affligeante.</li>
</ol>
<p><strong>En effet, mettre sur le même niveau quelqu’un de saoul et une personne handicapée me choque, intellectuellement et moralement.</strong> Comment peut-on sérieusement comparer le fait d’avoir un coup dans le nez avec un handicap quelconque&nbsp;? Aucune personne valide ne peut (ni ne veut !) se représenter une seconde ce que c’est que d’être handicapé·e toute sa vie et de vivre dans une société inadaptée. Doit-on vraiment rappeler que le handicap reste, en 2017, une cause d’exclusion scolaire, administrative, professionnelle et sociale&nbsp;? Quel rapport avec une cuite d’un soir&nbsp;? Absolument aucun !</p>
<p>Imaginer une personne ivre utiliser Internet un soir <a href="http://accessiblog.fr/2015/04/web-design-et-ebriete/">peut faire sourire</a>. En revanche, comparer ça le plus sérieusement du monde avec les difficultés que rencontrent les personnes handicapées tous les jours lorsqu’elles utilisent Internet est, au mieux, grossier.</p>
<p>Quand on est ivre au point de ne pas pouvoir utiliser Internet, il suffit d’attendre que cela passe. Quand on pleure et que cela nous empêche de voir ce que l’on fait sur le web, il suffit de prendre un mouchoir et d’éponger ses larmes. Bref, ces deux états sont temporaires, leurs solutions faciles et à la portée de chacun·e.</p>
<p>En revanche, <strong>quand on est handicapé·e, c’est un état durable ou définitif et les solutions ne dépendent pas de soi</strong> : on est dépendant·e des choix de conception que font les autres. C’est pour ça que l’obligation légale d’accessibilité est cruciale, pour garantir le libre accès à toutes et tous, et combattre les discriminations induites par les défauts d’accessibilité. S’en remettre au bon vouloir des gens ne suffit pas.</p>
<p><strong>À un moment, il faut prendre du recul et se demander honnêtement si nos arguments sont pertinents et éthiques.</strong> En tant que personnes valides, nous ne devrions pas comparer nos petits pépins temporaires aux obstacles énormes que doivent surmonter les personnes handicapées chaque jour de leur vie. Et ce même si nous ne pensons pas à mal, et que ce type de comparaisons poursuit l’objectif noble de sensibiliser des gens à l’accessibilité. </p>
<p>Choisir de défendre l’accessibilité en utilisant des arguments pensés par et pour des personnes valides, donc privilégiées, c’est placer une fois encore les personnes valides au cœur du système, comme norme sociale, et invisibiliser les personnes en situation de handicap. <strong>C’est une démarche validiste.</strong></p>
<p>Et c’est encore pire lorsque les personnes valides en question admettent, de leur propre aveu, ne rien connaître à l’accessibilité… Dans ce cas, ne serait-il pas plus judicieux de laisser la parole aux personnes concernées et formées, plutôt que de véhiculer des contre-vérités sur un sujet que l’on ne maîtrise pas&nbsp;?</p>
<h3 id="simuler-un-handicap">Simuler un handicap : une pratique excluante et contre-productive</h3>
<p>La&nbsp;dernière partie de l’article <i lang="en">We're Just Temporarily Abled</i> liste quelques outils servant à estimer l’accessibilité d’un site web, et suggère de <strong>montrer ce que c’est que de naviguer sur le web avec un lecteur d’écran aux personnes à convaincre des bienfaits de l’accessibilité</strong>.</p>
<p>Mais je doute que cela suffise à convaincre qui que ce soit. Déjà parce que <strong>les outils de test, c’est pratique, encore faut-il savoir s’en servir et interpréter les résultats</strong>, ce qui sous-entend à la fois une bonne maîtrise de ces outils, ainsi qu’une solide connaissance des critères d’accessibilité que l’on cherche à tester. En faisant deux ou trois tests qui s’avèrent positifs, une personne non formée pourrait se dire que ça suffit, et que le site testé est accessible, alors que ce n’est pas le cas. </p>
<p>Par ailleurs, assister à une démo de technologie d’assistance réalisée par une personne handicapée qui la maîtrise bien, d’accord ; par contre, assister à une démo faite en deux minutes par une personne valide qui ne s’en sert pas au quotidien et qui va ainsi introduire un biais cognitif, bof.</p>
<p><strong>Malgré tout, les personnes valides ont cherché à simuler le handicap depuis longtemps.</strong> Les méthodes pour le faire sont nombreuses : certains se bandent les yeux pour simuler un handicap visuel, d’autres attachent plusieurs de leurs doigts ensemble pour simuler une déficience motrice, d’autres encore portent des boules Quies pour simuler un handicap auditif… Depuis peu, le site <a href="https://empathyprompts.net/#limb-loss"><span lang="en">Empathy Prompts</span></a> suggère même des méthodes très discutables pour « construire l’empathie » en simulant divers handicaps.</p>
<p>Mais ces méthodes posent plusieurs soucis.</p>
<p><strong>D’une part, les simulations de handicap excluent quasi systématiquement certains handicaps, comme les handicaps mentaux, cognitifs ou psychiques.</strong></p>
<p>On réduit souvent l’accessibilité comme bénéficiant aux seules personnes aveugles, voire aux personnes sourdes ou aux personnes en situation de handicap moteur dans le meilleur des cas. Or, cette vision réduite du handicap invisibilise les personnes en situation de <a href="https://disic.github.io/guide-impacts_utilisateurs/handicap-mental.html">handicap mental, cognitif ou psychique</a> (autisme, <a href="https://github.com/DISIC/guide-troubles_DYS">troubles dys</a>, etc.).</p>
<p>On parle rarement de ces handicaps invisibles : ils n’en sont pas moins présents, et les personnes concernées se battent pour qu’ils soient reconnus, comme l’a rappelé <a href="https://twitter.com/iamhiwelo/status/882953059663572992">hiwelo</a>.</p>
<p>La&nbsp;variété de ces handicaps est telle qu’il est difficile de faire de la pédagogie à propos des difficultés rencontrées par les personnes concernées, et de concevoir des technologies d’assistance adaptées. </p>
<p><strong>D’autre part, les méthodes de simulation du handicap sont en général contre-productives.</strong></p>
<p>Déjà, se bander les yeux cinq minutes ne permet pas de comprendre les nombreux mécanismes développés par les personnes concernées pour vivre sans problème ce handicap.</p>
<p>En outre, <a href="http://incl.ca/disability-simulations-perceptions-etc/">Nicolas Steenhout</a> explique que lorsque des personnes valides simulent un handicap et tentent ensuite d’utiliser Internet, c’est pour elles <strong>une expérience horrible</strong>, extrêmement frustrante, dont elles ne retirent absolument rien de positif.</p>
<p>Elles sortent de là en ressentant de la pitié pour les personnes handicapées, ou, à l’inverse, une admiration démesurée et injustifiée (en mode « Oh les braves handicapés, c’est incroyable tout ce qu’ils sont capables d’endurer ! »). Certaines personnes valides ayant vécu une telle simulation ont même dit qu’elles ne pourraient jamais vivre avec un handicap, et qu’elles préfèreraient plutôt <em>mourir</em>. C’est donc une expérience validiste ultra négative.</p>
<p>Dans son excellent article <a href="http://www.raggededgemagazine.com/focus/wrongmessage04.html"><span lang="en">The Wrong Message — Still</span></a>, qui date de 2004, Valerie Brew-Parrish faisait part de <strong>son incompréhension face à ce besoin ressenti par les personnes valides de simuler le handicap pour pouvoir comprendre ce que vivent les personnes en situation de handicap</strong>. </p>
<p>Ironiquement, elle demandait si, pour célébrer le <a href="https://fr.wikipedia.org/wiki/Mois_de_l%27histoire_des_Noirs">mois de l’histoire des Noirs</a> (<span lang="en">Black History Month</span>), les personnes blanches devraient également se peindre la figure en noir, ou bien si les personnes hétérosexuelles devraient faire elles-mêmes l’expérience de l’homosexualité pour prouver qu’elles ne sont pas homophobes.</p>
<p>De mon côté, je ne peux pas m’empêcher de penser à l’habitude idiote qu’ont pris certains hommes de porter une jupe le 8 mars, comme si cela allait changer quoi que ce soit. Ce type de « simulation de l'autre » ne sert à rien, à part <strong>donner de la visibilité aux gens qui réalisent cette simulation, plutôt que de la donner aux personnes concernées par ces problèmes</strong> au jour le jour.</p>
<p>Bref, ces divers contre-exemples permettent bien de comprendre à quel point il est vain de simuler des handicaps.</p>
<p>Tout cela explique pourquoi <strong>je rechigne toujours à utiliser l’argument qui consiste à dire aux personnes valides « Imaginez-vous handicapés ! » pour les sensibiliser à l'accessibilité</strong>. Le handicap ne devrait pas être agité comme quelque chose d’angoissant et de terrible ; c’est pourtant comme ça que la société validiste dans laquelle nous vivons procède.</p>
<p>D’ailleurs, le fait de parler systématiquement de l’accessibilité en termes négatifs ou absurdes, au lieu d’insister sur les bienfaits de l'accessibilité pour les personnes en situation de handicap, ne donne pas envie et freine, selon moi, la mise en œuvre de l’accessibilité à grande échelle.</p>
<h2 id="alors-on-fait-quoi">Alors on fait quoi&nbsp;?</h2>
<p>C’est bien gentil de critiquer, mais c’est mieux de proposer quelque chose à la place. Voici donc <strong>quelques pistes de réflexion</strong> pour améliorer la façon dont nous sensibilisons nos confrères et nos consœurs designers, mais aussi, par ricochet, nos managers et nos clients à l’accessibilité web.</p>
<h3 id="donner-parole-personnes-handi">Donner la parole aux personnes handicapées</h3>
<p><strong>Pour commencer, discuter avec les personnes handicapées elles-mêmes, qui sont les premières bénéficiaires de l’accessibilité, est fondamental.</strong> </p>
<p>Écoutons-les, et, pour cela, laissons-leur la possibilité de prendre la parole, non seulement dans les évènements publics que nous organisons, mais également dans les diverses publications professionnelles qui existent.</p>
<p>(Note : ce n'est pas parce qu'une ou deux personnes en situation de handicap interviennent annuellement à <a href="https://www.paris-web.fr/">Paris Web</a> – une des seules conférences françaises à le permettre – que la question de l'accessibilité est réglée, ou qu'on peut dormir sur nos deux oreilles jusqu'à l'année d’après.) </p>
<p><strong>Pouvoir poser des questions à personnes handicapé·e·s et les laisser y répondre spontanément est ce qu’il y a de plus efficace en matière de sensibilisation à l'accessibilité.</strong> Encore faut-il en fréquenter. Dans votre entourage, peut-être connaissez-vous des proches, des collègues, des confrères ou des consœurs en situation de handicap.</p>
<p>Si ce n’est pas le cas, les rencontres informelles, comme les ateliers de Paris Web ou les élaboratoires de <a href="https://sudweb.fr/2017/">Sud Web</a> par exemple, sont des situations qui se prêtent bien à un échange spontané avec des personnes en situation de handicap (encore faut-il qu’elles soient présentes, ce qui est un autre sujet).</p>
<p>Écouter les personnes handicapées, cela peut également passer par le fait d’<strong>organiser des tests utilisateurs avec plus de diversité</strong>, en y incluant de la diversité au niveau des habilités, et en ne se contentant pas uniquement de diversité niveau âge ou genre par exemple.</p>
<p><strong>Cet échange avec les personnes concernées est éminemment plus instructif que les simulations faites dans on ne sait quelles conditions par des personnes valides.</strong> Comprendre comment les personnes en situation de handicap luttent avec votre site web ou votre application va très probablement vous donner envie de résoudre ces problèmes. Plus vous comprendrez comment elles utilisent ce que vous concevez, plus vous serez à même d’anticiper ces problèmes dans vos prochains projets, plus vous produirez du meilleur design.</p>
<h3 id="demonstrations-technologies-assistance">Assister à des démonstrations de technologies d’assistance</h3>
<p><strong>Assister à des démonstrations de technologies d’assistance est également important.</strong> Quand on est soi-même valide, il est très difficile de s’imaginer comment une personne handicapée utilise Internet sans la voir en action. Personnellement, j’ai compris beaucoup de choses il y a quelques années à Paris Web lorsque j’ai vu Sylvie Duchateau, qui est aveugle, utiliser sa plage braille. </p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_9592" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2017/07/accessibilite-sylvie.jpg" class="block-link thumb custom-thumb" title=""><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2017/07/accessibilite-sylvie-640x798.jpg" alt="" /></a></figure></div>
<p>D’ailleurs, à ceux qui trouvent que parler des personnes handicapées et des outils spécifiques qu’ils utilisent pour naviguer sur Internet serait « misérabiliste », je tiens à dire qu’il n’y a rien de misérable au fait d’utiliser une plage braille, ou toute autre technologie d’assistance. Au contraire, Sylvie m’a dit que sans sa plage braille, elle se sentirait véritablement <em>handicapée</em>. </p>
<p><strong>Courte vidéo démontrant l'utilisation d'une plage braille par une utilisatrice aveugle :</strong></p>
<div data-mode="normal" data-oembed="1" data-provider="youtube" id="arve-youtube--kxhw5hh_yk" style="max-width:900px;" class="arve">
<div class="arve-inner">
<div style="aspect-ratio:500/281" class="arve-embed arve-embed--has-aspect-ratio">
<div class="arve-ar" style="padding-top:56.200000%"></div>
<p>			<iframe allow="accelerometer &apos;none&apos;;autoplay &apos;none&apos;;bluetooth &apos;none&apos;;browsing-topics &apos;none&apos;;camera &apos;none&apos;;clipboard-read &apos;none&apos;;clipboard-write;display-capture &apos;none&apos;;encrypted-media &apos;none&apos;;gamepad &apos;none&apos;;geolocation &apos;none&apos;;gyroscope &apos;none&apos;;hid &apos;none&apos;;identity-credentials-get &apos;none&apos;;idle-detection &apos;none&apos;;keyboard-map &apos;none&apos;;local-fonts;magnetometer &apos;none&apos;;microphone &apos;none&apos;;midi &apos;none&apos;;otp-credentials &apos;none&apos;;payment &apos;none&apos;;picture-in-picture;publickey-credentials-create &apos;none&apos;;publickey-credentials-get &apos;none&apos;;screen-wake-lock &apos;none&apos;;serial &apos;none&apos;;summarizer &apos;none&apos;;sync-xhr;usb &apos;none&apos;;web-share;window-management &apos;none&apos;;xr-spatial-tracking &apos;none&apos;;" allowfullscreen="" class="arve-iframe fitvidsignore" credentialless data-arve="arve-youtube--kxhw5hh_yk" data-lenis-prevent="" data-src-no-ap="https://www.youtube-nocookie.com/embed/-kXhw5Hh_Yk?feature=oembed&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;autohide=1&amp;playsinline=0&amp;autoplay=0" frameborder="0" height="505.8" loading="lazy" name="" referrerpolicy="strict-origin-when-cross-origin" sandbox="allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox" scrolling="no" src="https://www.youtube-nocookie.com/embed/-kXhw5Hh_Yk?feature=oembed&#038;iv_load_policy=3&#038;modestbranding=1&#038;rel=0&#038;autohide=1&#038;playsinline=0&#038;autoplay=0" title="" width="900"></iframe></p></div>
</p></div>
<p>	<script type="application/ld+json">{"@context":"http:\/\/schema.org\/","@id":"https:\/\/marieguillaumet.com\/convaincre-les-designers-des-bienfaits-de-l-accessibilite\/#arve-youtube--kxhw5hh_yk","type":"VideoObject","embedURL":"https:\/\/www.youtube-nocookie.com\/embed\/-kXhw5Hh_Yk?feature=oembed&iv_load_policy=3&modestbranding=1&rel=0&autohide=1&playsinline=0&autoplay=0"}</script></p>
</div>
<p><strong>L’importance de ces outils est cruciale pour les personnes en situation de handicap, et ce n’est pas tabou d’en parler</strong> : au contraire, il <em>faut</em> en parler, et il faut avoir la curiosité d’assister à des démonstrations pour comprendre comment tout cela fonctionne.</p>
<p><strong>Ces outils font entièrement partie de leur expérience utilisateur.</strong> On parle souvent des lecteurs d’écran, mais il existe bien d’autres outils qui mériteraient des démonstrations ponctuelles : loupes d’écran, pointeurs, <span lang="en">head-sticks</span>, guides doigts, claviers adaptés, etc. Je serais très heureuse que ce genre d’ateliers spécialisés prennent place dans les évènements annuels réunissant les artisan·e·s du web français.</p>
<h3 id="formations-accessibilite">Se former à l'accessibilité</h3>
<p>Pour mieux convaincre nos interlocuteurs de la nécessité de prendre en compte l’accessibilité dans les projets auxquels nous contribuons, il faut que nous comprenions bien de quoi il s’agit nous-mêmes, tant en terme de réglementation, de mise en œuvre que d’impacts utilisateurs. <strong>D’où la nécessité de se former.</strong></p>
<p><strong>Il est possible de se former soi-même</strong> : les <a href="https://www.w3.org/Translations/WCAG20-fr/">WCAG</a> et le <a href="https://references.modernisation.gouv.fr/rgaa-accessibilite/criteres.html">RGAA 3</a> sont en libre accès sur Internet.</p>
<p>Si tout cela est nouveau pour vous (bienvenue !), rassurez-vous : il existe de nombreux critères d’accessibilité simples à mettre en place, qui vont rapidement devenir des réflexes.</p>
<p>À noter aussi : l’existence de plusieurs <a href="https://github.com/DISIC">guides et documents d’accompagnement au RGAA</a>, qui peuvent vraiment vous faciliter la tâche. Je recommande en particulier :</p>
<ul>
<li>le guide <a href="https://disic.github.io/guide-impacts_utilisateurs/">Défauts d’accessibilité : impacts sur les utilisateurs</a>, comme son nom l’indique ;</li>
<li>le <a href="https://dinsic.gitlab.io/guide-concepteurs/">guide du concepteur RGAA 3</a> : pour concevoir des interfaces accessibles (conception fonctionnelle, graphique et multimédia) ;</li>
<li>le guide <a href="http://disic.github.io/guide-contribuer_accessible/">Contribuer sur le web de manière accessible</a> (utile si vous éditez un blog, par exemple) ;</li>
<li>le <a href="https://disic.github.io/guide-integrateur/">guide de l’intégrateur RGAA 3</a> et le <a href="https://disic.github.io/guide-developpeur/">guide du développeur RGAA 3</a>, qui sont plus techniques.</li>
</ul>
<p>D’autres guides métiers vont d’ailleurs bientôt voir le jour.</p>
<p>Autrement, en France, il existe aussi plusieurs <strong><a href="https://formations.access42.net/formations/">formations spécialisées en accessibilité numérique</a></strong> dispensées par des organismes de formation indépendants. Renseignez-vous !</p>
<p>Il est également possible de faire appel à des experts en accessibilité web pour se faire accompagner tout au long d’un projet, pour réaliser des audits voire pour faire labelliser un site.</p>
<p>Cela ne fait qu’un mois que j’ai commencé à me spécialiser en accessibilité web, et pourtant j’ai déjà constaté le <strong>recours fréquent à certains contre-arguments en matière d’accessibilité</strong>. L’un d'eux consiste à dire : « Oui mais les référentiels officiels sont austères, ça rebute, c’est réservé aux expert·e·s : faire à peu près de l’accessibilité, même si on ne connaît pas tout, c’est déjà bien ».</p>
<p><strong>Ce type d’argument semble justifier une pratique approximative de l’accessibilité par des non experts</strong>, tentant de mettre en place avec plus ou moins de succès les critères et méthodes les plus faciles, laissant de côté les autres, faute de mieux.</p>
<p><strong>Cette tolérance pour l’à peu près m’étonne beaucoup.</strong> On ne la retrouve pas dans les autres domaines fondamentaux du web, comme la sécurité et la performance. J’ai du mal à comprendre ce rejet de l’expertise en matière d’accessibilité.</p>
<p><strong>Oui, pour bien faire de l’accessibilité, il faut être formé·e</strong> : ce n’est pas un savoir qui tombe du ciel. Et même si on s’intéresse de près au sujet de manière autodidacte depuis de nombreuses années, à un moment il faut se confronter aux experts, qui ont des choses à nous apprendre, et faire reconnaître ses compétences via des formations certifiantes.</p>
<p>Je suis dans ce cas-là : chaque jour, je m’aperçois de tout ce que je ne sais pas encore au sujet de l’accessibilité, sujet que je pensais pourtant connaître grâce à mon expérience d’intégratrice senior.</p>
<h3 id="partager-retours-experience">Partager nos retours d’expérience</h3>
<p><strong>L’autre façon de sensibiliser à l’accessibilité, ce sont les retours d’expérience.</strong> Or, je vois rarement passer de tels retours d’expérience mêlant accessibilité web, web design et UX. C’est quelque chose de bien plus courant concernant l’intégration et le développement.</p>
<p>Pourtant, ce genre de « post mortem » expliquant ce qui a fonctionné, et ce qui a moins fonctionné, écrit par des concepteurs, peut ouvrir la voie à des discussions intéressantes et à une prise de conscience définitive.</p>
<p><strong>En partageant nos découvertes, nos expérimentations et nos réflexions, nous contribuons à faire vivre le sujet de l’accessibilité web.</strong> Plus le sujet sera omniprésent, moins il sera facile de l’ignorer en prétextant qu’on n’était pas au courant et qu’on ne sait pas faire. </p>
<p>C’est à mon avis une bien meilleure méthode pédagogique que le recours aux arguments grotesques évoqués plus haut. <strong>Rien n’est plus puissant que le partage de connaissances.</strong> Qui n’a jamais eu de coup de cœur intellectuel pour un sujet métier découvert par hasard lors d’un billet de blog ou d’une conférence&nbsp;? Alors, zou, relevons nos manches et mettons nos connaissances et nos expériences en commun !</p>
<h3 id="tenir-tete-employeurs-clients">Apprendre à tenir tête à nos employeurs et à nos clients</h3>
<p>On a longtemps argumenté en faveur de l’accessibilité en utilisant des arguments faisant appel aux bons sentiments de nos interlocuteurs.</p>
<p>Comme je le disais plus haut, ce genre d’arguments ad misericordiam ne fonctionnent pas. <strong>Les représentations mentales et sociales liées au handicap sont trop négatives et anxiogènes</strong> pour être balayées grâce à ce genre d’argument.</p>
<p>C’est pourquoi il est important d’<strong>avoir recours à un argumentaire rigoureux</strong>, en particulier lorsqu’on s’adresse aux décideurs (nos chefs, ou nos clients), par exemple en évoquant l'aspect juridique et financier de l’accessibilité web.</p>
<p>Certes, ce n’est pas évident de tenir tête aux personnes qui rétribuent notre travail. Quand on est designer, il nous appartient pourtant de <strong>conseiller nos clients et de les avertir des impacts négatifs de certains choix</strong>.</p>
<p>Comme le rappelle <a href="https://deardesignstudent.com/a-designers-code-of-ethics-f4a88aca9e95">Mike Monteiro</a>, c’est à nous, designers, d’<strong>évaluer les conséquences économiques, sociologiques et écologiques de notre travail</strong>. Si ce que nous produisons discrimine une partie de la population, alors il en va de notre responsabilité de prévenir notre hiérarchie et notre client, car c’est ce client qui devra en assumer les conséquences légales et financières.</p>
<p><a href="https://medium.com/the-year-of-the-looking-glass/no-no-no-97cfd94321c8">Julie Zhuo</a> nous rappelle que <strong>dire non à une demande qui va provoquer de la discrimination n’est pas de l’insubordination : c’est simplement notre travail</strong>. En tant que professionnel·le·s expérimenté·e·s, notre travail n’est pas d’obéir sans broncher : nous devons créer de la valeur, conseiller nos interlocuteurs au mieux, et tenter de provoquer un impact positif sur le monde.</p>
<p>Si nous travaillons sans être convaincus par ce que nous faisons, et que nous exécutons une demande que nous savons être mauvaise, alors nous produisons un travail de moindre qualité, mais surtout nous loupons une occasion de sensibiliser nos managers et nos clients à la meilleure façon de faire. Les conseiller au mieux à l’aide de notre expertise ne peut être que valorisant, pour eux comme pour nous : il suffit de le faire de manière professionnelle.</p>
<p>Il est vrai qu’il est plus facile de prendre conscience de tout cela lorsque nous évoluons nous-même dans une équipe mixte et inclusive. Il me semble évident que <strong>le recrutement au sein des équipes web joue également un rôle important en matière d'inclusivité</strong>.</p>
<h2 id="conclusion">Conclusion</h2>
<p><strong>Ouf ! J’ai terminé.</strong> Dans ce long billet, j’ai :</p>
<ol>
<li>démontré pourquoi les arguments qui consistent à dire : « Imaginez-vous vieux et handicapés ! » aux designers que nous cherchons à convaincre des bienfaits de l’accessibilité sont <strong>discutables</strong> ;</li>
<li>expliqué pourquoi les exemples du type « Faire de l’accessibilité, ça sert également aux personnes qui pleurent ou aux personnes ivres » sont <strong>ridicules</strong> et n’ont aucun rapport avec l’accessibilité ;</li>
<li>prouvé pourquoi les simulations de handicap à des fins pédagogiques sont <strong>excluantes</strong> et <strong>validistes</strong> ;</li>
<li>partagé quelques pistes de réflexion pour <strong>améliorer</strong> la façon dont nous faisons de la pédagogie à propos de l’accessibilité auprès de nos collègues designers.</li>
</ol>
<p>Ma conclusion, la voilà : <strong>il est temps de remettre notre argumentaire en faveur de l’accessibilité au goût du jour</strong>. Si les arguments que nous utilisons depuis 20 ans ne fonctionnent pas, alors il faut en changer. </p>
<p>Arrêtons de considérer nos interlocuteurs comme des « béotiens », qui ne comprendraient que des arguments discutables et des exemples absurdes. La&nbsp;qualité de l’argumentaire que nous utilisons reflète l’estime que nous avons pour nos interlocuteurs. Aussi, demandons-nous si nos arguments sont <strong>solides</strong>, <strong>éthiques</strong> et <strong>respectueux</strong>.</p>
<p>Je pense aussi que <strong>les designers doivent s’emparer du sujet de l’accessibilité une bonne fois pour toutes</strong>. Cela fait 20 ans que les discours autour de l’accessibilité s’adressent quasi exclusivement aux intégrateurs et aux développeurs : pas étonnant que la prise en compte de l’accessibilité par les designers soit si laborieuse.</p>
<p>En tant que designers nous-mêmes, il nous faut <strong>(ré)apprendre à juger la valeur de notre travail en fonction de son impact sociétal plutôt qu’en fonction de considérations purement esthétiques</strong>.</p>
<p>L’essor actuel des méthodes UX me donne de l’espoir : j’entends de plus en plus d’UX designers préférer le terme « humains » à celui d’« utilisateurs ». Faire du design inclusif, pour tous les humains, et pas uniquement ceux qui nous ressemblent : ok, allons-y ! En terme d’accessibilité web, nous avons toutes les connaissances nécessaires pour nous y mettre dès aujourd’hui.</p>
<p>Enfin, <strong>continuons à faire preuve d’esprit critique</strong>. Comme je le disais dans <a href="https://www.lesintegristes.net/2013/03/19/integration-web-humilite/">un vieil article</a>, nous avons tout intérêt à prendre du recul vis-à-vis de la parole des figures d’autorité de notre milieu professionnel. Face à une personne que nous admirons depuis longtemps, on se retrouve vite à penser : « Si lui le dit, si elle le dit, c’est qu’ils doivent avoir raison ! ».</p>
<p>Mais <strong>nous <em>devons</em> continuer à exercer notre sens critique, même vis-à-vis des personnes que nous admirons depuis longtemps</strong>, même vis-à-vis de nos consœurs et confrères que la réputation précède. Et les réalisations passées, le nombre d’abonnés Twitter, le nombre de <span lang="en">retweets</span> ou de commentaires reçus ne doit rien y changer.</p>
<p>Aussi, ce n’est pas parce que l’article <a href="http://uxmag.com/articles/we-re-just-temporarily-abled"><i lang="en">We're Just Temporarily Abled</i></a> a été beaucoup partagé sur Twitter qu’on doit le prendre pour argent comptant. Ce n’est pas parce qu’il a été partagé par des gens que nous aimons bien que nous ne pouvons pas le discuter. Enfin, ce n’est pas parce que des arguments en faveur de l’accessibilité sont utilisés depuis longtemps que nous ne pouvons pas nous interroger à leur sujet.</p>
<p><strong>Arrêtons de consommer les contenus web sans aucun recul.</strong> Ne soyons pas des bénis-oui-oui, même face à nos ami·e·s et allié·e·s. Continuons à débattre, en laissant notre ego et notre affect de côté. L’accessibilité web a tout à y gagner.</p>
<p><b><abbr title="Post scriptum" lang="en">PS</abbr> :</b> merci à <a href="https://twitter.com/audreyblabla">Audrey Maniez</a>, Luce Carević, <a href="https://twitter.com/_MarionP">Marion Poullain</a>, Millicent Gervais, <a href="https://twitter.com/sylduch">Sylvie Duchateau</a>, <a href="https://twitter.com/iamhiwelo">Damien Senger</a>, <a href="https://twitter.com/ffoodd_fr">Gaël Poupard</a>, <a href="https://twitter.com/villainjp">Jean-Pierre Villain</a> et <a href="https://twitter.com/okeul">Olivier Keul</a> pour leur aide précieuse lors de la rédaction de ce billet.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/convaincre-les-designers-des-bienfaits-de-l-accessibilite/feed/</wfw:commentRss>
			<slash:comments>8</slash:comments>
		
		
			</item>
		<item>
		<title>Sud Web 2016 : en un mot, génial !</title>
		<link>https://marieguillaumet.com/sud-web-2016-en-un-mot-genial/</link>
					<comments>https://marieguillaumet.com/sud-web-2016-en-un-mot-genial/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Tue, 31 May 2016 22:25:14 +0000</pubDate>
				<category><![CDATA[Cogitations]]></category>
		<category><![CDATA[Bordeaux]]></category>
		<category><![CDATA[conférences]]></category>
		<category><![CDATA[coups de cœur]]></category>
		<category><![CDATA[métier]]></category>
		<category><![CDATA[Sud Web]]></category>
		<category><![CDATA[web]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8783</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/sud-web-2016-en-un-mot-genial/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="La salle" decoding="async" srcset="https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-280x280@2x.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-130x130@2x.jpg 260w" sizes="(max-width: 280px) 100vw, 280px" /></a><br /><br />Compte-rendu de mon premier Sud Web en tant que participante : réflexions métier, reconversions, transmission, <em lang="en">burn out</em>, rencontres et cheveux fous – tout y est !]]></description>
										<content:encoded><![CDATA[<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8824" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k.jpg" class="block-link thumb custom-thumb" title="La&nbsp;salle"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/27273250536_f51ff50da9_k-640x427.jpg" alt="La&nbsp;salle" /></a><figcaption id="figcaption_attachment_8824" class="wp-caption font-2" style="width: 45.714285714286em">Photo © Studio-Aurensan</figcaption></figure></div>
<p><strong>Je rentre tout juste d'un week-end à Bordeaux, où je suis allée assister à mon tout premier <a href="http://sudweb.fr" target="_blank">Sud Web</a>, l'alternative méridionale à Paris Web.</strong></p>
<p>J'ai trop envie de vous raconter !&nbsp;:)</p>
<h2>Un programme inhabituel</h2>
<p><strong>Là où Paris Web propose des interventions pointues consacrées à la technique et au design du web, Sud Web offre quant à elle des conférences « d’ouverture »</strong>, dont les sujets peuvent un peu déstabiliser de prime abord (Le web dans le monde agricole, <i lang="en">anyone</i> ?), mais dont la somme forme un tout original et captivant.</p>
<p>Et j'aime beaucoup cette complémentarité, tant entre les deux évènements qu'entre les contenus que chacun d'eux propose, qu'entre les profils des participants, des orateurs et du staff. </p>
<p>J'aime le mélange des genres, les expériences et les hybridations, et Sud Web a dépassé mes attentes.</p>
<p><strong>Les conférences et les ateliers m'ont beaucoup nourrie.</strong> Ils m'ont permis de découvrir une ribambelle de sujets dont j'ignorais tout (l'industrie textile et le <i lang="en">zero waste</i>, par exemple), mais aussi d'en redécouvrir d'autres grâce à un point de vue original (<i lang="en">The Bus Factor</i>).</p>
<p>Cela m'a aussi permis de cogiter sur <strong>des problématiques périphériques à la production</strong> dont on ne parle selon moi pas assez dans mon milieu professionnel : droit du travail, passion vs. rémunération, discussion sur le <i lang="en">burn out</i> et l'épuisement professionnel, notamment.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8801" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-goodies.jpg" class="block-link thumb custom-thumb" title="Invasion de goodies"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-goodies-640x853.jpg" alt="Invasion de goodies" /></a><figcaption id="figcaption_attachment_8801" class="wp-caption font-2" style="width: 45.714285714286em">Invasion de goodies</figcaption></figure></div>
<h2>Parité bien ordonnée commence par soi-même</h2>
<p><strong>Autre bonne surprise : beaucoup d'oratrices et de staffeuses !</strong> C'est pas encore la parité parfaite mais on s'en rapproche beaucoup, et ça fait vraiment <strong class="stabilo">du bien</strong> – surtout à l'heure où d'autres conférences web peinent encore, en 2016, à diversifier les profils de leurs intervenants.</p>
<p>La&nbsp;« Thym » (= l'équipe) de Sud Web ne fait aucun mystère sur la manière dont elle bâtit le programme : la clé est dans <a href="https://sudweb.fr/blog/2016/curation/" target="_blank">la curation</a>.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8822" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/27033965880_dd409d3d78_k.jpg" class="block-link thumb custom-thumb" title="Ma copine Laurence a tout roxé !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/27033965880_dd409d3d78_k-640x427.jpg" alt="Ma copine Laurence a tout roxé !" /></a><figcaption id="figcaption_attachment_8822" class="wp-caption font-2" style="width: 45.714285714286em">Ma copine Laurence a tout roxé ! Photo © Studio-Aurensan</figcaption></figure></div>
<p><strong>J'ai été particulièrement fière et heureuse de voir de très jeunes-femmes prendre la parole avec une intelligence et une maturité impressionnantes :</strong></p>
<ul>
<li><strong><a href="https://twitter.com/dbr_roxane" target="_blank">Roxane Debruyker</a></strong>, encore étudiante, qui a résumé de façon magistrale tout un tas de problématiques liées au travail dans le web du haut de ses 22 ans ;</li>
<li><strong><a href="https://twitter.com/maiwann_" target="_blank">Maïtané Lenoir</a></strong>, qui débute tout juste en UX/UI design, mais qui a proposé un atelier autour d'un sujet d'actualité passionnant : « J'aime mon métier, <strong><em>mais</em>…</strong> ».</li>
</ul>
<p><strong>Cela m'enthousiasme de voir que la relève est assurée</strong>, et que d'aussi jeunes personnes réussissent à vaincre leur timidité et leur possible syndrôme de l'imposteur pour prendre la parole dans un évènement professionnel alternatif comme Sud Web.</p>
<p>Mais, en même temps, <strong>quelque chose me perturbe quand je les vois déjà si inquiètes et découragées</strong> pour leur satisfaction et leur avenir professionnels alors qu'elles débutent à peine dans le métier…</p>
<p>https://twitter.com/kReEsTaL/status/736136047663271937</p>
<p>https://twitter.com/kReEsTaL/status/736588917856710656</p>
<h2>Auto-gestion et crayolas</h2>
<p>Un autre aspect qui m'a beaucoup plu, <strong>c'est la dimension « <i lang="en">Do it yourself</i> » de Sud Web.</strong></p>
<p><strong>En particulier l'atelier « <span lang="en">Lettering</span> et crayolas » animé par <a href="https://twitter.com/hellgy/" target="_blank">Laurence Vagner</a> samedi matin :</strong> c'était hyper cool de dessiner et de faire quelque chose d'autre que du web, tous ensemble.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8806" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-lettering3.jpg" class="block-link thumb custom-thumb" title="Laurence en pleine démo de lettering"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-lettering3-640x480.jpg" alt="Laurence en pleine démo de lettering" /></a><figcaption id="figcaption_attachment_8806" class="wp-caption font-2" style="width: 45.714285714286em">Laurence en pleine démo de lettering</figcaption></figure></div>
<p>Un bon gros vidage de tête pour commencer la journée qui a fait du bien à tout le monde ! (De toute façon moi c'est pas compliqué, tu me mets un crayon ou un pinceau dans la main, je me détends instantanément !)</p>
<p>Bon, bien sûr, on est loin de ce que fait <a href="http://www.fran6art.com/" target="_blank">Francis Chouquet</a> en <span lang="en">lettering</span>, mais <strong>*yay* pour commencer quelque part, même de très loin, même si on ne sait pas trop où on va, et même (et surtout ?) si c'est juste pour se faire plaisir</strong>.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8807" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-lettering4.jpg" class="block-link thumb custom-thumb" title="L'atelier lettering"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-lettering4-640x853.jpg" alt="L'atelier lettering" /></a></figure></div>
<p><strong>La&nbsp;veille, autre moment <abbr title="Do It Yourself" lang="en">DIY</abbr> très agréable : l'assemblage de notre porte-câbles Sud Web</strong>, conçu spécialement pour l'occasion par <strong><a href="https://twitter.com/MilanAvJC" target="_blank">Mylène L'Orguilloux</a></strong>.</p>
<p>Cela nous a tous tellement absorbés que ça a même perturbé le « <i lang="en">walk talk</i> » prévu par le staff en fin de journée ! ^^</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8836" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-goodie.jpg" class="block-link thumb custom-thumb" title="Le goodie Sud Web 2016, conçu par Mylène L'Orguilloux"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-goodie-640x246.jpg" alt="Le goodie Sud Web 2016, conçu par Mylène L'Orguilloux" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8826" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/27280765336_f6a80b20b1_k.jpg" class="block-link thumb custom-thumb" title="En plein travaux manuels"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/27280765336_f6a80b20b1_k-640x427.jpg" alt="En plein travaux manuels" /></a><figcaption id="figcaption_attachment_8826" class="wp-caption font-2" style="width: 45.714285714286em">Le Crazy Hair Color Club en plein travaux manuels. Photo © Studio-Aurensan</figcaption></figure></div>
<p><strong>Enfin, c'était fascinant de voir le programme des ateliers du samedi se construire au fur et à mesure selon les propositions des participants.</strong></p>
<p>C'était très chouette de voir autant d'idées converger et se compléter, et d'écouter chaque orateur et oratrice présenter son idée face aux autres, et de voter à main levée, de manière décontractée, transparente et démocratique.</p>
<p>Les années précédentes, en suivant les élaboratoires (= les ateliers de Sud Web) de loin, je n'avais jamais bien compris comment <strong>une telle journée auto-gérée</strong> pouvait s'organiser.</p>
<p>Mais en y ayant assisté et participé cette fois, je peux vous garantir que ça se fait très facilement avec des gens de bonne volonté ayant plein d'idées !</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8798" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-elaboratoires.jpg" class="block-link thumb custom-thumb" title="Début du programme des élaboratoires"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-elaboratoires-640x480.jpg" alt="Début du programme des élaboratoires" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8799" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-franck-maitane-goulven.jpg" class="block-link thumb custom-thumb" title="Maïtané Lenoir présentant son projet d'atelier"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-franck-maitane-goulven-640x480.jpg" alt="Maïtané Lenoir présentant son projet d'atelier" /></a></figure></div>
<h2>Des rencontres lumineuses</h2>
<p><strong>Sud Web, c'est aussi des rencontres géniales, beaucoup de nouvelles têtes, des surprises, des sourires, et un max de bienveillance et de tendresse, aussi.</strong></p>
<p>J'avoue, je me suis parfois sentie un peu submergée par le nombre de personnes géniales que j'ai rencontrées pendant deux jours (<a href="https://fr.wikipedia.org/wiki/INTJ" target="_blank">INTJ</a> oblige), mais c'était très agréable d'élargir mon horizon, d'échanger et d'écouter les autres, surtout.</p>
<p>Et quelle joie de retrouver mes copines <strong><a href="https://twitter.com/mcpaccard" target="_blank">Marie-Cécile</a></strong>, <strong>Laurence</strong>, <a href="https://twitter.com/webetcaetera" target="_blank">Véro</a>, <a href="https://twitter.com/Nissone" target="_blank">Delphine</a> et <strong><a href="https://twitter.com/zizae" target="_blank">Enza</a></strong>, mais aussi de rencontrer <strong><a href="https://twitter.com/GaellePeriat" target="_blank">Gaëlle</a></strong>, une personne riche, drôle et hyper passionnée, dont la conférence était un véritable rayon de soleil pour moi qui ne connais rien à la data (+ 10 points pour avoir parlé de <i lang="en">cronuts</i> en pleine conf' et pour avoir porté son badge au bout d'une lanière de pins Disney).</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8797" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-crazy-color-hair-club2.jpg" class="block-link thumb custom-thumb" title="Première réunion annuelle du Crazy Hair Color Club"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-crazy-color-hair-club2-640x640.jpg" alt="Première réunion annuelle du Crazy Hair Color Club" /></a><figcaption id="figcaption_attachment_8797" class="wp-caption font-2" style="width: 45.714285714286em">Première réunion annuelle du Crazy Hair Color Club ! De gauche à droite : Laurence, moi, Marie-Cécile et Gaëlle.</figcaption></figure></div>
<h2>Ma conférence coup de cœur</h2>
<p><strong>Outre la conférence de Gaëlle, j'ai adoré celle de <a href="https://twitter.com/stefpos" target="_blank">Stefanie Posavec</a></strong>, dont le projet d'une carte postale par jour pendant un an était déjà une belle découverte il y a quelques mois :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8838" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_dear-data-stefanie-posavec.jpg" class="block-link thumb custom-thumb" title="Projet «&nbsp;Dear Data&nbsp;» de Giorgia Lupi and Stefanie Posavec"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_dear-data-stefanie-posavec-640x453.jpg" alt="Projet «&nbsp;Dear Data&nbsp;» de Giorgia Lupi and Stefanie Posavec" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8837" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_dear-data-stefanie-posavec2.jpg" class="block-link thumb custom-thumb" title="Projet «&nbsp;Dear Data&nbsp;» de Giorgia Lupi and Stefanie Posavec"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_dear-data-stefanie-posavec2-640x455.jpg" alt="Projet «&nbsp;Dear Data&nbsp;» de Giorgia Lupi and Stefanie Posavec" /></a><figcaption id="figcaption_attachment_8837" class="wp-caption font-2" style="width: 45.714285714286em">Projet «&nbsp;<a href="http://www.dear-data.com/all" target="_blank">Dear Data</a>&nbsp;» de Giorgia Lupi and Stefanie Posavec</figcaption></figure></div>
<p><strong>C'était très intéressant de comprendre le processus créatif derrière chaque carte,</strong> le choix des sujets à analyser, et d'apprendre que même Stefanie, pro de la data, a besoin de plusieurs essais sur le papier avant de trouver la forme qui convient à chaque ensemble de données. </p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8814" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-stefanie-posavec.jpg" class="block-link thumb custom-thumb" title="Les trois mots magiques"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-stefanie-posavec-640x593.jpg" alt="Les trois mots magiques" /></a></figure></div>
<p><strong>Mais mon amour pour la démarche de Stefanie a véritablement explosé quand elle a défendu <strong class="stabilo">une approche accessible à tous</strong></strong>, loin des intégristes de la data qui voient d'un mauvais œil qu'on puisse sortir du moule et faire de jolis petits dessins colorés à la main pour présenter les données plutôt que les sempiternelles présentations plates et froides dont ils sont friands.</p>
<p><strong>Tout ce dont vous avez besoin, nous dit Stefanie, c'est d'un crayon.</strong> Et il me semble qu'on peut dire la même chose pour d'autres domaines créatifs, qu'il s'agisse de design, de poésie, de dessin ou de <span lang="en">lettering</span> : tout commence par un crayon. </p>
<p><strong>Ensuite, faites les choses pour vous,</strong> sans vous soucier du <a href="https://marieguillaumet.com/tempete-dans-une-tasse-de-the/">quand dira-t-on</a>.</p>
<p>Inutile de dire que j'attends la sortie du livre <a href="http://www.dear-data.com/" target="_blank"><i lang="en">Dear Data</i></a> de pied ferme !</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8816" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-stefanie-posavec3.jpg" class="block-link thumb custom-thumb" title="Stefanie Posavec"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-stefanie-posavec3-640x480.jpg" alt="Stefanie Posavec" /></a></figure></div>
<h2>Plein de réflexions à Sud Web</h2>
<p><strong>En quelques mots, voici les réflexions qu'on a partagées à Sud Web, et qui m'ont particulièrement intéressée.</strong></p>
<h3 id="burnout">L'épuisement des travailleurs du web</h3>
<p>J'en parlais plus haut : pendant Sud Web, nombreux étaient les témoignages qui n'étaient pas au beau fixe.</p>
<p><strong>Une véritable inquiétude a traversé l'évènement à propos de nos conditions de travail</strong> et de l'épuisement physique et intellectuel lié à l'industrialisation de nos métiers : accélération des rythmes de production, automatisation des outils et des process, découpage de l'activité en silos et déshumanisation progressive du cycle de conception et de production.</p>
<p><strong>À peine finissons-nous un projet que nous devons enchaîner sur le suivant,</strong> sans pouvoir pousser la qualité, l'accessibilité et l'UX aussi loin que nous le souhaiterions, et sans pouvoir prendre le recul nécessaire sur notre production.</p>
<p><strong>On a aussi beaucoup parlé de <span lang="en">burn out</span>,</strong> mais aussi d'emprise mentale et de pervers narcissiques, notamment pendant l'atelier de <strong>Marie-Cécile Paccard</strong> et de <strong><a href="https://twitter.com/goulvench" target="_blank">Goulven Champenois</a></strong>, auquel a beaucoup contribué <a href="https://twitter.com/jpyrat" target="_blank">Jacques Pyrat</a>.</p>
<p>Jetez un œil aux <a href="https://speakerdeck.com/mcpaccard/guerir-le-burnout-cest-possible-mix-it-2016?slide=16" target="_blank">12 signes de détection</a> d'un <span lang="en">burn out</span> : si vous vous reconnaissez dans plus d'un tiers d'entre eux, il est peut-être temps de faire quelque chose.</p>
<p><strong>Un autre moyen simple pour faire le point&nbsp;:</strong> notez chaque jour, dans un petit carnet dédié à ça, la qualité de votre journée professionnelle (par exemple, un point vert si la journée a été fructueuse, un point rouge si elle s'est mal passée). Au bout d'un mois, faites un premier bilan. Vous serez peut-être surpris !</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8802" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-goulven-marie-cecile.jpg" class="block-link thumb custom-thumb" title="Goulven Champenois et Marie-Cécile Paccard"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-goulven-marie-cecile-640x480.jpg" alt="Goulven Champenois et Marie-Cécile Paccard" /></a></figure></div>
<h3>L'importance des side projects</h3>
<p><strong>Notre épanouissement professionnel pourrait en partie dépendre de nos <i lang="en">side projects</i> et de nos centres d'intérêt personnels.</strong> </p>
<p>Je pense forcément à Basile Simon et à son projet <a href="https://basilesimon.fr/talks/sudweb2016/" target="_blank">Airwars</a>, pour lequel il n'est pas rémunéré ; Mylène L'Orguilloux et le textile ; <a href="https://twitter.com/antoinentl" target="_blank">Antoine Fauchié</a> qui nous encourage à développer notre petite fanzine créatif sur le web, <a href="https://twitter.com/PipoCalme" target="_blank">Pauline Calmé</a>, ingénieure qui s'est reconvertie dans le théâtre, et tant d'autres.</p>
<p>Connaître des gens comme ça, c'est important, non seulement pour <strong>prendre conscience qu'il existe un chemin pour chacun·e d'entre nous, et que nous pouvons l'emprunter à tout moment</strong>.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8792" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-porte2.jpg" class="block-link thumb custom-thumb" title="Et hop, un petit #doorwars en passant !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-porte2-640x853.jpg" alt="Et hop, un petit #doorwars en passant !" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8841" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-doorwars.jpg" class="block-link thumb custom-thumb" title="Jolies portes bordelaises"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-doorwars-640x800.jpg" alt="Jolies portes bordelaises" /></a></figure></div>
<h3>Transmettre notre savoir</h3>
<p>De la même façon, la transmission – enseigner, partager sur un blog nos réflexions et nos expériences, échanger de vive voix avec plus junior que soi, collaborer avec des apprentis – est très importante.</p>
<p>C'est même l'un des piliers de notre communauté, initialement autodidacte. <strong>Et les évènements comme Sud Web permettent justement d'apprendre et de transmettre, en dehors de nos lieux de travail, et en dehors de toute contrainte de production.</strong></p>
<p>Le simple fait de se voir et d'échanger dans des lieux neutres, loin de nos bureaux, active déjà notre capacité à prendre du recul sur notre activité.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8821" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/26708782383_0086528b8e_h.jpg" class="block-link thumb custom-thumb" title="Des participants heu-reux !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/26708782383_0086528b8e_h-640x426.jpg" alt="Des participants heu-reux !" /></a><figcaption id="figcaption_attachment_8821" class="wp-caption font-2" style="width: 45.714285714286em">Photo © Studio-Aurensan</figcaption></figure></div>
<h3>Croire en soi et agir pour soi</h3>
<p><strong>En cas d'un projet de reconversion ou, simplement, de précision/réorientation pro, l'essentiel est de se donner les moyens et d'y croire,</strong> même si on manque d'expérience, pour que les autres y croient aussi et nous donnent notre chance.</p>
<p><strong>Ce n'est pas mal de remettre en question notre travail et nos obligations professionnelles, même quand on débute.</strong> L'essentiel c'est de prendre soin de soi et d'agir avant de se griller complètement.</p>
<p>J'ai découvert le « <strong>syndrôme de l'enfant sage</strong> », qui nous pousse à faire les choses pour les autres, et pas pour nous, ce qui est toujours source de mal-être : j'ai été choquée de voir combien je lui ai déjà sacrifié.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8830" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/26706149573_1af805edca_k.jpg" class="block-link thumb custom-thumb" title="Olivier m'a juré qu'il ne dormait pas !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/26706149573_1af805edca_k-640x427.jpg" alt="Olivier m'a juré qu'il ne dormait pas !" /></a><figcaption id="figcaption_attachment_8830" class="wp-caption font-2" style="width: 45.714285714286em">Olivier m'a juré qu'il ne dormait pas ! Photo © Studio-Aurensan</figcaption></figure></div>
<h3>Nouvelles modalités du travail</h3>
<p><strong>Autre piste de réflexion intéressante : la réappropriation du temps et des modalités du travail pour trouver son équilibre personnel</strong> (réduction du temps de travail, télétravail, nomadisme).</p>
<p>À noter : <a href="https://docs.google.com/spreadsheets/d/1sNh6JAo2my7ZOu1K0U7mS6guWPxciitQm09I8YXAYaY/edit#gid=283254843">l'ébauche de bonnes pratiques / d'un code du télétravail</a>, qui a émergé lors de l'atelier d'<strong><a href="https://twitter.com/ElieSl" target="_blank">Élie Sloïm</a></strong>.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8819" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web1.jpg" class="block-link thumb custom-thumb" title="Sud Web c'est par là !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web1-640x640.jpg" alt="Sud Web c'est par là !" /></a></figure></div>
<h3>Notre travail a-t-il un sens ?</h3>
<p><strong>Enfin, j'ai profité de Sud Web pour poursuivre mon questionnement de fond sur <strong class="stabilo">le sens</strong> de notre travail, et sur <strong class="stabilo">l'utilité</strong> de celui-ci.</strong></p>
<ul>
<li>Quelle est l'utilité de tout cela&nbsp;?</li>
<li>Rendons-nous véritablement service aux utilisateurs&nbsp;?</li>
<li>Des tests utilisateurs en interne, qui ne tiennent pas compte des véritables utilisateurs ciblés par un site, sont-ils réellement pertinents&nbsp;?</li>
<li>N'est-ce pas dérangeant de savoir que les projets web sur lesquels nous travaillons avec acharnement aujourd'hui n'existeront peut-être plus dans un ou deux ans ?</li>
<li>Que dire encore de la mise au placard de ce développeur, salarié, qui avait pris l'initiative d'améliorer la recherche d'un site après avoir consulté des stats démontrant un fort taux d'abandon parce que la recherche par chiffre n'était pas prise en compte et ne renvoyaient jamais les bons résultats&nbsp;?</li>
<li>Et que dire encore de ces personnes qui traitent ce jeune dev de « chieur » parce qu'il invite à plusieurs reprises ses collègues à adopter une conception UX et accessible en interne&nbsp;?</li>
</ul>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8804" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-lettering.jpg" class="block-link thumb custom-thumb" title="Les belles lettres de Laurence"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_sud-web-lettering-640x640.jpg" alt="Les belles lettres de Laurence" /></a><figcaption id="figcaption_attachment_8804" class="wp-caption font-2" style="width: 45.714285714286em">Les belles lettres de Laurence</figcaption></figure></div>
<h2>TL;DR</h2>
<p><strong>Bravo à la Thym Sud Web, qui a fait un excellent travail&nbsp;!</strong> Si je devais noter cette expérience, je mettrais un bon 12/10.</p>
<p>C'est très addictif de retrouver des gens aussi inspirants et éclairés. Chaque année je ressors de Paris Web reboostée et remotivée, des étoiles plein les yeux et une foi dans le web et ses artisans renouvelée. </p>
<p><strong>Et c'est pareil au sortir de mon premier Sud Web&nbsp;:</strong> profiter de tant de générosité et de bonnes ondes pendant deux jours fait vraiment du bien. D'ailleurs, la générosité est contagieuse&nbsp;: donner nous fait autant de bien qu'à la personne qui reçoit. Alors, soyons gentils, et soyons généreux&nbsp;!</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8823" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/27039265970_0bd44a59e1_k.jpg" class="block-link thumb custom-thumb" title="Merci la Thym !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/27039265970_0bd44a59e1_k-640x427.jpg" alt="Merci la Thym !" /></a><figcaption id="figcaption_attachment_8823" class="wp-caption font-2" style="width: 45.714285714286em">Merci la Thym ! Photo © Studio-Aurensan</figcaption></figure></div>
<p>Je finis ce billet avec <strong>quelques photos de Bordeaux</strong>, qui est vraiment une très belle ville :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8794" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-statue.jpg" class="block-link thumb custom-thumb" title="Y'a pas qu'en Bretagne !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-statue-640x640.jpg" alt="Y'a pas qu'en Bretagne !" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8790" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-mur-vintage.jpg" class="block-link thumb custom-thumb" title="Mur retro"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-mur-vintage-640x800.jpg" alt="Mur retro" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8789" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-gueule.jpg" class="block-link thumb custom-thumb" title="Tout pour la gueule !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-gueule-640x480.jpg" alt="Tout pour la gueule !" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8791" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-porte.jpg" class="block-link thumb custom-thumb" title="Street art bordelais"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-porte-640x853.jpg" alt="Street art bordelais" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8793" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-soiree.jpg" class="block-link thumb custom-thumb" title="Une soirée à Bordeaux"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-soiree-640x748.jpg" alt="Une soirée à Bordeaux" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8787" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-fontaine.jpg" class="block-link thumb custom-thumb" title="Une fontaine étonnante"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-fontaine-640x853.jpg" alt="Une fontaine étonnante" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8786" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-curiosites.jpg" class="block-link thumb custom-thumb" title="Curiosités nocturnes"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/05/20160530_bordeaux-curiosites-640x640.jpg" alt="Curiosités nocturnes" /></a></figure></div>
<p><a href="http://lanyrd.com/2016/sudweb/writeups/" target="_blank">D'autres comptes-rendus de Sud Web</a> à lire du côté de Lanyrd, et <a href="https://www.flickr.com/groups/sudweb-2016/pool/" target="_blank">plein de photos</a> à voir sur FlickR.</p>
<p><strong>Vivement l'année prochaine !</strong>&nbsp;:)</p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/sud-web-2016-en-un-mot-genial/feed/</wfw:commentRss>
			<slash:comments>19</slash:comments>
		
		
			</item>
		<item>
		<title>Conférence « Image de soi sur le net et les réseaux sociaux » de Dominique Cardon</title>
		<link>https://marieguillaumet.com/conference-image-de-soi-sur-le-net-et-les-reseaux-sociaux-de-dominique-cardon/</link>
					<comments>https://marieguillaumet.com/conference-image-de-soi-sur-le-net-et-les-reseaux-sociaux-de-dominique-cardon/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Sun, 13 Mar 2016 17:52:58 +0000</pubDate>
				<category><![CDATA[Cogitations]]></category>
		<category><![CDATA[design de soi]]></category>
		<category><![CDATA[Dominique Cardon]]></category>
		<category><![CDATA[Les Champs Libres]]></category>
		<category><![CDATA[réseaux sociaux]]></category>
		<category><![CDATA[retranscription]]></category>
		<category><![CDATA[sociologie]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8497</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/conference-image-de-soi-sur-le-net-et-les-reseaux-sociaux-de-dominique-cardon/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="Dominique Cardon aux Champs Libres, le 9 mars 2016" decoding="async" loading="lazy" srcset="https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-280x280@2x.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-130x130@2x.jpg 260w" sizes="auto, (max-width: 280px) 100vw, 280px" /></a><br /><br />Retranscription d'une conférence passionnante au sujet de la construction de notre identité en ligne. Un contenu un peu différent de d'habitude, mais si éclairant que j'ai voulu le partager avec vous.]]></description>
										<content:encoded><![CDATA[<p><strong>Il y a quelques jours, j'ai assisté à une conférence absolument géniale.</strong> </p>
<p>Elle s’intitulait <strong class="stabilo">« Image de soi sur le net et les réseaux sociaux »</strong>, et était donnée par Dominique Cardon, éminent sociologue français.</p>
<p>J'ai appris beaucoup de choses pendant cette conférence : non seulement elle a fait écho à mes études en socio, mais elle a surtout alimenté mes réflexions en matière de <a href="https://marieguillaumet.com/design-de-soi-paris-web-2015/">design de soi</a>, me donnant de nouvelles pistes à explorer et pas mal de références solides à potasser.</p>
<p>Je pense qu'elle peut vous intéresser également, car elle offre des explications rationnelles aux usages et aux phénomènes qu'on observe et que l'on vit au quotidien sur le web.</p>
<p>Ainsi, <strong>ce qui suit est la retranscription de cette conférence</strong>.</p>
<p><strong>Edit du 17 mars 2016 :</strong> l'enregistrement audio est en ligne !</p>
<p><iframe loading="lazy" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/252003052&amp;color=564267&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe></p>
<p class="aligncenter">***</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8498" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon.jpg" class="block-link thumb custom-thumb" title="Dominique Cardon aux Champs Libres, le 9 mars 2016"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/03/20160309_dominique-cardon-640x695.jpg" alt="Dominique Cardon aux Champs Libres, le 9 mars 2016" /></a></figure></div>
<h2>De la photo Myspace au selfie</h2>
<p><strong>Lorsque les réseaux sociaux ont fait leur apparition, il y a eu comme un vent de panique</strong> causé par la masse d’informations personnelles qui déferlaient d’un coup sur Internet. </p>
<p>Depuis, certes, on continue d’y prendre des risques, il y a des souffrances, des incompréhensions et des accrocs, mais <strong>globalement le système s'est autorégulé</strong> en matière d'auto-exposition en ligne.</p>
<p>À l’époque, ce qu’on appelait « la photo Myspace » désignait une photo de soi prise avec un angle un peu surélevé par rapport à son visage, centrale dans <strong>la figuration de soi</strong>. On a vu ainsi apparaître ces <strong>formes d’expression d’identité photographiques</strong>, prises principalement devant un miroir, car à l’époque les téléphones ne proposaient pas encore d’appareil photo permettant de faire des autoportraits.</p>
<p>Un des usages importants de la photographie aujourd’hui, c’est se prendre en photo soi-même, surtout chez les jeunes.</p>
<p><strong>C’est une façon de se regarder et de se montrer aux autres.</strong> Sur ces premiers autoportraits numériques, on voyait quasiment toujours le bras de la personne qui se photographiait elle-même.</p>
<p><strong>Ce bras permettait de prendre de la distance vis-à-vis de soi-même, c’était une mise à distance entre soi et soi.</strong> C'est d'autant plus important que le partage de photographies personnelles est au cœur des usages observés sur les réseaux sociaux.</p>
<p>Sur cette question de la distance de soi à soi, citons encore le « selfie stick », que les technologues ont imaginé, et qui vient dire à chacun que, <strong>pour se prendre en photo soi-même, il vaut mieux prendre un peu de distance</strong>.</p>
<h2>Le design de la visibilité</h2>
<p>Dominique Cardon a ensuite présenté <strong>les résultats d’une enquête sociologique</strong> consacrée aux réseaux sociaux et à <strong>la construction identitaire de soi</strong>.</p>
<h3>Se montrer</h3>
<p><strong>Notre société est une société dans laquelle on se montre, mais également un lieu où se cacher est devenue une vraie valeur.</strong> C’est une société de l’exposition de soi : cela ne veut pas dire révéler toute sa vie, mais marquer sa marque d’individu dans la société. </p>
<p><strong>Les gens veulent se montrer, mais ils veulent aussi se protéger.</strong> Les deux tendances vont ensemble, aussi opposées soient-elles en apparence. On a d'ailleurs jamais autant parlé de confidentialité et de droit à l'oubli qu’aujourd’hui. Peut-être que le bras, cette distance de soi par rapport à soi, est au cœur de la réponse à ce dilemme.</p>
<h3>Identités multiples&nbsp;?</h3>
<p>Dans les sociétés qui s’individualisent, les personne veulent exister au delà des catégories d’appartenance dans lesquelles elles sont enfermées d'office. Donc il faut <strong>se distinguer</strong>, <strong>avoir les identités les plus plurielles possible</strong>, avoir une sorte de <strong>signature</strong> de l’individu, qu’on peut exposer à un moment ou à un autre.</p>
<p><strong>Est-on pour autant devenus schizophrènes ? Non.</strong> En fait, chacun d’entre nous possède plusieurs facettes ; on construit différemment la représentation de nous que nous offrons aux autres en fonction des situations.</p>
<h3>Théâtralisation des interactions</h3>
<p>Erving Goffman, éminent sociologue américain, a donné une définition intéressante de l’identité dans son ouvrage <em>La&nbsp;mise en scène de la vie quotidienne</em>. Selon lui, <strong>le monde social est un théâtre, et chaque interaction une mise en scène</strong>.</p>
<p>Quand je m’adresse à un collègue, à ma compagne, à mes enfants ou à un inconnu, la personne avec laquelle je suis en interaction modifie ma prestance : <strong>quelque chose de mon identité a bougé à cause de cette interaction</strong>.</p>
<p>L’identité, ce n’est pas, comme le disent les psychiatres, quelque chose d’authentique au plus profond de nous-même&nbsp;: <strong>pour Goffman, l’identité se trouve à la surface de notre corps, de notre peau</strong>. </p>
<p>C’est le lieu de la socialisation du quotidien, qui contribue à notre identité par les retours que les autres font sur nous. <strong>Notre identité serait ainsi la somme agrégée de toutes nos interactions avec les autres.</strong></p>
<h3>Êtres à facettes</h3>
<p>Le numérique est venu encourager l’idée que nous avons des facettes multiples. Il est le support d’une intensification incroyable de ces facettes, et contribue de façon importante à pousser l’individualisme contemporain.</p>
<p><strong>Pour être reconnu par les autres, on cherche à dépasser les identités que la société nous a données par destin, par statut ou par naissance&nbsp;:</strong> genre, situation matrimoniale, etc. Cet état civil qui nous définit a priori durablement (encore que pour le genre, c’est moins vrai). En réalité, nous refusons d’être simplement associé à une catégorie que nous n’avons pas forcément choisie.</p>
<p><strong>Non, ce qui nous définit, c'est ce que nous faisons :</strong> aimer, produire, créer, manifester des centres d’intérêt. Sur le web règne <strong>une logique d’autoproduction</strong>, selon laquelle l’individu doit dépasser sa situation identiaire initiale. </p>
<p>Ainsi, on engage des actions, on se crée des avatars&nbsp;; cette prolifération d’engagement participatif signifie que <strong>mon identité en ligne dépasse mon identité statutaire, elle touche ce que je <em>fais</em></strong>.</p>
<p>Dans le monde de l’entreprise, c’est un peu pareil&nbsp;: on retrouve la notion de compétences, que l'individu doit prouver ses compétences, quel qu’il soit et quelles que soient ses origines.</p>
<p>On donne d’ordinaire une définition assez réaliste de l’individu : quand on doit décrire quelqu’un, on va évoquer en premier sa façon d'être au quotidien, ce qu’il fait, comment il s’habille, sa façon de se tenir.</p>
<p>Mais il y a aussi l’idée qu’<strong>on pourrait être quelque chose de différent que ce qu’on montre à nos proches</strong>&nbsp;: c’est une manière de se projeter soi-même vers un désir, <strong>un devenir possible du sujet dans la dynamique du web</strong>.</p>
<h3>Désir de transformation de soi</h3>
<p>Ça peut être très transformateur&nbsp;: se faire passer pour un garçon alors qu’on est une fille, ou pour une fille quand on est un garçon, ou brouiller encore davantage les limites du genre&nbsp;; s’affirmer à travers la passion de la musique, ou de ses engagements politiques&nbsp;; tout cela constitue <strong>un tunnel d’engagement qui aide les individus à projeter leur identité</strong>.</p>
<p><strong>À l’expression « identité virtuelle », Dominique Cardon préfère parler d’« identité potentielle » :</strong> c'est l’image de moi que j’aimerais bien que les autres se fassent de moi. Ça ne veut pas dire mentir, ni construire artificiellement une personnalité qui n’est pas la sienne ; on pousse simplement les potentiomètres. C’est un phénomène que l’on observe particulièrement sur les sites de rencontres.</p>
<p>Les réseaux sociaux cristallisent <strong>un désir de transformation de soi</strong> : l’identitée projetée est envoyée vers le futur comme un devenir possible du sujet, plus beau, plus souriant, plus joyeux… L’idée est de devenir <em>toujours plus</em> que ce qu’on est déjà. </p>
<p><strong>Aussi, on envoie vers les autres une représentation de nous qui n’est pas tout à fait nous, mais dans la sincérité de ce désir de projection, il y a quand même quelque chose qu’il faut entendre.</strong></p>
<h3>Visibilité plastique</h3>
<p>Les travaux de André Gunthert sur l’image dans les réseaux sociaux mettent à jour une image qui se construit en relation avec les autres. <strong>Considérer que l’image de soi sur le net et les réseaux sociaux est narcissique est <strong class="stabilo">faux</strong>, car on se construit toujours par rapport aux autres</strong>.</p>
<p>La&nbsp;différence, c’est que sur les réseaux sociaux, la nature du public qui nous voit n’est pas constituée de la même façon. L’idée qu’on puisse <strong>voir sans être vu</strong>, et qu’on puisse <strong>être vu sans savoir par qui</strong>, dénote quelque chose de fondamentalement relationnel dans l’image de soi.</p>
<p>L’image de profil sur Facebook est la photo la plus vue d’un profil. Des études ont été faites, et démontrent que si la photo n’a obtenu aucun <i lang="en">like</i> au bout d’une heure, l’utilisateur va systématiquement la changer. En effet, <strong>on est en attente de la reconnaissance des autres</strong> ; si cette reconnaissance ne vient pas, c’est que ce n'est pas une bonne photo de profil.</p>
<p>On peut d’ailleurs classer les réseaux sociaux selon l’importance qu’ils accordent chacun au profil de l’utilisateur :</p>
<ul>
<li><strong class="stabilo">Les réseaux « en clair obscur »&nbsp;:</strong> ce sont les réseaux de petite envergure pour l’individu (Facebook aujourd'hui, Skyblog jadis). La&nbsp;visibilité de ce qu’on y publie est en effet restreinte : <strong>on se montre, on raconte sa vie, on partage beaucoup de photos, de choses très quotidiennes</strong>, relativement personnelles, mais le propre de ces plateformes c’est de partager quelque chose avec des gens qu’on connaît dans la vraie vie. Même si de temps en temps on discute avec étrangers, normalement les gens qui sont vos amis sur Facebook sont aussi vos amis dans la vie, ou tout du moins des amis de vos amis. Les gens avec qui vous discutez réellement sur ces réseaux sociaux représentent un nombre infime par rapport au nombre total de vos amis&nbsp;; ce sont en général des gens avec qui vous avez interagi récemment dans la vraie vie.<br />Un réseau en clair obscur est donc un réseau dense de gens qui nous connaissent et auprès desquels on produit un nombre de signaux inscrits dans le quotidien. <strong>On veut être vu des gens qui nous connaissent mais pas des autres.</strong> Usages actuels: les pages et profils sont fermés, on vérifie soigneusement si la personne connaît quelqu’un qui fait déjà partie de nos amis. Il y a davantage de suspicion sur ce type de réseaux.<br />Se cacher, c'est très important, c'est même au cœur de l’expérience&nbsp;: il s’agit de <strong>s’exposer, oui, mais pas devant tout le monde</strong>. Pour les jeunes, il s’agit de ne pas être vu des profs et des parents. Lorsque ceux-ci sont arrivés sur Facebook, les jeunes sont partis sur Snapchat.</li>
<li><strong class="stabilo">Les réseaux sociaux par centre d’intérêt :</strong> l’expérience ici, ce n’est pas être dans un petit monde fermé. Dans ce type de communautés, il s’agit de se montrer non pas dans le récit quotidien (école, travail, famille…) mais <strong>montrer quelque chose de soi qui est un centre d’intérêt que des inconnus partagent avec nous</strong>. Ce n’est pas la même sociabilité. Ce sont des réseaux beaucoup plus grands que les réseaux en clair-obscur comme Facebook.<br />Sur ce type de réseaux, la vie quotidienne de chacun n’intéresse pas grand monde. <strong>Le récit de soi s’articule autour de la chose qui nous a réunis</strong>, et celle-ci doit être visible et faire œuvre pour que l’individu se fasse reconnaître au sein de cette communauté. Pinterest, Instagram, Flickr&nbsp;: ce sont des collectifs où l’identité montrée est sensiblement différente.</li>
</ul>
<h2 id="pudeur-impudeur">Pudeur/impudeur</h2>
<p><strong>On ne s’expose pas de la même façon selon public qui regarde.</strong> Dominique Cardon a présenté une étude qui a eu pour objectif de démontrer si les gens sont aussi naïfs sur les réseaux sociaux qu’on le prétend par rapport à leur droit à l’image et à leur intimité, s’ils ne se rendent effectivement pas compte de ce qu’ils publient.</p>
<p><strong>L’étude a consisté à montrer quatre photos à des utilisateurs, et à leur demander lesquelles ils publieraient sur leur propre profil.</strong> Il y a eu 15 000 réponses en ligne à cette étude. </p>
<p>Il est apparu que les gens étaient plutôt dans la retenue. Les photos les moins sollicitées montraient la tristesse, la mélancolie, bref des émotions jugées négatives pour l'individu. </p>
<p>Est-ce qu’on montre la tristesse en ligne ? A priori non : sur le web, il semble que cela soit tabou. C’est quelque chose qui ne se dit pas, qui ne se montre pas, car jugé trop dévalorisant.</p>
<h3>Stéréotypes</h3>
<p><strong>Cette enquête a révélé des styles et des différences sociologiques très forts dans manière de se montrer.</strong> La&nbsp;façon de se présenter soi répond à des stéréotypes forts&nbsp;:</p>
<ul>
<li><strong class="stabilo">Exposition standard/traditionnelle&nbsp;:</strong> elle est apparue dans les années 60/70, réunissant photos de vacances, de famille, de mariage… Les grands évènements de la vie sociale sont capturés et sont destinés à être exposés aux autres. Parallèle à faire avec le salon haussmannien, où la famille met en décor son bonheur conjugal et familial à travers de nombreuses photographies exposées. Aujourd’hui, ce type d’exposition traditionnelle sur le web concerne plutôt des femmes de profil cadre supérieur, plutôt conservatrices, toujours d’après l’enquête.
</li>
<li><strong class="stabilo">Exposition de l’impudeur corporelle&nbsp;:</strong> il s’agit ici d’insister sur la provocation, le corps, ce qui se passe dans la chambre à coucher. Lors de l’enquête, ce type d’exposition était toujours le fait de garçons d’origine populaire.
</li>
<li><strong class="stabilo">Exposition du cool / culture de l’exhibitionnisme&nbsp;:</strong> l’individu se montre dans des situations extrêmes, forcées. La&nbsp;photo doit forcer un trait de la personnalité : on est plus heureux qu’heureux, plus théâtral que théâtral, plus criant que criant. Cette culture de l’exhibitionnisme tend à se généraliser à l’image de soi. Mais cela n'a rien à voir avec la sexualité. Là on montre qu’on est ivre par exemple, mais avec des amis. On montre qu’on a une vie intense, pleine d’amis, bref qu’on mène l’archétype de la vie cool.
</li>
<li><strong class="stabilo">Exposition trash</strong>.</li>
</ul>
<p><strong>Cette enquête a révélé quelques conclusions intéressantes concernant l’image de soi sur le web et les réseaux sociaux&nbsp;:<br />
</strong></p>
<ul>
<li>Les femmes seraient plus pudiques que les hommes sur le web et les réseaux sociaux ;</li>
<li>Il n’y a pas de corrélation entre impudeur et fréquence d’usage, plutôt avec le nombre d’amis ;</li>
<li><strong>L’exposition de soi en ligne est une stratégie sociale</strong> qui n’est ni aléatoire, ni incontrôlée, ni déterminée par l’outil. Ce n’est pas qu’on ne se rend pas compte de ce qu’on fait et de ses conséquences&nbsp;: on s’en rend compte, mais on s’en sert pour construire son individualité.</li>
<li>L’exposition de soi en ligne permet <strong>un contrôle réflexif et stratégique de son image</strong> en fonction de ce qu’on attend du réseau social concerné.</li>
</ul>
<p>Si on veut augmenter son nombre d’amis au-delà des chiffres habituels, il y a quelque chose dans l’individu qui le pousse à raconter plus, à montrer plus, notamment des selfies de soi. <strong class="stabilo">Les pratiques d’exposition de soi plus avancées que la normale répondent toujours à une dynamique de conquête relationnelle.</strong></p>
<h2>Pourquoi s’expose-t-on&nbsp;?</h2>
<p><strong>On s’expose parce qu’on attend de la reconnaissance des autres.</strong></p>
<p>Notre réseau est égocentré : le moi au centre, en périphérie les proches, ensuite les fréquentations, c'est à dire des gens qu’on voit fréquemment mais qu’on on n’est pas obligé d’aimer : on peut voir tous les jours un collègue qu’on déteste ; a contrario quand on réfléchit à qui est notre meilleur·e ami·e, il peut s’agir de quelqu’un qu’on n’a pas vu depuis des années. <strong>L’affect n’est donc pas lié à la régularité des interactions sociales.</strong> </p>
<p>Au-delà de ces fréquentations, on trouve relations contextuelles, ajoutées à notre réseau parce qu’on les rencontre dans un contexte et un seul seulement.</p>
<p>À partir de ce réseau social : si on poste un statut qui concerne notre corps, ce seront plutôt nos proches qui vont se sentir autorisés à commenter, a contrario de sujets plus universels et divers qui peuvent concerner davantage de monde et donner ainsi naissance à des interactions potentiellement plus enrichissantes.</p>
<h3>Petites et grandes conversations</h3>
<p><strong>Ce que permettent les réseaux sociaux, c’est la respiration de l’identité.</strong> On y publie des énoncés qui vont autoriser la prise de parole de nos proches, à travers ce que Dominique Cardon appelle « petite conversation » : un récit du quotidien, des moqueries, de l’humour…</p>
<p>Par opposition à une « grande conversation », qui est beaucoup plus ponctuelle, où des gens qui ne se connaissent pas forcément très bien commencent à échanger et à débattre entre eux.</p>
<p>Le réseau social permet une respiration que chacun incorpore : <strong>on se sent autorisé – ou pas – à commenter</strong>. C’est <strong>un système autorégulé</strong> où des gens qui pourraient commenter le font dans certaines situations, et vice versa. </p>
<p><strong>La&nbsp;construction identitaire sur les réseaux sociaux a une capacité d’auto-organisation.</strong></p>
<h3>Démocratisation de la sociabilité des individus</h3>
<p>Parfois, évidemment, des gens distants, dont on n’est pas proches, vont quand même lire des statuts qui concernent davantage notre cercle proche, et vont ainsi apprendre des choses privées sur nous, ce qui peut créer des soucis. Mais le sociologue s’intéressent plutôt aux moyennes, aux cas généraux, plutôt qu’aux cas à la marge.</p>
<p><strong>Malgré ces risques, pourquoi les gens continuent-ils à raconter des choses personnelles à leurs 160 « amis » ?</strong> C’est parce que, parfois, une grande conversation peut apparaître. Et quand c’est le cas, on y répond car elle fait appel à notre curiosité. Elle peut avoir été lancée par quelqu’un qu'on connaît mal, mais avec qui on aimerait discuter, un ami d’une amie, etc.</p>
<p><strong>Au lieu de cette conversation monotone très enclavante et enfermante avec des gens qu’on connaît par cœur, il y a quelque chose qui transperce dans ces interactions à plus grande échelle.</strong></p>
<p>C’est une forme de démocratisation possible de la sociabilité des individus : plus nombreux, plus diversifiés socialement, géographiquement… En particulier pour les gens d’origine populaire, qui ont l’habitude de relations très territorialisées, et qui ont peu de portes ouvertes : <strong>les réseaux sociaux permettent parfois d’assister à des transformations sociales</strong>.</p>
<ul>
<li><strong class="stabilo">Désingularisation :</strong> ne parler que de soi, de son contexte personnel, ça ne va pas forcément intéresser beaucoup de monde au-delà de ceux qui me connaissent déjà et m’apprécient. Donc, un aspect important dans ce travail d’exposition de soi sur le net et les réseau sociaux, <strong>c’est de se désingulariser et de se projeter dans d’autres contenus que soi sur le web</strong>, quel que soit le sujet.
</li>
<li><strong class="stabilo">Décontextualisation :</strong> je ne parle pas simplement de mon propre point de vue, de ma propre subjectivité. Pour produire des énoncés publics, il faut une mise à distance de soi (le bras du selfie devient ici le bras du débat), et <strong>ne pas forcément être tout le temps dans la moquerie, que comprennent nos proches mais pas tout le monde</strong> (humour excluant).
</li>
</ul>
<p>Ainsi, on a d’une part <strong>les petites conversations entre proches</strong>, les conversation familières, désinhibées, contextualisée, qui contiennent beaucoup d’implicite, et d’autre part <strong>une prise de parole publique</strong>, qui oblige à prendre de la distance avec soi-même, un peu comme quand je prends la parole à l’antenne de RTL et que plein d’inconnus m’écoutent.</p>
<p>À ces deux types d’échanges, le web apporte d'autres catégories, un peu étranges et originales&nbsp;:</p>
<ul>
<li><strong class="stabilo">La&nbsp;conversation privée/publique :</strong> <strong>le personnel en clair obscur a aussi des coulisses, un espace de l’individu plus intime, plus secret.</strong> Penser qu’on raconte toute sa vie sur Facebook serait se tromper. Majoritairement, les statuts qui y sont publiés sont positifs. Ils concernent des moments où on cherche à figurer une image positive de soi de façon très forte.<br />À noter&nbsp;: des sociologues ont analysé les usages de Foursquare, et ont mis en lumière qu’on indique toujours se trouver dans des endroits «&nbsp;hype&nbsp;», comme un pub branché, une boîte de nuit, mais jamais qu’on est au lavomatic ou au Monoprix du coin. Cette sélection des endroits où l’on déclare publiquement s’être trouvé est déjà une forme d’<strong>exhibitionnisme du cool</strong>.<br /><strong>On montre autant qu'on cache.</strong> On a dit beaucoup, sans doute beaucoup trop, mais on ne dit pas tout. On va passer dans un espace plus privé (email, Messenger) pour lâcher certaines informations. Snapchat a été fait pour ça, pour jouer dans cet espace-là.</li>
<li><strong class="stabilo">L’expressivité diffuse :</strong> il s’agit de commenter des choses publiques, de façon très familière. C’est une forme de <strong>libération des subjectivités</strong>. Autrefois, pour parler publiquement, il fallait prendre bcp de distance, être neutre… Aujourd'hui sur les réseaux sociaux, on peut dire n’importe quoi sur n’importe qui, avec une mise en forme ironique, moqueuse, agressive même, notamment à l’égard de personnalités publiques.</li>
<li><strong class="stabilo">Le récit personnel distancé, la voix off :</strong> c’est faire des récits personnels mais mis à distance. <strong>Ce qu’on apprend à faire avec le numérique, c’est se raconter soi-même avec distance.</strong> Les conventions narratives sont des mises à distance de soi.<br />Au début de Facebook, on ne pouvait publier de statut qu’avec le verbe «&nbsp;être&nbsp;» superposé à notre nom («&nbsp;Jean Dupont est&nbsp;:&nbsp;»). Et puis rapidement, ils ont supprimé ça pour permettre de faire des récits différents. Mais ça forçait quand même l'individu à parler de lui à la troisième personne du singulier.<br />Lorsqu’on se prend soi-même comme objet réflexif, on essaye d’inscrire son individualité dans des formes existantes. <strong>Je suis moi-même un objet singulier qui s’auto-raconte, mais pour me raconter j’utilise un véhicule qui est une référence culturelle qui va parler aux gens qui me suivent</strong> (dynamique de la viralité). Produire avec soi-même des formes de l’industrie culturelle, musicale, afin de produire un récit de soi qui est transportable au-delà du réseau de mes amis, car il va être reconnaissable par d’autres.</li>
</ul>
<h3>Éloge de l’anodin</h3>
<p>Le quotidien des réseaux sociaux, c’est le banal, la petite discussion, la tchatche, les moqueries… D’une certaine manière, c’est à l’image du sel de nos vies sociales. Les réseaux sociaux montrent des formes de sociabilité qu’on ne voyait pas auparavant&nbsp;: des bavardages, des blagues entre copains, les discussions autour d’une clope ou d’un café au travail… <strong>Les réseaux sociaux mettent l’ordinaire en visibilité.</strong></p>
<p>La&nbsp;téléréalité a préfiguré des cadres stérotypiques de déploiement de la construction de l’individu, dont se servent beaucoup les jeunes dans leurs propres mécanismes identificatoires. Le curseur a été poussé sur la vie privée.</p>
<p>Même si on emprunte des formes créées par d’autres, <strong>le souci de se particulariser au sein d’un groupe</strong> est très présent.</p>
<h2>Une identité sous surveillance</h2>
<p><strong>Il serait bien naïf de penser que tout cela se passe sans heurt. Un de ces heurts, c’est la question de la surveillance. Qui surveille&nbsp;? Que savent-ils sur nous&nbsp;?</strong></p>
<p>On a longtemps pensé que seul l’Etat ou l’entreprise nous surveillaient. Mais aujourd’hui, il s’agit aussi d’<strong>une surveillance interpersonnelle</strong>, entre amants, amis, membres d’une même famille, connaissances… Les risques d’accrocs et les enjeux pour la réputation personnelle sont grands. C’est un débat très compliqué.</p>
<p>La&nbsp;plupart du temps, les problèmes qui concernent la surveillance interpersonnelle sur les réseaux sociaux sont liés au fait que <strong>les gens vont extraire une information d’un contexte relationnel auquel ils n’appartiennent pas</strong>.</p>
<p>C’est par exemple les parents qui surveillent leurs enfants, ou les professeurs qui surveillent leurs élèves&nbsp;; c'est le futur employeur qui va regarder la page personnelle d’un futur salarié et en tirer des conclusions professionnelles.</p>
<p><strong>Le problème consiste à prélever une information et la changer de contexte.</strong> On a l’impression de ne pas être en public quand on est dans le clair obscur. </p>
<p>Si, après l’obtention de mon diplôme, je fais la fête avec mes amis, c'est normal de vouloir immortaliser ça avec une photo sur Facebook. Le fait qu’un employeur vienne prélever cette photo de fête pour me discréditer professionnellement, c'est déplacer cette photo d'un contexte à un autre, et c'est ça qui peut me desservir. </p>
<p>danah michele boyd est une chercheuse américaine en sciences humaines et sociales, et elle a théorisé un principe très intéressant : alors que l’on essaye d'éduquer les gens pour les responsabiliser et les sensibiliser aux conséquences futures de leurs publications, <strong>il faudrait aussi éduquer ceux qui regardent</strong>.</p>
<p><strong>Le web produit en effet des contenus vaguement publics mais qui ne me sont pas forcément destinés.</strong> Ces contenus sont publiés à l’égard du réseau de l’individu qui les publie, réseau dont je ne fais pas forcément partie. </p>
<p><strong>Je ne suis donc pas en mesure de comprendre l’implicite qui y agit, en conséquence de quoi je ne devrais donc pas m’en mêler.</strong></p>
<h2>Contrôle du décontrôle</h2>
<p><strong>Comment donc se montrer tout en gardant le contrôle ? Quelle est cette distance entre l’individu qui s’expose mais met à distance le regardant ?</strong></p>
<p>Norbert Elias est l’auteur d’un ouvrage de sociologie historique majeur, <em>La&nbsp;dynamique de l’Occident</em>. Il y explique <strong>comment sont apparues les formes de contention de soi : l’hygiène, la politesse, le tact…</strong> À partir de quand on a commencé à mettre de la distance entre les corps, comment sont apparues les normes de civilité et de retenue. Il montre que c'est l’État et la cour qui vont imposer ces conventions.</p>
<p>Elias a ensuite été relu par le sociologue néérlandais Cas Wouters : logiquement, selon Elias, on devrait être de plus en plus pudiques au fur et à mesure que l’Histoire avance. Mais Wouters demande : <strong>que s’est-il passé pour que s’exposer autant aujourd’hui soit entré dans les mœurs&nbsp;?</strong></p>
<p>La&nbsp;cour royale puis la bourgeoisie ont inventé une seconde nature destinée à limiter les effets sauvages de la première nature (désinhibée, liée au corpps, aux humeurs&nbsp;; une nature familière). </p>
<p><strong>La&nbsp;bourgeoisie, pour se séparer des classes populaires, va donc inventer l’hygiène, la mise à distance et les civilités.</strong> C’est donc elle qui a créé la « seconde nature », qu’on s’impose de l’extérieur pour normaliser des comportements intérieurs. </p>
<p><strong>On crée un surmoi qui nous fait faire attention à ce qu’on dit</strong> ; on retient des gestes et des paroles qui ne s'expriment pas en public.</p>
<p><strong>À partir du moment où on se voit comme une société d’egos, et plus comme une société de classes ou de rangs, on va pouvoir minorer le sentiment de supériorité de classe.</strong> C’est le contrôle du décontrôle : une « troisième nature » s’invente pour retrouver la première nature, le naturel, l’authentique, le spontané. </p>
<p>Cette troisième nature répond à l’idée qu’un individu ne doit pas rester dans son costume de salarié fordiste. Or, <strong>être authentique et naturel est une nouvelle manière de se contrôler.</strong></p>
<p>Au début, on utilisait des instruments de torture pour asservir la forme que l’individu allait projeter de soi. Par exemple, le corset&nbsp;: il servait à contraindre les corps débordants, pour créer une silhouette distincte de la silhouette populaire. </p>
<p>Mais progressivement, <strong>on a inventé une nouvelle façon de contraindre le corps de l’intérieur, grâce à des normes d’auto-contrôle</strong> : je dois être maigre, avoir une belle silhouette, faire du sport, faire attention à ce que je mange… Cette contrainte externe est devenue une contrainte interne, <strong>une norme sociétale intégrée</strong>.</p>
<p>En somme, les réseaux sociaux sont le reflet de nos sociabilités, ils les exarcerbent mais ne les modifient pas.</p>
<h2>Conclusion</h2>
<p><strong>J'espère que cette retranscription vous aura intéressés.</strong></p>
<p>Vous pouvez également découvrir l'autre conférence que Dominique Cardon a donnée à BlendWebMix 2015 : <a href="https://www.youtube.com/watch?v=_HcHpnWgh10&index=11&list=PLXOSxCLWFrNHdIjNVSF1a1NeqrOlyaSl7" target="_blank">L'analyse sociologique des algorithmes du Web&nbsp;: pour quoi faire ?</a>.</p>
<p>Quant à moi, je traverse une phase un peu délicate où se mélangent l'envie de partager et l'envie de tout cloisonner. J'ai malgré tout plusieurs billets sur le feu, que j'écris depuis longtemps et qui ne demandent qu'à éclore, comme les premières fleurs du printemps.</p>
<p>Kenavo !</p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/conference-image-de-soi-sur-le-net-et-les-reseaux-sociaux-de-dominique-cardon/feed/</wfw:commentRss>
			<slash:comments>11</slash:comments>
		
		
			</item>
		<item>
		<title>Making-of&#160;: refonte du blog d’Aleks Crément</title>
		<link>https://marieguillaumet.com/making-of-refonte-blog-aleks-crement/</link>
					<comments>https://marieguillaumet.com/making-of-refonte-blog-aleks-crement/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Mon, 01 Feb 2016 22:43:58 +0000</pubDate>
				<category><![CDATA[Secrets de fabrication]]></category>
		<category><![CDATA[blogging]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[intégration web]]></category>
		<category><![CDATA[introspection]]></category>
		<category><![CDATA[making-of]]></category>
		<category><![CDATA[mobile first]]></category>
		<category><![CDATA[refonte]]></category>
		<category><![CDATA[responsive]]></category>
		<category><![CDATA[tartines]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8418</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/making-of-refonte-blog-aleks-crement/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="ALEKS CRÉMENT" decoding="async" loading="lazy" srcset="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-768x768.jpg 768w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-640x640.jpg 640w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-180x180.jpg 180w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-1280x1280.jpg 1280w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2.jpg 1576w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-280x280@2x.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-768x768@2x.jpg 1536w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-130x130@2x.jpg 260w, https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-180x180@2x.jpg 360w" sizes="auto, (max-width: 280px) 100vw, 280px" /></a><br /><br />Retour d’expérience sur le processus de redesign du blog d'Aleks Crément. Design, performance, hybridation et blogging : un gros, gros billet.]]></description>
										<content:encoded><![CDATA[<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8425" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2.jpg" class="block-link thumb custom-thumb" title="ALEKS CRÉMENT"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-mockup2-640x640.jpg" alt="ALEKS CRÉMENT" /></a></figure></div>
<p><strong>Début janvier, j’ai mis en ligne la nouvelle version du blog personnel d’<a href="http://alekscrement.com/">Aleks Crément</a></strong>, une amie passionnée par l'occulte, le metal, les voyages et le tatouage.</p>
<p>C'est une refonte qui a duré longtemps, très longtemps – trop longtemps ? –, étant donné que je l'ai commencée en juin 2014 et que nous sommes en février 2016.</p>
<ul>
<li><strong>En quoi consistait ce redesign ?</strong></li>
<li><strong>Pourquoi cela a-t-il pris un an et demi ?</strong></li>
<li><strong>Y a-t-il une vie après la mort ?</strong></li>
</ul>
<p>Lisez, et vous saurez.</p>
<h2>Le contexte</h2>
<p><strong>J'ai fait la connaissance d'Aleks il y a trois ans, le jour de la Saint Patrick</strong>, grâce à un commentaire qu'elle a laissé sur un de mes billets.</p>
<p>J'ai ainsi découvert son blog, son univers, sa personnalité, et je suis tombée sous le charme de son univers visuel, spirituel et culturel qui, semble-t-il, ne connaît pas de limite.</p>
<p>Depuis, son blog a rejoint le cercle hyper fermé des sites sur lesquels je me précipite à la moindre mise à jour. Je peux d'ailleurs dire avec certitude que nos échanges protéiformes font partie de ce que le web m'a apporté de plus enrichissant et de plus intelligent.</p>
<p><strong>Aleks est une personne riche de cœur et d'esprit, et l'univers personnel qu'elle partage sur son blog l'est aussi :</strong> il regorge de sons, d’images et d’états d’âme comme on n'en trouve hélas plus beaucoup (les sites perso sont morts, vive les sites perso !).</p>
<p>La&nbsp;personnalité d'Aleks, son originalité, son mode de vie et ses voyages sont absolument fascinants, valorisés par des textes d'une grande honnêteté et par des photos à couper le souffle.</p>
<p>Si vous avez envie de vous initier à son vortex personnel, je vous recommande <a href="http://alekscrement.com/2015/06/2015-summer-diaries-1-hellfest-repor.html">ce billet-ci</a> dédié au Hellfest, <a href="http://alekscrement.com/2015/07/2015-summer-diaries-3-norway-of-lifeday.html">celui-ci</a>, consacré à la Norvège, ou encore <a href="http://alekscrement.com/2014/08/summer-diaries-3-little-occult-urbex.html">celui-là</a>, blindé d'urbex.</p>
<p>Aleks a par ailleurs la chance de s’adresser à <strong>une communauté de lecteurs</strong> aussi fidèles que loquaces. Ceux-ci commentent en effet longuement chacun de ses écrits : il y a actuellement 3000 commentaires pour 160 articles. Cette ferveur démultiplie la portée des billets du blog et le rend très dynamique.</p>
<h3>Version précédente</h3>
<p><strong>Ci-dessous, vous pouvez voir à quoi ressemblait le blog d'Aleks début 2015.</strong></p>
<p>L'ambiance était déjà bien là : le mélange noir et verdâtre, les jolis dessins en noir et blanc, les titres en capitales, sans parler des grandes photos !</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8424" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/aleks-old-version-1.jpg" class="block-link thumb custom-thumb" title="Le précédent design du blog d'Aleks"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/aleks-old-version-1-640x862.jpg" alt="Le précédent design du blog d'Aleks" /></a></figure></div>
<p>Mais il y avait quand même un paquet de soucis techniques et graphiques qu'on pouvait améliorer.</p>
<h2>Faire évoluer un site existant</h2>
<p><strong>Faire évoluer un site existant est un vrai défi :</strong> c'est un processus qui n'a rien à voir avec la création d'un site <i lang="la">ex nihilo</i>, pour lequel tout est à imaginer.</p>
<p>A contrario, la refonte d'un site implique de <strong>faire avec ce qui existe déjà</strong>, même quand ce qui existe déjà est mal formaté, mal rangé, peu visible et donc peu consulté. J'entends par là qu'il n'y a pas que la page d'accueil qu'il faut rendre belle et pratique : il faut aussi penser au fin fond des archives et aux vieux billets croûteux qui n'ont plus vu la lumière du jour depuis des années.</p>
<p><strong>Utiliser de vrais contenus dès le début du projet est très important</strong>, car cela oblige à trouver des solutions pour de vrais cas de figure. </p>
<p><strong class="stabilo">Être designer, ce n'est pas tant faire du « beau » que faire de l'utile.</strong> Pondre de jolies maquettes ne sert pas à grand chose si elles ne sont pas réalistes.</p>
<p><strong>Le design doit tenir compte des problématiques techniques liées à la production.</strong> Il faut être créatif tout en tenant compte de paramètres techniques non négociables. (D'ailleurs, ceci n'est pas propre au web !)</p>
<p>Dans le cas du blog d'Aleks, un grand nombre d'articles contenaient du code HTML de piètre qualité, bidouillé avec le WYSIWYG de Blogspot. Les plans de document étaient inexistants, et ses milliers de photos ne contenaient aucune alternative textuelle. En outre, le blog ne comptait aucune catégorie ni aucun tag, outils pourtant pratiques pour explorer les arcanes d'un blog.</p>
<p>Bref, pour moderniser ce blog, il allait falloir <strong>revaloriser le contenu</strong> avant même de songer au design graphique</strong>.</p>
<h2>Objectifs du redesign</h2>
<p>Pour ce projet, j'avais identifié <strong>trois objectifs principaux</strong>.</p>
<h3>Objectif nº1 : abandon de Blogspot au profit de WordPress</h3>
<p><strong>Le premier objectif était de <strong class="stabilo">déménager le blog depuis Blogspot</strong> vers un hébergement propre, et d'<strong class="stabilo">utiliser WordPress</strong> comme CMS.</strong></p>
<p>Cela impliquait non seulement un import de toutes les données publiées chez Blogspot (billets, commentaires, URLs, images… une véritable partie de plaisir !), mais aussi de changer de nom de domaine et de rediriger les adresses et le flux RSS vers le nouveau domaine.</p>
<p>J'avais déjà été confrontée à ce type de problématique, dans une moindre mesure, pendant la <a href="https://marieguillaumet.com/making-of-refonte-du-site-de-sucre-dorge/">refonte du blog de Sucre d'Orge</a>, qui était également hébergé chez Blogspot. Toutefois, il ne s'agissait alors que d'une redirection d'URL, et pas du tout de rapatriement de contenus, étant donné que Sucre ne bloguait pas encore à l'époque (petit oiseau est devenu <a href="http://sucredorge-burlesque.com/fr/category/journal/">grand</a> depuis ^.^).</p>
<p>Dans le cas d'Aleks, l'import technique des nombreuses données de son ancien blog vers le nouveau était donc <strong>un point critique du projet</strong>.</p>
<p>Au final, deux plugins ont été nécessaires pour parvenir à mes fins : <strong>Blogger 301 Redirect</strong>, pour gérer les redirections de l'ancien blog vers le nouveau, ainsi que <strong>Blogger Importer Extended</strong>, pour importer les contenus proprement dits (ne pas avoir peur de s'y reprendre à plusieurs fois, et prévoir une excellente connexion réseau).</p>
<h3>Objectif nº2 : amélioration des performances et de l'UX</h3>
<p><strong>L'autre point technique critique du projet, c'était l'<span class="stabilo">amélioration des performances</span>, et, plus généralement, de l'UX</strong> (car, oui, les performances d'un site web ont une incidence critique sur l'expérience utilisateur).</p>
<p>Les billets d’Aleks sont généralement très longs, très denses et très lourds : certains billets peuvent contenir jusqu’à 15 vidéos différentes, appelées indifféremment depuis YouTube ou Vimeo, ainsi que des dizaines et des dizaines de photos en grand format.</p>
<p>Pour vous donner une idée : <strong>avant la refonte, la page d'accueil de son blog Blogspot comptabilisait pas moins de 310 requêtes HTTP, pour un poids de 30 <abbr title="méga octet">Mo</abbr></strong>.</p>
<p>Je ne sais pas si vous vous imaginez ce que ça représente : disons que quand une page web pèse plus d'un méga octet, on dit que c'est déjà énorme…</p>
<p>Parmi ces 30 Mo, il y avait 6 Mo de fichiers Javascript, dus aux innombrables vidéos, 22,7 Mo d'images (!), et environ 600 Ko de fontes. </p>
<p>(Petite remarque en passant : si vous avez envie d'en savoir plus sur le sujet des performances web, je vous conseille l'article <a href="http://www.24joursdeweb.fr/2014/le-web-mobile-et-la-performance/">Le web mobile et la performance</a> de Jean-Pierre Vincent, ainsi que <a href="http://letrainde13h37.fr/6/scripts-tiers-appels-induits-ne-perdez-pas-le-controle-de-votre-site/">Scripts tiers &amp; appels induits : ne perdez pas le contrôle de votre site</a> de Boris Schapira.)</p>
<p>Cette page d'accueil était tellement longue et lourde qu'aucune extension de capture d'écran n'a réussi à la capturer en entier, et que le ventilateur de mon Mac faisait le même bruit qu'un hélicoptère à chaque fois que j'essayais de l'afficher. L'heure était grave.</p>
<p>Par ailleurs, <strong>certains lecteurs du blog se plaignaient parfois que la lourdeur du blog faisait planter leur navigateur, voire leur téléphone,</strong> ce qui nuisait à leur expérience utilisateur. Pour ma part, c'est pour cette raison que j'avais pris l'habitude de lire le blog d'Aleks dans mon agrégateur RSS…</p>
<p>Il y avait donc là un gros problème technique qu'il fallait à tout prix résoudre.</p>
<h3>Objectif nº3 : évolution et harmonisation graphiques</h3>
<p><strong>Le troisième et dernier objectif de cette refonte était la <span class="stabilo">conception d'une nouvelle charte graphique</span></strong>.</p>
<p>Puisqu'il y a beaucoup à lire sur ce blog, il fallait donc <strong>rendre la lecture la plus agréable possible</strong>. </p>
<p>Dans ma tête, il fallait <strong>harmoniser les choix typographiques</strong>, <strong>augmenter le corps de texte</strong>, mais aussi <strong>accentuer les contrastes</strong>, dans la mesure où la couleur d'arrière-plan du site resterait très sombre.</p>
<p>Difficile de faire des miracles, cependant : du texte blanc sur fond noir restera toujours moins facile à lire que l'inverse. J'ai donc mis l'accent sur la taille des caractères, bien plus importante sur la nouvelle version que sur l'ancienne, et sur une grille plus espacée.</p>
<p>J'avais aussi envie de <strong>valoriser davantage les galeries photos</strong>, les citations ainsi que les nombreux commentaires, mettant à profit mon expérience en matière de <i lang="en">theming</i> WordPress pour essayer de faire quelque chose d'à la fois <strong>beau et utile</strong>.</p>
<h2>Côté design&nbsp;: créer avec des contraintes</h2>
<p><strong>Aleks étant graphiste, elle avait déjà déterminé en amont la direction artistique de ce projet.</strong> Elle avait accumulé un bon nombre de références visuelles au sein d'un tableau Pinterest, mais elle avait également produit divers documents, comme des wireframes, un début de charte graphique, ce genre de choses.</p>
<p>Tout cela a constitué <strong>une matière première particulièrement dense et inspirante</strong>, dont je me suis énormément servie.</p>
<p>Parmi les références qu'Aleks m'a données, c'est le site de l'agence <strong>Hochburg</strong>, les affiches de films créées par <strong><a href="http://www.kellerhouse.com/">Neil Kellerhouse</a></strong> ainsi que les dessins de <strong><a href="http://maddyyoung.com/">Maddy Young</a></strong> qui ont le plus compté.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8427" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_hochburg.jpg" class="block-link thumb custom-thumb" title="Site web de l'agence Hochburg"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_hochburg-640x338.jpg" alt="Site web de l'agence Hochburg" /></a><figcaption id="figcaption_attachment_8427" class="wp-caption font-2" style="width: 45.714285714286em">Site web de l'agence allemande <a href="http://www.hochburg.net/de/" target="_blank">Hochburg</a>.</figcaption></figure></div>
<p><strong>J'ai ensuite créé mon propre <i lang="en">moodboard</i></strong>, en mixant les influences d'Aleks avec les miennes, pour voir ce qui pourrait ressortir de ce mélange.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8420" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-pinterest.jpg" class="block-link thumb custom-thumb" title="Aperçu de mon moodboard Pinterest pour ce projet"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-pinterest-640x445.jpg" alt="Aperçu de mon moodboard Pinterest pour ce projet" /></a></figure></div>
<h3>L'ambiance</h3>
<p>Ce qui m'a toujours plu dans l'univers visuel d'Aleks, c'est <strong>le contraste entre ses choix stylistiques très sombres</strong>, très forts, parfois même violents, et <strong>la grande vulnérabilité</strong> que l'on ressent paradoxalement à travers ses écrits.</p>
<p><strong>Sur son blog, on patauge dans la boue des festivals de metal les plus fifous</strong>, on sent la sueur des artistes en pleine performance, on headbangue à s'en claquer les cervicales, on a la dalle et on finit la soirée à se teindre les cheveux en vert ou en violet, parce qu'on en a toujours secrètement rêvé.</p>
<p>C'est le genre d'endroit où t'as pas peur de saloper le tapis avec tes vieilles Docs dégueulasses, le genre d'endroit foutraque et curieusement apaisant où on se retrouve tous à la nuit tombée autour du feu, en écoutant nos disques préférés et en chialant dans nos bières.</p>
<p>Et, bon sang, <strong>que c'est jouissif de donner vie à un univers visuel aussi puissant et assumé</strong>, situé à l'opposé le plus radical des «&nbsp;blogs de filles » vus et revus ! Perso, je n'en peux plus de l'édulcoration du web à grands coups de blanc, de rose bonbon, de bleu layette, de manières et de visuels si léchés qu'on finit par se demander s'ils sont bien réels…</p>
<h3>Créer à deux</h3>
<p>Je vous ai présenté les sources d'inspiration principales pour ce projet, mais j'en avais plein d'autres.</p>
<p>Ce qui est difficile dans le design, c'est justement de <strong><strong class="stabilo">digérer</strong> ce corpus de références diverses</strong> (visuelles, mais aussi culturelles, artistiques, musicales, architecturales…) et de <strong>les faire « <strong class="stabilo">hybrider</strong> » avec l'ADN de la personne pour qui on planche</strong>. (Oui, je regarde un peu trop X Files en ce moment.)</p>
<p>Comme je l'ai dit, cela faisait longtemps qu'Aleks préparait cette refonte : elle avait donc une idée extrêmement précise de ce qu'elle attendait. A contrario, moi, j'étais plus en mode « exploration » autour d'un thème, je ne me fermais aucune porte.</p>
<p>Au final, cela a bien fonctionné : <strong>nos deux approches étaient certes un peu différentes, mais elles se sont révélées complémentaires</strong>. Les idées de l'une multipliées par les idées de l'autre ont donné, au final, de meilleures idées.</p>
<p>Est-ce qu'on peut qualifier ça de « cocréation » ? Si le terme n'était pas autant connoté «&nbsp;entreprise », je l'emploierais ici avec plaisir, car c'est vraiment de ça dont il s'est agi : <strong>créer à deux</strong>.</p>
<p>Donc voilà le résultat, après pas mal de tâtonnements et d'expérimentations :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8437" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/aleks-crement-mockup-full.jpg" class="block-link thumb custom-thumb" title="La&nbsp;charte web d'Aleks"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/aleks-crement-mockup-full-640x1246.jpg" alt="La&nbsp;charte web d'Aleks" /></a></figure></div>
<p>Bien sûr, vous pouvez <a href="http://alekscrement.com">visiter le blog</a> pour voir le résultat en <i lang="en">live</i> !</p>
<h3>La&nbsp;navigation</h3>
<p><strong>Niveau design, je n’ai pas toujours eu le dernier mot, mais jouer avec les contraintes est un bon booster de créativité.</strong> </p>
<p>Un point sur lequel on a pas mal discuté, par exemple, c'est <strong>la navigation</strong>. </p>
<p>Sachant que celle-ci ne contiendrait que quelques liens et un moteur de recherche, j'étais d'avis de la laisser toujours visible. Aleks quant à elle avait envie de quelque chose d'un peu différent, et c'est ce sur quoi on a travaillé finalement.</p>
<p><strong>Ainsi, par défaut, la navigation est masquée.</strong> Elle ne s'affiche qu'au clic sur le bouton « Menu » situé en haut à droite du site :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8430" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-nav2.jpg" class="block-link thumb custom-thumb" title="Bouton «&nbsp;Menu »"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-nav2-640x276.jpg" alt="Bouton «&nbsp;Menu »" /></a><figcaption id="figcaption_attachment_8430" class="wp-caption font-2" style="width: 45.714285714286em">Le bouton permettant d'afficher la navigation est situé en haut à droite du site.</figcaption></figure></div>
<p>Lorsque ce bouton est cliqué, il révèle donc la navigation du site, qui permet d'atteindre des contenus plus profonds, de lancer une recherche, mais aussi d'en savoir un peu plus sur Aleks : en effet, il n'y a pas de page «&nbsp;À propos » sur son blog. </p>
<p><strong>Le bloc biographique situé dans la navigation fonctionne en binôme avec le portrait chinois qui se trouve dans le footer.</strong> À l'utilisateur de chercher les pièces manquantes du puzzle lors de ses lectures…</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8429" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-nav.jpg" class="block-link thumb custom-thumb" title="La&nbsp;navigation du site"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-nav-640x469.jpg" alt="La&nbsp;navigation du site" /></a><figcaption id="figcaption_attachment_8429" class="wp-caption font-2" style="width: 45.714285714286em">La&nbsp;navigation du site contient des liens, un moteur de recherche ainsi qu'une présentation de l'auteure du blog.</figcaption></figure></div>
<p>J'ai veillé à ce que les boutons « Menu » et «&nbsp;Fermer » soient toujours positionnés au même endroit, y compris sur mobile, de façon à ce que l'utilisateur puisse cliquer au même endroit deux fois de suite, sans avoir à déplacer son curseur ou son doigt.</p>
<p>J'avais prévu quelque chose d'un peu différent sur mes maquettes, mais à l'usage, le besoin de modifier légèrement les choses pour les rendre plus agréables à utiliser s'est imposé de lui-même. <strong>Rien ne vaut un ou deux tests utilisateurs pour voir immédiatement ce qui cloche.</strong></p>
<p>À noter : cette navigation fonctionne sans JavaScript. Pour en savoir plus, je vous conseille l'excellent article de Matthieu Bué consacré aux <a href="http://www.24joursdeweb.fr/2015/pseudo-elements-pseudos-mais-puissants/">pseudo-éléments CSS</a>, qui croule sous les bonnes idées.</p>
<h3>Le logo</h3>
<p><strong>Un des trucs que j'ai préféré faire, sur ce projet, ça a été la création du logo,</strong> peut-être parce que c'est quelque chose que je fais rarement.</p>
<p>Grâce aux <i lang="en">moodboards</i> qu'avait préparés Aleks, j'avais déjà une idée précise du résultat à atteindre : entier, irrégulier, insaisissable.</p>
<p>J'ai rapidement proposé <strong>une première version, brute de pomme</strong>, que j'ai utilisée sur les maquettes mais également sur la page d'attente que j'ai mise en ligne sur le nouvel hébergement, le temps que le développement du blog soit terminé :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8432" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-splash.jpg" class="block-link thumb custom-thumb" title="Première version du logo"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-splash-640x504.jpg" alt="Première version du logo" /></a></figure></div>
<p>La&nbsp;police de caractère, la FF Pepe, était la bonne ; toutefois, de l'avis d'Aleks, la façon dont les glyphes étaient penchés rappelait trop « Retour vers le futur », ce qui n'était pas raccord avec son univers. Elle trouvait aussi que le tout était un poil trop sage.</p>
<p><strong>J'ai donc amélioré le résultat en retravaillant l'inclinaison des lettres</strong>, et en ajoutant quelques éléments à sa demande : des taches et des croix, que l'on retrouve par ailleurs sur le site.</p>
<p>Aleks m'a aussi suggéré de donner davantage d'importance au « k », ce qui fonctionne très bien, ainsi qu'un « a rond en chef » (<a href="https://fr.wikipedia.org/wiki/%C3%85_(lettre)">å</a>) pour rappeler son attachement à la Scandinavie :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8434" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-logo1.png" class="block-link thumb custom-thumb" title="Logo pour Aleks Crément (blanc sur fond anthracite)"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-logo1-640x474.png" alt="Logo pour Aleks Crément (blanc sur fond anthracite)" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8433" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-logo2.png" class="block-link thumb custom-thumb" title="Logo pour Aleks Crément (noir sur fond blanc)"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-logo2-640x474.png" alt="Logo pour Aleks Crément (noir sur fond blanc)" /></a></figure></div>
<p>L'outil « Vectorisation dynamique » d'Illustrator m'a servi à vectoriser certaines formes issues de brosses Photoshop. J'avais un peu peur du résultat, mais au final ça a bien fonctionné : j'ai pu conserver le côté «&nbsp;rugueux » des contours irréguliers des croix, ainsi que la barre du « t » final, qui mime un coup de pinceau rageur.</p>
<p>Lorsque Aleks a validé du premier coup ce second essai, j'avoue, ça a été une petite victoire personnelle sur mon syndrôme de l'imposteur («&nbsp;Pfff, arrête, les logos, tu sais pas faire ! »).</p>
<h3>Les dessins de Maddy Young</h3>
<p>La&nbsp;refonte du blog d'Aleks comportait un autre challenge : <strong>intégrer des illustrations tierces dans mon travail de web design</strong>.</p>
<p>En l'occurrence, Aleks a demandé à l'illustratrice australienne <strong>Maddy Young</strong> de créer plusieurs dessins spécialement pour son blog, dont un portrait :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8440" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-maddy-young.jpg" class="block-link thumb custom-thumb" title="Illustrations de Maddy Young pour Aleks Crément"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-maddy-young-640x328.jpg" alt="Illustrations de Maddy Young pour Aleks Crément" /></a></figure></div>
<p>Je trouve le résultat vraiment dément !</p>
<p>Comme ces dessins sont en noir et blanc, très plats, sans aucun dégradés, j'ai pu <strong>les vectoriser</strong> facilement et <strong>les utiliser au format SVG</strong> directement dans mes <span lang="en">templates</span>.</p>
<p>Un exemple parmi d'autres des rencontres artistico-techniques qu'offre le web, si vous voulez mon avis.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8436" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/aleks-crement-mockup-mobile.jpg" class="block-link thumb custom-thumb" title="Morceaux d'interfaces mobiles"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/aleks-crement-mockup-mobile-640x518.jpg" alt="Morceaux d'interfaces mobiles" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8439" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-favourites.jpg" class="block-link thumb custom-thumb" title="Bloc «&nbsp;Vos articles préférés&nbsp;»"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-favourites-640x649.jpg" alt="Bloc «&nbsp;Vos articles préférés&nbsp;»" /></a></figure></div>
<h3>Le diable est dans les détails</h3>
<p><strong>C'est bien connu, le diable est dans les détails, aussi je me suis laissée aller à quelques choix de conception obsessionnels-compulsifs :</strong></p>
<ul>
<li>Le nom du thème WordPress que j'ai créé pour Aleks s’intitule <strong><span lang="en">Dark Days</span></strong>, du nom d’<a href="http://alekscrement.com/2015/06/whats-in-mailbox-1.html">une de ses chansons préférées</a>.</li>
<li>Le ratio de certaines de ses miniatures photos est <strong>0,666</strong>.</li>
<li>Le code hexadécimal du gris clair contenu dans sa charte est <code>#cacaca</code>. Petit clin d’œil débile au titre de son blog ! ^o^;</li>
<li>J'ai fait pas mal d'expérimentations sur les soulignés des liens, aidée par <a href="http://www.ffoodd.fr/le-soulignement-factice/">Gaël</a> qui n'est jamais à court d'idées. Au final, j'ai délaissé le <code>text-shadow</code> proposé dans sa méthode et opté pour un dégradé CSS plus simple, car je rencontrais des problèmes de compatibilité, notamment sous <abbr title="Internet Explorer">IE</abbr>. C'est un peu moins élégant que le résultat idéal « <a href="https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9">à la Medium</a> », mais c'est aussi beaucoup moins moche que les soulignés par défaut. Sur le web, tout est toujours question de compromis de toute façon…</li>
<li>Fidèle à mes petits «&nbsp;tics&nbsp;» de web designer, j’ai aussi personnalisé <strong>la page de login</strong> :<br />
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8419" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-login.jpg" class="block-link thumb custom-thumb" title="Interface de login sur le blog d'Aleks Crément"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160123_aleks-crement-login-640x430.jpg" alt="Interface de login sur le blog d'Aleks Crément" /></a></figure></div></li>
<li>Enfin, je suis particulièrement contente de <a href="http://alekscrement.com/404">la page 404</a> et de <strong>sa petite bougie animée en CSS</strong>. C'est la petite surprise qui, j'espère, compensera la déception de tomber sur une page introuvable.<br />
<div class="post-img-container clearfix aligncenter full"><figure role="group" id="attachment_8441" style="width: 44.071428571429em" class="post-img-figure"><span class="thumb custom-thumb"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/02/20160123_aleks-crement-404.gif" alt="Bougie animée en CSS" /></span></figure></div></li>
</ul>
<h2>Côté technique : améliorer progressivement</h2>
<h3>Perfs&nbsp;: du <span lang="en">lazy load</span> à fond les ballons</h3>
<p>Étant donné la longueur des articles d'Aleks, la première tâche a consisté à <strong>réduire le nombre d'articles affichés sur chaque page</strong>, en particulier sur la page d'accueil, où on est passé de 10 articles à trois. On peut en charger davantage grâce à la fonctionnalité de scroll infini proposé par Jetpack.</p>
<p>Sur les pages d'archives (catégories, tags, résultats de recherche, etc.), on n'affiche que la photo à la une et l'extrait de chaque article. Ce qui réduit considérablement le nombre et le poids des ressources à télécharger.</p>
<p>De plus, pour atténuer encore la lourdeur de chargement, j'ai mis en place <strong>du <i lang="en">lazy loading</i> sur les images et les vidéos</strong> incluses dans les articles. Côté images, j'utilise le plugin <strong>BJ Lazy Load</strong> (déjà testé et approuvé sur mon site), et pour les vidéos, je teste <strong>WP YouTube Lyte</strong>.</p>
<p>On passe également à la moulinette chaque image uploadée, grâce au plugin <strong>EWWW Image Optimizer</strong>, qui en réduit le poids.</p>
<p>Enfin, j'ai aussi passé pas mal de temps à <strong>nettoyer le HTML de certains articles</strong>, car le WYSIWYG de Blogspot avait produit beaucoup de déchets. Améliorer le plan de document, supprimer les styles en ligne, ajouter des attributs <code>alt</code> et les renseigner, utiliser les bonnes balises HTML aux bons endroits… autant de tâches ingrates auxquelles je me suis pliée.</p>
<p>Je n’ai hélas pas pu corriger tous les billets car il y en a énormément : cela reste un travail en cours qu'il faudra qu'Aleks poursuive éventuellement de son côté.</p>
<h4>Résultats et perspectives</h4>
<p>Après la refonte, <strong>une fois entièrement chargée, la page d'accueil <span lang="en">desktop</span> pèse un peu moins de 2 <abbr>Mo</abbr></strong> : ce n'est pas encore la panacée, surtout niveau images, mais par rapport aux 30 <abbr>Mo</abbr> de l'ancienne version, j'estime qu'on a quand même fait un grand bond en avant.</p>
<p><strong>Bien entendu, il est possible d'améliorer davantage les perfs</strong>, notamment en tirant mieux parti des images responsives, désormais implémentées de façon native dans WordPress 4.4. Mais j'avoue ne pas encore bien maîtriser les tenants et les aboutissants des <a href="https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/">nouvelles fonctions</a> à utiliser.</p>
<p>En effet, les images <abbr title="responsive">RWD</abbr> automatiques insérées dans des contenus fonctionnent pour peu que WordPress ait à sa disposition des tailles d'image aux ratios identiques. C'est un point que j'ai totalement ignoré pendant la création des maquettes du site : à l'époque WordPress 4.4 n'était pas encore sorti, et je n'avais pas du tout ça en tête.</p>
<p><strong>Tenir compte de ce nouveau paramètre pour produire des interfaces de meilleure qualité est en haut de mes priorités.</strong> Maintenant que WordPress fait le sale boulot tout seule, je n'ai plus aucune excuse.</p>
<p>L'autre point que je n'ai pas résolu, c'est le fait que certains articles restent beaucoup trop lourds pour les navigateurs mobiles, qui refusent donc de les afficher, purement et simplement. Je pense que c'est dû au nombre de nœuds dans le DOM, qui est beaucoup trop important, et fait planter le navigateur, quels que soient les artifices mis en place pour le leurrer quant au poids réel des performances. C'est un problème que je ne sais pas du tout comment résoudre…</p>
<h2>Principaux écueils</h2>
<h3>Pas de contrainte de temps</h3>
<p><strong>La&nbsp;grosse difficulté pendant ce projet, ça a été l'absence totale de contrainte de temps.</strong> Comme il s'agit d'un projet perso, il n'y avait pas du tout de date butoir, c'était un peu comme je voulais, quand je pouvais.</p>
<p>Ayant initié le projet pendant l'été 2014, j'ai ensuite déménagé, vu mon quotidien professionnel <a href="https://marieguillaumet.com/une-demission-et-deux-questions/">chamboulé</a> à plusieurs reprises, expérimenté la préparation d'une <a href="https://marieguillaumet.com/tag/histoire-de-ma-premiere-conference/">conférence</a> qui me tenait à cœur, et ai aussi pris du temps pour moi, parce que je sentais le <i lang="en">burn out</i> guetter.</p>
<p><strong>Quand on passe toutes ses journées, de toutes les semaines, de tous les mois, de toutes les années, devant des écrans, la dernière chose qu'on a envie de faire le soir et le week-end c'est… de recommencer.</strong></p>
<p>J'ai donc énormément procrastiné et pris de retard sur ce projet, pas par désintérêt, loin de là ; mais simplement à cause d'une allergie croissante au fait de rester enfermée à faire du code toute la sainte journée, lors de moments de temps libres qui pourraient être consacrés à des activités autrement plus épanouissantes pour moi.</p>
<p>J'ai ressenti ce dégoût d'autant plus violemment à partir du moment où j'ai commencé à travailler à 100% depuis chez moi, en télétravail.</p>
<p>Aleks n'y est évidemment pour rien ; c'est moi qui ai mal géré cette transition personnelle. Cela a pas mal pesé sur mon moral d'ailleurs (culpabilisation ++ de prendre un retard aussi énorme). Plus je me confondais en excuses, plus je m'embarrassais moi-même, plus je jurais mes grands dieux de ne pas me relancer dans un projet pareil de sitôt…</p>
<h3>Pas de « <span lang="en">mobile first</span> »</h3>
<p><strong>Je crois que cette refonte était le premier projet personnel où j’ai réellement compris l’intérêt du « <span lang="en">mobile first</span> », et souffert de son absence en amont du projet.</strong></p>
<p>J’ai mal anticipé des problèmes techniques posés par mes propositions graphiques – ce qui était assez inédit, car d'habitude, ma double compétence design/inté m'aide justement à faire des choix raisonnés dès la phase de conception.</p>
<p><strong>Or, penser <i lang="en">mobile first</i> dès la phase de design est d’autant plus important sur un site dont l’amélioration des performances est critique. </strong></p>
<p>Avec le recul, je réalise qu’avoir travaillé de façon très morcelée sur le design de ce site ne m’a pas aidée à en avoir une bonne vision d’ensemble.</p>
<p>Au final, je m’en suis sortie, mais j’ai quand même perdu pas mal de temps à devoir repenser certains modules, pendant le développement, alors que je n’étais vraiment pas en avance sur mon planning…&nbsp;:-/</p>
<p><strong>Leçon apprise à la dure, mais leçon retenue.</strong> Je ferai plus attention à ça la prochaine fois. Je me demande d’ailleurs si, lors de mon prochain projet, je ne commencerai pas directement à faire un peu de développement avant même de réfléchir au design, simplement pour avoir des pages épurées et fonctionnelles sous les yeux, avec lesquelles je pourrais tester des choses en manipulant directement le DOM. </p>
<p>J'ai l'impression d'être super en retard niveau process (Coucou le design dans le navigateur ! Coucou les <abbr title="proofs of concept" lang="en">POC</abbr> !), mais à ma décharge, mes expériences professionnelles passées ne m'y ont pas habituée.</p>
<h3>Mais aussi</h3>
<p><strong>D'autres difficultés auxquelles j'ai dû faire face :</strong></p>
<ul>
<li>Se lancer, pour une raison que j'ignore, dans <a href="http://www.24joursdeweb.fr/2014/comment-bien-versionner-son-site-wordpress-avec-git-et-github/">une architecture WordPress alambiquée</a>, qui m'a donné du fil à retordre et m'en donne encore aujourd'hui. Plus jamais !</li>
<li>Devoir relier quelques 300 commentaires à leurs articles respectifs, en modifiant à la main la base de données, parce que l'import Blogspot vers WordPress avait foiré pendant quelques minutes.</li>
<li>Être sérieusement déconcentrée en plein dev parce que les billets d'Aleks sont trop plaisants à lire…</li>
</ul>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8444" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/02/20160123_aleks-crement-shera.jpg" class="block-link thumb custom-thumb" title="Shera approuve cette refonte."><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/02/20160123_aleks-crement-shera-640x853.jpg" alt="Shera approuve cette refonte." /></a><figcaption id="figcaption_attachment_8444" class="wp-caption font-2" style="width: 45.714285714286em">Shera approuve cette refonte.</figcaption></figure></div>
<h2 id="epilogue">Épilogue : y a-t-il une vie après la mort ?</h2>
<p><strong>Il y a quelques jours, deux semaines à peine après la mise en ligne du nouveau design de son blog, Aleks a annoncé qu'elle arrêtait de bloguer pour de bon</span>.</strong></p>
<p>Stupeur et tremblements.</p>
<p>Sur le moment, cette nouvelle a été un déchirement pour moi, non seulement en tant que designer, mais surtout en tant que lectrice. Assister, impuissante, à la disparition d'une de mes sources de découvertes et d'émotions favorites m'a rendue profondément triste.</p>
<p>Quand on perd un de ses livres préférés, il n'est pas très difficile de s'en procurer une nouvelle copie, même si ce n'est pas exactement la même édition. En revanche, <strong>rien ne remplacera jamais la disparition d'un blog qu'on adore.</strong></p>
<h3>Let it go, let it go</h3>
<p><strong>Je me suis traîné un spleen pas possible pendant quelques jours</strong>, remuée par <a href="http://alekscrement.com/2015/10/aujourdhui-dans-triste-monde-tragique-26.html">la première</a> et <a href="http://alekscrement.com/2016/01/ad-vitam-internet.html">la seconde</a> parties de la réflexion d'Aleks au sujet du <span lang="en">blogging</span> et de sa vacuité</strong>.</p>
<p>J'ai relu ces deux articles plusieurs fois, et, même en en ayant pas mal discuté autour de moi, ces lectures m'ont ébranlée, au point d'avoir déjà des conséquences sur mon comportement et mon rapport au web.</p>
<div class="post-img-container clearfix alignright ratio-thumb"><figure role="group" id="attachment_8392" style="width: 13.571428571429em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2016/01/20160109_seuls-ensemble.jpg" class="block-link thumb custom-small-thumb" title="«&nbsp;Seuls ensemble&nbsp;» de Sherry Turkle"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2016/01/20160109_seuls-ensemble-180x264.jpg" alt="«&nbsp;Seuls ensemble&nbsp;» de Sherry Turkle" /></a></figure></div>
<p>Tout ceci fait écho non seulement à <a href="https://marieguillaumet.com/ceci-nest-pas-un-au-revoir/">mes propres interrogations bloguesques</a>, mais aussi au livre génial que je potasse en ce moment : <em>Seuls ensemble&nbsp;: De plus en plus de technologies, de moins en moins de relations humaines</em>, de Sherry Turkle, qui m'a été offert par Aleks, justement (cercle vertueux).</p>
<p>Alors… voilà. <strong>Y a-t-il une vie après la mort d'un blog ?</strong> Évidemment.</p>
<p>Et il y a aussi <strong>une vie <em>à côté</em> d'un blog</strong>.</p>
<p>La&nbsp;vraie vie et la vie que nous menons sur le web se nourrissent l'une l'autre :</p>
<ol>
<li>La&nbsp;première est la plus belle, la plus intense, la plus importante.</li>
<li>La&nbsp;seconde n'est jamais qu'un reliquat, une illusion, un dispositif émo-socio-technique incomplet, savamment entretenu par nos soins, auquel nous donnons le sens et la forme que nous voulons, et auquel nous pouvons mettre fin à tout moment.</li>
</ol>
<p>Mon blog, votre blog, le blog des gens que vous appréciez, et même celui des gens que vous haïssez, ce ne sont que des <em>médias</em>, qui reflètent plus ou moins justement des idées, des réflexions, des faits, des états d'âme, des créations…</p>
<p><strong>L'arrêt d'un blog n'est que l'arrêt de ce <em>média</em>, ça ne signe pas la disparition de ses auteurs (dieu merci), ni du lien que vous avez partagé avec eux.</strong> C'est juste un moyen de moins de communiquer avec eux, mais cela ne signifie pas que tous les autres moyens sont hors service, ni que les auteurs du blog ont perdu leur capacité de création et d'expression.</p>
<p><strong>Quand on veut vraiment garder contact avec quelqu'un, on trouve toujours un moyen.</strong> Si on ne le trouve pas, c'est que la relation n'était pas si importante.</p>
<p>Ceci dit, il est vrai que rien ne nous prépare émotionnellement à l'absence subite des personnes que nous avons rencontrées et auxquelles nous nous sommes attachés sur le net. Qu'il s'agisse d'un départ volontaire ou involontaire, la rupture est parfois douloureuse. <strong>Les interfaces vont et viennent, mais les émotions auxquelles elles ont donné lieu perdurent longtemps après.</strong></p>
<p>Malgré tout, ces personnes, virtualisées et donc particulièrement fascinantes, ne nous appartiennent pas. Il ne nous appartient pas de les juger, ni de juger ce qu'elles décident pour elles-mêmes. Nous ne pouvons qu'embrasser leurs choix, et se réjouir pour elles de la destinée qu'elles se choisissent. L'essentiel est de trouver ses propres dimensions, de faire les choses pour soi, et de ne pas se laisser gêner.</p>
<h3>Faire les choses pour soi</h3>
<p><strong>En ce qui me concerne, je continue de penser que cela vaut le coup de partager nos passions et nos découvertes sur le web.</strong> Pouvoir partager quelque chose avec autrui, notamment certaines de nos expériences et de nos émotions, et pouvoir en retirer quelque chose, quel que soit le moyen, c'est une chance.</p>
<p>Notre activité sur le web ne préjuge pas de qui on est ni de ce qu'on fait une fois nos écrans éteints. Elle ne devrait pas nourrir de jugement de valeur.</p>
<p><strong>Je ne serais pas qui je suis aujourd'hui sans le web.</strong> Ce que j'y ai vécu, et ce que ça m'a permis de vivre « en vrai&nbsp;», tout ça constitue une partie importante de ma vie. Le web m'a apporté et m'apporte encore tellement, je n'ai aucune envie d'arrêter d'y naviguer. </p>
<p>C'est peut-être bête, mais j'ai le sentiment que je lui « dois » quelque chose. À travers mon métier et mes activités personnelles, en propageant les bonnes pratiques, en sensibilisant mes interlocuteurs à la qualité et à l'accessibilité, en publiant des articles travaillés, en commentant, en retweetant, en valorisant le bien que font les autres au web, en prenant la parole et en essayant de produire quelque chose qui ait du sens, qui soit de bonne qualité et qui sorte un peu de l'ordinaire, j'essaye de rendre au web une partie de ce qu'il m'a donné.</p>
<p>Cela ne veut pas dire que je n'ai pas délimité un espace intime qui m'appartient en propre, bien distinct des Internets, qui peuvent devenir perfides si on n'y prend pas garde : au contraire, <strong>plus le temps passe, plus mon niveau de dépendance au web est grand, plus je multiplie les liens dans le réel, pour ne pas perdre pied</strong>.</p>
<h3>En conclusion… (c'est pas trop tôt !)</h3>
<p><strong>À mon niveau, je suis heureuse d'avoir pu participer à un projet aussi cool que la refonte du blog d'Aleks.</strong> </p>
<p>Je me suis vraiment amusée à concevoir des interfaces qui sortent un peu de l'ordinaire, en mélangeant nos influences respectives, et en les faisant hybrider.</p>
<p>Je suis fière d'avoir envoyé son vieux Blogspot aux oubliettes, et de l'avoir remplacé par un site flambant neuf.</p>
<p>Je ne regrette aucune minute passée à configurer soigneusement chaque partie de ce dispositif, même si je le sais perfectible.</p>
<p><strong>Je suis reconnaissante à Aleks d'avoir écrit pendant tant d'années un blog aussi <span lang="en">badass</span>,</strong> ainsi que pour tous les fous rires, les découvertes et les larmes qu'il a provoqués à chaque fois que je l'ai lu.</p>
<p>Je lui suis également reconnaissante pour sa confiance inconditionnelle tout au long de ce projet, particulièrement long et mouvementé.</p>
<p>Pour ma part, je compte bien <strong>continuer à abattre les murs de pixels qui me séparent des personnes rencontrées sur le net</strong> et avec qui j'ai tant d'affinités. Le web est insatisfaisant car il ne montre que des reflets, là où, nous, nous a besoin du fleuve pour nous épanouir.</p>
<p>Si la fin du blog d'Aleks a un côté positif, c'est bien celui-ci : <strong>l'envie de continuer à ne pas vivre sur Internet, et de croquer le réel à pleines dents.</strong></p>
<p><em>Merci infiniment de m'avoir lue ! &#x2665;︎</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/making-of-refonte-blog-aleks-crement/feed/</wfw:commentRss>
			<slash:comments>34</slash:comments>
		
		
			</item>
		<item>
		<title>Histoire de ma première conférence (3)</title>
		<link>https://marieguillaumet.com/histoire-de-ma-premiere-conference-3/</link>
					<comments>https://marieguillaumet.com/histoire-de-ma-premiere-conference-3/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Fri, 23 Oct 2015 07:26:21 +0000</pubDate>
				<category><![CDATA[36 15 Ma Life]]></category>
		<category><![CDATA[communauté]]></category>
		<category><![CDATA[conférences]]></category>
		<category><![CDATA[gestion du stress]]></category>
		<category><![CDATA[histoire de ma première conférence]]></category>
		<category><![CDATA[mind mapping]]></category>
		<category><![CDATA[Paris Web]]></category>
		<category><![CDATA[sémiologie]]></category>
		<category><![CDATA[sociologie]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8295</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-3/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-280x280@2x.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-130x130@2x.jpg 260w" sizes="auto, (max-width: 280px) 100vw, 280px" /></a><br /><br />Dernier chapitre de l'histoire de ma première conférence. Cette fois-ci, il est question de sciences sociales, de bienveillance, de se rendre utile et de <em>faire</em>, quelle que soit l'issue.]]></description>
										<content:encoded><![CDATA[<p><em>Ce billet fait suite aux billets <a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-1/">Histoire d’une conférence&nbsp;: la préparation</a> et <a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-2/">Histoire d’une conférence&nbsp;: le jour J</a>.</em></p>
<p><em>Si vous l'avez loupé, <a href="https://marieguillaumet.com/design-de-soi-paris-web-2015/">le contenu intégral de ma conférence</a> est en ligne.</em>&nbsp;:)</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8297" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_beffroi-montrouge.jpg" class="block-link thumb custom-thumb" title="Le Beffroi de Montrouge"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_beffroi-montrouge-640x427.jpg" alt="Le Beffroi de Montrouge" /></a><figcaption id="figcaption_attachment_8297" class="wp-caption font-2" style="width: 45.714285714286em">Le Beffroi de Montrouge.<br /><a href="https://www.flickr.com/photos/parisweb/22184114272/in/pool-pw2015/">Photo</a> : Olivier Ramonteu.</figcaption></figure></div>
<p><strong>Ça fait déjà trois semaines que Paris Web a eu lieu. L’euphorie commence à retomber et la routine reprend doucement le dessus.</strong></p>
<p>Mais j'ai quand même envie de partager d'ultimes émotions et réflexions paris-wébiennes avec vous !</p>
<h2>Les sciences sociales sont nos amies</h2>
<p><strong>Contre toute attente, cette conférence a eu le mérite de me réconcilier avec mes études en sciences sociales.</strong></p>
<p>Elle m’a permis de me replonger dans mes cours de <abbr title="sociologie">socio</abbr>, de <abbr title="sémiologie">sémio</abbr> et d’anthropologie, et m’a fait prendre conscience de la valeur de tout cela.</p>
<p>C’est en faisant des recherches pour ma conf' que je me suis rendue compte à quel point les enquêtes de terrain et les entretiens que j'ai pu faire par le passé ont été formateurs, ainsi que mes lectures, la rédaction de mes deux mémoires ainsi que les innombrables exposés que j’ai dû faire.</p>
<p><strong>Émettre des hypothèses, constituer une bibliographie, établir une grille d’analyse,</strong> poser des questions, retranscrire les entretiens, décrypter les écrans, présenter les résultats… Tout cela m’a servi non seulement à défricher le sujet dont j’allais parler, mais aussi à faire des choix en matière de présentation.</p>
<p>Au mois de mars, j’ai aussi réalisé <strong>une carte heuristique</strong> (<i lang="en">mind mapping</i>), sur les conseils de <a href="https://twitter.com/cheekfille">Vi</a> dans son livre <em>Petit précis de créativité</em> :</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8272" style="width: 47.142857142857em" class="post-img-figure"><span class="thumb custom-thumb"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-mind-mapping-640x881.jpg" alt="Mind mapping" /></span></figure></div>
<p><strong>Cette carte m’a aidée à comprendre que le sujet était bien plus vaste que ce que j’avais imaginé de prime abord</strong>, et que je n’arriverais pas à parler de tout le jour J. Cela m'a donc permis de choisir l'axe de ma conférence.</p>
<p><strong>L’autre truc qui m’a beaucoup aidée à affiner mon sujet, ça a été d’en parler autour de moi.</strong> </p>
<p>Je n’irai pas jusqu’à dire que j’ai mené des entretiens, mais présenter mon sujet à un échantillon de personnes, voir leurs réactions et entendre ce qu’elles avaient à dire à ce propos m’a vraiment aidée à mieux cadrer la problématique de mon sujet.</p>
<p><strong>En un sens, cette conférence m’a permis de voir un lien entre méthodes de recherche en sociologie, et méthodes de recherche UX.</strong> Ça m’a d'ailleurs donné envie de me remettre à lire des bouquins liés à la sémio. En haut de ma liste : Gérard Genette, Anne-Marie Christin, Umberto Eco, et même du Mallarmé et du Georges Perec.</p>
<p>Parfois, c’est comme ça, les astres s’alignent et plusieurs de tes centres d’intérêt se recoupent soudain. C’est fascinant de percevoir tous leurs points communs. Mon parcours m'a toujours semblé alambiqué et chaotique, mais aujourd'hui je réalise que tout n'est pas si incohérent que ça.</p>
<h2>Se mettre à la place du public pour lui offrir quelque chose d'utile</h2>
<p><strong>Quand vous êtes sur le point de parler en public, il y a un conseil que tout le monde vous donne&nbsp;: « Imagine que les gens qui t’écoutent sont à poil ! »</strong></p>
<p>…</p>
<p>Pour avoir essayé, je peux vous dire que ça ne fonctionne pas, mais alors <em>pas du tout</em>.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8299" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin.jpg" class="block-link thumb custom-thumb" title=""><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin-640x427.jpg" alt="" /></a><figcaption id="figcaption_attachment_8299" class="wp-caption font-2" style="width: 45.714285714286em">L'auditorium Blin.<br /><a href="https://www.flickr.com/photos/parisweb/22009944189/">Photo</a> : Olivier Ramonteu.</figcaption></figure></div>
<p><strong>En revanche, un truc qui aide vraiment, c’est de se demander <em>de quoi</em> a besoin ce public-là.</strong> Pas n’importe quel public, non : le public précis qui va se tenir devant vous le jour J, qui participe à cet évènement-là, et qui fait la démarche de venir vous écouter vous, sur ce sujet-là.</p>
<p>Imaginer les motivations de chaque personne présente, les raisons qui l’ont fait choisir d’écouter cette conférence-là, imaginer les questions qu’elle se pose professionnellement, tenir compte de ses références socio-culturelles, tout cela m’a aidée à concevoir ma conférence.</p>
<p><strong>Je pense que si je devais la donner ailleurs, je ne redirais pas forcément la même chose.</strong> Le socle serait le même, mais j'essayerais a minima d’adapter les exemples en fonction de l’évènement et des personnes qui viendraient m’écouter, par exemple.</p>
<p>(Du reste, dans la mesure où ma conf’ a été filmée, je ne vois pas trop l’intérêt de la donner à nouveau.)</p>
<h2>Pour convaincre, il faut choisir de bons exemples</h2>
<p>Quand on traite de près ou de loin du «&nbsp;<i lang="en">personal branding</i>&nbsp;», le premier réflexe  est souvent de se référer à ce qui se fait outre-Atlantique.</p>
<p><strong>Pourtant, dans ma conf’, je n’ai pas voulu citer d’exemples de sites web américains.</strong> </p>
<p>Certes, avoir conscience de ce qui se fait ailleurs est nécessaire, et l’ethnocentrisme est en général aliénant.</p>
<p>Maintenant, de la même façon qu'une couleur n’a pas la même signification en Europe qu’en Asie, <strong>un·e Français·e ne parlera pas de soi de la même façon qu’un·e Américain·e.</strong></p>
<p>En France, on n’a pas cette culture du « <i lang="en">self-made man</i> » ou de la « <i lang="en">self-made woman</i> » : au contraire, celui ou celle qui réussit du jour au lendemain éveille le soupçon plus qu'autre chose.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8300" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_paris-web-licorne.jpg" class="block-link thumb custom-thumb" title="C'était impossible, Paris Web le fait depuis 10 ans."><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_paris-web-licorne-640x427.jpg" alt="C'était impossible, Paris Web le fait depuis 10 ans." /></a><figcaption id="figcaption_attachment_8300" class="wp-caption font-2" style="width: 45.714285714286em">C'était impossible, Paris Web le fait depuis 10 ans.<br /><a href="https://www.flickr.com/photos/franck-paul/22003736098/">Photo</a> : Franck Paul.</figcaption></figure></div>
<p><strong>Lorsqu’un designer partage régulièrement son travail, on a tendance à se moquer de lui :</strong> on le traite d’égocentrique, de prétentieux voire de narcissique. Il n'est pas rare que le mot « auto-promo » fuse : or, dans notre milieu, c'est une sentence stigmatisante qui se répand comme une traînée de poudre et dont il est difficile de se défaire ensuite.</p>
<p><strong>Il fallait donc que je trouve des exemples dénués de tous ces sous-entendus-là,</strong>  des exemples qui soient proches des personnes qui allaient m’écouter (ou me lire). Je voulais montrer des choses existantes, réalisables par la majorité des personnes présentes dans la salle.</p>
<p>L’idée n’était pas de dire : « Voici la seule façon de faire les choses, faites comme ça ! » Mais plutôt : « Voici quelques exemples inspirants ! <strong>Vous voyez, c'est possible de parler de soi de façon humble et créative.</strong> Mais ne copiez pas ce que font les autres : trouvez votre propre langage ».</p>
<h2>Troquer sa propre angoisse contre la bienveillance des autres</h2>
<p>J’ai longtemps cru que l'adage « Mieux vaut être seul que mal accompagné » avait été écrit pour moi.</p>
<p><strong>Pourtant, cela fait cinq ans que Paris Web donne chaque année un grand coup de pied au cul de ma misanthropie et de mon goût immodéré pour la solitude.</strong></p>
<p>Pour commencer, avant même l’évènement, j’ai été encouragée et soutenue dès que mon sujet a été retenu, au mois de mai dernier. Déjà à ce moment-là, je n’en revenais pas de voir tant d'engouement pour ce sujet.</p>
<p>Ensuite, plus la date fatidique s’approchait, plus j’étais dans mes petits souliers, et plus je tweetais mon angoisse, en ponctuant mes messages du hashtag #cacamou. </p>
<p>Partager ce stress en public de façon ponctuelle était une façon de <strong>soulever le couvercle de la cocotte-minute</strong>. C’était une sorte d’exorcisme par anticipation.</p>
<div class="post-img-container clearfix alignright medium"><figure role="group" id="attachment_8283" style="width: 21.428571428571em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_hellgy-kreestal.jpg" class="block-link thumb custom-thumb" title="Avec Laurence, ma licorne porte-bonheur."><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_hellgy-kreestal-280x280.jpg" alt="Avec Laurence, ma licorne porte-bonheur." /></a><figcaption id="figcaption_attachment_8283" class="wp-caption font-2" style="width: 20em">Avec <a href="https://twitter.com/hellgy">Laurence</a>, ma licorne porte-bonheur.</figcaption></figure></div>
<p>Je ne le faisais pas pour que les autres me plaignent ou m’encouragent ; j’avais juste <em>besoin</em> de dire ce stress pour tenter de m’en débarrasser un peu.</p>
<p><strong>Et pourtant, à chaque fois, les autres me recouvraient de leur bienveillance et de leurs encouragements.</strong> </p>
<p>Je sentais un soutien sans faille autour de moi, non seulement de la part de mes proches, qui savaient à quel point cette conférence me rendait malade, mais aussi de la part de « copaines » du web, plus ou moins proches de moi. </p>
<p>Et cette profusion de bonnes ondes a continué même après ma conférence. C’était dingue. </p>
<p><strong>Trois semaines plus tard, je n’en reviens toujours pas de la puissance de ce partage émotionnel.</strong> Sans ce soutien, je pense que je n’aurais pas délivré la même chose. </p>
<p>Être encouragé·e, ça fait vraiment du bien. Et je me rends compte à quel point cela a pu me manquer dans d’autres aspects de ma vie, notamment la création artistique.</p>
<h2>J'suis trop contente !</h2>
<p><strong>Le mercredi soir, après le dîner orateurs, <a href="https://twitter.com/etiennesamson">Étienne</a> et moi rentrions d’un bon pas à l’hôtel.</strong> On discutait de notre stress, de nos conférences respectives, des émotions soulevées par tout ça.</p>
<p>À un moment, il m'a dit un truc qui m’a marquée. Tout sourire, il s’est exclamé&nbsp;: <strong>« J'suis trop content d’être là ! »</strong></p>
<p>Il l’a dit à plusieurs reprises&nbsp;: «&nbsp;Non mais vraiment, j’suis TROP content d’être là ! »</p>
<p>Et ça m’a fait un bien fou de l'entendre.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8298" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin2.jpg" class="block-link thumb custom-thumb" title="La&nbsp;scène sur laquelle j'ai parlé."><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_auditorium-blin2-640x427.jpg" alt="La&nbsp;scène sur laquelle j'ai parlé." /></a><figcaption id="figcaption_attachment_8298" class="wp-caption font-2" style="width: 45.714285714286em">La&nbsp;scène sur laquelle j'ai parlé.<br /><a href="https://www.flickr.com/photos/parisweb/21574050304/">Photo</a> : Olivier Ramonteu.</figcaption></figure></div>
<p><strong>J’étais tellement engluée dans mon propre stress que j’avais oublié que, moi aussi, j’étais TROP CONTENTE d’être là</strong>, d’avoir cette opportunité en or de défendre un sujet qui me tient à cœur, lors d’un évènement que j’aime et devant des gens que j’adore.</p>
<p>La&nbsp;joie d’Étienne m’a aidée à relativiser et à garder en tête que <strong>l’essentiel, c’est l’instant présent</strong> ; c’est le fait de le <em>faire</em>, quelle que soit l'issue ; c’est cette rencontre avec les autres ; c’est la confiance qu’on s’accorde mutuellement.</p>
<p>Alors oui : <strong class="stabilo">j’ai été TROP contente de donner ma première conférence lors des 10 ans de Paris Web</strong>. C’était vraiment génial&nbsp;!</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8296" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_marie-paris-web.jpg" class="block-link thumb custom-thumb" title="En pleine action !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151023_marie-paris-web-640x427.jpg" alt="En pleine action !" /></a><figcaption id="figcaption_attachment_8296" class="wp-caption font-2" style="width: 45.714285714286em">En pleine action !<br /><a href="https://www.flickr.com/photos/parisweb/22207213871/">Photo</a> : Olivier Ramonteu, encore lui !</figcaption></figure></div>
<p>Il y a beaucoup de monde que j’aimerais remercier, à commencer par le staff de Paris Web qui a été une fois de plus <strong>extraordinaire</strong>.</p>
<p><strong class="stabilo">Merci</strong> aussi à vous tous qui m'avez souri, parlé, écrit, écoutée, lue, encouragée, félicitée.</p>
<p><strong class="stabilo">Merci</strong> pour les gâteaux, les tasses de thé, les <i lang="en">tweets</i>, les emails, les discussions, les <abbr>MP3</abbr>, les découvertes, les fous rires, les cadeaux et les câlins.</p>
<p>Et surtout, <strong class="stabilo">félicitations</strong> à vous qui avez osé publier quelque chose depuis Paris Web, qui avez pris la bonne résolution de donner une conférence l’année prochaine, et qui continuez à publier des contenus de qualité sur vos blogs, en dépit de la pression des réseaux sociaux.</p>
<p><strong>Continuez à partager&nbsp;!</strong> Je vous lis. Je vous vois.</p>
<p>De mon côté, je n’en ai pas tout à fait terminé avec le design de soi. Ce billet clôt un chapitre, certes, mais pas le livre. Je continuerai à étudier ce sujet d’une manière ou d’une autre !</p>
<blockquote><p>Le succès est aussi dangereux que l’échec. (…)<br />
Que tu montes ou descendes l’échelle,<br />
ta position est instable.<br />
Lorsque tu as les deux pieds sur le sol,<br />
tu gardes toujours ton équilibre.</p>
<footer>Lao-Tseu, <em>Tao Te King</em></footer>
</blockquote>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/histoire-de-ma-premiere-conference-3/feed/</wfw:commentRss>
			<slash:comments>6</slash:comments>
		
		
			</item>
		<item>
		<title>Histoire de ma première conférence (2)</title>
		<link>https://marieguillaumet.com/histoire-de-ma-premiere-conference-2/</link>
					<comments>https://marieguillaumet.com/histoire-de-ma-premiere-conference-2/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Wed, 14 Oct 2015 14:38:26 +0000</pubDate>
				<category><![CDATA[36 15 Ma Life]]></category>
		<category><![CDATA[amitié]]></category>
		<category><![CDATA[communauté]]></category>
		<category><![CDATA[conférences]]></category>
		<category><![CDATA[gestion du stress]]></category>
		<category><![CDATA[histoire de ma première conférence]]></category>
		<category><![CDATA[licornes]]></category>
		<category><![CDATA[Paris Web]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8274</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-2/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="En pleine action !" decoding="async" loading="lazy" srcset="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-640x640.jpg 640w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-180x180.jpg 180w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-1280x1280.jpg 1280w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-560x560.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie.jpg 2048w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-130x130@2x.jpg 260w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-180x180@2x.jpg 360w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-560x560@2x.jpg 1120w" sizes="auto, (max-width: 280px) 100vw, 280px" /></a><br /><br />Deuxième partie de mon compte-rendu très personnel de Paris Web, dédié à l'évènement et au jour J. Licornes, pompon mauve et stress monumental, version longue.]]></description>
										<content:encoded><![CDATA[<p><em>Ce billet fait suite au billet <a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-1/">Histoire d’une conférence : la préparation</a>.</em></p>
<p><em>Si vous l'avez loupé, <a href="https://marieguillaumet.com/design-de-soi-paris-web-2015/">le contenu intégral de ma conférence</a> est en ligne.</em>&nbsp;:)</p>
<h2>J-2</h2>
<p><strong>Mercredi 31 septembre.</strong> C’est le ventre en vrac et le visage blême que je monte dans le train pour Paris.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8285" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_shera.jpg" class="block-link thumb custom-thumb" title="Mon chat roupillant près de mes sacs de voyage"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_shera-640x480.jpg" alt="Mon chat roupillant près de mes sacs de voyage" /></a></figure></div>
<p><strong>Une fois sur place, le trajet jusqu'à l'hôtel est horrible&nbsp;:</strong> en pleine heure de pointe, le métro bondé et la traversée du <abbr title="périphérique">périph'</abbr> me rappellent à quel point j’ai bien fait de quitter Paris pour m’installer en Bretagne.</p>
<h3>Le dîner orateurs</h3>
<p>À l’heure du dîner, je rejoins le staff de Paris Web et les autres orateurs à la Quincaillerie générale pour « le dîner orateurs ». Voir autant de visages sympathiques me fait du bien, même si cela concrétise aussi le truc, et fait monter mon stress d'un coup.</p>
<p>La&nbsp;soirée prend vite une tonalité singulière : <strong>la rumeur selon laquelle il s’agirait du dernier Paris Web enfle</strong>. Derrière leurs sourires, les staffeurs semblent épuisés&nbsp;: 12 d’entre eux (sur 15&nbsp;!) jetteront d’ailleurs l’éponge à la fin de l’année. Forcément, quand tu fournis un boulot aussi intensif et aussi extraordinaire plusieurs années de suite, tu finis par tirer un peu la langue.</p>
<p>Me voyant stresser, <a href="https://twitter.com/hellgy">Laurence</a> et <a href="https://twitter.com/webetcaetera">Véronique</a> tentent de me rassurer. Elles me donnent deux conseils pour le jour J qui me font marrer :</p>
<ul>
<li>« Aie confiance en ton déodorant. »</li>
<li>« Porte une culotte fiable. »</li>
</ul>
<p><strong>À l’issue de la soirée, chaque orateur se voit remettre un petit « mémo orateur » personnalisé</strong>, tout mauve. Je m'en suis beaucoup servie durant les trois jours de Paris Web : c'était vraiment bien pensé !</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8281" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-memo-orateurs.jpg" class="block-link thumb custom-thumb" title="Le mémo orateurs de Paris Web"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-memo-orateurs-640x647.jpg" alt="Le mémo orateurs de Paris Web" /></a></figure></div>
<p>Laurence quant à elle m’offre ce soir-là <strong>un énorme pompon violet</strong> porte-bonheur, qui n’a pas quitté mon sac à dos depuis.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8280" style="width: 47.142857142857em" class="post-img-figure"><span class="thumb custom-thumb"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_pompon-violet-640x427.jpg" alt="Mon beau pompon violet" /></span></figure></div>
<h2>J-1</h2>
<p><strong>Jeudi 1er octobre.</strong> Après une nuit atroce et une digestion difficile, je saute le petit-déj’. Le temps s’annonce bien long jusqu’à l’heure de ma conférence, prévue le lendemain après-midi.</p>
<p>Passer en fin de deuxième journée, c'est dur. Mais c'est toujours mieux que passer le matin du premier jour dans le grand amphi en séance plénière, donc je ne me plains pas.</p>
<p><strong>Je me prépare psychologiquement</strong> à assister à une journée de conférences géniales, intéressantes et rondement menées, avec des orateurs talentueux et à l’aise sur scène, pendant que moi, la <i lang="en">newbie</i>, je sentirais mon courage se carapater au fur et à mesure.</p>
<div class="post-img-container clearfix aligncenter full"><figure role="group" id="attachment_8275" style="width: 44.571428571429em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_little-girl.jpg" class="block-link thumb custom-thumb" title="Envie de fuir !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_little-girl.jpg" alt="Envie de fuir !" /></a></figure></div>
<p><strong>Heureusement, il y a des licornes pour détourner mon attention :</strong> non seulement sur le t-shirt Paris Web annuel (chouette hommage à Pink Floyd), mais aussi sur un adorable petit patch brodé, sur le sac en tissu qui contenait les <i lang="en">goodies</i>, sur la photocabine présente pour l’occasion, sur le programme, et même sur Laurence, puisqu’elle avait ramené <a href="https://www.youtube.com/watch?v=wU53RUAaXTA">son célèbre déguisement de licorne</a> pour l’occasion.</p>
<p>D'ailleurs, si vous voulez en savoir plus sur <a href="http://weblog.redisdead.net/main/post/2015/10/09/Les-goodies-de-Paris-Web-making-of">la conception des goodies Paris Web</a>, allez lire son blog !</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8277" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-goodies-2015.jpg" class="block-link thumb custom-thumb" title=""><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-goodies-2015-640x471.jpg" alt="" /></a></figure></div>
<h3>Massacre d'idées</h3>
<div class="post-img-container clearfix alignright medium"><figure role="group" id="attachment_7916" style="width: 21.428571428571em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/03/20150319.jpg" class="block-link thumb custom-thumb" title="Géographie cérébrale"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/03/20150319-280x280.jpg" alt="Géographie cérébrale" /></a></figure></div>
<p><strong>Niveau conférences, je suis un peu restée sur ma faim ce jour-là</strong>, mais sans doute était-ce le stress monstrueux qui me tétanisait et m’empêchait d’apprécier à 100% ce que je vivais.</p>
<p>Je retiendrai quand même la conférence de <a href="https://twitter.com/cheekfille">Virginie Caplet</a> (qui a écrit par ailleurs le merveilleux <a href="http://boutique.letrainde13h37.fr/products/petit-precis-de-creativite-virginie-caplet"><em>Petit précis de créativité</em></a>). </p>
<p>Au programme : <strong>une conférence joyeuse sur le massacre des idées</strong> – les nôtres, mais aussi celles des autres. Si ça vous intéresse, <a href="http://www.paris-web.fr/2015/conferences/confessions-dun-serial-killer.php" title="Vidéo de la conférence de Virginie Caplet, « Confessions d'un serial killer »">la vidéo</a> est déjà en ligne !</p>
<p>Cette conférence était d'autant plus remarquable qu'un souci technique a empêché Vi d'accéder à ses notes : elle a dû donc faire sans, réussissant à contourner les trous de mémoire avec virtuosité. Ce n’était plus à une conférence que nous étions en train d'assister, mais à un véritable <i lang="en">stand-up</i> ! Impressionnant.</p>
<p><strong>J'ai également adoré la conférence donnée par Sylvie Duchateau</strong>. Sylvie, qui était accompagnée par sa chienne guide Isba, nous a expliqué quels outils lui permettent, en tant que personne aveugle, d'utiliser le web.</p>
<p>Si vous ne comprenez pas bien à quoi sert l'accessibilité web, <strong class="stabilo">vous DEVEZ</strong> regarder <a href="http://www.paris-web.fr/2015/conferences/le-defi-dune-personne-aveugle-conseiller-sur-laccessibilite-dans-un-web-toujours-plus-visuel.php" title="Vidéo de la conférence de Sylvie Duchateau, « Le défi d'une personne aveugle&nbsp;: conseiller sur l'accessibilité dans un web toujours plus visuel »">la vidéo</a> de cette super conférence !</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8278" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-sylvie-duchateau.jpg" class="block-link thumb custom-thumb" title="Sylvie Duchateau à Paris Web"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-sylvie-duchateau-640x640.jpg" alt="Sylvie Duchateau à Paris Web" /></a></figure></div>
<h3>Réglages techniques</h3>
<p><strong>Après Virginie, ce fut au tour d’<a href="https://twitter.com/etiennesamson">Étienne</a> de monter sur scène.</strong> Sur le papier, le pitch de <a href="http://www.paris-web.fr/2015/conferences/de-grands-pouvoirs-impliquent-de-grandes-responsabilites.php" title="Vidéo de la conférence d'Étienne Samson, « De grands pouvoirs impliquent de grandes responsabilités&nbsp;»">sa conférence</a> m’avait séduite. </p>
<p>Hélas, il a eu la guigne de ne pas disposer de ses <i lang="en">slides</i> du tout, et a dû donner sa conférence sans aucun support de présentation. Dur !</p>
<p><strong>Cela m'a fait paniquer</strong> : m’imaginer donner ma conférence le lendemain sans <i lang="en">slides</i> ni notes n'était pas envisageable. Le cœur battant, j’ai fait part de mon inquiétude au staff. Ils m'ont alors proposé de faire <strong>une répétition technique</strong> le lendemain matin.</p>
<p>Ce fut une très bonne idée, étant donné que pendant cette répétition, le régisseur a mis un bon quart d’heure avant de réussir à projeter mes <i lang="en">slides</i> et mes notes sur les divers écrans de la salle. Autant de temps en moins sur le déroulé de ma conf’ si j’avais attendu le dernier moment.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8276" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-auditorium-blin.jpg" class="block-link thumb custom-thumb" title="Répétition technique"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_paris-web-auditorium-blin-640x853.jpg" alt="Répétition technique" /></a></figure></div>
<p><strong>Le soir, prolongation des festivités à l’apéro communautaire.</strong> Ce fut l’occasion de profiter de discussions furieusement enrichissantes autour d'un bon burger.</p>
<p>En rentrant à l’hôtel, mon rythme cardiaque pétait les scores. <strong>J’étais morte de trouille</strong>, d’autant plus que tous les gens à qui j’avais parlé pendant la journée me demandaient sans arrêt si ça allait, en me répétant tous que ma conférence allait être gé-ni-ale et qu'ils seraient là pour l'écouter.</p>
<p>C'était très gentil, et cela m'a fait du bien de l'entendre, mais je peux vous avouer aujourd'hui que cela m'a aussi beaucoup stressée !…</p>
<h2>Le jour J</h2>
<p><strong>Vendredi 2 octobre.</strong> Je m’étais promis de me coucher tôt pour être en forme le jour J. </p>
<p>C'est donc tout naturellement que je me suis couchée à une heure indécente et que je me suis réveillée avec une magistrale tête dans le cul.</p>
<p>Le matin, j’essayais de mettre mon stress de côté et d’apprécier les conférences que j’écoutais. <a href="https://medium.com/france/r%C3%A9v%C3%A9lez-votre-process-d27ec133ec3b">La&nbsp;conférence de Cabaroc</a> m’a particulièrement plu (citer Austin Kleon = 10 points pour Gryffondor), ainsi que <a href="http://www.paris-web.fr/2015/conferences/death-and-ux-digital-afterlife-and-digital-legacy.php">la conférence d'Agnieszka Maria Walorska</a> consacrée à la gestion de nos données personnelles sur le web après notre mort.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8284" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-death-ux.jpg" class="block-link thumb custom-thumb" title="Mort virtuelle et au-delà virtuel"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-death-ux-640x640.jpg" alt="Mort virtuelle et au-delà virtuel" /></a></figure></div>
<p>Mais la pression montait. <a href="https://twitter.com/zizae">Enza</a> et <a href="https://twitter.com/annso_">Annso</a> avaient beau m’encourager, je flippais comme une folle. </p>
<p>Le cheveu fou, la gorge sèche et le bide en vrac, j’errais dans les couloirs du Beffroi de Montrouge tel un spectre. J'ai croisé <a href="https://twitter.com/shemuuu">Samuel</a>, <a href="https://twitter.com/no_way">Noëlie</a> et <a href="https://twitter.com/notabene">Stef</a>, qui m'ont dit des trucs gentils, même si je ne me souviens plus exactement <em>quoi</em>.</p>
<div class="post-img-container clearfix aligncenter full"><figure role="group" id="attachment_8282" style="width: 30em" class="post-img-figure"><span class="thumb custom-thumb"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_scared-spongebob.jpg" alt="La&nbsp;trouille" /></span></figure></div>
<h3>Destination finale</h3>
<p><strong>Vers 13 heures, j’ai tout laissé en plan et je suis rentrée à l’hôtel pour me préparer</strong>, attrapant au passage de quoi déjeuner sur le pouce.</p>
<p>Arrivée dans ma chambre d’hôtel, je savais que Le Moment Tant Redouté était arrivé. Un peu comme une condamnée à mort, je mangeais ce qui serait peut-être mon ultime repas, et je passais un ultime coup de fil à ma personne préférée.</p>
<p>Au moment de reprendre l’ascenseur pour quitter l’hôtel, j’ai commencé à avoir des visions d’horreur façon <em>Destination finale</em> : l’ascenseur qui reste bloqué, puis qui s'écrase ; une voiture qui me renverse sur le passage piéton&nbsp;; un fou qui me poignarde en pleine rue ; la quiche aux poireaux du midi qui finit par m’étouffer&nbsp;; et ainsi de suite.</p>
<p>Je me disais&nbsp;: <em>Non, je ne peux pas mourir maintenant, le staff compte sur moi !</em> </p>
<p>C'est fou ce qui te passe par la tête quand tu flippes de façon irrationnelle.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8279" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_beffroi-montrouge.jpg" class="block-link thumb custom-thumb" title="Le Beffroi de Montrouge"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151013_beffroi-montrouge-640x480.jpg" alt="Le Beffroi de Montrouge" /></a></figure></div>
<p><strong>En dépit de ces pensées mortifères, je suis retournée au Beffroi sans encombre.</strong> Mille angoisses me harcelaient et, en même temps, je respirais profondément pour essayer de rester légère et détendue.</p>
<h3>Invocation</h3>
<p><strong>De retour à Paris Web, tout était calme.</strong> Je me collais à Laurence comme un bébé licorneau auprès de sa mère.</p>
<p>Puis sont arrivées Noëlie et Vi, et nous avons, à notre insu, formé pendant un court instant une sorte de cercle de sorcières <abbr title="Do it yourself" lang="en">DIY</abbr> – ou plutôt <abbr lang="en">DIWO</abbr>, <i lang="en">do it with others</i>.</p>
<p><strong>L’énergie féminine qui est sortie de ce moment m’a vraiment fait un bien fou.</strong> Je me sentais soutenue. Les minutes s’accéléraient dangereusement, et pourtant, j’étais presque zen. Le poids sur mes épaules que je ressentais depuis des mois s'évanouissait.</p>
<p><strong>J’étais prête.</strong></p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8290" style="width: 47.142857142857em" class="post-img-figure"><span class="thumb custom-thumb"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_the-craft-640x349.jpg" alt="The Craft" /></span></figure></div>
<p><strong>Après ça, tout est allé très vite :</strong> rentrer dans la salle, monter sur scène, installer mes affaires, patienter pendant qu’on me posait un « micro Madonna » sur le crâne, réviser le déroulé de la conférence rapidement avec <a href="https://twitter.com/JulienLiard">Julien</a>, et puis attendre que tout le monde revienne de la pause goûter.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8287" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-micro-madonna.jpg" class="block-link thumb custom-thumb" title="Le « micro Madonna »"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-micro-madonna-640x480.jpg" alt="Le « micro Madonna »" /></a><figcaption id="figcaption_attachment_8287" class="wp-caption font-2" style="width: 45.714285714286em">Le « micro Madonna ». (Photo : <a href="https://twitter.com/zizae">Enza Chaffron</a>.)</figcaption></figure></div>
<p>La&nbsp;salle s’est vite remplie. <strong>Par chance, les premiers rangs étaient occupés par plein de visages sympathiques.</strong></p>
<p>L’heure était arrivée. </p>
<p><a href="https://twitter.com/AudVL">Audrey</a>, la maîtresse de cérémonie, m’a présentée rapidement. </p>
<p>Ensuite, les lumières se sont tamisées.</p>
<p><strong>Et puis ce fut à mon tour de parler.</strong></p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8286" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-blin.jpg" class="block-link thumb custom-thumb" title="La&nbsp;salle était pleine !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-blin-640x360.jpg" alt="La&nbsp;salle était pleine !" /></a><figcaption id="figcaption_attachment_8286" class="wp-caption font-2" style="width: 45.714285714286em">La&nbsp;salle était pleine ! (Photo : Thanh.)</figcaption></figure></div>
<h3>La&nbsp;conf'</h3>
<p><strong>Une fois qu’on est sur scène, on n'a plus le temps de réfléchir à son stress.</strong> Celui-ci disparaît donc, et on se sent un peu plus libre de faire son truc.</p>
<p>Je ne me souviens plus trop de ce que j’ai dit. Je me souviens vaguement que j’ai fait des cœurs avec les mains, que ma télécommande ne fonctionnait pas et que j’étais en retard sur mon <i lang="en">timing</i>. (C’était bien la peine de répéter plusieurs fois en me chronométrant, tiens.)</p>
<p>Ce dont je me souviens bien en revanche, ce sont les applaudissements et les encouragements de folie qui ont envahi la salle dès le début, en particulier quand j'ai indiqué l'adresse de <a href="https://marieguillaumet.com/design-de-soi-paris-web-2015/">la retranscription de ma conférence</a> pour la rendre plus accessible. <strong>Ça a soulevé une énergie tellement puissante que ça m’a aidée à me jeter à l’eau et à commencer à parler.</strong></p>
<p>https://twitter.com/arbastien/status/649938271653494784</p>
<p><strong>Certaines de mes slides ont bien fonctionné, d'autres moins</strong> ; j'ai eu un trou de mémoire au bout de dix minutes ; j'entendais ma voix en dehors de mon corps, comme si ce n'était pas la mienne ; et il semble que j'ai beaucoup fermé les yeux – j'ai tendance à le faire quand je suis à fond dans mon truc.</p>
<p>Niveau tenue, j'avais opté pour quelque chose de sobre, car je ne voulais pas trop détourner l'attention de l'écran. Mais j'ai quand même mis mon <a href="http://www.disturbia.co.uk/products/womens-tees/i-want-to-leave-t-shirt">t-shirt «&nbsp;<i lang="en">I want to leave</i>&nbsp;»</a>, que j'ai trouvé fort à propos. Ça, plus la veste, c'était ma façon à moi d'<strong>invoquer l'esprit de Dana Scully sur scène</strong>, un peu comme une gardienne protectrice. (Oui, je suis un peu superstitieuse par moment.)</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8288" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie.jpg" class="block-link thumb custom-thumb" title="En pleine action !"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_paris-web-marie-640x640.jpg" alt="En pleine action !" /></a><figcaption id="figcaption_attachment_8288" class="wp-caption font-2" style="width: 45.714285714286em">En pleine action ! (Photo : Laurence Vagner.)</figcaption></figure></div>
<p><strong>Le temps passe plus vite sur scène que dans la vraie vie, aussi, ma conférence s’est rapidement terminée.</strong> C'était d'ailleurs bizarre que ça se finisse aussi vite, car j'étais à l'aise sur scène et je sentais que le courant passait bien entre les personnes présentes et moi.</p>
<p>Quand j'ai fini de parler, leur réaction a été <strong class="stabilo">incroyable</strong>. Je n'en revenais vraiment pas d'être autant applaudie. J’étais hyper émue mais aussi hyper soulagée de voir que cela avait autant plu. </p>
<p>Tout au long de la préparation de cette conférence, je m'étais mis la rate au court-bouillon pour savoir si le sujet du « design de soi » était vraiment intéressant ou bien s'il n'intéressait que moi. </p>
<p>Je me demandais si mes exemples parleraient à tout le monde, si j'allais apporter quelque chose d'utile aux autres, si j'allais m'exprimer clairement, si le staff avait bien fait de sélectionner mon sujet… bref, les doutes classiques.</p>
<p><strong>Tous ces doutes ont disparu en une fraction de secondes</strong>. Ça a été une réelle délivrance.</p>
<h3>Questions</h3>
<p>Suite à ça, <strong>on m'a posé quelques questions, et y répondre du tac au tac n’était pas facile.</strong> Parmi les thèmes qui ont fait surface, je retiens&nbsp;: </p>
<ul>
<li>Réconcilier deux identités virtuelles différentes ;</li>
<li>Oser demander de l’aide ;</li>
<li>Créer du design pour soi quand on est développeur (mais rassurez-vous, ami·e·s dev, en tant que designers, on a du mal aussi !) ;</li>
<li>Le risque de tomber rapidement dans le <i lang="en">personal branling</i> quand on parle de soi trop souvent et de manière trop complaisante.</li>
</ul>
<p>À la fin, j'étais contente d'offrir un livre de Mike Monteiro à <a href="https://twitter.com/thibaultj">Thibault</a>, non seulement parce que je trouve ça cool d’offrir un livre de design à un développeur, mais aussi parce que Monteiro est quelqu’un que j’admire beaucoup.</p>
<p><a href="http://www.paris-web.fr/2012/conferences/10-new-year-s-resolutions-designers.php" title="Conférence de Mike Monteiro à Paris Web 2012">La&nbsp;conf’</a> qu’il avait donnée à Paris Web en 2012 a d'ailleurs beaucoup contribué à me faire sauter le pas à mon tour. Pour moi, le symbole était fort.</p>
<h3>La&nbsp;redescente</h3>
<div class="post-img-container clearfix alignright full"><figure role="group" id="attachment_8289" style="width: 15.714285714286em" class="post-img-figure"><span class="thumb custom-thumb"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151014_licornomaton.gif" alt="Licornomaton" /></span></figure></div>
<p>Ma conférence était terminée. <strong>Direction les coulisses</strong>, où j'ai pu me remettre de mes émotions en grignotant tranquillement quelques petits fours que <a href="https://twitter.com/le_hasard">Sara</a> avait eu la gentillesse de me mettre de côté. (Cette personne est une crème, sachez-le.)</p>
<p>Mon trouillomètre redescendait doucement. Mon visage affichait un sourire des plus niais. Je planais.</p>
<p><strong>C’était étrange de me retrouver soudain cachée derrière l’écran de l’amphi, en coulisses</strong> ; de ne plus être au centre de l’attention ; d'avoir <em>fini</em> cet énorme travail, et d’être <em>libérée</em> de cette énorme appréhension.</p>
<p>Je me suis extirpée de là le cœur léger. J’ai croisé <a href="https://twitter.com/arbastien">Alain</a>, qui m’a interviewée cinq minutes pour son site Ergoweb. Sur la vidéo, j'ai l'air complètement <span lang="en">stone</span>. L'effet des endorphines, je suppose…</p>
<p><strong>Ensuite, je suis sortie du bâtiment pour prendre l’air.</strong> J'en avais bien besoin. Il faisait tellement bon, en ce vendredi après-midi, sur le parvis du Beffroi de Montrouge&nbsp;: le soleil réchauffait le ciel pâle, les enfants jouaient et riaient, et moi je commençais doucement à décompresser. <em>Je l’avais fait&nbsp;!</em></p>
<p>Je passais un nouveau coup de fil à ma personne préférée, puis jetais un œil à mon Twitter, qui avait littéralement explosé.</p>
<p>Le soir, une fois les conférences terminées, plusieurs personnes sont venues me parler pour me dire ce qu'elles avaient pensé de ma conf’. </p>
<p>Elles m'ont dit que cela les encourageait à prendre davantage la parole sur le web, à oser publier des articles ou encore à demander de l'aide pour fignoler leur design personnel. </p>
<p><strong>Je ne sais pas pourquoi, mais je sentais qu'elles étaient toutes un peu remuées.</strong> Qu'entendre certains trucs leur avait fait du bien. </p>
<p>J'ai eu la sensation d'avoir réussi quelque chose. Mais quoi ?</p>
<h2 lang="en">Do it! Just do it!</h2>
<p><strong>Tout le boulot, le temps et l’énergie que j’ai investis dans ce projet m’ont été rendus au centuple.</strong> J'ai bien fait de le faire, de sortir de ma zone de confort et de me mettre en danger. </p>
<p><strong>Si vous-même, vous hésitez à proposer un sujet pour une conférence, je vous encourage vivement à sauter le pas.</strong> C’est une expérience unique, qui pousse à se dépasser soi-même, et qui permet surtout d’aller à la rencontre des autres. Humainement, je n’ai jamais rien vécu d’aussi fort. Jamais.</p>
<p>Donner une conférence n'a effectivement rien à voir avec le fait de publier des textes sur le web : prendre la parole en public, ça a un impact très différent, tant pour ceux qui écoutent que pour soi. On est à la fois plus vulnérable et plus fort. C'est hyper enrichissant.</p>
<p><iframe loading="lazy" src="//giphy.com/embed/wErJXg1tIgHXG" width="480" height="266" frameBorder="0" class="giphy-embed" allowFullScreen="false" title="Une image animée de l'acteur Shia Laboeuf qui essaie de vous motiver."></iframe></p>
<p><em>J'emprunte ce GIF à <a href="https://twitter.com/ergopetillant">Julien</a>, parce qu'il me fait vraiment trop rire !</em></p>
<h2>À suivre&nbsp;!</h2>
<p>Voilà, j'arrête pour aujourd'hui. <strong>Bravo</strong> si vous êtes arrivé·e au bout de ce billet sans vous endormir. Je crois que j'avais besoin de poser tout cela par écrit, simplement pour ne pas oublier.</p>
<p><strong>La&nbsp;semaine prochaine, je publierai la troisième et dernière partie de ce compte-rendu très personnel</strong>. Elle sera dédiée aux enseignements que j’ai tirés de cette expérience, et à d'ultimes réflexions paris-wébiennes. <del>(Promis, ça sera moins long qu'aujourd'hui.)</del></p>
<p>À très vite&nbsp;!&nbsp;:)</p>
<p><strong>Edit du 23/10/2015&nbsp;:</strong> j'ai publié <a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-3/">la suite de ce billet</a> !</p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/histoire-de-ma-premiere-conference-2/feed/</wfw:commentRss>
			<slash:comments>16</slash:comments>
		
		
			</item>
		<item>
		<title>Histoire de ma première conférence (1)</title>
		<link>https://marieguillaumet.com/histoire-de-ma-premiere-conference-1/</link>
					<comments>https://marieguillaumet.com/histoire-de-ma-premiere-conference-1/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Fri, 09 Oct 2015 07:46:24 +0000</pubDate>
				<category><![CDATA[36 15 Ma Life]]></category>
		<category><![CDATA[accessibilité]]></category>
		<category><![CDATA[conférences]]></category>
		<category><![CDATA[design de soi]]></category>
		<category><![CDATA[dessin]]></category>
		<category><![CDATA[histoire de ma première conférence]]></category>
		<category><![CDATA[Paris Web]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8262</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-1/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="Des dessins en pagaille pour préparer mes slides" decoding="async" loading="lazy" srcset="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-280x280@2x.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-130x130@2x.jpg 260w" sizes="auto, (max-width: 280px) 100vw, 280px" /></a><br /><br />Vendredi 2 octobre 2015, j’ai donné ma première conférence à Paris Web. Toute seule. Devant 236 personnes. Et en plus, c'était filmé et retransmis en direct sur le web. Un petit retour d’expérience s’imposait !]]></description>
										<content:encoded><![CDATA[<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8263" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web1.jpg" class="block-link thumb custom-thumb" title="Juste avant de prendre la parole…"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web1-640x476.jpg" alt="Juste avant de prendre la parole…" /></a><figcaption id="figcaption_attachment_8263" class="wp-caption font-2" style="width: 45.714285714286em">Juste avant de prendre la parole… (Photo : <a href="http://www.olivierkeul.fr/">Olivier Keul</a>)</figcaption></figure></div>
<p><strong>Vendredi 2 octobre 2015, j’ai donné ma première conférence à Paris Web.</strong></p>
<p>Toute seule.</p>
<p>Devant 236 personnes.</p>
<p>C’était non seulement filmé (la vidéo sera bientôt en ligne), mais c’était aussi retransmis en direct sur le web.</p>
<p>J’avais pas DU TOUT la pression… !&nbsp;:P</p>
<p>Je savais que ce serait une expérience de folie, mais j’étais loin de m’imaginer que ça serait aussi puissant.</p>
<p>Les retours que vous me faites depuis vendredi à propos de ma conférence et l’énergie que vous me transmettez sont absolument dingues. <strong>Merci</strong> du fond du cœur pour tout cela&nbsp;! Vous n’imaginez pas à quel point tout ça me booste et me chamboule.</p>
<p><strong>Vu l’importance de cet évènement pour moi, un petit retour d’expérience s’imposait.</strong></p>
<p>Comme j’écris toujours des tartines, je le découpe en trois parties&nbsp;: aujourd’hui je vous explique comment j’ai préparé cette conférence sur le design de soi, ensuite je vous raconterai ce qui s’est passé le jour J, et je finirai en partageant avec vous ce que tout cela m’a appris.</p>
<p><i lang="en">Let’s go pepito&nbsp;!</i></p>
<h2>L'idée</h2>
<p><strong>Trois choses m’ont donné envie de sauter le pas et de donner une conférence à Paris Web :</strong></p>
<ul>
<li>L’envie d’<strong class="stabilo">explorer</strong> un sujet qui me passionne depuis des années&nbsp;: prendre la parole à titre personnel sur le web, et créer du design pour soi-même. C'est quelque chose d’atrocement difficile, mais de nécessaire. J’ai toujours eu <a href="https://marieguillaumet.com/portfolios-pourquoi-tant-de-haine/">du mal</a> à trouver des exemples inspirants. J’avais envie de motiver les gens autour de moi à relever leurs manches et à créer quelque chose de personnel, d’utile et d’original.</li>
<li>L’envie de <strong class="stabilo">donner</strong> un peu à une communauté qui m’a tant appris&nbsp;: Paris Web, c’est l’apothéose annuelle d’un effort collectif vers plus de qualité et plus d’accessibilité sur le web. C’est grâce à cet évènement que je rencontre chaque année des personnes ébouriffantes, qui tiennent souvent des blogs d’expertise que je dévore, et avec qui j’échange quasi quotidiennement sur des problématiques métier. Mais ce qui se passe à Paris Web a une répercussion émotionnelle et intellectuelle qui va bien au-delà de ces trois jours.</li>
<li>L’envie de participer à <strong class="stabilo">diversifier</strong> davantage notre milieu&nbsp;: cela fait des années que je constate le manque de diversité parmi les orateurs prenant la parole lors d’<a href="http://geekfeminism.wikia.com/wiki/Technical_conferences">évènements techniques</a>. Proposer cette conférence a été ma façon d’arrêter de me plaindre et de passer à l’action.</li>
</ul>
<blockquote><p>Sois le changement que tu veux voir dans le monde.</p>
<footer>Gandhi</footer>
</blockquote>
<h2>La&nbsp;préparation</h2>
<h3>La&nbsp;prise de parole</h3>
<p><strong>Ma conférence à Paris Web était donc ma première conférence.</strong></p>
<p>Je n’avais pris qu’une seule fois la parole en public auparavant, pendant un atelier consacré à la macro-typographie web, que Vincent et moi avions animé à Paris Web en 2012. (J’avais d'ailleurs raconté <a href="https://marieguillaumet.com/paris-web-2012-je-lai-fait/" title="Mon expérience à Paris Web 2012">cette expérience</a>.)</p>
<p><strong>Prendre la parole en public me demande beaucoup d’efforts.</strong> Étant de nature introvertie, monter sur scène et parler pendant 45 minutes devant plein de gens me faisait sortir de ma zone de confort. J’ai eu de sacrés pics d’angoisse pendant les semaines précédant l’évènement, d'où mon utilisation fréquente de l'élégant hashtag « #cacamou » sur Twitter.</p>
<p>Mais je sentais que je <em>devais</em> le faire, que cela m’apporterait bien plus que ce que je pouvais imaginer, que cela me permettrait de toucher un public plus large mais aussi que grâce à ça, je pourrais expérimenter quelque chose de nouveau, par rapport à l’écriture.</p>
<p>N’étant pas une oratrice-née, je me suis plongée dans la lecture d’un livre génial qui fourmille de conseils et d’anecdotes amusantes&nbsp;: <strong><i lang="en">Confessions of a public speaker</i></strong>, de Scott Berkun</strong></strong>. Si le sujet vous intéresse, je vous le recommande&nbsp;!</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8264" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web3.jpg" class="block-link thumb custom-thumb" title="Un livre qui m'a aidée à préparer ma conférence"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web3-640x853.jpg" alt="Un livre qui m'a aidée à préparer ma conférence" /></a></figure></div>
<h4>Répéter, encore et encore</h4>
<p>Ce livre m’a fait comprendre que <strong>la seule façon de combattre le stress de parler en public, c’était de répéter, encore et encore,</strong> jusqu’à ce que tu connaisses ton texte par cœur et que tu n’aies plus à y penser. Le trac et le stress pouvant tétaniser, si tu connais bien ton texte, tu peux t’y raccrocher en cas de panique, et retomber facilement sur tes pieds.</p>
<p>J’ai donc répété plusieurs fois, toute seule mais aussi devant des personnes différentes, et même une fois sur le web, grâce <a href="https://appear.in/">appear.in</a>.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8268" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-magic-trio.jpg" class="block-link thumb custom-thumb" title="Répétition en ligne de ma conférence avec les copines"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-magic-trio-640x631.jpg" alt="Répétition en ligne de ma conférence avec les copines" /></a><figcaption id="figcaption_attachment_8268" class="wp-caption font-2" style="width: 45.714285714286em">Répétition en ligne de ma conférence avec Laurence et Stéphanie. =^.^=</figcaption></figure></div>
<p>Je remercie d'ailleurs <a href="https://twitter.com/hellgy">Laurence</a>, <a href="https://twitter.com/WalterStephanie">Stéphanie</a>, <a href="https://twitter.com/htmlvv">Vincent</a> et <a href="http://www.spleenarcana.com/">Julien</a>, qui ont accepté de m’entendre bafouiller et qui m’ont fait des retours hyper justes.</p>
<p><strong>Répéter plusieurs fois a bien fonctionné :</strong> bien que je rechignais toujours à le faire (c’est objectivement un peu ridicule de se tenir debout devant un·e pote et de monologuer pendant trois quarts d'heure…), j’ai fini par bien connaître mon texte. </p>
<p><strong>Cela m’a aussi aidée à simplifier certaines tournures de phrases</strong>, et à voir que certaines blagues et <i lang="en">slides</i> fonctionnaient mieux que d’autres à l'oral.</p>
<p>Déclamer le texte à voix haute m'a permis de l’améliorer mais aussi de le raccourcir.</p>
<h3>La&nbsp;retranscription et l'accessibilité</h3>
<p><strong>Outre les répétitions, ce qui m’a aidée à apprendre mon texte, ça a été de l’écrire et de le publier sur mon site.</strong></p>
<p>C’est <a href="https://twitter.com/firewalkwizme">Yann</a> qui m’a conseillée de retranscrire ma conférence pour la rendre accessible.</p>
<p>Au début, je voulais faire des slides accessibles, avec <a href="http://accesslide.net/">AccessSlide</a>, un outil conçu pour. (À noter qu’il est également possible de <a href="http://accessibility.umn.edu/keynote.html">rendre un fichier Keynote accessible</a>.)</p>
<p>Mais Yann m’a convaincue que <strong>des slides permettent difficilement de restituer tout le discours</strong>, le contenu et les messages que je voulais faire passer. D’où l’idée d'une retranscription, comme l’ont fait avant moi <a href="http://ideance.net/publications/accessibilite-erecrutement.html">Sébastien Delorme</a> et <a href="http://christianheilmann.com/2011/04/18/accessibility-and-web-innovation-a-talk/">Chris Heilmann</a> après leurs conférences.</p>
<p>J’ai décidé de <strong>publier cette retranscription <em>avant</em> ma conférence</strong>, car je savais que cela serait utile aux personnes sourdes et malentendantes présentes dans l’assistance.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8267" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web5.jpg" class="block-link thumb custom-thumb" title="J'ai donné le lien de la retranscription de ma conférence au début de ma présentation"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web5-640x480.jpg" alt="J'ai donné le lien de la retranscription de ma conférence au début de ma présentation" /></a></figure></div>
<p><strong>Je me disais que cela pourrait aussi servir aux interprètes <abbr>LSF</abbr></strong> (Langue des signes française) qui allaient devoir traduire mon galimatias : à Paris Web en effet, chaque conférence est traduite en langue des signes, et une conférence sur deux est retranscrite par vélotypie.</p>
<p>Mais il n’y avait pas de vélotypie dans l’Auditorium Blin, où j’ai parlé : un texte en support de ma présentation n’était donc pas du luxe.</p>
<p>Dans les faits, je compris plus tard grâce à <a href="https://twitter.com/SandyParis1972">Sandrine</a>, interprète <abbr>LSF</abbr>, que cela aurait été encore plus facile pour son équipe et elle de pouvoir lire ma retranscription la veille plutôt qu’au début de ma conférence, car elles auraient eu le temps de mieux se préparer. Je le saurai pour la prochaine fois !</p>
<p><strong>Enfin, je me disais que cet effort de retranscription serait également utile à tous ceux qui ne seraient pas sur place</strong>, ne pourraient pas ou ne voudraient pas suivre la vidéo en direct. Cela permettrait aussi à ma conférence d’être archivée, référencée et consultée facilement.</p>
<h3>Flip flap le <i lang="en">streaming</i></h3>
<p>Et là il s’est passé un truc de dingue.</p>
<p>Au début de ma conférence, qui était retransmise en direct sur <a href="http://www.paris-web.fr/">le site de Paris Web</a>, <strong>le <i lang="en">streaming</i> est tombé pendant dix bonnes minutes</strong>, faisant louper le début de ma conf’ à ceux qui la regardaient.</p>
<p>Comme j’avais tweeté <a href="https://marieguillaumet.com/design-de-soi-paris-web-2015/">le lien de ma retranscription</a> juste avant de monter sur scène, tout le monde s'est rabattu sur ce texte, passant outre cette défaillance technique passagère.</p>
<p><strong class="stabilo">Pour moi, c’est la meilleure illustration possible de l’utilité de l’accessibilité&nbsp;: une précaution prise en amont pour aider spécifiquement les personnes en situation de handicap va servir, en fait, à tout le monde.</strong></p>
<p>À la fin de ma conférence, au moment des questions et réponses, <a href="https://twitter.com/eaboaf_">Emmanuelle</a> a osé prendre la parole pour me remercier d’avoir partagé l’URL de ma retranscription en début de conférence. Elle m’a dit que cela l’avait aidée à suivre plus facilement mon propos, et que cela l’avait même faite se sentir «&nbsp;normale&nbsp;» pour la première fois.</p>
<p>https://twitter.com/eaboaf_/status/649939243003977728</p>
<p>Cela m’a fait monter les larmes aux yeux. <strong>Pour la première fois de ma vie peut-être, j’ai eu le sentiment d’avoir fait quelque chose de véritablement <em>utile</em>.</strong> </p>
<p>Ça a été une grosse claque, un moment que je n'oublierai jamais.</p>
<p><strong>Comme quoi, parfois ce sont les choses les plus simples qui peuvent avoir l'impact le plus grand.</strong> Pas besoin de taper dans des choses très compliquées pour faciliter la vie des autres.</p>
<p>Depuis que je l’ai publiée, cette retranscription a été très lue et très partagée. Je ne me doutais pas du tout que cela aurait un tel impact. Je me disais que mon sujet était périphérique, qu’il s’agissait d’un sujet de niche qui n’intéresserait qu’un petit groupe de gens. Force est de constater que je me plantais… Il ne faut jamais se fier à ce que nous dicte notre propre syndrôme de l'imposteur.&nbsp;;-)</p>
<h3>Les <i lang="en">slides</i></h3>
<p>Puisque la conférence consistait à encourager chaque personne qui m’écoutait (ou me lisait) à valoriser sa personnalité et son expérience sur le web, je me suis dit que <strong>concevoir des <i lang="en">slides</i> graphiquement inhabituelles</strong> ajouterait plus de poids à mon propos.</p>
<p>Je suis donc repartie de ma charte web, mais en la simplifiant à mort, ne conservant plus que mon écriture manuscrite et un beige clair.</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8257" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/09/design-de-soi.jpg" class="block-link thumb custom-thumb" title="Design de soi"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/09/design-de-soi-640x480.jpg" alt="Design de soi" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8271" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-legitimes.jpg" class="block-link thumb custom-thumb" title="Vous êtes légitimes"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-legitimes-640x481.jpg" alt="Vous êtes légitimes" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8269" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-personal-branling.jpg" class="block-link thumb custom-thumb" title="Personal branling ^.^"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-personal-branling-640x480.jpg" alt="Personal branling ^.^" /></a></figure></div>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8270" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-points-forts.jpg" class="block-link thumb custom-thumb" title="Design de mes slides"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web-points-forts-640x480.jpg" alt="Design de mes slides" /></a></figure></div>
<p><strong>Je peux vous dire que j’en ai scannés, des dessins !</strong> </p>
<p>Parfois, alors que je me levais tôt le matin pour griffonner, scanner et vectoriser, l’idée de créer ma propre typo m’a légèrement effleuré l’esprit. Un jour, il faudra vraiment que je m’y mette… (Le hasard veut que je sois tombée sur <a href="https://www.kickstarter.com/projects/franzhoffman/fontself-make-your-own-fonts-in-photoshop-and-illu">ce Kickstarter</a> en y réfléchissant.)</p>
<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8265" style="width: 47.142857142857em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4.jpg" class="block-link thumb custom-thumb" title="Des dessins en pagaille pour préparer mes slides"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/10/20151002_paris-web4-640x480.jpg" alt="Des dessins en pagaille pour préparer mes slides" /></a></figure></div>
<p>En attendant, pour m'assurer que mes pattes de mouche restaient tout de même lisibles, <strong>j’ai demandé leur avis à plusieurs personnes</strong> – sorte de « test utilisateurs » si on veut.</p>
<p>Grâce à leurs retours, j’ai pu corriger ce qui n’allait pas, tricher un peu par rapport aux dessins originels et remanier un peu, à la plume dans Illustrator, les caractères qui posaient des problèmes de compréhension.</p>
<p>J’ai aussi trié sur le volet les illustrations et les exemples que j’allais montrer. Prévoir quelques slides amusantes est un bon moyen de rythmer une présentation – mais <strong>il faut s’assurer que ça fait bien rire tout le monde</strong>, chose facile à vérifier en répétant devant des personnes aux sensibilités et aux profils différents.</p>
<h2>À suivre !</h2>
<p>Voilà, j’arrive à la fin de cette première partie. Je publierai la deuxième d'ici quelques jours.</p>
<p>D'ici là, passez un super week-end ! ^.^\m/</p>
<p><strong>Edit du 15/10/2015&nbsp;:</strong> j'ai publié <a href="https://marieguillaumet.com/histoire-de-ma-premiere-conference-2/">la suite de ce billet</a> !</p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/histoire-de-ma-premiere-conference-1/feed/</wfw:commentRss>
			<slash:comments>22</slash:comments>
		
		
			</item>
		<item>
		<title>Les mots qui fâchent (2)&#160;: intégrateur web vs. développeur front-end</title>
		<link>https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/</link>
					<comments>https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Tue, 21 Jul 2015 22:54:32 +0000</pubDate>
				<category><![CDATA[Cogitations]]></category>
		<category><![CDATA[développement front-end]]></category>
		<category><![CDATA[intégration web]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[les mots qui fâchent]]></category>
		<category><![CDATA[métier]]></category>
		<category><![CDATA[métiers du web]]></category>
		<category><![CDATA[web]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8132</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="Licornes" decoding="async" loading="lazy" srcset="https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-280x280@2x.jpg 560w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns-130x130@2x.jpg 260w" sizes="auto, (max-width: 280px) 100vw, 280px" /></a><br /><br />Deuxième partie de ma série « Les mots qui fâchent » : intéressons-nous aujourd'hui au combat terrible que se livrent les titres « intégrateur web » et « développeur front-end » !]]></description>
										<content:encoded><![CDATA[<p><em>Ce billet est la suite du billet <a href="https://marieguillaumet.com/les-mots-qui-fachent-1-la-linguistique-des-metiers-du-web/">Les mots qui fâchent (1) : la linguistique des métiers du web</a>.</em></p>
<div class="post-img-container clearfix aligncenter full"><figure role="group" id="attachment_8133" style="width: 44.285714285714em" class="post-img-figure"><a href="https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns.jpg" class="block-link thumb custom-thumb" title="Licornes"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/07/20150712_unicorns.jpg" alt="Licornes" /></a><figcaption id="figcaption_attachment_8133" class="wp-caption font-2" style="width: 42.857142857143em">Extrait du traité latin <i lang="la">Historiæ Naturalis de Quadrupedibus</i>, de Joannes Jonstonus. (Via <a href="http://bibliodyssey.blogspot.fr/2006/04/unicorns-and-other-wild-beasts.html">BibliOdyssey</a>.)</figcaption></figure></div>
<p><strong>Traditionnellement, la production web se divise en deux grandes branches : le design d’une part, et le développement de l’autre.</strong></p>
<p><strong>À la fin des années 90, une voie du milieu a fait son apparition : l’intégration.</strong></p>
<p>Au début, on ne parlait pas d’intégrateur ni d’intégration, d’ailleurs, mais plutôt de « monteur HTML » ou de « webmaster ». Puis on a commencé à parler d’« intégrateur HTML », voyant qu’émanait un poste à part entière, qui ne relevait plus de la contribution mais bien des techniques de mise en page.</p>
<p>En effet, devant le constat que ces mutants ne maniaient pas seulement le HTML au quotidien, mais également CSS et JavaScript, qu’ils acquéraient des compétences en accessibilité, en performance web et en référencement, et que leur position privilégiée, à mi-chemin du design et du développement, leur donnait un rôle de plus en plus stratégique, le titre d'« intégrateur web » était une sorte de syncrétisme lexical pour souligner leur polyvalence. Intégrer plusieurs choses ensemble au sein d'un tout plus grand.</p>
<p>Les spécifications de HTML5 et de CSS3, l’adoption massive du web design « responsive » et l'émergence des <i lang="en">web apps</i> a encore <strong>multiplié les compétences nécessaires pour effectuer le métier d’intégrateur web</strong>, et on a pu observer depuis quelques années le début d’une spécialisation au sein même de ce nouveau métier.</p>
<h2>Au moins trois spécialisations</h2>
<p><strong>L'intégration web est le domaine par excellence du mouton à cinq pattes.</strong></p>
<p>Pour un intitulé de poste similaire, on peut constater <strong>de grands écarts</strong> entre les attributions de chaque poste d'inté, d'une entreprise à une autre.<sup class='footnote'><a href='https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/#fn-8132-1' id='fnref-8132-1' onclick='return fdfootnote_show(8132)'>1</a></sup></p>
<p>La&nbsp;polyvalence est au cœur du métier d’intégrateur&nbsp;: c’est précisément là où le bât blesse. Qui dit poste polyvalent dit parfois « poste fourre-tout », « poste généraliste ». Or, le métier d’intégrateur recoupe des expertises et des spécialisations précises.</p>
<p><strong>Peut-être est-ce la méconnaissance de celles-ci qui explique la confusion généralisée autour de ce métier</strong>, confusion qui a elle-même contribué à la bataille linguistique dont il souffre depuis quelques années ?</p>
<p>Je ne vais pas redéfinir le métier d’intégrateur web maintenant, car il y a déjà une littérature abondante sur le sujet, notamment chez Les Intégristes (<a href="http://www.lesintegristes.net/2008/03/02/la-vie-des-integrateurs-chapitre-i-les-integrateurs-sont-ils-des-developpeurs-ou-des-webdesigner/">ici</a> ou <a href="http://www.lesintegristes.net/?s=int%C3%A9grateur">là</a> par exemple).</p>
<p>Je citerai quand même <a href="http://www.lesintegristes.net/2012/10/22/developpeur-dintegration-interfacante-et-animee-le-wtf/#comment-82731">Olivier</a> :</p>
<p><q>Derrière [le] titre [d'intégrateur web] on peut trouver de tout et n’importe quoi&nbsp;: un ninja JS, un monteur d’email, un intégriste de l’accessibilité, un graphiste refoulé, un mec qui se demande ce qu’il fout là etc. (…) un intégrateur ne peut pas être un gourou dans chaque domaine. Alors il se cherche, s’oriente vers ce qui lui parle le plus et monte en compétence pour se spécialiser sur un domaine.</q></p>
<p>Le terme « intégrateur » peut ainsi recouvrir des profils très variés.</p>
<p><strong>Aujourd’hui, je  distingue trois courants principaux</strong>, qui ont pourtant des attributions communes – notamment le rôle de conseil, le devoir de veille et l’optimisation des performances, bien que celles-ci prennent des proportions variables d’un poste et d’un profil à l’autre – :</p>
<ul>
<li>« <strong class="stabilo">l'intégration-maquettage</strong> »,</li>
<li>« <strong class="stabilo">l'intégration-développement</strong> »,</li>
<li>et « <strong class="stabilo">l'intégration-design</strong> ».</li>
</ul>
<p>Je m'explique :</p>
<ul>
<li><strong>« <b class="stabilo">L'intégration-maquettage</b> » voit les intégrateurs créer des maquettes web entièrement statiques à l’aide de HTML, CSS et JavaScript.</strong> Ils ne sont pas responsables de la dynamisation des données au sein des interfaces qu'ils produisent, parce qu’ils ne maîtrisent généralement pas de langage de programmation&nbsp;: cette tâche revient aux développeurs (<i lang="en">back-end</i>, <i lang="en">front-end</i> ou <i lang="en">full stack</i>). Le soin que les « intégrateurs-maquettistes » apportent à la sémantique, à l’accessibilité, à l’ergonomie, au raffinement graphique et à l’efficacité du code en fait des spécialistes essentiels à la qualité d’un projet web. L’intégrateur-maquettiste fournit un travail à la croisée de plusieurs domaines au sein d’un même projet. Mais il possède en général une ou deux spécialités qui empêchent de le considérer comme un profil généraliste.</li>
<li><strong>« <b class="stabilo">L'intégration-développement</b> », aussi appelé « développement <i lang="en">front-end</i> », se situe au carrefour de l'intégration-maquettage et de l'ingéniérie (développement, <i lang="en">build</i>, optimisation).</strong> Actuellement, ce profil est souvent compris comme relevant <em>uniquement</em> de l’expertise JavaScript. Or, cela recouvre avant tout une production à l'aide d'un ou de plusieurs langages de programmation. Capables d’un niveau de complexité supplémentaire en terme d’interfaçage dynamique, les développeurs <i lang="en">front-end</i> sont des intégrateurs-développeurs au solide bagage technique. Ce bagage peut les amener à intervenir en production, soit pour effectuer les <i lang="en">releases</i> ou pour intervenir niveau serveur, à la façon d’un administrateur système que les plus petites agences ne possèdent pas encore. Les développeurs <i lang="en">front-end</i> sont souvent :
<ul>
<li><strong>d’anciens intégrateurs</strong> qui ont décidé d’apprendre un langage de programmation (JavaScript ou autre), ou bien de se spécialiser en développement de thèmes ;</li>
<li><strong>des développeurs polyvalents</strong> ayant toujours eu le cul entre le <i lang="en">front</i> et le <i lang="en">back</i>, que l’on pourrait appeler « développeurs <i lang="en">full stack</i> » (même si certains questionnent aujourd’hui <a href="http://www.developpez.com/actu/78962/Existe-t-il-encore-des-developpeurs-Full-Stack-Pour-un-senior-la-pile-de-technologies-utilisees-dans-des-projets-est-devenue-importante/">la pertinence de cette appellation</a> – décidément !)&nbsp;;</li>
<li>mais également <strong>des développeurs 100% <i lang="en">back</i> repentis</strong>, qui, grâce à leur goût pour le JavaScript (encore lui !), pensent savoir faire du <i lang="en">front</i>, même si, dans les faits, on s’aperçoit qu’ils ont pas mal de lacunes en matière de HTML, de CSS, de qualité et d’accessibilité. J'y reviendrai dans un instant.</li>
</ul>
</li>
<li><strong>Enfin, « <b class="stabilo">l'intégration-design</b> » (<i lang="en">front-end design</i>) : les « intégrateurs-designers » sont des professionnels autant à l’aise en intégration qu’en design.</strong> Ils sont capables de créer des maquettes graphiques et de les intégrer (a minima, de façon statique, mais certain savent les dynamiser à l'aide d'un CMS). Ces intégrateurs-là sont souvent amenés à décliner une charte graphique web pour créer de nouvelles pages, des interactions manquantes ou bien pour rendre un site responsive. Ils peuvent aussi concevoir des interfaces directement dans le navigateur, grâce à un prototypage applicatif. Enfin, ils sont aussi parfois capable de créer une charte web « <i lang="en">from scratch</i> » pour de petits projets web, de produire des <i lang="en">wireframes</i> et maquettes graphiques adéquats et de justifier leurs choix devant le client. Cette spécialisation-là de l'intégration recoupe design, ergonomie et intégration-maquettage. Elle sera l'objet de mon prochain billet.</li>
</ul>
<p><strong>Ces trois courants ne sont pas exclusifs ni étanches, voyez-les simplement comme de grandes tendances.</strong></p>
<p>Un intégrateur n'est pas forcément que intégrateur-maquettiste, que intégrateur-développeur, ou que intégrateur-designer.</p>
<p>Dans les faits, il existe sans doute des intégrateurs qui savent à la fois produire de la charte graphique et utiliser React, d'autres qui sont au taquet sur l'accessibilité tout en intégrant directement des maquettes graphiques dans un CMS, et ainsi de suite. </p>
<h2>Intégrateur ou développeur&nbsp;?</h2>
<p><strong>Il est intéressant de noter qu’avec le temps et la prédominance de l’anglais dans le vocabulaire technique du web, le mot « intégrateur » a commencé à soulever des résistances.</strong></p>
<p>Certains l'ont même abandonné à tout jamais, prétextant parfois que c’est <a href="https://twitter.com/victorbritopro/status/467247343075860480">une spécificité française</a> qui n'a pas de raison d'être, au profit du terme « développeur <i lang="en">front-end</i> », hérité de l’anglais « <i lang="en">front-end web developer</i> », par opposition au terme « <i lang="en">back-end web developer</i> ».</p>
<p>Or, « développeur <i lang="en">front-end</i> » n'est pas juste la nouvelle expression à la mode pour dire « intégrateur web » : <strong>le développeur <i lang="en">front-end</i> est un profil très technique</strong>, un expert de la dynamisation de l’interface côté client ou « guichet ». Ce n’est pas la même chose qu'un intégrateur.</p>
<p>Dans <a href="http://www.stpo.fr/blog/je-ne-suis-pas-developpeur/">son billet</a>, STPo esquisse quelques-uns des <strong>contours du développeur <i lang="en">front-end</i></strong> : MVC, tests unitaires, tests d'intégration, <i lang="en">single page applications</i>, Backbone, Ember, Angular, React, Underscore, NodeJS, <span lang="en">Local Storage</span>, <span lang="en">Web Sockets</span>, <span lang="en">App Cache</span>… </p>
<p>Parmi un échantillon d’offres d’emploi récentes, on trouve aussi Haml, Slim, Jade, Gulp, Grunt, Maven, Jenkins, Vagrant, SonarQube, ou encore MongoDB comme prérequis.</p>
<p>Un intégrateur ne maîtrise pas tout ça. Il n’a pas <i lang="en">besoin</i> de maîtriser tout ça.</p>
<p>Sans doute qu’un intégrateur-développeur féru de programmation maîtrise quelques-uns de ces outils et de ces langages ; mais je doute que quiconque les maîtrise tous.<sup class='footnote'><a href='https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/#fn-8132-2' id='fnref-8132-2' onclick='return fdfootnote_show(8132)'>2</a></sup></p>
<p><strong>Notons au passage que les offres d’emploi pour les profils d’intégrateurs et de développeurs <i lang="en">front-end</i> se multiplient comme des Gremlins et deviennent de plus en plus délirantes au fil des mois</strong> : ce poste est devenu stratégique, il est donc très demandé, toutefois ses contours continuent à rester assez flous/fous, ainsi que les offres publiées. Comparez les offres d’emploi pour des postes d’intégrateur/développeurs <i lang="en">front-end</i> entre cinq entreprises différentes pour vous en convaincre.</p>
<p>Quoi qu’il en soit, un développeur <i lang="en">front-end</i> maîtrise au moins un langage de programmation sur le bout des doigts (il est véritablement développeur). Les technologies et outils cités plus haut permettent de distinguer, dans les grandes lignes, un intégrateur-développeur (développeur <i lang="en">front-end</i>) d’un intégrateur-maquettiste ou d’un intégrateur-designer (designer <i lang="en">front-end</i>).</p>
<h2>Le dieu JavaScript</h2>
<p><strong>Profitons-en pour dégommer un mythe tenace&nbsp;: non, un intégrateur n’est pas systématiquement une brute en JavaScript.</strong></p>
<p>Une connaissance basique de JavaScript est certes nécessaire pour exercer le métier d’intégrateur – il est concrètement impossible de s’en passer au quotidien, d’ailleurs même les nouveaux outils comme Grunt ou Bower l’utilisent –, mais nous sommes loin d’en être tous des experts.</p>
<p>Un intégrateur a, a minima, quelques bases en JS, et utilise souvent jQuery au quotidien, ce qui tombe plutôt bien car on lui en demande rarement plus.<sup class='footnote'><a href='https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/#fn-8132-3' id='fnref-8132-3' onclick='return fdfootnote_show(8132)'>3</a></sup></p>
<p><strong class="stabilo">Dans tous les cas, il est erroné de réduire la diversité des profils d’intégrateurs au seul développement JavaScript.</strong></p>
<p>C'est pourquoi l'expression « développeur <i lang="en">front-end</i> » décrit bien uniquement les « intégrateurs-développeurs », et non pas <em>l’intégralité</em> des intégrateurs web.</p>
<p>Par ailleurs, il est important de souligner que les intégrateurs web ont la sensation que <strong>le soin accordé aux standards, à la qualité et à l'accessibilité s'estompe progressivement au profit de JavaScript</strong>, nouveau dieu tout puissant, régnant en maître sur les interfaces web contemporaines (AngularJS, Ember, Backbone, etc).</p>
<p>Là où un développeur ne cillera pas forcément devant une interface vide si JavaScript est désactivé et que le code est exempt d’ARIA, l'intégrateur, lui, pleurera des larmes de sang, recroquevillé en position fœtale.</p>
<p><strong>Se dessine ici une querelle entre généralistes et spécialistes</strong> : les développeurs <i lang="en">front-end</i> spécialisés en JavaScript sont vus comme les nouveaux messies, capables de produire des interfaces web qui ressemblent à des applis, dont l’aspect ludique et la dépendance à des librairies et à des <i lang="en">frameworks</i> flambant neufs vendent du rêve, là où les <a href="http://thebfed.com/">intégrateurs « ennuyeux »</a>, ardents défenseurs des standards et de l’accessibilité, rabâchent (souvent en vain) un discours en faveur de l’utilité, de la qualité et de la pérennité de ce qu’ils produisent, qu'ils considèrent comme plus importants que le dernier <i lang="en">buzz word</i> à la mode.</p>
<p>Tempérons un peu&nbsp;: certaines agences et certains développeurs <i lang="en">front-end</i> savent produire des interfaces <i lang="en">full JS</i> accessibles, oui ; mais elles restent très minoritaires. Pas besoin de vous rappeler le faible degré de considération accordé à l’accessibilité, n’est-ce pas ?</p>
<p>Au quotidien, nul besoin d'ailleurs de taper dans le <abbr title="JavaScript">JS</abbr> intégral pour déceler <strong>le retard pris en matière d'accessibilité web</strong>, non seulement dans la formation des jeunes intégrateurs et développeurs, mais également chez les techniciens du web au sens large : alors qu’il est désormais possible de rendre accessible la plus coriace des interfaces développée intégralement en JavaScript, il suffit de voir le nombre de clics interceptés sur des éléments <a href="http://babylon-design.com/sus-au-a-href/"><code>&lt;a href="#"&gt;</code></a>, ou, pire, sur des <code>span</code> ou des <code>div</code> pour se convaincre qu’on a encore du pain sur la planche.</p>
<h2>1 + 1 = 3</h2>
<p><strong>L'un dans l'autre, j'ai parfois l'impression que seul JavaScript compte désormais.</strong> HTML et CSS peuvent bien aller se rhabiller, les apôtres du développement <i lang="en">front-end</i> nous assènent assez que ce ne sont pas de « vraies technos » de toute façon<sup class='footnote'><a href='https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/#fn-8132-4' id='fnref-8132-4' onclick='return fdfootnote_show(8132)'>4</a></sup> (comprendre&nbsp;: ce ne sont pas des langages de programmation). Tout cela contribue aux querelles de clocher qui sont, hélas, vieilles comme le web, et qui ne font pas franchement avancer le schmilblick.</p>
<p><strong>Si j’étais cynique moi aussi, je dirais que le terme de « développeur <i lang="en">front-end</i> » est une aubaine pour certains développeurs <i lang="en">back</i> en mal de <i lang="en">front</i></strong>, mais aussi pour certains « fronteux » qui ne jurent que par JavaScript, mais pour qui <code>position: relative</code> reste un mystère : cela leur permet de s’improviser « supers intégrateurs ».</p>
<p><q>L'inté c'est facile ! Nous aussi, on sait faire du responsive (avec tel plugin JS) ; nous aussi, on sait faire du <i lang="en">front</i> (avec HTML5 Boilerplate et Bootstrap). Comment ça, si j’ai pensé au <i lang="en">no JS</i> ? On s’en fiche que la page ne s’affiche pas sans JavaScript, personne n’utilise le web sans JavaScript. L’accessibilité ? Pfff, on s’en fiche aussi, les aveugles n’utiliseront pas ce site web, ils ne sont pas dans la cible. Au fait, dis-moi, il peut y avoir autre chose que des <code>td</code> dans un tableau&nbsp;? Et comment tu <code>clear</code> un <code>float</code> déjà&nbsp;?</q></p>
<p>Voilà l’impression que l’on a parfois, en tant qu'intégrateurs : que la maîtrise de JavaScript, qui est certes une compétence très utile et très recherchée, serve d'excuse à une moindre maîtrise des langages HTML et CSS, et à un moindre respect de la qualité, inhérents au métier d'intégrateur. </p>
<p><strong>Le fait de réduire le <i lang="en">front</i> au seul JavaScript est une erreur</strong>&nbsp;: or, puisque JavaScript est un langage de programmation, un développeur le maîtrisant peut penser qu’effectivement, lui aussi sait faire du <i lang="en">front</i>, puisque le <i lang="en">full JS</i> est à la mode.</p>
<p>Du reste, il n'est peut-être pas possible d'exiger d'un développeur <i lang="en">front-end</i> qu'il connaisse aussi bien la sémantique HTML, les subtilités de CSS, les critères d'accessibilité et l’intégration d’emails responsive qu'un intégrateur, de la même façon qu'il n'est peut-être pas possible d'exiger d'un intégrateur qu'il rêve en JavaScript natif, qu'il connaisse l'histoire d'ECMAScript sur le bout des doigts ou qu'il maîtrise plusieurs langages de programmation.</p>
<p><strong>Raison de plus pour reconnaître la valeur intrinsèque de chaque profil</strong>, et pour voir les expertises des uns et des autres comme complémentaires. Pour l'avoir déjà expérimenté, je peux vous dire qu'un couple intégrateur + développeur <i lang="en">front-end</i> bien synchronisé, ça peut produire quelque chose de vraiment excellent&nbsp;!</p>
<p>1 + 1 = 3.</p>
<h2>À tort et à travers</h2>
<p><strong>Malgré tout ça, l'emploi – erroné – de l’expression « développeur <i lang="en">front-end</i> » pour remplacer le titre « intégrateur web » s’est répandu comme une traînée de poudre.</strong></p>
<p>À tel point que les deux termes sont aujourd'hui confondus et employés l'un pour l'autre, ce qui fait croître encore la difficulté qu'on a toujours eue de définir les métiers techniques du <i lang="en">front</i>.</p>
<p>Comment expliquer cet intervertissement ?</p>
<ul>
<li>Il peut s'agir de <strong>raisons commerciales</strong> : un profil de développeur permet de facturer davantage au client qu’un profil d’intégrateur. Le profil d’intégrateur est généralement vendu moins cher qu’un profil de développeur, et, en toute logique, le salaire de développeur est en général bien supérieur à celui d’un intégrateur. On comprend mieux soudain pourquoi d’anciens intégrateurs remplacent le titre honni par celui de « développeur » sur leur CV&nbsp;!</li>
<li>Il peut aussi s'agir d’un <strong>manque de connaissance</strong> des différences entre les divers profils d’experts du web côté <i lang="en">front</i>. C'est le cas en particulier dans les boîtes construites historiquement sur le développement <i lang="en">back</i>, et auquel un pôle <i lang="en">front</i> s'est greffé au fil des années. Le pôle <i lang="en">front</i> est souvent plus petit que le pôle <i lang="en">back</i>, ce qui contribue symboliquement à le minorer et à le considérer naturellement comme étant moins important.</li>
</ul>
<p>Quoi qu'il en soit, le terme « développeur <i lang="en">front-end</i> » est utilisé à tort et à travers. <strong>C'est en partie pour cela que je le rejette quand il s'agit de nommer mon métier.</strong></p>
<h2>Ouf, la conclusion !</h2>
<p><strong>L’intégrateur n’est pas forcément un développeur <i lang="en">front-end</i>, et le développeur <i lang="en">front-end</i> n'est pas forcément un intégrateur.</strong> Les deux titres ne sont pas synonymes, il s’agit bien de deux profils différents.</p>
<p>Puisque ces deux titres sont loin de faire l’unanimité, ils ne sont peut-être tout simplement pas les bons : préparons-nous d’ores et déjà à les voir évoluer encore.</p>
<p><strong class="stabilo">En attendant, remplacer le terme « intégrateur web » par celui de « développeur <i lang="en">front-end</i> » est une erreur</strong> : cela dévalue non seulement l’intégration-maquettage et l’intégration-design, mais également l'intégration-développement (alias développement <i lang="en">front-end</i>).</p>
<p>Peut-être que vous-même, vous faites de l'intégration et du développement. Dans ce cas, pas de doute, le terme « développeur <i lang="en">front-end</i> » est sans doute plus à propos que celui d'« intégrateur », perçu (à raison ?) comme trop réducteur par rapport à l’étendue des compétences requises aujourd’hui par ce nouveau métier.</p>
<p><strong>Mais dites-vous bien que tous les intégrateurs ne font pas forcément du développement comme vous</strong> : certains intégrateurs font uniquement de l'intégration-maquettage statique, tandis que d'autres font, en plus, du design. </p>
<p>Pour autant, leur travail a-t-il moins de valeur que le vôtre ?</p>
<p>Dans ce cas, quel intérêt de décrire ces intégrateurs-là comme « développeurs <i lang="en">front-end</i> » ? </p>
<p>Aucun.</p>
<p>C'est pourquoi je défends vivement l'utilisation du titre « intégrateur web », quitte à nager à contre-courant : on a encore besoin de lui, en attendant de trouver mieux.</p>
<p><strong>Qu’un nouveau vocable émerge avec l’apparition d’un nouveau métier est naturel. Cela doit-il pour autant justifier l’annihilation des vocables afférents ?</strong></p>
<p>Par exemple, notons que le métier de « webmaster » existe toujours, même si on l’a longtemps confondu avec le métier d’intégrateur, la confusion allant même jusqu’à entraîner l’utilisation d’un mot pour l’autre. Pourtant, il s’agit bien de deux métiers distincts.</p>
<p><strong>On constate une fois de plus l’importance des mots, vecteurs de sens. À nous de les utiliser à bon escient.</strong></p>
<p>Quant au profil d’« intégrateur-designer »/« designer-intégrateur »/designer <i lang="en">front-end</i>, qui est le mien, j'en parlerai dans mon prochain billet, pour conclure cette réflexion linguistico-tartinesque sur <a href="https://marieguillaumet.com/tag/les-mots-qui-fachent/">les mots qui fâchent</a>.</p>
<p>Courage, c’est bientôt fini !&nbsp;;-)</p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/feed/</wfw:commentRss>
			<slash:comments>29</slash:comments>
		
		
			</item>
		<item>
		<title>Les mots qui fâchent (1)&#160;: la linguistique des métiers du web</title>
		<link>https://marieguillaumet.com/les-mots-qui-fachent-1-la-linguistique-des-metiers-du-web/</link>
					<comments>https://marieguillaumet.com/les-mots-qui-fachent-1-la-linguistique-des-metiers-du-web/#comments</comments>
		
		<dc:creator><![CDATA[Marie]]></dc:creator>
		<pubDate>Wed, 15 Jul 2015 04:00:21 +0000</pubDate>
				<category><![CDATA[Cogitations]]></category>
		<category><![CDATA[designer front-end]]></category>
		<category><![CDATA[intégration web]]></category>
		<category><![CDATA[les mots qui fâchent]]></category>
		<category><![CDATA[métier]]></category>
		<category><![CDATA[métiers du web]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web design]]></category>
		<guid isPermaLink="false">https://marieguillaumet.com/?p=8129</guid>

					<description><![CDATA[<a href="https://marieguillaumet.com/les-mots-qui-fachent-1-la-linguistique-des-metiers-du-web/"><img width="280" height="280" src="https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-280x280.jpg" class="attachment-medium size-medium wp-post-image" alt="Licorne, 1658" decoding="async" loading="lazy" srcset="https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-280x280.jpg 280w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-160x160.jpg 160w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-110x110.jpg 110w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-130x130.jpg 130w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-160x160@2x.jpg 320w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-110x110@2x.jpg 220w, https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-130x130@2x.jpg 260w" sizes="auto, (max-width: 280px) 100vw, 280px" /></a><br /><br />Il y a quelques mois, j'ai commencé à réfléchir à l’importance des mots dont nous nous servons tous les jours pour qualifier notre travail et, donc, pour gagner notre vie. Voici la première partie de cette réflexion.]]></description>
										<content:encoded><![CDATA[<div class="post-img-container clearfix aligncenter large"><figure role="group" id="attachment_8131" style="width: 47.142857142857em" class="post-img-figure"><a href="http://digital.lib.uh.edu/collection/p15195coll18/item/33" class="block-link thumb custom-thumb" title="Licorne, 1658"><img decoding="async" src="https://marieguillaumet.com/wp-content/uploads/2015/07/20150704_unicorn-640x496.jpg" alt="Licorne, 1658" /></a><figcaption id="figcaption_attachment_8131" class="wp-caption font-2" style="width: 45.714285714286em"><span lang="en">Unicorn. 1658. Special Collections, University of Houston Libraries. University of Houston Digital Library. Web. July 11, 2015.</span> <a href="http://digital.lib.uh.edu/collection/p15195coll18/item/33">http://digital.lib.uh.edu/collection/p15195coll18/item/33</a></figcaption></figure></div>
<p><strong>La&nbsp;linguistique, la sémiologie et l’anthropologie sont les trois disciplines que j’ai préférées pendant mes études.</strong> Elles m’ont offert des clés pour déchiffrer le sens caché des choses… et des mots.</p>
<p>Les mots sont puissants&nbsp;: ils disent, signifient, sous-entendent, expliquent, démontrent, soignent, apaisent, excitent, inspirent.</p>
<p>Mais les mots peuvent aussi contredire, contre-argumenter, embrouiller, contrarier, ulcérer, dénoncer, blesser, accuser, condamner, voire tuer («&nbsp;Qu’on lui coupe la tête&nbsp;!&nbsp;», dit la Reine de Cœur dans <em>Alice aux pays des merveilles</em>).</p>
<p>Les mots constituent un protocole faillible, parce qu’ils n’ont pas tous le même sens ni la même valeur à nos yeux. C’est le cas notamment lorsque de nouveaux mots font irruption dans le langage courant&nbsp;: il nous faut un certain temps avant de les apprivoiser puis de les domestiquer.</p>
<p>Autour de moi, j’ai constaté que les mots utilisés pour qualifier les métiers du web sont loin de faire l’unanimité&nbsp;: <strong>le nom et la définition de tel ou tel métier varie d’une définition, d’un individu, d’un groupe, d’une entreprise et d’un pays à l’autre</strong>.</p>
<p>Vous aurez du mal à trouver deux personnes qui définiront ce qu’est un intégrateur web de la même façon, par exemple. Et que dire encore de la valeur que chacun accorde à tel ou tel métier ? Pour certains, être intégrateur est <a href="http://openweb.eu.org/articles/integrateur-au-developpeur-front-end-un-maillon-essentiel-qualite-web">une fierté</a>. Pour d’autre, c’est <a href="https://twitter.com/_kud/status/563078510584299520?lang=fr">un poste inutile</a>. On est bien loin d'un consensus.</p>
<p>Pourtant, il faut bien qu’on réussisse à se définir. Alors, on fait comment ?</p>
<blockquote><p>Entre<br />
Ce que je pense<br />
Ce que je veux dire<br />
Ce que je dis<br />
Ce que vous avez envie d'entendre<br />
Ce que vous croyez entendre<br />
Ce que vous entendez<br />
Ce que vous avez envie de comprendre<br />
Ce que vous croyez comprendre<br />
Ce que vous comprenez<br />
Il y a dix possibilités pour qu’on ait des difficultés à communiquer.<br />
Mais essayons quand même…</p>
<footer>Bernard Werber, <em>L’Encyclopédie du savoir relatif et absolu</em></footer>
</blockquote>
<h2>Faire évoluer notre langage commun</h2>
<h3>Éthnocentrisme</h3>
<p>Lorsque nous avons proposé, <a href="http://vincent-valentin.name/">Vincent</a> et moi, <a href="https://etherpad.mozilla.org/8BSoEI8h0k">l'ébauche d'une fiche de poste « designer front-end »</a> en février dernier, cela a soulevé de très nombreuses réactions, des plus bienveillantes aux plus outrées – certains allant même jusqu’à <a href="https://etherpad.mozilla.org/ep/pad/view/8BSoEI8h0k/FOQucGACgL">nous insulter</a>.</p>
<p>Six mois plus tard, j’ai eu le temps faire décanter tout ça. Je voudrais partager avec vous le fruit de mon analyse, et vous inviter à réfléchir avec moi à l’importance des mots dont nous nous servons tous les jours pour qualifier notre travail.</p>
<p>Nos titres et autres dénominations n’ont sans doute pas beaucoup d’importance entre nous, car nous, nous savons que nous sommes tous <a href="http://www.lesintegristes.net/2010/10/19/paris-web-2010-nous-sommes-tous-des-mutants/">des moutons à cinq pattes</a>. Je conçois qu’entre nous, le besoin d’apposer un sceau en cire qui dit « développeuse web », « directeur artistique » ou « intégratrice » sur le visage de nos consœurs et confrères du web semble un peu artificiel. </p>
<p>Le web francophone est un petit milieu : on finit vite par se connaître les uns les autres, ne serait-ce que de réputation ; on connaît, dans les grandes lignes, leur spécialité. Bref, <strong>on arrive à se situer, sinon par nous-mêmes, du moins par rapport aux autres</strong>.</p>
<p>Dans ces conditions, pourquoi diable relancer l’éternel débat des dénominations ? <strong>Ne sommes-nous pas tous « concepteurs web » ?</strong></p>
<p>La&nbsp;plupart des personnes avec qui j’ai essayé de discuter linguistique du web m’ont ri au nez, ajoutant que « Pfff, on s’en branle des étiquettes ! ». Mais personne ne m'a fourni d'argument solide justifiant pourquoi, au juste, on devait précisément « s’en branler » (sic). </p>
<p>Pourquoi des mots que nous utilisons au quotidien, et dont nous bardons notre CV, notre blog, notre portfolio, nos cartes de visite et notre profil LinkedIn, ne pourraient-ils pas être sujets d’étude&nbsp;? </p>
<p>Par ailleurs, pourquoi ces mots-là ne pourraient-ils pas évoluer&nbsp;?</p>
<p>Enfin, pourquoi nous pourrions-nous pas adopter <em>de nouveaux mots</em> pour qualifier ce que nous faisons aujourd’hui ?</p>
<p>Du reste, il ne s’agit pas d’« étiquettes », mais bien d’un moyen objectif et non péjoratif de définir nos compétences.</p>
<p><strong>Après avoir gratté un peu, je me suis rendu compte que questionner ces mots-là, c’est questionner notre rôle social.</strong> C’est questionner notre travail, notre hiérarchie, nos compétences et, bien sûr, nos revenus. La&nbsp;question est donc loin d’être anodine.</p>
<h3>Pragmatisme</h3>
<p><strong>Nous avons besoin de nommer et de catégoriser les choses pour mieux les appréhender.</strong> En ergonomie, <a href="http://fr.wikipedia.org/wiki/Psychologie_de_la_forme#Les_principales_lois_de_la_Gestalt">la théorie de la Gestalt</a> stipule que réunir des éléments présentant des ressemblances permet à l’utilisateur de mieux comprendre l’ensemble.</p>
<p>Il en va de même pour les métiers du web.</p>
<p>À l’instar de la myriade de technologies et d’outils employés pour bâtir le web, qui ont chacun un nom bien précis, <strong>nous avons besoin de mots pour qualifier nos métiers</strong>, et les distinguer les uns des autres.</p>
<p>Car, même si nous sommes mus par des valeurs communes (<a href="http://www.graphikophil.com/le-design-en-2015-ce-desespoir-1-web-over/">et encore…</a>), nous ne faisons pas tous le même métier.</p>
<p>Se comprendre entre nous est une chose, mais nous devons aussi trouver un langage commun pour faire comprendre nos métiers à toutes les personnes aux métiers périphériques aux nôtres : collègues, managers, recruteurs, chargés et directeurs des ressources humaines notamment.</p>
<p>Adopter une terminologie collective est important car cela a en effet <strong>un impact direct sur les barêmes et grilles de salaires</strong>, sur les échelons et sur les négociations auxquels chaque titre donne droit, mais aussi sur notre reconnaissance sociale. (Si vous n’êtes pas convaincu·e, jetez donc un œil aux écarts de salaires entre un intégrateur et un développeur : vous verrez que le poids des mots et la valeur qui y est rattachée sont réels.)</p>
<h2>Allergie anti-étiquette, branlette et paillettes</h2>
<p>Nous disposons certes déjà d’un langage commun ; mais celui-ci a besoin d’évoluer. En proposant d’adopter le terme de «&nbsp;designer front-end&nbsp;» pour qualifier un profil professionnel devenu courant – une personne aussi compétente en conception graphique pour le web qu’en intégration –, nous nous sommes pourtant heurtés à une sacrée levée de boucliers.</p>
<p><strong>En effet, il semble que toute évolution de la terminologie des métiers du web se heurte instantanément aux allergies anti-étiquettes, anti-conditionnement et anti-silos.</strong></p>
<p>On peut en effet penser que l'être humain est si riche qu’un seul mot ne peut réussir à le décrire tout entier.</p>
<p>On peut aussi reconnaître que toute démarche de définition et de classification se heurte aux éléments à la marge&nbsp;: que faire de ceux qui rentrent dans plusieurs cases ? Que faire de ceux qui n’entrent dans aucune d'entre elles ?</p>
<p>Enfin, on peut aussi penser que nos métiers requièrent désormais tant de polyvalence qu’aucun mot ne réussira jamais à rendre compte de l’ampleur de notre activité.</p>
<p>C’est peut-être vrai. </p>
<p>En attendant, ces arguments ont été surtout scandés par ceux qui, parmi nous, se considèrent au-dessus d’un débat qui, puisqu’il n’est pas le leur, relève forcément de l’idiotie branlatoire, témoignant ainsi de la si haute opinion qu’ils ont d’eux-mêmes et de leur statut, autrement plus important que le nôtre, simples mortels.</p>
<p>Quoi qu’il en soit, en proposant une réflexion sur le titre de « designer front-end », notre objectif n’était pas du tout de «&nbsp;convertir&nbsp;» qui que ce soit à l’adoption de ce nouveau vocable, mais, d’une part, de poursuivre la réflexion amorcée par <a href="http://bradfrost.com/blog/post/development-is-design/">Brad Frost</a> et relancée par <a href="http://www.stpo.fr/blog/je-ne-suis-pas-developpeur/">STPo</a>, et, d’autre part, de voir comment on pouvait transposer ce nouveau profil à nos conditions de travail actuelles.</p>
<h3 lang="en">Do what thou wilt shall be the whole of the Law</h3>
<p><strong>Aussi, rassurez-vous : vous êtes absolument libre de vous définir et de vous décrire comme bon vous semble.</strong></p>
<p>Vous avez le droit de vous appeler <a href="https://twitter.com/varouschka">designer graphique</a>, <a href="https://twitter.com/cyberbaloo_">intégratrice web</a>, <a href="https://twitter.com/priscillamok" lang="en">UX designer</a>, <a href="https://twitter.com/audreyleroy_">obsédée visuelle</a>, <a href="https://twitter.com/stepheUp" lang="en">technical angel</a>, <a href="https://twitter.com/pomeh">web ninja</a>, <a href="https://twitter.com/ma2t">développeur web guichet et arrière-guichet</a>, <a href="https://twitter.com/idsquare">concepteur-développeur</a>, <a href="https://twitter.com/KanorUbu">félin pythonneux</a>, <a href="https://twitter.com/ABCDE_line" lang="en">creative front-end developer</a>, <a href="https://twitter.com/Palomalice">styliste des Internets</a>, <a href="https://twitter.com/JulienMoya">DA jaune, pourpre, parabolique et vice et versa</a>, <a href="https://twitter.com/goulvench">intégraphiste</a>, <a href="https://twitter.com/aurelievache">développeuse full-stack Java/JEE</a>, <a href="https://twitter.com/bruitsilencieux">mangeuse de kiwi</a>, <a href="https://twitter.com/mariagroenlund" lang="en">design jedi</a>, <a href="https://twitter.com/nrosenberg">Lady Gaga du web</a>, <a href="https://twitter.com/pierreburel">intégrâleur</a>, <a href="https://twitter.com/Elektro121">magicien vaudou des ordinateurs</a>, <a href="https://twitter.com/WalterStephanie">web &amp; UI designer</a>, <a href="https://twitter.com/jessicadourcy">chef de projet digital</a>, <a href="https://twitter.com/whinzou" lang="en">growth hacker</a>, <a href="https://twitter.com/Lauth0">ergonome</a>, <a href="https://twitter.com/hellgy">ministre des licornes</a>, <a href="https://twitter.com/CarineReignault">lead développeuse et responsable TMA</a>, <a href="https://twitter.com/HellLovesMe">graphiste et webdesigner</a>, <a href="https://twitter.com/goetter">intégrateur du dimanche</a>, <a href="https://twitter.com/desbenoit">architecte d'information</a>, <a href="https://twitter.com/FranBoissel">développeuse web en surchauffe</a>, <a href="https://twitter.com/ibxl">prostipapéticien de l'IT</a>, <a href="https://twitter.com/mcpaccard">designer ès web</a>, <a href="https://twitter.com/agnodice_k">exploratrice webmatique</a>, web alchimiste et même boucher-charcutier si ça vous chante.</p>
<p><strong>Vous avez aussi le droit de ne pas vous définir et de décrire simplement ce que vous savez faire sans choisir de titre précis.</strong></p>
<p>Et vous avez aussi le droit de faire ce que vous voulez sans attendre que quiconque vous donne la permission.</p>
<p>Ouf&nbsp;!…</p>
<p>(Par contre, ne faites pas comme <a href="https://medium.com/@antoniopratas/i-m-not-a-ux-designer-ac73110179f1">António Pratas</a> : ne dites pas aux autres ce qu'ils sont ou ne sont pas. C'est extrêmement malpoli.)</p>
<h2>Dire, c’est faire</h2>
<p>Concrètement, c’est quand on se lance à la recherche d’un nouvel emploi, ou quand on veut évoluer professionnellement au sens large qu'on se pose la question de sa propre dénomination : <strong class="stabilo"><em>Comment dois-je me définir ?</em> <em>Comment dois-je valoriser mes compétences ?</em></strong></p>
<p>Il peut arriver que le titre que vous avez acquis il y a cinq ans ne corresponde plus, ni à ce que vous faites aujourd’hui, ni à ce vers quoi vous avez envie d’évoluer. <strong>Il vous faut donc énoncer clairement ce que vous recherchez professionnellement</strong>, pour réussir à obtenir votre poste idéal.</p>
<p>Le mot est ici envisagé comme <em>proactif</em>&nbsp;: il devance l’acte.</p>
<p>Si vous avez la chance d’avoir un bon réseau, vous pourrez sans doute vous épargner l’épreuve de devoir rentrer dans une case pour répondre à telle ou telle offre d’emploi, et obtiendrez plus facilement un poste taillé sur mesure, dont vous pourrez choisir vous-même l’intitulé et rédiger les attributions. Tant mieux pour vous, profitez-en&nbsp;!</p>
<p>Pour les autres, le besoin de définir son activité, actuelle et souhaitée, est bien réel.</p>
<p>Si nous ne savons pas nous définir nous-mêmes, il nous sera difficile de faire comprendre aux autres ce que nous faisons et, <em lang="la">in fine</em>, d’obtenir effectivement le poste qui nous correspond.</p>
<p>Notre dénomination professionnelle permet de distinguer, de qualifier et de valoriser nos expertises. </p>
<h3>Un rôle précis dans une équipe précise</h3>
<p>D'autant plus qu'à moins de travailler seul·e dans son coin et de prendre en charge l'intégralité d'un projet web (mayday, mayday&nbsp;!), <strong>nous sommes la plupart du temps accompagnés d'autres professionnels dont les compétences complètent les nôtres</strong>.</p>
<p>Que nous le voulions ou non, nous avons bel et bien un rôle dans une chaîne de production web, dans une équipe, et dans une entreprise. Ce rôle a un nom&nbsp;: ce n'est peut-être pas celui qui vous plaît, mais c'est comme ça que vos interlocuteurs vous situent par rapport à leur propre travail et par rapport au contexte projet.</p>
<p>C’est pourquoi je ris dans ma barbe quand notre proposition d’adopter un nouveau vocable, qui répond de plus à un besoin réel, se voit taxer de «&nbsp;hiérarchisation des individus&nbsp;»&nbsp;: en entreprise, dans une équipe, vous et moi sommes déjà hiérarchisés, quel que soit le titre que nous portons&nbsp;!</p>
<p>D’aucuns rejettent formellement toute nouvelle division sémantique des métiers du web, estimant qu'il y a actuellement suffisamment de mots pour cela. D’autres vont même jusqu’à rejeter certains mots existants, par exemple celui d'«&nbsp;intégrateur&nbsp;» (encore lui&nbsp;!)&nbsp;: selon eux, ce mot «&nbsp;ne veut rien dire&nbsp;» et serait de toute façon «&nbsp;obsolète&nbsp;», notamment parce qu'il n'existe qu’en français.</p>
<p>À côté de ça, certains affichent une préférence spontanée pour tel ou tel vocable à la mode&nbsp;: en ce moment, c'est «&nbsp;développeur front-end&nbsp;» et «&nbsp;UX designer&nbsp;». Mais la mode semble être à l’adoption du terme ô combien plus vague de «&nbsp;concepteur web&nbsp;».</p>
<p>Un mot à ce sujet&nbsp;: on ne peut pas, d’un côté, revendiquer un titre aussi vague que «&nbsp;concepteur web&nbsp;», qui sert de fourre-tout à des compétences très diverses, et, de l’autre, s’étonner de lire des offres d’emploi également fourre-tout, qui attendent de nous de connaître à la fois HTML, CSS, JavaScript, PHP, Flash, C++, le SEO, le <em lang="en">community management</em>, le fonctionnement de la photocopieuse et la recette du <em lang="it">latte macchiato</em>.</p>
<p>Moins la façon dont vous nommez votre métier sera précise, plus on vous proposera n'importe quoi. Remarque, cela peut très bien être une stratégie&nbsp;: brouiller les pistes pour ne fermer aucune porte, par exemple. Mais je persiste à penser que la quantité ne va pas de paire avec la qualité&nbsp;!</p>
<h3>En avant la musique</h3>
<p>Je ferai ici un parallèle avec un domaine que j’affectionne particulièrement : la musique.</p>
<p><strong>Dans l’absolu, si nous étions des musiciens, nous pourrions tous nous définir et nous vendre comme «&nbsp;musiciens&nbsp;», même si untel joue de la batterie, unetelle de la basse, et que moi je chante.</strong></p>
<p>Quand nous cherchons un nouvel emploi, à moins de tomber sur l'orchestre idéal qui nous permet de définir nous-mêmes notre rôle, nous sommes contraints de répondre à des offres déjà intitulées : joueur de cornemuse, harpiste, guitariste, homme orchestre…</p>
<p>Rien ne nous empêche de répondre à une offre d’emploi pour un poste de xylophoniste en disant qu’on est « musicien », mais ce qui va intéresser le chef d'orchestre, c’est de savoir si on maîtrise effectivement le xylophone.</p>
<p>À côté de notre CV de « musicien », le chef d'orchestre aura reçu des candidatures de xylophonistes seniors, de <i lang="en">lead</i> xylophonistes, de xylophonistes apprentis, de xylophonistes-joueurs de cornemuse, et ainsi de suite.</p>
<p>Est-ce que le terme seul de « musicien » nous discrédite ? Non, pas forcément. </p>
<p>Toutefois, en choisissant de vous décrire comme «&nbsp;musicien&nbsp;» plutôt que «&nbsp;xylophoniste&nbsp;», vous avez déjà fait un choix&nbsp;: vous avez certes élargi la case dans laquelle vous voulez rentrer, mais vous avez empêché autrui de comprendre exactement quelle est votre spécialité. </p>
<p>Outre le titre sous lequel vous allez vendre vos compétences, vont également entrer en ligne de compte&nbsp;:</p>
<ul>
<li>votre expérience ;</li>
<li>votre réputation, bâtie sur ce qu'on peut trouver sur vous sur le web, sur le bouche à oreille mais aussi sur d'éventuelles recommandations ;</li>
<li>l'entretien, fondamental ;</li>
<li>un éventuel test.</li>
</ul>
<p><strong>Ainsi, le titre que vous aurez choisi n'est jamais seul dans la balance. Mais il constitue une bonne entrée en matière, un prétexte facile pour vous contacter et vous proposer quelque chose, alors autant le soigner&nbsp;!</strong></p>
<p class="aligncenter">***</p>
<p>NB : ce billet constitue l'introduction à deux autres billets que je publierai bientôt, concernant des <a href="https://marieguillaumet.com/tag/les-mots-qui-fachent/">mots qui fâchent</a> : intégrateur web, développeur front-end et designer front-end. J'ai hâte de lire vos réactions&nbsp;:)</p>
<p><ins><strong>Edit&nbsp;:</strong> <a href="https://marieguillaumet.com/les-mots-qui-fachent-2-integrateur-web-vs-developpeur-front-end/">la suite</a> de ce billet a été publiée.</ins></p>
]]></content:encoded>
					
					<wfw:commentRss>https://marieguillaumet.com/les-mots-qui-fachent-1-la-linguistique-des-metiers-du-web/feed/</wfw:commentRss>
			<slash:comments>21</slash:comments>
		
		
			</item>
	</channel>
</rss>
