Apprendre le HTML et CSS pour créer son propre site web

Ca y est, j’ai (enfin) fini les cours pour apprendre le HTML et CSS.

Je l’avoue, j’ai galéré.

J’ai dévoré les cours le plus vite possible, mais sans vraiment assimiler les contenus. Alors je me suis lancée un défi :  j’ai décidé de réécrire tout le parcours de formation, histoire de voir si j’étais capable de mettre de l’ordre dans tout ce bordel (le bordel qui est dans ma tête, hein, pas par rapport aux cours).

Cet article est le concentré de TOUT ce que j’ai pu apprendre ces 2 derniers mois sur HTML et CSS à partir de la formation OpenClassRoom. A vrai dire, c’est l’article le plus ambitieux, le plus long et le plus documenté que j’ai jamais écrit.

Bien sûr, cela ne pourra jamais remplacer un cours que vous pourriez suivre vous-même sur OpenClassRoom. D’autant que je ne suis pas experte, vous l’aurez compris. Si vous voulez apprendre à coder, je vous conseille de suivre leur cours HTML / CSS : c’est gratuit, bien fichu et vous le trouverez ici. Par contre, ça vous prendra des semaines (sans rire).

 

BONUS !

Cet article est ambitieux mais j’ai vraiment envie qu’il vous soit utile. Si vous apprenez à coder, si vous êtes impatient de créer votre propre site web, téléchargez l’intégralité de l’article en format PDF ! Vous pourrez le lire tranquillement, y revenir quand vous voulez et picorer ici et là des infos utiles !

Je télécharge l’article !   

 

 

CHAPITRE 1 : SE LANCER DANS LE HTML

 

1. Quelques mots sur le fonctionnement de HTML et CSS

 

HTML et CSS, c’est quoi ?

HTML et CSS sont des langages de programmation utilisés pour créer des sites internet. Ces deux langages font partie des fondamentaux du web, et c’est en général par ces langages que commencent les apprentis développeurs.

HTML constitue la structure du site, c’est le squelette. C’est également dans le fichier HTML que l’on inscrit le contenu du site, le texte, les liens, les photos.

CSS, c’est l’outil essentiel pour donner du style au site web. Ce n’est pas une coquetterie : un site sans CSS manque cruellement d’ergonomie ! Et puis c’est très, très moche. Regarde :

avec ou sans css
Un exemple de site avec ou sans CSS – Blog de Garance Doré

 

Comment fonctionne HTML ?

Le langage HTML fonctionne avec deux éléments :

  • Les balises
  • Les attributs

Ca, c’est une balise : <strong> </strong>. Entre les deux balises, on insère du contenu. Une balise s’ouvre et se ferme, comme ça :

<title> Ce qui est écrit ici sera considéré comme un titre.</title>

Les attributs sont placés à l’intérieur des balises et permettent d’inclure des informations utiles, mais qui ne seront pas visibles sur la page.

Par exemple, quand on insère une image, on lui donne un nom (src) et même un attribut (alt) qui sera lu par les robots, c’est bon pour le référencement.

<image src=’images/chaton.jpg’ alt=’chaton mignon’/>  

 

HTML possède une structure qu’on peut voir à l’oeil nu

Une partie du travail en HTML consiste à découper notre site web en différentes parties (des blocs, des sections, des menus, des paragraphes de texte, etc.), en fonction du design que l’on souhaite réaliser.

Les différentes parties en HTML doivent être visibles à l’œil nu dans l’éditeur de texte, grâce au processus d’identation. Ca fait partie des bonnes pratiques des développeurs pour permettre de mieux comprendre ce qui est écrit.

Plus on détaille, plus on part vers la droite, comme ça :

Apprendre le HTML. Le code HTML est indenté : plus on entre dans le détail, plus on décale les lignes de code vers la droite
Le code HTML est indenté : plus on entre dans le détail, plus on décale les lignes de code vers la droite

 

Et CSS, ça fonctionne comment ?

CSS est un autre langage de programmation ; son fonctionnement est un peu différent de HTML.

Tout d’abord, il est recommandé de créer un fichier à part pour écrire le CSS. On pourrait inclure des éléments de mise en page dans le HTML, mais cela risque d’ajouter de la complexité. Ce fichier CSS sera lié au HTML par une simple ligne de code (un lien) qu’on verra par la suite.

Le fichier CSS est en quelque sorte une longue liste de commandes. Pour que ça fonctionne, il faut commencer par sélectionner les parties que l’on veut mettre en forme, puis écrire la manière dont l’élément sera affiché dans le navigateur.

Par exemple, quand on écrit…

body {
color: blue;
}

… on demande à ce que tout le texte soit mis en bleu.  

 

Class et Id, les attributs essentiels pour identifier différents éléments

La première étape pour mettre en forme notre page avec CSS, c’est de bien sélectionner les éléments que l’on veut styliser.

  • Par exemple, si l’on veut que tout notre texte soit écrit en bleu, c’est simple : il suffit d’appliquer le CSS à la balise <body>, qui est une balise très générique.
  • Par contre, quand on veut appliquer une ombre à une image en particulier parmi toutes les images que l’on a utilisées pour notre page web, il va falloir être plus précis.

 

C’est là qu’on va apprendre à utiliser deux attributs bien pratiques, qui vont nous permettre de mettre des noms sur certains éléments, et ainsi mieux les identifier par la suite.

C’est le même principe que lorsqu’on met des étiquettes sur des Tupperware: on essaye de mettre de l’ordre parmi des boites qui se ressemblent, pour ne pas confondre le sucre et les pâtes.

 

Pour cela, on peut utiliser deux attributs :

  • L’attribut class (qu’on écrira .introduction en CSS)
  • Ou l’attribut id (qu’on écrira #introduction en CSS)

L’erreur du débutant (je suis passée par là), c’est de les confondre. L’attribut id est unique, il ne peut pas y en avoir deux. Au contraire, on peut utiliser l’attribut class plusieurs fois.

<p id=’introduction’> Bonjour et bienvenue sur mon site !</p>  

 

2. Les premiers réglages pour se lancer

 

2 outils indispensables (et gratuits) à télécharger

L’équipement de l’apprenti développeur est assez basique : on aura simplement besoin d’un logiciel pour écrire les lignes de code. On appelle ça un éditeur de code : moi j’utilise Sublim Text 2 (gratuit et compatible sur Mac et PC) mais vous pouvez en choisir d’autres.

Il est aussi recommandé de télécharger Chrome, qui est le navigateur créé par Google. Ce navigateur a une particularité, c’est qu’il nous permet de regarder à l’intérieur du code pour toutes les pages qu’on trouve sur le web !

Et pour les curieux, un éditeur de texte ressemble à ça :

Voici à quoi ressemble un éditeur de texte
Voici à quoi ressemble un éditeur de texte

 

Chrome est nécessaire pour afficher le site (et jouer les espions)

Le mieux c’est d’essayer.

Connectez-vous à un site : Facebook, Wikipédia, peu importe… En un clic droit, vous avez accès à la fonction « Procéder à l’inspection de l’élément ». Tadam !

Dans la fenêtre qui apparaît, vous verrez s’afficher le code HTML (à gauche) et CSS (à droite). En cliquant sur la loupe, vous pourrez inspecter certains éléments plus précisément. Ca n’a l’air de rien mais en fait c’est incroyable.

Sky is the limit, comme disent les ricains ! Vous pourrez essayer de comprendre comment a été développé tel partie d’un site, vous serez capable de connaître le nom de cette police démente ou de cette couleur canon, et vous pourrez même … pomper entièrement un bout de code !  

Aperçu de l'inspecteur de code sur Chrome
Aperçu de l’inspecteur de code : on peut regarder ce qui se cache derrière les sites qu’on utilise tous les jours, par exemple Instagram

 

Comment utiliser Sublim Text pour la première fois

  1. Créez un dossier sur votre bureau (par exemple, le nommer ‘cv’)
  2. Ouvrez le logiciel Sublim Text
  3. Allez dans ‘File’, puis ‘Open’ et sélectionnez le dossier que vous venez de créer
  4. Toujours dans Sublim Text, cliquez sur ‘File’, puis ‘Open New File’
  5. Un onglet vient d’apparaitre. Cliquez sur ‘File’, puis ‘Save’ (ou bien faites Ctrl+S)
  6. Nommez ce fichier, par exemple index.html
  7. Et voilààà !

 

Attention : il ne faut pas d’espace, pas de majuscule, pas de caractères spéciaux dans les noms de fichiers, sinon ça risque de créer des bugs.

Il reste encore quelques réglages, on va les faire dès maintenant :

  1. On va créer notre fichier CSS. Cliquez dans ‘File’, puis ‘Open New File’
  2. Sauvegardez immédiatement le fichier, en cliquant sur ‘File’, puis ‘Save’, et nommez le style.css
  3. Retournez maintenant dans le dossier que vous avez créé sur votre bureau et créez un dossier pour les images (à nommer ‘images’)

 

Petit conseil : organisez bien votre dossier. Quand vous serez en train de créer votre site web, vous allez accumuler les pages HTML, les images, les polices, etc. Soyez rigoureux !  

Structurez avec soin le dossier de votre page web, sinon ça va finir en gros bordel !
Soyez rigoureux dans l’organisation du dossier !

 

3. Créez le squelette de votre page HTML

 

Les lignes de code HTML essentielles pour commencer à créer sa page web

 

On va d’abord écrire quelques lignes de code, en quelque sorte pour préparer le terrain.

  • D’un coté, la balise <head> qui contient les informations importantes pour afficher la page
  • Et de l’autre, la balise <body> dans laquelle on va mettre le contenu de notre site

 

On en profite pour rajouter dans le <head> des éléments qui nous serviront par la suite :

  • Une balise <title> (c’est le nom qui va s’afficher dans l’onglet de la page)
  • Une balise <meta charset> qui permet d’afficher correctement les caractères spéciaux (accents, etc.)
  • Et le lien vers le fichier CSS, afin que le travail qu’on fait en CSS s’applique à notre page

 

<!DOCTYPE html>
<html>

<head>

<title>Donnez ici un titre à votre page</title>
<meta charset=’UTF-8′>
<link rel=’stylesheet’ href=’style.css’/>  

</head>  

<body>
</body>

</html>  

 

Créer le squelette de sa page web

Maintenant, on va pouvoir créer la structure à l’intérieur de la partie <body>. C’est une sorte de squelette qui va nous aider à mettre en forme notre page web.

Ces balises servent à identifier les différents éléments, à les caractériser : c’est utile pour que les robots qui scannent le web comprennent l’organisation de la page (plus la page est compréhensible par les robots, mieux elle est prise en compte pour le référencement).

Ca ne changera pas encore la tête de notre page web, pour la simple raison qu’on n’a pas encore touché au CSS, mais c’est justement pour s’y préparer qu’on fait ça.

<body>

<div id=’blocpage’>

<header>
</header>
<nav>
</nav>
<article>
</article>
<aside>
</aside>
<footer>
</footer>

</div>

</body>  

 

Heeein ?? Une petite explication s’impose.

  • Header : c’est l’en-tête. En général, on y trouve le nom du site, une bannière ou un logo.
  • Nav : c’est le menu de navigation, en général situé en haut de la page.
  • Section : c’est une portion logique de la page.
  • Article : c’est une portion de texte à l’intérieur de la section.
  • Aside : c’est une manière d’obtenir des informations complémentaires sur le texte. Grosso modo, c’est la sidebar qu’on trouve sur les sites et blogs.
  • Footer : c’est le pied de page. Souvent on y trouve des liens vers les réseaux sociaux, les mentions légales, éventuellement on y replace le menu…

Ca ressemble à ça :

structurer sa page web avec les balises html

Pour rappel, ce qu’on est en train de faire, c’est identifier les différentes parties. C’est une opération cruciale MAIS ça ne changera pas l’apparence de la page web tant qu’on n’aura pas touché au CSS.

De plus, l’organisation des éléments n’est qu’un exemple, rien n’oblige à construire sa page comme ceci.

Petite précision : Apparemment ces balises ne sont pas forcément supportées par tous les navigateurs, notamment Internet Explorer. Pour résoudre ça, il suffit d’insérer ces lignes de code dans la partie head :

<!–[if lt IE 9]>

<script src= »http://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js »></script> <![endif]–>  

 

Utiliser les balises <div> et <span> en prévision du CSS

Quand on veut créer différentes parties dans sa page web, on peut aussi utiliser à des balises universelles, à savoir <div> et <span> :

  • <div> sert à englober un bloc de texte
  • <span> fonctionne à l’intérieur du bloc de texte

On peut intégrer des attributs id et class à l’intérieur, ce qui sera très utile pour le CSS.

Le prof sur Open Class Room pense qu’il faut les utiliser aussi peu que possible. Contrairement aux balises titre, section, aside, etc., les balises div et span ne sont pas chargées de sens. Les robots penseront que ces balises n’ont rien de spécial, et ce n’est pas très bon pour le référencement. 

Mais en pratique, elles sont quand même bien utiles et les développeurs y ont souvent recours.  

 

Structurer sa page web en utilisant le système des blocs

J’étais encore un peu floue sur ces notions de structure de page, jusqu’à ce que je relise ce passage sur le site d’OpenClassRoom. Je vous laisse le découvrir de vous-même (rendons à César ce qui est à César, n’est-ce pas…) :

Une page web peut être vue comme une succession et un empilement de boîtes, qu’on appelle « blocs ». La plupart des éléments vus au chapitre précédent sont des blocs : <header>, <article>, <nav>… Mais nous connaissions déjà d’autres blocs : les paragraphes <p>, les titres <h1>…  

Dans ce chapitre, nous allons apprendre à manipuler ces blocs comme de véritables boîtes. Nous allons leur donner des dimensions, les agencer en jouant sur leurs marges, mais aussi apprendre à gérer leur contenu… pour éviter que le texte ne dépasse de ces blocs !  

Faire la différence entre les balises block et inline

Maintenant que l’on s’attaque au positionnement des différentes parties de notre site, il faut savoir qu’il existe deux types de balises en HTML, et que ces balises ont un agencement différent par nature. Il existe deux sortes de balises HTML :

  • Les balises de type block, par exemple les paragraphes <p>, les titres, etc. Un bloc peut s’imbriquer dans un autre. Par exemple, les balises <article> ou <aside> sont insérés dans des balises <section>.
  • Les balises de type inline, par exemple les liens <a>

Les balises bloc prennent automatiquement toute la largeur de la page et s’empilent les unes sur les autres ; c’est comme si la page web était constituée d’un empilement de briques.

Les balises inline se trouvent à l’intérieur de blocs et sont insérées dans le texte. Elles peuvent se suivre les unes à côté des autres.

 

coder en html : Les balises <bloc> s'empilent les unes sur les autres, tandis que les balises <inline> sont insérées dans le texte
Les balises s’empilent les unes sur les autres, tandis que les balises sont insérées dans le texte

 

Modifier la taille des blocs

Les blocs ont une dimension précise, ce qui veut dire qu’on peut déterminer :

  • leur hauteur (height)
  • leur largeur (width)

La taille peut être indiquée en pixels (px) ou bien en pourcentage (%). Par défaut, un bloc occupe toute la place de l’écran (100%, en fait).

La hauteur et la largeur se déterminent dans le fichier CSS : p { width: 50%; }  

Taille maximale et minimale

Là encore, place aux explications du prof d’OpenClassRoom, c’est plus clair quand c’est lui qui explique :

On peut demander à ce qu’un bloc ait des dimensions minimales et maximales. C’est très pratique car cela nous permet de définir des dimensions « limites » pour que notre site s’adapte aux différentes résolutions d’écran de nos visiteurs :

  • min-width : largeur minimale
  • min-height : hauteur minimale
  • max-width : largeur maximale
  • max-height : hauteur maximale

Par exemple, dans le fichier CSS, on peut demander à ce que les paragraphes occupent 50% de la largeur et exiger qu’il fassent au moins 400 pixels de large dans tous les cas :

{

width: 50%;
min-width: 400px;

}  

 

Rajouter des marges

Les marges intérieures s’appellent padding (entre le texte et la bordure) et les marges extérieures qui s’appellent margin (entre la bordure et les éléments tout autour). En général, on l’exprime en pixels (px).

apprendre le langage html : Faire la différence entre marge intérieure (padding) et marge extérieure (marging)
Faire la différence entre marge intérieure (padding) et marge extérieure (marging)

  Dans le fichier CSS, on écrit :

p {

width: 350px;
padding: 12px;
margin: 50px;
margin-top: 10px;

}

 

Quand on définit une marge, elle s’applique sur tout le bloc. Si l’on veut être plus précis, il suffit de préciser s’il l’on parle de la marge du haut, du bas, etc :

  • top : en haut
  • bottom : en bas
  • right : à droite
  • left : à gauche

A partir du moment où l’on a défini une largeur, on peut centrer automatiquement les blocs en écrivant : margin: auto;

Quand le bloc est petit et qu’il y a trop de texte, le texte dépasse du bloc, à moins qu’on rajoute :

  • overflow: hidden; (on cache le texte qui dépasse)
  • overflow: auto; (il rajoute automatiquement des barres de défilement)
  • word-wrap: break-word; (pour forcer le texte à aller à la ligne)

 

Positionner les blocs en utilisant le inline-block

On vient d’apprendre que les paragraphes de texte, les titres, les menus, etc. sont des balises de type bloc. Or les blocs ne se positionnent que d’un manière possible : ils s’empilent.

C’est pour cela que l’on va apprendre une nouvelle technique pour forcer les blocs à s’afficher côte à côte. Par exemple, c’est comme ça qu’on peut faire pour afficher dans le header une bannière avec le logo du site (<header>) et le menu (<nav>).

La clé, c’est d’utiliser la propriété display. C’est une sorte de baguette magique capable de transformer un élément en quelque chose qu’il n’est pas.

En quoi va t’on transformer nos blocs ? En balise de type inline-block, qui réunissent en quelque sorte le meilleur des deux monde : les éléments peuvent s’afficher les uns à côté des autres (comme des inline), mais on peut aussi modifier leur taille (comme des block).

Par exemple, pour afficher le header à côté du menu de navigation, on écrit dans le fichier CSS :

nav {

display: inline-block;

width: 150px;

}

header {

display: inline-block;

}  

 

Par défaut, les inline-block se positionnent en bas, donc il suffit de rajouter une propriété pour décider où placer les éléments :

  • top : en haut
  • middle : au milieu
  • bottom : en bas

Ce qui donne :

nav {

display: inline-block;

width: 150px;

vertical-align: top;

}

header {

display: inline-block;

vertical-align: top;

}  

Le positionnement fixe

Le positionnement fixe est différent du positionnement inline-block ; d’ailleurs je crois qu’ils ne sont pas compatibles.

Quand on fait défiler la page, l’élément ne bouge pas. C’est notamment utilisé pour les menus de navigation.  

nav {

width: 150px;

position: fixed;

top: 0px;

left: 0px;

}      

 

Bravo, vous venez de finir le premier chapitre ! Vous savez maintenant comment créer le squelette de votre page web et structurer les différents éléments du site. 

Maintenant, ça va devenir plus facile. On va apprendre les fonctionnalités de bases en HTML, comment insérer du texte, des liens, des images, etc. Et dans un deuxième temps, on apprendra des choses encore plus intéressantes, comme le fait de créer des menus, des tableaux, etc.

Envie de faire une pause ? Télécharge l’article en format PDF pour y revenir plus tard !

Je télécharge l’article !

 

 

CHAPITRE 2 : APPRENDRE LE HTML, FONCTIONS BASIQUES & AVANCEES

 

1. Les fonctions de base en HTML

 

Ajouter du texte

Rien de bien méchant dans cette partie, seulement quelques fonctions de base à connaître pour insérer du texte :

  • Ecrire un paragraphe de texte : <p> on écrit le texte entre les deux balises </p>
  • Faire un saut à la ligne : <br/>
  • Pour dire qu’un mot est important (et le mettre en gras) : <strong></strong>
  • Pour dire qu’un mot est un p’tit peu important (et le mettre en italique) : <em></em>
  • Pour surligner un mot : <mark></mark>

A noter que la mise en forme se fera vraiment dans le CSS (choix de la police, taille, couleur, etc).

 

Créer des listes (à puces ou numérotées)

On peut créer deux types de listes :

  • Des listes à puces (comme celle-ci) : on utilise la balise <ul></ul>
  • Des listes numérotées : on utilise la balise <ol></ol>

<ul>

<li> insérez ici votre texte </li>
<li> insérez ici votre texte</li>
<li> insérez ici votre texte </li>

</ul>

 

Insérer des liens

 

Créer des liens vers des pages externes ou internes

  • Créer un lien vers un site externe :
    • <a href=’http://google.com’>Ceci est un lien vers Google</a>
  • Créer un lien vers une page interne de son propre site :
    • <a href=’page2.html’>Cliquez ici pour accéder à la page 2</a>

 

Créer un lien vers un email :

  • <a href=’mailto:monadressemail@gmail.com’> Contactez-moi</a>

 

Créer un lien vers des ancres :

Ce système permet de renvoyer l’internaute vers une section à l’intérieur de la page qu’il est en train de visiter. C’est particulièrement utile pour construire un menu de navigation.

Par exemple, vous êtes en train de coder les différentes parties de votre CV (expériences, études, compétences, etc.), dont les intitulés feront partie du menu de navigation. En cliquant sur les différents liens dans le menu, l’internaute sera renvoyé à la section correspondante.

  1. Pour construire un lien vers une ancre, il faut d’abord placer un attribut dans la partie correspondante : <h2 id=’experience’> Mon expérience professionnelle</h2>
  2. Ensuite il suffira de placer le contenu de l’attribut (avec un #) dans le lien concerné : <a href=’#experience’> Expérience professionnelle</a>

 

Insérer des images

Une balise <image> comporte obligatoirement deux attributs. L’attribut « src » sert à donner un nom à l’image, tandis que l’attribut « alt » indique un texte alternatif, utile pour les personnes non-voyantes et aussi pour les robots du référencent.

<img src=’images/chaton.jpeg’ alt=’chaton mignon’/>

Il est possible d’insérer un lien dans l’image, de telle sorte qu’en cliquant sur l’image, on arrive sur une autre page web : il suffit d’encadrer la balise image par une balise de lien <a></a>

<a href=’http://google.com’> <img src=’images/chaton.jpeg’ alt=’chaton’/> </a>

 

2. Les fonctions avancées en HTML

 

Créer un menu de navigation + le mettre en forme

Pour l’instant, on va coder un simple menu, comme si on créait un CV.

Teaser : Je viens de finir un bouquin sur le CSS et j’ai découvert comment styliser un menu de navigation comme un vrai web-designer, avec des ombres, des dégradés, la totale. A suivre dans les prochains post ;-)

 

  1. Dans le fichier HTML, on commence par écrire les balises du menu, à savoir <nav></nav>
  2. A l’intérieur de ces balises, on crée une liste à puce (avec la balise <ul>)
  3. On ajoute notre contenu à l’intérieur des balises <li></li>
  4. Ensuite, on insère des liens <a> dans cette liste
  5. Dans l’exemple, on utilise des liens ancres, sauf dans le cas de la page contact où l’on renvoie vers une autre page interne

 

Ce qui donne :

<nav>

<ul>

<li> <a href=’#pro’>Expérience</a></li>
<li> <a href=’#etudes’>Etudes</a></li>
<li> <a href=’#skills’>Compétences</a></li>
<li> <a href=’page2.index’>Contact</a></li>

</ul>

</nav>

 

Puis on passe dans le fichier CSS :

  1. On choisit de ne pas faire apparaître les puces de la liste (list-style-type)
  2. On transforme le menu en inline-block, ce qui va permettre à la liste de s’afficher sur une ligne verticale
  3. Et c’est tout !

 

nav{

display: inline-block;
width: 740px;

}

nav ul{

list-style-type: none;

}

nav li{

display: inline-block;

}

 

Créer des tableaux

Franchement, je n’ai pas encore compris quel intérêt on pouvait avoir à inclure un tableau dans une page web, mais si j’en trouve l’utilité un jour, je vous ferai signe…

En attendant, si ça vous intéresse, voici comment faire.

 

Créer le squelette du tableau

  1. Tout d’abord, on écrit les balises <table></table> qui vont encadrer le tableau.
  2. Les balises <tr> représentent une ligne : on en met 2 pour créer 2 lignes.
  3. A l’intérieur des <tr>, on place autant de cellules qu’on veut.

 

<table>

<tr>

<td>Corrine</td>
<td>33 ans</td>
<td>France</td>

</tr>
<tr>

<td>Pierre</td>
<td>58 ans</td>
<td>Maroc</td>

</tr>

</table>

 

Donner un titre aux colonnes et au tableau

  1. Pour rajouter des noms aux colonnes, on rajoute des balises <tr></tr>
  2. On écrit le titre des colonnes dans les balises <th>
  3. On écrit le nom du tableau dans la balise <caption>

 

<table>

<tr>

<caption>Passagers du vol 347</caption>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>

</tr>
<tr>

<td>Corrine</td>
<td>33 ans</td>
<td>France</td>

</tr>
<tr>

<td>Pierre</td>
<td>58 ans</td>
<td>Maroc</td>

</tr>

</table>

 

Structurer le tableau quand il contient beaucoup de données

Il est possible de structurer le tableau, notamment quand il contient beaucoup de données, même si ce n’est pas obligatoire. Visuellement, ça ne change rien mais c’est plus lisible pour les robots.

  1. On regroupe les noms de colonnes (les balises <th>) dans un en-tête grâce à la balise <thead>
  2. On place le contenu dans une balise <tbody>
  3. Et pour finir, on peut ajouter un pied de tableau <tfoot>

 

Pour fusionner une cellule sur 2 colonnes :

On utilise l’attribut colspan. Par exemple, si on veut prendre l’espace de 2 colonnes, on met la valeur 2.

<tr>

<td>Pierre</td>
<td colspan=’2′>Maroc</td>

</tr>

 

Yes ! On vient d’apprendre comment insérer du contenu dans notre page web. Et le meilleur reste à venir : on va enfin mettre en forme notre site web !

Si tu veux, tu peux aussi télécharger l’article en format PDF, pour y revenir plus tard !

Je télécharge l’article !

 

 

CHAPITRE 3 : MONTER EN STYLE GRACE AU CSS

 

1. Les fonctions de base en CSS

 

Mettre en forme le texte

 

Choisir la taille du texte

On a plusieurs options pour définir la taille de son texte : en pixels, en valeur relative et en em (me demande pas, je ne sais pas ce que ça veut dire.

On écrit dans le fichier CSS :

  • font-size : 14px;
  • font-size : small; (mais aussi x-small, small, medium, large, x-large)
  • font-size : 1.2em; (1em c’est la taille standard)

On peut donner des tailles de texte différentes pour les titres, les paragraphes de texte, etc. Il suffira de le préciser à chaque fois dans le fichier CSS. Comme ça :

h1{

font-size: 30px;

}

body{

font-size: 16px;

}

 

Choisir la police du texte

Pour que la police s’affiche correctement sur la page, il faut que l’internaute possède la police en mémoire dans son utilisateur. Du coup, on est obligé de se rabattre vers des polices que tout le monde possède, comme Arial, Times New Roman, Impact…

On écrit dans le fichier CSS : font-family: Arial;

 

On peut aussi donner le choix à l’ordinateur : on propose plusieurs polices à la suite, et l’ordinateur choisira celle que l’utilisateur possède.

On écrit : font-family: Arial, Impact, Times New Roman, sans-serif;

Ca revient à dire à l’ordinateur : « Si tu ne possèdes pas Arial, essaye d’afficher la police Impact. Si tu ne possèdes pas Impact, essaye d’afficher la page en Times New Roman. Et si ça ne marche toujours pas, choisis n’importe quelle police en sans serif ».

 

Et si on a envie d’une police originale ?

Quand on crée son site web, on a envie d’utiliser des polices personnalisées, qui vont apporter de l’originalité à son site et donner une certaine tonalité. Mais il ne faut pas en abuser ! A chaque fois qu’on utilise une police originale, l’ordinateur de l’internaute devra télécharger un fichier et cela va ralentir l’affichage de la page. Or la vitesse de chargement est un élément crucial quand on veut garder les internautes sur sa page. Maximum 2 polices originales.

 

Pour intégrer une police originale :

  1. On choisit la police que l’on souhaite sur Google Web Fonts, FontSquirrel, etc.
  2. Si on passe par Google Web Fonts, on copie le lien qu’on nous propose et on le colle dans le <head>
  3. Quand on utilise FontSquirrel…
    • On télécharge la police
    • On choisit la langue souhaitée et on sélectionne les 4 extensions, qui pourront ainsi être lues sur tous les navigateurs
    • On place le fichier téléchargé dans le dossier qu’on a crée sur notre bureau
    • Dans le fichier CSS, on écrit la ligne suivante :

 

@font-face{

font-family: ‘Prisma’;
src: url(‘Prisma.otf’) format(‘otf’);
src: url(‘Prisma.ttf’) format(‘truetype’);

}

Dans cet exemple, il n’y avait que 2 extensions. J’ai donc rajouté 2 lignes, avec le lien vers la police (qu’on voit dans l’attribut url), et le format.

 

Mettre en gras, en italique ou en souligné

Les balises <em> et <strong> permettent de mettre le texte en italique et en gras. Mais elles ont pour effet de dire que le texte est important pour le navigateur. Or parfois on cherche juste à mettre en forme, sans forcément vouloir spécifier aux robots que ce texte est important.

  • font-style: italic; (mettre le texte en italique)
  • font-weight: bold; (mettre le texte en gras)
  • text-decoration: underline; (souligner le texte)
  • text-decoration: line-through; (barrer le texte)
  • text-decoration: overline; (mettre une ligne au dessus du texte)

 

Modifier l’alignement du texte

Dans le fichier CSS, on peut choisir d’aligner le texte au centre (center), à droite (right), à gauche (left). On peut aussi justifier le texte pour s’assurer qu’il prenne toute la largeur de la page :

h1{

text-align: center;
text-align: justify;

}

 

Ajouter des couleurs et styliser l’arrière plan de sa page

Ajouter des couleurs

On peut ajouter de la couleur sur le texte, en arrière-plan de la page ou bien sur un bloc spécifique. Tout ça se passe dans le fichier CSS.

Pour ajouter de la couleur au texte :

p {

color: red;

}

Pour ajouter de la couleur en arrière-plan:

body {

background-color: red;

}

 

Il existe plusieurs façons de choisir les couleurs :

  • En utilisant le nom de la couleur (en anglais), pratique rapide à utiliser mais limité à 16 couleurs (les couleurs sont assez primaires)

 

couleurs css

  • En choisissant précisément sa couleur, que ce soit avec :
    • Des codes hexadécimaux. Ex : #454545)
    • Des codes RGB. Ex : rgb(255, 246, 68)

L’utilisation des couleurs pour le web mériterait un article à elles-seules, mais en attendant voici comment se débrouiller :

  • En allant sur ce site, vous pourrez créer la couleur que vous souhaitez et obtenir en un clic son code hexadécimal
  • Pour obtenir les codes RGB d’une couleur, personnellement je bidouille sur PPT. Je crée la couleur que je souhaite, puis je clique sur « Couleur de Police », puis « Autres couleurs », et j’obtiens ainsi les codes RGB

 

Deux manières de choisir les couleurs : avec les codes hexadécimaux ou avec les codes RGB
Deux manières de choisir les couleurs : avec les codes hexadécimaux ou avec les codes RGB

 

Ajouter des images en arrière-plan

Quelques fonctions utiles pour insérer des images en arrière plan :

  • Mettre une image en arrière plan : background-image: url(‘neige.png’);
  • Faire en sorte que l’image ne bouge pas : background-attachement: fixed;
  • Afficher l’image une seule fois (les images se répètent pas défaut) : background-repeat: no-repeat;
  • Choisir où l’on veut afficher l’image : background-position: top right;

 

Dans le CSS, on écrit par exemple :

body{

background-image: url(‘tiger.png’);
background-repeat: no-repeat;

}

On peut aussi avoir utiliser la balise background pour combiner toutes les valeurs : background: url(« chaton.png ») no-repeat top right;

 

 

Jouer sur la transparence

  • Identifier l’élément, par exemple identifier une zone de texte avec une class
  • Puis écrire ceci dans le fichier CSS

.monparagraphe{

opacity: 0,5;

}

La valeur d’opacité varie entre 0 et 1. Quand la valeur est 1, le texte n’est pas du tout opaque, donc ça ne change rien. Quand la valeur est 0, le texte est complétement transparent donc on ne le voit plus. Il faut naviguer entre les deux.

On peut aussi inclure la transparence dans la couleur, en utilisant le code RGBA. On écrira la couleur qu’on souhaite et on rajoute la transparence comme quatrième valeur. Par exemple, rgba(0, 0, 0, 0.5)

 

 

Ajouter des bordures et des ombres

 

Ajouter des bordures

C’est facile, il suffit d’écrire dans le CSS :

h1{

border: 2px black solid;

}

Dans cet exemple, la taille de la bordure est de 2px, et la couleur est noire.

La valeur « solid » signifie qu’on trace une ligne pleine. On peut aussi utiliser d’autres valeurs à la place de solid :

  • Dotted, pour créer des pointillés
  • Dashed, pour créer des tirets
  • Double, pour créer une bordure double

 

On peut ajouter des bordures uniquement sur certains côtés. Dans ce cas-là, on écrit :

  • border-left: 2px black solid;
  • border-top: 2px black solid;
  • border-right: 2px black solid;
  • border-bottom: 2px black solid;

 

On peut créer des bordures arrondies :

On écrit : border-radius: 10px;

A noter : si l’on veut transformer une image carrée en rond, on peut aussi utiliser la fonction border-radius.

Si l’on veut créer des angles arrondis différents dans certains angles, on écrit :

border-radius: 5px 10px 15px 20px; (les valeurs des angles vont dans le sens des aiguilles d’une montre)

 

 

Rajouter des ombres

Dans le css, on écrit :

#logo {

border: 2px black solid;
box-shadow: 5px 5px 3px black;

}

Pour créer une ombre, on a 4 valeurs, qui correspondent dans l’ordre aux choses suivantes :

  • décalage vertical
  • décalage horizontal
  • adoucissement du dégradé
  • et couleur de l’ombre

 

Pour rajouter de l’ombre au texte :

text-shadow: 5px 5px 3px black;

 

Créer des apparences dynamiques

Les apparences dynamiques servent à faire réagir des éléments au survol de la souris. Par exemple, quand on survole un lien et que ce lien change légèrement de couleur, pour indiquer qu’il faut cliquer : ça s’appelle un hover.

La balise hover peut s’appliquer sur tous les éléments.

a:hover {

color: green;
text-decoration: underline;

}

 

Pour changer la couleur des liens visités, on écrit : 

a:visited {

color: grey;

}

 

 

2. Transformer son site web pour le rendre compatible avec les smartphones et les tablettes 

 

Passer son site web en responsive grâce au Media Queries CSS

Il est impératif aujourd’hui de créer des sites web qui soient compatibles avec des écrans plus petits, pour les smartphones et les tablettes.

On appelle ça le responsive web design : le site s’adapte en fonction de la taille des écrans, pour permettre la meilleure expérience utilisateur. Et ce n’est pas juste pour la frime : si votre site s’affiche mal sur mobile, vous ferez fuir vos visiteurs. Et parce qu’une mauvaise nouvelle n’arrive jamais seule, vous serez aussi pénalisé par Google. Perte de trafic, baisse du référencement… Allez, on s’y met au responsive ?

 

On va utiliser les Media Queries CSS, qui permettent d’adapter la résolution de l’écran. Les Media Queries fonctionnent comme des règles qu’on commande au navigateur : « si la résolution de l’écran du visiteur est inférieure à tant de pixels, alors applique les propriétés CSS suivantes ».

 

Il existe 2 manières d’utiliser les Media Queries

  • En chargeant une feuille de style CSS différente en fonction de la règle (« si la résolution de l’écran est inférieure à 1280px de large, charge le fichier petite_resolition.css»)
  • En écrivant la règle directement dans le fichier CSS habituel (ex : « si la résolution est inférieure à 1280px de large, charge les propriétés CSS ci-dessous »)

 

Première option : charger des fichiers CSS différents

<head>

<link rel=’stylesheet’ media=’screen and (max-width: 1280px)’ href=’petite_resolution.css’ />

</head>

 

Deuxième option : créer des règles CSS différentes, mais les centraliser dans un seul fichier

C’est l’option recommandée par le prof sur OpenClassRoom. Par exemple, si on voulait transformer la couleur du texte sur des petits écrans, on écrirait :

p{

color: red;

}

@mediascreen and (max-width: 1280px) {

p{

color: blue;

}

}

 

Les Media Queries permettent de transformer plein de choses

On peut complétement changer l’apparence de la page : la taille des éléments, la couleur du texte, l’image de fond, etc.

  • color : gestion de la couleur (en bits/pixel)
  • height : hauteur de la zone d’affichage (fenêtre)
  • width : largeur de la zone d’affichage (fenêtre)
  • device-height : hauteur du périphérique
  • device-width : largeur du périphérique
  • orientation : orientation du périphérique (portrait ou paysage)

 

Les Media Queries peuvent s’appliquer sur plein d’écrans différents, pas seulement les téléphones et les tablettes :

  • media : type d’écran de sortie
  • all : tous les types d’écran
  • screen : écran « classique »
  • handheld : périphérique mobile
  • print : impression
  • tv : télévision
  • projection : projecteur

Quelques possibilités supplémentaires :

  • max-width
  • min-width

Les règles peuvent être combinées à l’aide des mots suivants :

  • only : « uniquement »
  • and : « et »
  • not : « non »

 

Quelques exemples : 

/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */

@media screen and (max-width: 1280px)

 

/* Sur tous types d’écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */

@media all and (min-width: 1024px) and (max-width: 1280px)

 

/* Sur les téléviseurs */

@media tv

 

/* Sur tous types d’écrans orientés verticalement */

@media all and (orientation: portrait)

 

Quelques cas pratiques

Pour être honnête, je rame encore sur le responsive. C’est vraiment un gros morceau du HTML/CSS, et je sens que je ne le maitrise pas assez. Il faudrait que je me penche davantage sur le sujet, il doit bien y avoir d’autres cours sur le responsive.

En attendant, voici ce que j’ai compris à partir du cours sur Openclassrooms. Si tu souhaites lire directement ce qu’ils ont à dire sur le responsive, c’est par ici : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries

 

Paramétrer les dimensions de la page

Quand on code un site web pour qu’il d’affiche sur un ordi, on peut décider de la largeur de la page. Quand on passe en responsive, on peut laisser la largeur ouverte.

Au départ, on avait centré la page et fixé la largeur à 900 pixels.

#bloc_page {

width: 900px;
margin: auto;

}

 

Pour le responsive, on donne une largeur automatique sur tous les écrans, à partir du moment où l’écran est plus petit que 1024 px :

@media all and (max-width: 1024px){

#bloc_page

{

width: auto;

}

}

 

Réduire la taille du menu de navigation

Alors que le menu prend toute la largeur de l’écran sur un ordinateur, il faut réduire sa taille lorsqu’on affiche la page web sur des plus petits écrans.

Ici, on donne au menu un dimensionnement automatique. Plutôt que de faire apparaître les liens sur une ligne horizontale (ce qu’on faisait en utilisant le inline-block), on transforme les listes du menu en block, qui vont s’afficher les uns en dessous des autres.

On diminue aussi la taille du texte et on supprime le hover des liens parce que c’est moins adapté à une navigation sur des petits écrans.

 

@media all and (max-width: 1024px)

{

nav
{

width: auto;
text-align: left;

}

nav li
{

display: block;
padding-left: 4px;

}

nav a
{

font-size: 1.1em;

}

nav a:hover
{

border-bottom: 0;

}

}

 

Supprimer une bannière ou un logo dans le header

Dans le header, on met souvent une bannière, c’est-à-dire une image qui prend toute la largeur de l’écran, et qui contient par exemple le logo du site. Une bannière a surtout une fonction décorative.

On peut choisir de masquer cet élément en responsive, grâce à une fonction toute simple :

@media all and (max-width: 1024px)

{

#banniere_image
{

display: none;

}

}

 

Repositionner les éléments de la sidebar

Il vaut mieux faire apparaître les éléments les uns en dessous des autres, c’est plus lisible sur un smartphone. Or sur le site classique, on avait crée une sidebar (une colonne à droite, nommé aside), qu’on va repositionner en dessous du texte principal (identifié comme article).

@media all and (max-width: 1024px)
{

article, aside
{

width : auto ;
display: block;
margin-bottom : 15px ;

}

}

 

Et les fonctions avancées en CSS ?

Franchement, c’est vraiment compliqué et j’ai pratiquement rien compris. Donc j’ai décidé de lâcher la pression sur cette partie là. J’apprendrais comment faire quand le besoin se fera sentir.

De toute façon, il est toujours possible de reprendre les cours sur OpenClassRoom concernant les fonctionnalités avancées de CSS.

Et puis il existe des tas de ressources sur le web, des articles, des videos, des cours, etc. J’ai aussi trouvé un bouquin sur le CSS à destination des webdesigners. A acheter où à emprunter sur webibli quand vous vous lancez dans une mise en forme plus complexe que d’habitude.

23 motifs pour booster le style de votre site

Quelles images choisir pour son site web ?

Quand on crée un site web, on a besoin de certaines ressources graphiques. Il faut choisir des polices, des couleurs, des icônes et bien sur des images.

La plupart des sites web, et notamment les landing pages, utilisent de grandes images qui s’affichent sur toute la largeur de l’écran. Ca fait d’ailleurs partie des techniques du design émotionnel, sur lequel j’avais écrit un article, puisque les images sont susceptibles de véhiculer des émotions et d’engager avec les visiteurs.

Il n’y a qu’à voir les sites d’Airbnb ou Uber !

patterns-2

 

Si vous cherchez de belles images pour votre site, jetez un oeil à ma selection des meilleures banques d’images gratuites !

 

Pourquoi utiliser des motifs en image de fond ?

Au delà des photos, il est intéressant de recourir à d’autres types d’images, notamment les motifs.

Les motifs (patterns, en anglais) permettent d’ajouter une sorte de texture au site web, tout en véhiculant aussi un certain état d’esprit. Certains sont féminins, d’autres industriels, sans compter tous les motifs colorés et funky.

L’avantage des patterns est leur capacité à s’adaptater sur tous les supports, que ce soit un écran d’ordi, une tablette ou un smartphone. En fait, les images des patterns sont toutes petites (et donc très légère) et uniques : c’est seulement par un effet de répétition que l’image que tu as choisi va s’afficher sur toute la largeur de la page et ainsi s’adapter à tous les écrans.

Il existe sur Internet plein de librairies de patterns. D’ailleurs, la plupart sont téléchargeables gratuitement. Sobres ou psychédéliques, voici ma sélection toute personnelle !

 

Besoin de motifs sobres ?

La librairie de référence quand on cherche des motifs sobres s’appelle Subbtle Patterns. Ils possèdent un choix immense, voici une sélection de mes préférés.

 

Pour un look cool et urbain :

 

patterns-2-2

http://subtlepatterns.com/concrete-seamless/

 

patterns-3-2

http://subtlepatterns.com/brick-wall/

 

Discrétion également, mais avec un esprit plus graphique :

23

http://subtlepatterns.com/greyzz/

 

11

http://subtlepatterns.com/cream-pixels/

 

patterns-4-2

http://subtlepatterns.com/wave-grind/

 

Surprenant et pourtant relativement sobre, non ?

12

http://subtlepatterns.com/inspiration-geometry/

 

Pour un graphisme tout en rondeur :

patterns-5-2

http://subtlepatterns.com/contemporary-china/

 

13

http://subtlepatterns.com/swirl-2/

 

A fond dans la vibe 70’s :

patterns-6-2

http://subtlepatterns.com/symphony/

 

Effets de texture cotonneux :

14

http://subtlepatterns.com/nice-snow/

 

patterns-7-2

http://subtlepatterns.com/subtle-white-feathers/

 

Pour des motifs sombres et légèrement texturés :

15

http://subtlepatterns.com/stardust/

 

18

http://subtlepatterns.com/tweed/

 

Un esprit graphique, également dans des teintes sombres :

16

http://subtlepatterns.com/escheresque-dark/

 

17

http://subtlepatterns.com/triangular/

 

Envie de motifs qui claquent ?

 

Pour trouver des motifs funky, je me suis tournée vers une autre librairie qui s’appelle The Pattern Library. La sélection est démente, les motifs sont superbes. Faites-toi plaisir ! C’est fun, c’est frais, c’est graphique.

 

7

http://thepatternlibrary.com/#naranjas

 

1

http://thepatternlibrary.com/#kiwis

 

5

http://thepatternlibrary.com/#science

 

4

http://thepatternlibrary.com/#leather-nunchuck

 

6

http://thepatternlibrary.com/#kale-salad

 

3

http://thepatternlibrary.com/#knitting

 

9

http://thepatternlibrary.com/#cuadros

 

2

http://thepatternlibrary.com/#flowers

 

8

http://thepatternlibrary.com/#fiesta

 

N’hésites-pas à parcourir ces librairies, la sélection est tellement large que tu vas forcément trouver ce qui te plait ! Et si te cherchez toujours le motif parfait, fais le toi-même !

 

Abonne toi à la newsletter pour recevoir plus d’articles sur le webdesign !

Envie de connaitre plein d’autres ressources graphiques ? Inscris-toi à la newsletter pour recevoir les prochains articles par mails !

Trouver un CTO pour sa start-up

Trouver un CTO, oui mais comment ?! La semaine dernière, j’ai assisté à une conférence organisée par Seed Networking qui nous a parlé du rôle du responsable de la technologie dans une startup. Non seulement j’ai compris ce que c’était qu’un CTO, mais en plus j’ai appris comment les séduire. Oh la la !

 

Quel est le rôle d’un CTO ?

Un CTO (en anglais, chief technology officer) c’est le responsable de la technologie dans une startup.

Au départ, je pensais qu’un CTO était tout simplement un développeur, à qui on avait donné un titre un peu snob, et qui était une sorte d’expert du code. Un super-geek, quoi.

J’ai appris qu’un CTO, c’est bien plus que ça :

  • Il porte et développe la vision de la startup
  • C’est un leader, en charge de l’équipe des développeurs
  • C’est un problem-solver, capable de recruter un nouveau développeur, de veiller à la cohérence de son équipe, etc.
  • C’est le responsable de la technologie : c’est lui qui décide et se porte responsable des choix techniques, qui fait de la veille et qui peut décider d’introduire de nouveaux choix techno
  • Il est (ou a été) un développeur : il n’est plus expert du code, il est plutôt devenu un touche-à-tout.

 

Trouver un cto pour sa startup : comment faire ?

 

Comment parler à un CTO ?

Le principal enseignement que j’en retire, c’est qu’un CTO a un rôle tellement crucial dans une startup qu’il ne faut pas le considérer comme un employé, mais comme un associé à part entière.

  • Il faut le convaincre de la crédibilité du projet, s’assurer qu’il adhère aux valeurs de la startup et qu’il soit enthousiaste à l’idée de porter et défendre la vision de la boite (dimension entrepreneuriale)
  • Il faut engager une connexion émotionnelle avec cette personne qui s’embarque dans l’aventure, et qui a besoin de faire partie intégrante de l’équipe (dimension humaine).

 

Convaincre sur la dimension entrepreneuriale du projet

Les bons développeurs sont déjà en poste, ou bien bombardés d’offres. Je n’ai pas de chiffres exacts, mais c’est comme s’il y avait 1 développer pour 50 startups. La compétition est rude !

Pour convaincre un CTO de rejoindre sa startup, il faut faire appel à son sens entrepreneurial  Faites-le rêver avec votre produit, expliquez-lui le potentiel de votre start-up, prenez le temps de le convaincre sur la mission de l’entreprise.

Soyez crédible ! Un entrepreneur qui n’y connaît rien aux technologies, qui ne sait absolument pas coder, qui n’a pas les bons mots pour s’exprimer, c’est un signe du manque de sérieux et d’engagement dans le projet.

Les CTOs présents à la conférence ont fortement recommandé aux entrepreneurs d’acquérir un minima de culture web et de savoir coder, ne serait-ce qu’un petit peu.

Et surtout, n’attendez pas d’avoir un CTO pour vous construire votre produit ! Apprenez à coder, créez une landing page, sortez un petit site ou une appli, même si c’est loin d’être terrible. Quand vous chercherez un CTO, vous aurez besoin de lui montrer des preuves concrètes de l’avancement de la startup.

 

Envie d’apprendre à coder ?
Commence par télécharger le condensé de 2 mois de cours sur le HTML et CSS !

Je télécharge le guide !

 

Tester le feeling avec le CTO

Le CTO a un rôle crucial dans la start-up. C’est lui qui matérialise la vision de l’entreprise à travers le produit ou service qu’il crée. C’est pour cela qu’il faut s’assurer, en tant que fondateurs de votre startup, que vous ayez un bon feeling avec le CTO que vous voulez convaincre.

Mais comment faire pour savoir si cette personne est la bonne ? Les compétences techniques importent autant que l’état d’esprit, et tous deux sont difficiles à évaluer.

Les CTOs présents à la conférence recommandaient de commencer par une période en freelance. Intégrez le développeur en freelance pendant un petit moment, et si la personne a les bonnes compétences et un vrai comportement entrepreneurial, alors il sera temps de lui proposer le poste de CTO.

A ce moment là, dans la salle, plusieurs entrepreneurs ont objecté qu’un développeur en freelance coute très (trop) cher pour se permettre ce genre de démarche. Entre 400 à 500 euros par jour à Paris, évidemment, ça fait réfléchir. Mais selon les intervenants, malgré le coût, il est crucial de s’assurer de la viabilité de la collaboration. Vous pourrez toujours vous rétracter si le CTO ne convient pas, mais vous aurez pris le risque de mettre en péril votre startup.

 

Comment fidéliser un CTO ? Faites-le rentrer comme associé

Proposer au CTO de devenir associé, c’est une manière d’ancrer la fidélisation. Et pour info, apparemment, on ne propose pas en dessous de 5%.

Un des intervenants, Nicolas Martignole  (@nmartignole), a raconté son expérience de CTO dans diverses startups et a donné quelques techniques pour commencer dans une startup.

Avant de se lancer, que ce soit pour le CTO ou pour la startup qui l’embauche, il vaut mieux parler dès le départ de la fin de l’aventure. Qu’est-ce qui pourrait mettre fin à la collaboration ? Et quels scénarios peut-on imaginer ?

  • Une séparation immédiate
  • Une séparation au cas où la startup mette la clé sous la porte
  • Et une troisième voie, la possibilité que la startup soit un immense succès

Une fois que la personne est intégrée comme CTO, il est recommandé de parler régulièrement aux associés de la startup, afin de s’assurer que la vision continue à être partagée.

 

Où est-ce qu’on peut trouver un CTO ?

Pour trouver un CTO, il faut aller le chercher avec les dents !

Les plus gros employeurs des développeurs, ce sont les SSII, des sortes d’agence d’interim et qui déploient les dev plus vite qu’à l’usine.

Dans les SSII, le turn over est très important. Beaucoup sont sur le point de quitter une SSII pour en rejoindre une autre, et ainsi faire monter leur salaire. Et puis il y a certains développeurs qui aimeraient bien se lancer dans l’aventure des startups : c’est à eux qu’il faut parler.

Allez trainer dans les meetups de développeurs, quitte à assister à des conférences qui vous sembleront un peu assommantes sur des technologies auxquelles vous ne connaissez rien. L’essentiel, c’est de pouvoir aborder après la conférence les développeurs présents dans le public.

 

Cet article t’a plu ? Abonne-toi à la newsletter et reçois les prochains billets directement par email !

Booster l’expérience utilisateur grâce au design émotionnel

La dernière fois, on a compris que le design émotionnel est une manière de créer une expérience utilisateur plus humaine, qui va créer de l’engagement et de la fidélité auprès des visiteurs. Aujourd’hui, on passe à la pratique !

Tout d’abord, on va voir que le design émotionnel peut rassurer les internautes sur la qualité du site, et également les motiver à compléter certaines actions. Ensuite, on verra comment mettre en place des techniques de design émotionnel.

 

1. Surmonter le scepticisme et la paresse de ses utilisateurs par l’expérience utilisateur

Jusqu’à maintenant, les exemples qu’on a vu jouaient sur l’humour et l’empathie. Sauf que voilà, l’humour ne marche pas pour toutes les marques. Lorsqu’il faut inspirer confiance à son public, mieux vaut remballer les vannes.

Nous sommes tous capables de détecter le baratin à des kilomètres. C’est à cela que vous vous confrontez quand vous essayez de convaincre votre public de cliquer, de s’abonner ou de faire confiance à votre marque. C’est vous contre l’instinct de votre public. Pour courtiser un public sceptique, paresseux ou indifférent, vous devez être persuasif sans laisser votre stratégie de marketing transparaitre.

Aarron Walter, Le design émotionnel

 

Vos utilisateurs sont difficiles à convaincre ? Promettez des bénéfices supérieurs aux risques perçus !

Quand il s’agit de prendre des décisions simples, nous faisons appel à notre instinct. Un macchiato ou un capuccino ? Rester sur la file de droite ou passer sur celle de gauche à la caisse du supermarché ?

Pour convaincre les sceptiques d’agir, il faut offrir des bénéfices supérieurs au coût estimé, afin que la réaction instinctive des gens penche en votre faveur. Et évidemment, on va donner un petit coup de pouce aux utilisateurs pour les aider à suivre leur instinct.

Comment fonctionne une décision instinctive
Comment fonctionne une décision instinctive, selon Aarron Walter

L’auteur prend l’exemple d’un service de gestion d’argent, Mint, qui a su convaincre ses utilisateurs de partager leurs informations financières pour les aider à comprendre comment ils dépensent leur argent. Forcément, le risque perçu est grand et le site a besoin d’inspirer la confiance pour vaincre le scepticisme. C’est l’expérience utilisateur qui va faire la différence.

Pour inspirer la confiance, ils ont choisi un design très léché, subtil, avec des dégradés de couleur, des variations d’ombres et de lumière. A l’époque, ce design était à contre courant de la tendance fonctionnelle et minimaliste. Ce design reflétait le sérieux et la confiance dont Mint avait besoin pour persuader les internautes de s’inscrire.

 

Vous avez besoin que vos utilisateurs complètent certaines actions ? Motivez-les avec des petits jeux !

Créer et compléter son profil, installer un logiciel, etc. De nombreux services (Blablacar, Dropbox, etc.) ont besoin que leurs utilisateurs complètent certaines tâches avant de pouvoir utiliser leur produit.

Mais le risque est grand que les utilisateurs laissent tomber avant d’avoir fini, parce que ça leur semble trop long, parce qu’ils en ont déjà marre, etc. C’est un défi auquel s’est confronté Dropbox, ce fameux service qui stocke nos fichiers en ligne.

Le bénéfice de Dropbox est évident, puisque les nouveaux abonnés bénéficient d’un espace de stockage gratuit. Par contre, les choses se compliquent rapidement, car il faut passer par plusieurs étapes d’installation et de synchronisation entre ordi, smartphone et tablette. Ce qui semblait être un bon plan (de l’espace de stockage gratuit) commence à être long et laborieux : les efforts requis peuvent sembler plus important que le bénéfice.

Dropbox a bien compris le risque de perdre des nouveaux abonnés pendant la phase d’installation. Alors ils ont décidé de transformer cette étape en un petit jeu, avec paliers à franchir et récompense à la clé.

Linkedin et Dropbox utilisent la gamification : ils motivent leurs utilisateurs avec des petits jeux
Linkedin et Dropbox utilisent la gamification : ils motivent leurs utilisateurs avec des petits jeux

L’expérience est à la fois agréable et stimulante pour l’utilisateur. Avec ce système, Dropbox réduit le nombre d’abandonnistes et verrouille l’attachement à Dropbox : vu le temps passé à installer Dropbox, on a moins envie de passer chez la concurrence. Malin, non ?

 

Et si vos utilisateurs sont indifférents ? 

Le scepticisme et la paresse sont de sérieux obstacles, mais est-ce qu’il existe quelque chose de plus décourageant que l’indifférence des internautes ?

Ici, pas de solution miracle. Aarron Walter préconise plutôt de réexaminer sa stratégie, son positionnement et son contenu. Voici quelques questions que l’on peut se poser :

  • La personnalité de ma marque est-elle authentique et adaptée au profil de mon public ?
  • La personnalité de ma marque est-elle trop similaire à celle de mes concurrents ?
  • Mon contenu est-il bien écrit et adapté aux besoins et aux intérêts de mon public ?
  • Est-ce que le design de mon site entre en conflit avec les besoins primordiaux de l’internaute, à savoir un site fonctionnel et fiable ?

 

Quand on crée sa startup, son site ou son blog, on a parfois le nez dans le guidon et ce n’est pas évident de répondre à ces questions de façon honnête et objective. Pourquoi ne pas demander leur avis directement aux internautes ?

Réunissez quelques personnes autour d’une table, par Skype ou autour d’un chat (http://simplemeetme.com) et posez-leur quelques questions :

  • Parlez-moi de vos premières impressions face à ce site web.
  • Que ressentez-vous en voyant ce site ? Que vous fait ressentir ce site ?
  • Imaginons que ce site devienne une personne en chair et en os. Serait-ce un homme, une femme ? Quel âge a t’il ? Quel genre de personne serait-il ? Quelles sont ses valeurs ? Quelle voiture conduit-il ? Quel genre de vacances prend-il ? Etc.
  • Selon vous, quel est le but de ce site ? A quoi sert-il ? Que propose t’il ?
  • Y a t’il des choses que vous souhaiteriez améliorer sur ce site ?
  • Y a t’il des sections ou des fonctionnalités du site qui sont plus importantes que d’autres selon vous ? Moins importantes ? Pourquoi ?

Cherchez à comprendre ce qu’attendent vos visiteurs. A partir de là, ce sera plus facile de travailler sur l’expérience utilisateur de votre site web.

 

2. Comment mettre en place les principes du design émotionnel ?

Aaaah, c’est là que ça se corse ! C’est bien joli, mais comment on met en place ces principes de design émotionnel ? A mon sens, cela découle d’une réflexion sur le positionnement stratégique de son site. Qui sont mes utilisateurs ? De quoi ont-ils besoin ? Qu’est-ce que je peux leur apporter ?

 

Je pense qu’il y a deux voies possibles :

  • On retrousse nos manches et on décide de mettre en place un système entier de design émotionnel, ce qui implique d’avoir une vue limpide sur les besoins de ses utilisateurs et l’identité de sa marque. A mon sens, c’est du travail de pro – que ce soit concernant la réalisation pratique du design que sur l’identification des émotions les plus fortes.
  • Ou bien on décide de saupoudrer notre site avec des éléments de design émotionnel à certains endroits stratégiques.

 

Etablir les lignes directrices du projet avec un exercice de persona

On commence par une réflexion stratégique sur le type d’émotions sur lesquelles on souhaite jouer. On va définir le territoire émotionnel de sa marque et le matérialiser en créant un personnage fictif que l’on appelle une persona. Si votre marque prenait vie, quel type de personne serait-elle ? Coincée, marrante, élégante, authentique ? Bourrée ? Bref, c’est comme cela que l’on va construire la persona de notre marque.

Les persona sont des personnages fictifs, qui permettent de mieux comprendre ce qu'attendent ses visiteurs
Les persona sont des personnages fictifs, qui permettent de mieux comprendre ce qu’attendent ses visiteurs

 

Aarron Walter explique en détail le procédé et nous donne la structure nécessaire pour construire une bonne persona de marque. Vous la trouverez ici – et si vous voulez vous inspirer, Aarron Walter a réalisé un exemple avec la persona de Mailchimp, à consulter ici : http://aarronwalter.com/design-personas/

  • Nom de la marque
  • Photo : Trouvez une photo ou une image pour rendre votre persona plus vivante. Cela pourrait être une célébrité, quelqu’un que vous connaissez, un personnage de film, etc… L’essentiel c’est de matérialiser la persona de votre marque.
  • En quelques mots : Ecrivez un bref résumé de la personnalité et de l’unicité de votre marque, en quelques mots. C’est un exercice difficile – vous serez peut-être plus à l’aise pour le faire à la fin, quand vous aurez les idées plus claires sur l’ensemble de la personnalité de la marque.
  • Traits de caractère de la marque : Listez 5 à 7 traits de caractère qui incarnent votre marque. Indiquez aussi les traits qui sont à l’opposé de votre marque.
  • Manière de s’exprimer : Si votre marque était une personne, comment parlerait-elle ? Sur quel ton, avec quel registre ? Par exemple, la persona de HTML Bordel n’a pas peur des grossièretés ;-)
  • Territoire visuel : Définissez les couleurs, la typographie et plus largement le style visuel qui définit votre marque. Utilisez un moodboard, que ce soit sur Pinterest ou avec de bons vieux magazines que vous découperez pour faire un collage.
  • Méthode d’engagement : Clarifiez les émotions que votre marque est susceptible d’utiliser, en fonction de sa personnalité.

La persona sera votre fil conducteur pour créer le design, mais aussi les contenus, les campagnes, etc. La persona est un guide pour vous aider à faire des choix. Quand vous vous demanderez si ce design ou ces émotions sont bien représentatives de votre marque, vous pourrez la vérifier en reprenant la persona.

 

Quelques manières plus légères de mettre en place un design émotionnel 

Il semblerait qu’il y ait quelques endroits stratégiques pour utiliser le design émotionnel en petites touches. En voici quelques exemples :

  • Les pages d’erreur
  • Les formulaires d’inscription
  • Les messages directs (mails et autres)
Utiliser le design émotionnel quand le site plante
Utiliser le design émotionnel sur les pages 404, pour se faire pardonner quand le site plante

Les pages d’erreur utilisent fréquemment le design émotionnel. Evidemment ! Les bugs sont susceptibles de créer de la frustration et des tensions de la part des utilisateurs. Utiliser l’humour est une manière de dédramatiser la situation et de faire passer la pilule, pour maintenir une bonne relation avec l’internaute.

 

Les photos permettent de susciter des émotions positives, utile pour les formulaires d'inscription
Les photos permettent de susciter des émotions positives, utile pour les formulaires d’inscription

Les formulaires d’inscription sont aussi souvent associés au design émotionnel. La technique la plus évidente est l’utilisation des images, mais il y a surement d’autres ressorts. A creuser dans un autre post !

 

Et pour finir, il y a le ton employé quand on envoie des petits messages à ses utilisateurs, qui impacts forcément l’expérience utilisateur :

  • Pinterest qui vous félicite quand vous avez des repins : « Woohoo, you got 10 repins last week! »
  • Viméo qui fête votre premier anniversaire passé sur le réseau : « Don’t tell us you forgot… Happy one-year anniversary! »
  • Mailchimp qui vous rassure quand vous avez perdu votre mot de passe : « No problemo. Let’s get you a new one! »

 

Alors, ça t’interresse, le design émotionnel ? Si tu veux te procurer le bouquin de Aarron Walter, va sur la Fnac ou Amazon, ou bien empruntes-le (gratuitement) sur webibli !

 

Abonne toi pour recevoir plus d’articles sur le web design !

Tu as aimé cet article ? Inscris-toi pour ne pas louper les prochains !

Apprendre à coder : bilan du premier mois

Je veux apprendre à coder, à développer moi-même des sites web et des applis. Je me suis inscrite à une formation en ligne de 6 mois, crée par Simplon, une école sociale et solidaire qui apprend aux gens à coder. La formation a débuté en Mai, alors c’est l’heure du bilan du premier mois !

 

6 mois pour apprendre à coder, c’est court

6 mois, c’est demain. Bien sur, ça me laisse le temps d’apprendre quelques bases en HTML, CSS et d’autres choses que je ne connais pas encore. Mais ça va passer en un éclair. Pour que ça marche vraiment, il me faut un plan.

Si je fais cette formation en ligne avec Simplon, ce n’est pas seulement pour avoir des bases en langage informatique. C’est pour être capable de créer des choses, de m’ouvrir des portes, d’être indépendante pour concevoir moi-même des sites et des applis.

Je me prends à penser que je pourrais devenir freelance – nomade, libre, indépendante, le rêve.

 

Rester motivée

Je sais que le succès de ces prochains mois dépend de moi.

Tout – absolument tout ce qui va se passer et qui est déjà en train de se passer – est un gigantesque test. Je vais tester ma motivation, ma résistance, ma capacité à définir mon projet et mon temps.

J’ai déjà échoué une fois. Il y a six mois, je m’étais inscrite à la première version de la formation de Simplon. J’avais échoué au bout d’une semaine. Manque de motivation, gros retard dans les cours… Aujourd’hui je recommence et je sens que les choses sont différentes. J’ai vraiment envie de réussir.

 

Edit : J’ai fini d’apprendre le HTML et CSS !

Et j’ai un petit cadeau pour toi <3

J’ai tellement ramé que j’ai décidé de réécrire carrément tout le parcours de formation, avec mes mots à moi et ma logique. Et j’ai pensé à toi ;-) Non seulement tu peux lire l’article que j’ai publié sur le HTML/CSS, mais tu peux même le télécharger en PDF !

Je télécharge l’article !

 

Ne pas prendre de retard dans la formation

Apprendre le code ne doit pas passer à la trappe avec les aléas du quotidien. Pour que ça fonctionne, il faut accepter de passer une ou deux soirées à bosser. Et c’est peut-être ça qui a été le plus difficile ce premier mois. Bosser, d’accord. Mais bosser chaque semaine, chaque mois, pendant six mois, c’est quand même autre chose. C’est important de visualiser et d’accepter l’effort que ça représente (alors qu’on pourrait être en train de siroter des mojitos en terrasse, par exemple).

Au cours de ce premier mois, j’ai tenu la distance sur le HTML et CSS. Même si je suis en retard d’une semaine sur les leçons, j’ai réussi à trouver la motivation et je ne me suis pas fait distancer.

Mais j’ai été trop passive. Je n’ai pas réussi à bosser sur le code avec une copine comme je l’espérais. Et j’ai ingurgité les vidéos sans trop regarder ce qui se passait sur le forum.

Pour apprendre quelque chose d’aussi fondamental, je crois qu’il faut adopter une attitude active : discuter, commenter, poser des questions, rencontrer les autres élèves, participer aux évènements. Echanger les autres pour, qui sait, créer des étincelles et lancer des projets avec d’autres élèves ?!

 

C’est quoi le plan ?

Alors c’est quoi le plan pour les mois à venir ? Mieux qu’une to-do list, je me construis un plan d’action. Rdv le mois prochain pour le bilan !

1. S’impliquer dans la communauté

Discuter sur le groupe Facebook et le forum de la formation, et surtout participer à aux événements de la scène tech et startup. Rdv sur Meetup ! TheFamily pour la culture entreprenariale, Le Wagon pour des workshops et des conférences tech…

Edit : C’est fait, j’ai été à une conférence tech, on nous a appris à séduire des grands manitou du code !

2. Fonctionner par projets

Sur Simplon, les cours ne sont pas construits en fonction des projets (coder un site, une appli, etc), mais des langages. Par exemple, pour apprendre les bases du HTML et CSS, j’ai visionné une sorte de parcours, sous forme de vidéos partagées chaque semaine, pendant un mois.

Mais on n’apprend pas pour le simple plaisir d’apprendre. Il faut pratiquer, c’est le seul moyen de mémoriser et de tester ses connaissances.

Sans compter qu’apprendre à coder des projets sera plus intéressant pour vous, je pense… Non ? Alors je me mets au défi de réaliser les projets suivants :

  • Une landing page – en deux versions, une page simple et une page plus complexe
  • Un genre de tumblr
  • Un CV – techniquement, ça me semble déja plus compliqué
  • Une market place – chauuuuuud ! à voir, pas sure que j’y arrive…
  • Une appli, mais je ne sais pas quoi ? Tu as une idée ?

Et pour que ce soit plus fun, j’ai décidé de réaliser des vrais projets qui me tiennent à coeur. Une vraie landing page pour tester une idée de business qui me trotte en tête, un tumblr pour partager des photos d’un voyage à Berlin… Et puis une market place (une boutique online, en fait), ça c’est un projet un peu fou… on en reparle !

 

3. Lire, lire, lire sur le web, la culture, le design, etc.

Je suis persuadée que c’est ce qui va faire la différence. Je n’apprends pas à coder seulement pour créer des pages web, mais aussi pour mieux comprendre Internet. Et c’est un univers tellement riche !

En ce moment, ma liste de lecture ressemble à ça :

  • Joyeux bordel : tactiques, principes et théories pour faire la révolution, de Andrew Boyd et Dave Oswald Mitchell
  • Do it yourself : autodétermination et culture punk, de Fabien Hein
  • The Art of Non-Conformity: Set Your Own Rules, Live the Life You Want, and Change the World, de Chris Guillebeau
  • Show your work, de Austin Kleon

Et puis plein de bouquins sur le webdesign qu’on peut se faire gentiment prêter par une communauté de passionnés du web, sur le site Webibli : http://www.webibli.fr

 

Tu as envie d’apprendre à créer toi-même une page web ? De réaliser ton propre CV ? Inscris-toi pour recevoir par mail les prochains articles !

Créez un site web irrésistible grâce au design émotionnel

Qu’est-ce que le design émotionnel ?

Ca vous est déjà arrivé de vous arracher les cheveux pour créer le design de votre site ? On veut qu’il soit beau, qu’il nous ressemble et qu’il plaise à nos visiteurs. Je me pose encore ces questions, ici, pour HTML Bordel.

Poussée par la curiosité, j’ai dévoré le livre d’Aaron Walter sur le design émotionnel. Le quoi ?! Attention, post très (très) long, je vous raconte tout sur le design émotionnel.

 

1. Le design émotionnel est une manière de construire l’expérience utilisateur

 

Le design émotionnel est une méthode pour créer des interfaces plus humaines et plus personnelles.

Le design émotionnel est une manière de concevoir l’expérience que les gens auront d’un site, d’une appli ou d’un logiciel (on appelle ça user experience, en anglais). En suscitant des émotions chez les internautes, le design cherche à construire un engagement émotionnel avec le site mais aussi à déclencher des réactions spécifiques (cliquer sur un bouton, s’abonner, acheter, etc).

On mêle la psychologie, le design et le marketing pour influencer les réactions des individus selon des objectifs définis au préalable. Plutôt balèze, comme exercice.

 

a) Les interfaces web ont le droit d’avoir de la personnalité 

C’est le plaidoyer d’Aarron Walter, designer et auteur du livre Le design émotionnel (designing for emotions, en anglais), pour créer des interfaces plus « humaines ». Au début du web, on cherchait à créer une image sérieuse. Il en résultait des sites web plutôt impersonnels. Aujourd’hui, la tendance dans le web design est à la personnalité assumée. C’est une façon de signifier qu’il y a un p’tit cœur qui bat derrière le site !

Si nous arrêtons d’envisager les interfaces que nous créons comme de bêtes panneaux de commande pour les voir plutôt comme des personnes avec qui notre public a envie d’interagir, nous pouvons créer des expériences émotionnelles capables de laisser une empreinte durable.

Aaron Walter, Le design émotionnel

L'utilisation des images est une technique courante de design émotionnel
L’utilisation des images est une technique courante de design émotionnel

 

b) Qu’est-ce que le design émotionnel peut nous apporter ?

C’est une méthode qui va plus loin que le fait de rendre son site plus beau ou plus agréable. C’est bien plus que de l’esthétisme. Ce n’est pas non plus quelque chose qu’on réalise sur un coin de table.

Le design émotionnel peut vraiment faire la différence et servir sa marque. En fait, ce design sert des objectifs stratégiques, notamment de conversion et d’engagement à la marque.

Cela intervient en général à la conception ou à la refonte du site. Il faut utiliser cette méthode avec justesse, en prenant soin de s’adapter à sa cible et aux besoins de ses utilisateurs.

 

2. Le design émotionnel est un outil marketing

 

Finalement, à quoi bon chercher à utiliser des émotions ? Quelle importance de les transmettre via le design du site ? Les émotions sont utilisées et canalisées pour créer des résultats et influencer les actions des internautes. Clairement, ce n’est pas le royaume des bisounours.

C’est un outil marketing. C’est quelque chose d’intentionnel, ce n’est pas un accident.

 

a) Le design émotionnel résonne avec les émotions des utilisateurs

Imaginons que vous soyez en train de concevoir un logiciel pour des pros. Réfléchissez à vos utilisateurs et à quoi ressemble leur vie professionnelle. Lorsqu’on conçoit un logiciel utilisé par « des gens coincés dans un bureau sans fenêtre », on peut soulager la morosité de leur travail avec une interface particulièrement agréable qui va leur apporter un peu de chaleur.

 

Le design et le style fun de l’interface s’apparentent peut-être à de l’habillage, mais il s’agit en fait d’une habile manipulation. C’est une manière puissante de construire un souvenir positif, ce qui augmente en retour les chances que les utilisateurs continuent à utiliser l’application et à lui faire confiance.

Aaron Walter, Le design émotionnel

Par exemple, j’ai ressenti la même chose avec Mailchimp, un service en ligne pour envoyer des campagnes d’emails. Je ne m’y connaissais pas trop et je ne savais pas quel service choisir. On m’avait recommandé Aweber, parce que c’est un outil très performant. Mais quand j’ai vu la tête de leur outil pour la première fois… le choc ! Ca avait l’air très sérieux et compliqué.

A l’inverse, quand j’ai visité le site de Mailchimp, je suis tombée sur leur mascotte, un petit singe qui fait le facteur et balance quelques blagues de temps en temps. Ni une ni deux, je me suis inscrite. Avec leur ton léger et amusant, Mailchimp a levé les craintes que j’avais face à cet outil que je ne maitrisais pas.

 

Illustration de différents modèles de design émotionnel
Page d’accueil d’Aweber vs. Mailchimp

 

Le plus drôle, c’est que Mailchimp entre en communion avec les émotions de ses utilisateurs. La joie d’avoir un nouvel abonné, l’excitation avant de lancer une campagne d’emailing… ce sont des émotions que Mailchimp met en avant. Quand vous venez d’envoyer votre campagne d’emailing, au lieu d’une banale confirmation, Mailchimp vous dit « Hourra » (et il vous fait un « tope-là ») ! Quand une personne s’inscrit, Mailchimp vous félicite : « Super ! On dirait bien que les gens aiment ce que vous faites. »

Exemples de design émotionnel

 

b) Le design émotionnel facilite la mémorisation

Le design émotionnel est donc une manière de jouer sur les émotions des utilisateurs. Mais dans quel but ? La réponse, c’est la mémorisation. Les expériences émotionnelles laissent une empreinte profonde dans notre mémoire.

 

Les évènements portant une charge émotionnelle persistent beaucoup plus longtemps dans nos mémoires et on peut se les remémorer plus précisément que les souvenirs neutres.

Quand le cerveau detecte un événement émotionnellement chargé, l’amygdale libère de la dopamine dans le système. Comme la dopamine facilite grandement la mémorisation et le traitement des informations, c’est comme si on écrivait « souviens-toi de ça » sur un post-it.

Quand le cerveau colle un post-it chimique sur une information donnée, cette information est traitée de manière plus robuste. C’est ce que veulent tous les professeurs, parents et publicitaires.

John Medina, Brain Rules

Une fois que les émotions créées par le design sont ancrées dans la mémoire des utilisateurs, la marque peut alors créer de l’attachement et de la fidélité. Plus tu te souviens de cette marque ou de ce service, plus tu as de chances de le réutiliser et d’être fidèle.

 

c) Le design émotionnel crée de l’engagement

Quand la marque « tape » dans les bonnes émotions et qu’elles résonnent en profondeur avec l’utilisateur, le résultat peut être incroyable. C’est ce que veulent toutes les marques.

Pensez un peu aux campagnes publicitaires de la marque Dove. Franchement, qui n’a pas versé une larme en voyant ces femmes imparfaites qui finissent s’accepter leur reflet dans le miroir ? Récemment, j’ai été submergée en visionnant cette pub : une marque qui vend des produits pour fuites urinaires (pour adultes), et qui se met à nu pour aider les gens à accepter et à aller de l’avant. J’ai pleuré, je n’ai pas pu m’en empêcher.

Bref, que le design émotionnel amuse, émeuve ou surprenne, il peut donner envie aux gens de partager le message via les réseaux sociaux ou le bouche à oreille. Ce qui veut dire… moins de frais marketing !

« Quand on crée une expérience émotionnelle engageante, il n’y a plus besoin de budget marketing », explique Aaron Walter. Parce que les gens ont envie de partager cette expérience, et qu’ils aiment la marque.

Créer la surprise, adopter un ton personnel... quelques pistes de design émotionnel
Créer la surprise, adopter un ton personnel… quelques pistes de design émotionnel

3. Créer un engagement émotionnel avec ses utilisateurs

L’objectif c’est de « construire des schémas d’interaction qui exploiteront le pouvoir de la psychologie pour créer des souvenir positifs et durables de votre site dans l’esprit des gens ». Rien que ça ;-)

C’est là qu’on se rend compte que le design émotionnel va bien au delà de la sensibilité esthétique, mais qu’il joue sur des ressorts psychologiques pour créer des systèmes d’actions. Balèze, non ?

 

a) Utiliser la surprise

Le diable est dans les détails ! Vous avez remarqué que certains sites créent des choses étonnantes ou amusantes sur leur site web ? Des choses inattendues, comme :

  • Le panier qui sourie quand on le remplit
  • La psychologie inversée

On peut résumer l’effet que la surprise a sur un utilisateur. Surprise = focus de l’attention + amplification des émotions (ça fait comme une vague qui grossit) + réponse immédiate et émotionnelle = engagement émotionnel + possibilité de bouche à oreille/partage

Utiliser la surprise, c'est chercher à obtenir une réaction instinctive
Utiliser la surprise, c’est chercher à obtenir une réaction instinctive

La surprise, lorsqu’elle déclenche une réaction émotionnelle instinctive, contourne le raisonnement cérébral qui pouvait dissuader l’internaute de cliquer, de s’abonner, d’acheter un produit. Note aux apprentis sorciers : attention, on flirte avec la manipulation.

 

b) Utiliser l’anticipation

Quand on veut lancer un produit, un service, ou bien quand on a une grande nouvelle, on peut utiliser l’anticipation et faire monter le désir… Comment fonctionne l’anticipation ? Allez hop, un petit schèma :

Utiliser l'anticipation (et faire monter le désir)
Utiliser l’anticipation (et faire monter le désir)

Aarron Walter prend l’exemple de Twitter, à l’époque où ils avaient lancé leur nouveau design, en 2010. Le projet du Nouveau Twitter était compliqué car Twitter avait déjà de nombreux fans. Il fallait donc réussir à faire accepter les changements et minimiser les réactions négatives.

Pendant que l’équipe de Twitter bossait en secret sur le nouveau design, une des personne de l’équipe a fait fuiter une capture d’écran d’un morceau du nouveau design de Twitter. L’information a été relayée par les médias et les internautes, qui ont commencé les spéculations. A quoi pouvait donc ressembler la refonte de Twitter ?! Le désir commençait déjà à monter.

Quelques mois plus tard, le design était presque finalisé et quelques utilisateurs ont obtenu un accès exclusif au nouveau Twitter. A votre avis, quelle a été la réaction de ces heureux élus ? Ils se sont bien sur vantés sur Twitter d’avoir été sélectionnés. Ce faisant, ils ont relayé l’information de la refonte du design de Twitter à laeurs abonnés, ce qui a aidé à propager la nouvelle. Et bien sur, ça a fait des jaloux. « Les utilisateurs qui bénéficiaient d’un accès prioritaire avaient un sentiment d’exclusivité et d’élévation de leur statut, renforcé par des réponses jalouses de leurs abonnés », nous explique Aaron Walter.

 

c) L’histoire de Mailchimp : comment le design émotionnel est finalement devenu le cœur de l’identité de la marque

Aarron Walter fut le designer de Mailchimp, ce service d’emailing que de nombreux business, startups et blogueurs utilisent. La particularité du design de Mailchimp, c’est son accessibilité. Des couleurs claires et fraiches, de la rondeur et surtout de la légéreté, personnifiée par Freddie le chimpanzé, la mascotte de la marque .

Freddie, la mascotte de MAilchimp crée par Aarron Walter illustre bien ce qu'est le design émotionnel
Freddie, la mascotte de MAilchimp crée par Aarron Walter illustre bien ce qu’est le design émotionnel

 

Quand on est sur la plateforme, Freddie balance des petites vannes de temps en temps. Aarron Walter a donc choisi de jouer sur l’effet de surprise, via des messages qui apparaissent de manière aléatoire sur les pages du site. Ca faisait marrer les créateurs de Mailchimp, mais ça a aussi créé une dynamique enjouée qui aide les gens à surmonter les obstacles et à accomplir leurs objectifs.

Avec son caractère aléatoire, Freddie joue aussi sur l’anticipation (qu’est-ce que Freddie va bien pouvoir me dire si je rafraichis la page ?). Tout se joue autour de l’incertitude qui entoure la blague suivante. Parfois c’est génial, parfois ça tombe à plat : en soufflant le chaud et le froid, Aarron et son équipe ont créé un résultat qu’ils n’avaient pas réalisé.

L’engagement émotionnel à la marque s’est renforcé, les gens ont fait passer le message sur les réseaux sociaux et les utilisateurs sont dans une meilleure disposition quand ils s’adressent au service technique. Cela dit, l’humour de Mailchimp ne convient pas à tout le monde. Ce fut donc un choix osé qui les coupa de certains clients potentiels.

 

Cet article t’a plu ? Abonnes toi à la newsletter et reçois les prochains articles par mail !

Tu as aimé cet article ? Attends de savoir la suite : découvre des conseils pour mettre en place les mécanismes du design émotionnel sur ton site.

Ne manque pas le prochain billet, inscrit-toi pour connaitre la suite !

9 banques d’images gratuites

Trouver de belles images pour illustrer son site ou son blog, c’est une vraie galère.

Les banques d’images traditionnelles, ça pique les yeux tellement c’est nul. Des photos creuses, standardisées et carrément… ringardes ! Franchement, qui éclate de rire en mangeant de la salade ?!

Heureusement, il existe sur le web de véritables mines d’or pour trouver des photos gratuites, inspirantes et authentiques. Voici ma petite selection de 9 sites pour trouver des belles images gratuites, inspirantes et de qualité.

 

1. Unsplash, ma banque d’image gratuite adorée devant l’éternel

C’est le premier site gratuit que j’ai connu, et depuis c’est une vraie love story : Unsplash est absolument génial. J’ai très souvent des coups de coeur pour leurs belles images. D’ailleurs c’est probablement le site le plus utilisé par les créatifs du web. En fait, Unsplash a pratiquement initié une révolution, parce qu’il a influencé plein d’autres banques d’images gratuites. Merci Unsplash !

On y trouve beaucoup d’images de nature et de paysages urbains. Toutes leurs images sont disponibles au téléchargement directement sur le site : il suffit de cliquer sur celle qui nous plait pour la télécharger. Il n’y a pas de moteur de recherche mais heureusement, on peut faire défiler les images en mode miniatures pour aller plus vite. Potentiel de sympathie maximum !

Petite astuce : L’astuce pour trouver l’image parfaite, c’est d’utiliser Unsplash Search ! Un site indépendant réalisé par un petit français, fan d’Unsplash, qui nous permet de faire le tri des photos en un clic avec des mots clés. Par exemple, je veux une image avec des gens au bord de l’eau, et le moteur de recherche me présente une selection d’image.

photo-1414005987108-a6d06de8769f-2-2

photo-1416339442236-8ceb164046f8-3-2

 

 

2. Death to the Stock, mon autre petit chouchou

Death to the stock, c’est des photos de cool kids californiens, des bureaux trendy et puis surtout les petits détails du quotidien.

Au delà des photos qui me plaisent toujours autant, j’aime beaucoup Death to the Stock pour son esprit startup et sa mission jusqu’au-boutiste (les mecs veulent tuer les banques d’images, rien que ça).

Comment ça marche ? En version gratuite, on s’enregistre par mail et on reçoit des packs de photos à télécharger chaque mois, organisés par thématiques. Il existe aussi la version premium (auquel je suis inscrite), que je trouve très abordable, qui donne accès à toutes les photos précédentes et actuelles, sachant qu’il y a des nouvelles images environ toutes les deux semaines.

deathtostock

deathtostock2

 

 

3. Super Famous, des photos à couper le souffle

Wow ! L’effet wow, c’est la première chose qui vient à l’esprit quand on voit les photos de Super Famous. Ce sont des images absolument superbes qui mêlent des paysages grandioses, des détails fascinants et des architectures modernes.

A connaitre, ne serait-ce que pour admirer la qualité des photos !

superfamous3

4. Gratisography, des photos marrantes et punchy

Gratisography propose des images colorées, punchy, décalées. On n’est pas dans l’authentique, c’est sur. C’est souvent loufoque, mais ça a l’avantage d’être bien différent du style d’Unsplash et de ses petits copains.

272H-2

250H

 

5. Stocksnap.io, pour des scènes du quotidien

Stocksnap.io est une alternative intéressante quand on a besoin de photos plus figuratives et quotidiennes. Pas de photos de grands espaces, en revanche on y voit des scenes de la vie quotidienne. En plus, on peut rechercher des images spécifiques en utilisant des mots clés (« laptop », « coffee », etc.). Un vrai bon plan !

6IFQRKBY19

QDXWH4M6K1

 

6. New Old Stock, exclusivement des photos vintage

New Old Stock se positionne sur un concept de niche et ne propose que des photos vintage. Des scènes de la vie quotidienne au voyage dans l’espace, on découvre des photos historiques, émouvantes et forcément authentiques.

A voir, ne serait-ce que pour l’experience !

new old stock

 

 

7. Snapwire Snaps, de belles images, comme sur Unsplash

Un site de photos similaires à Unsplash, mêlant vie quotidienne, nature et paysages urbains. Snapwire Snaps sélectionne ses photos avec soin, et ça se voit.

Snapwire Snaps

 

8. SplitShire, inégal mais sympa

SplitShire nous promet des photos sympa, avec un « real look ». Le site est pas mal pour une banque d’image gratuite, quoiqu’un peu inégal. Le petit plus, c’est l’organisation par catégories (food, fashion, people, etc.) qui nous permet de mieux cibler les photos qu’on cherche.

splitshire

 

 

9. Jay Mantri, encore un petit cousin d’Unsplash

Jay Mantri est un photographe/designer bien inspiré, qui propose ses photos en téléchargement sur son site. Dans la même veine qu’Unsplash, qui a décidément bien influencé l’industrie de la photo, on apprécie un site minimaliste (zéro pub) et des photos d’ambiances urbaines.

jay mantri

 

BONUS : Découvre 2 ressources supplémentaires pour trouver de jolies images !

Edit : En relisant cette liste pour les besoins d’un autre article du blog, je me suis rendue compte que je n’avais pas mentionné deux ressources que j’utilisais très régulièrement !

Télécharge le PDF et découvre immédiatement ces 2 sites en bonus !
Télécharge le bonus >>

Ma technique pour trouver des mots clés

Maintenant qu’on a compris ce que c’était que le référencement et qu’on a mis en place notre plan de bataille, on va pouvoir parler plus concrètement des techniques de référencement.

C’est l’heure de se lancer dans la recherche de mots clés ! 

Là, j’essaye de mettre les formes, mais autant te prévenir que c’est pas le truc le plus marrant qui soit (ah bon, t’es déjà parti ?) (allez, reviens) Oui, je te fais bosser, mais c’est pour la bonne cause.

 

A quoi sert la recherche de mots clés ?

 

Une partie de ton trafic est susceptible de venir des moteurs de recherche. L’idée, c’est que certains de tes articles vont capter du trafic parce qu’ils vont correspondre à des besoins des internautes.

 

Imagine un p’tit étudiant qui vient d’avoir son premier appartement et qui se retrouve à faire la cuisine tout seul pour la première fois de sa vie. Il va avoir pleeeein de questions existentielles. L’une d’entre elles, et c’est du vécu (ne me juge pas), sera peut-être : comment faire cuire des oeufs durs ?

Dans ces cas là, soit on appelle ses parents (allo, maman ?), soit on cherche sur Google. Notre p’tit étudiant va taper sa question dans Google, qui va lui suggérer en retour des articles et des vidéos.

 

Chercher des mots clés, c’est déceler les besoins des internautes pour mieux y répondre. On a deux objectifs :

  1. On va trouver des mots clés pertinents pour mieux référencer nos articles
  2. On va construire des articles sur mesure qui vont répondre à des questions que se posent les internautes

 

Comment trouver des mots clés en 9 étapes

Voici un bon petit tutoriel pratico-pratique pour t’expliquer comment j’ai fait. On va tout simplement utiliser le moteur de recherche de Google et un autre de leurs services, moins connu, qui s’appelle Google Adwords.

 

Au fait, tu l’auras compris, je ne détiens pas la vérité absolue sur le référencement. Si tu as une méthode différente pour trouver des mots clés, mets moi un petit mot dans les commentaires.

Pour résumer :

  1. Ouvre un fichier Excel. Laisse toi-porter et imagine 20, 30, 50 mots clés intéressants par rapport à ta thématique.
  2. Ouvre Google et tapes ces mots clés dans la barre de recherche. Tu vas voir apparaître des mots complémentaires : rajoutes les dans Excel.
  3. Connecte toi sur Google Adwords Keyword Planner grâce à ton compte Gmail.
  4. Cliques sur l’onglet « Rechercher de nouvelles idées de mots clés », écris ton mot clé et choisis tes critères de recherche (langue, lieu).
  5. Rends-toi sur l’onglet « Idées de mots clés » (c’est optionnel, mais je trouve que la vue est plus précise).
  6. Reporte sur ton Excel le nombre de visiteurs mensuel estimé et le niveau de compétition. Dans mon cas, j’ai choisi de ne garder que la compétition faible.
  7. Rajoutes aussi dans ton Excel les mots clés auxquels tu n’avais pas pensé, en indiquant également le niveau de compétition et le nombre de visiteurs.
  8. Ouvre une page Google et tapes chaque mot clé dans la barre de recherche. Regarde le nombre de pages et reporte-le dans Excel.
  9. Regarde qui sont les 10 premiers résultats de recherche (ceux qui sont sur la première page de Google). Si ces sites sont trop compétitifs, il vaut mieux considérer un autre mot clé.

 

Au total, j’avais plus de 500 variations de mots clés. Au fur et à mesure, j’avais souligné les mots clés qui possédaient le plus grand potentiel. J’ai donc pu réduire la liste à une trentaine de mots clés intéressants.

 

 

Comment évaluer le niveau de compétition d’un mot clé ?

 

Très rapidement, on comprend qu’il faut trier les mots clés, en sélectionnant les plus porteurs et en éliminant les plus compétitifs.

Au début, j’ai cru qu’on pouvait juger de la difficulté d’un mot clé en fonction du nombre de pages existantes. Mais en fait, ça ne s’est pas passé comme ça.

Par exemple, j’ai réussi à me positionner en 2e page sur un mot clé avec un nombre énorme de pages existantes (15 millions), tandis que j’étais à la traine en 7e page sur un autre mot clé a priori moins compétitif, avec seulement 75 000 pages.

 

Et puis j’ai découvert un article qui m’a donné des clés pour évaluer le niveau de difficulté d’un mot clé. L’article est en anglais, et si tu veux le lire, c’est ici.

 

Révélation n°1 :

Quand il existe 60 millions de résultats pour un mot clé, cela ne veut pas dire que l’on a 60 millions de concurrents. Tous ces sites ont intégré cette expression dans une de leur page mais ils ne cherchent pas forcément à se positionner sur ce mot clé.

En fait, l’auteur propose de laisser tomber cette estimation du nombre de concurrent, pour se concentrer à la place sur le sérieux de la compétition.

Peu importe le nombre de sites qui utilisent ce mot clé. La vraie compétition se trouve en fait dans les 10 premiers résultats de recherches. Parce que ce sont ceux que l’on cherche à déloger.

Eh oui ! Positionner son article sur un mot clé, ça signifie en fait de prendre la place de quelqu’un d’autre. Dit comme ça, ça donne de la perspective, non ?

 

Révélation n° 2 :

Chaque mot clé est une compétition. Et qu’il faut savoir choisir ses batailles. Si Wikipédia est en première place et Forbes en deuxième, c’est peut-être le signe qu’il faut laisser tomber ce mot clé.

Il vaut mieux choisir des mots clés pour lesquels on a quand même une chance de s’imposer. Quand j’ai fait mes recherches, j’ai laché l’affaire quand j’ai croisé des sites réputés, connus, avec du contenu régulièrement mis en ligne et disposant probablement de moyens dédiés pour le référencement.

A l’inverse, je suis parfois tombé sur des tout petits sites, pas très bien référencés, avec un contenu et un design moyen. J’ai aussi croisé des sites qui n’avaient même pas renseigné la méta-description. Jackpot ! A priori, ces sites avaient l’air plus faciles à déloger.

Et voilà ! C’est comme ça que j’ai cherché et sélectionné les mots clés les plus pertinents pour mon blog. Si le sujet du référencement, tu peux aussi lire cet article où je t’explique comment poser les bases de sa stratégie.

 

Cet article t’as plu ? Inscris toi à la newsletter !

Référencer son blog : par quoi commencer ?

Quand j’ai commencé mon blog, je ne connaissais rien au référencement. J’en avais plus ou moins entendu parler mais je pensais que ce n’était pas pour moi.

Et puis, j’ai compris que je passais à côté d’un truc. Le référencement, c’est avoir le potentiel de parler à plein de gens qui ont des questions et qui cherchent des choses sur les moteurs de recherche.

 

Référencer son blog, c’est se donner la chance de faire entendre sa voix !

Pour me débrouiller avec le référencement de mon blog, j’ai cherché sur Internet, lu des tonnes d’articles, regardé des vidéos, pris des notes, j’ai même suivi une super formation (on en reparlera plus tard), ce qui a débloqué plein de choses. Je commençais enfin à comprendre.

Et puis il s’est passé un truc en cours de route : je me suis prise au jeu. Le référencement, c’est une sorte de compétition entre soi-même et le reste de l’Internet, et j’ai bien aimé cette petite bataille. Parce qu’en fait, mieux on est référencé, plus on a de trafic. Les 3 premiers articles, ceux tout en haut de la première page de Google, vont capter 75% du trafic sur ce mot clé. Ca donne envie d’entrer dans la compétition, non ?

Alors j’ai décidé de faire les choses sérieusement et j’ai mis un plan en place. C’est ce que je vais te raconter aujourd’hui. Mais dis toi bien que je ne suis pas une experte du référencement, ni une ninja du SEO ! Juste une nana qui s’est débrouillée par elle-même, en cherchant des ressources sur Internet et en testant des trucs.

 

 

Qu’est-ce que le référencement ?

 

Le référencement (SEO, en anglais), c’est l’art de positionner ses billets dans les tout premiers résultats de recherche de Google. Plus on arrive haut dans les résultats de recherche, plus on gagne de trafic.

Google cherche à offrir la meilleure expérience possible aux utilisateurs de son moteur de recherche.

Google a créé un algorithme très perfectionné pour faire ressortir les articles les plus pertinents par rapport à la recherche de l’internaute, ce qui inclue les mots clés dans le texte, la longueur de l’article, etc. Google prend aussi en compte la fiabilité et la réputation du site. C’est comme un concours de popularité : plus les gens parlent de notre site, plus on a de likes et de partage sur les réseaux sociaux, mieux on sera perçu par Google.

 

 Il faut savoir que les principes du référencement ne sont pas gravés dans le marbre : ils évoluent à partir des décisions que prend Google. C’est une sacrée emprise, puisque les choix de Google impactent directement des millions de sites qui essaient de se référencer. Par exemple, Google vient de sortir une mise à jour de son algorithme, qui pénalisera les sites qui ne sont pas compatibles avec les mobiles.

Quand Google fait évoluer ses critères, tout le monde doit se mettre à niveau.

 

 Au delà des techniques et des astuces de référencement, un site a besoin d’une vraie stratégie

 

En fait, au delà des techniques, il faut d’abord développer une stratégie.

 

Hmm, attends, on n’en fait pas un peu trop, là ?

 

Tu trouves ça too much ? Franchement, oui, ça l’est parfois. Si on blogue pour le plaisir sur son p’tit espace à soi, on n’a pas forcément envie de se lancer dans de telles démarches.

Et c’est bien normal. La technicité du référencement s’oppose au plaisir et à la spontanéité qu’on associe souvent aux blogs perso. Par contre, quand on a envie de booster son site ou qu’on envisage de monétiser son blog, c’est là qu’on rentre dans une démarche plus « professionnelle » du blogging.

Moi, je n’ai pas eu peur de me lancer dans une réflexion sur la stratégie (mais je suis un peu geek, alors…). Rien que pour l’exercice intellectuel, ça peut être intéressant de le faire. A vous de voir !

 

Donc, en quoi consiste cette stratégie ?

 

J’ai trouvé cette vidéo extrêmement utile pour m’aider à clarifier une stratégie. C’est en anglais mais c’est facile à comprendre. Si tu veux la voir, c’est ici : http://moz.com/blog/universal-seo-strategy-audit-in-5-steps-whiteboard-friday

Voici les principales questions qui vont aider à construire la stratégie.

Je me suis pliée à l’exercice en imaginant les réponses pour ce blog.

 

  1. Comment est-ce que mon blog répond aux questions, besoins ou problèmes des internautes qui cherchent sur Google ?

Ex : Ce blog propose (pour l’instant) du contenu écrit. Mais ça pourrait aussi être d’autres formats de contenus (video, podcast…), ou bien un produit, un service (une formation, un livre, un webinar), etc.

 

  1. Quelles sont les choses que je propose et qui me sont vraiment uniques par rapport aux autres sites sur le même sujet ?

Ex : Ce blog se différencie (selon moi, hein) par son amateurisme assumé et décomplexé, puisque que je ne suis pas une pro du web, mais simplement une fille comme tout le monde en train d’apprendre à coder.

 

  1. Quelles sont les personnes qui pourraient avoir à cœur de relayer et amplifier les messages de mon blog ? Et pour quelles raisons le feraient-ils ?

Ex : A priori, d’autres personnes en train d’apprendre à coder ou à bloguer pourrait avoir envie de relayer les messages de ce blog, d’autant qu’il existe plein de groupes de discussions très actifs sur facebook sur ces thématiques.

 

  1. De quelle manière vais-je transformer les internautes arrivés sur mon blog depuis les moteurs de recherche en lecteurs fidèles (ou tout autre but ultime du site) ?

Eh oui, une fois qu’on a attiré des visiteurs via les moteurs de recherche, on a envie de les garder plus longtemps sur ton site et même de les voir revenir.

Ex : Mon objectif, c’est de convertir les gens arrivés par l’intermédiaire de Google en lecteurs fidèles, ce qui implique notamment une inscription à une newsletter. Par contre, j’ai pas encore trouvé la solution magique pour avoir tout plein de gens qui s’inscrivent au blog (si je trouve, promis, je t’en reparle).

 

  1. Qu’est-ce que je mets en place pour en faire en sorte que les moteurs de recherche exposent mon contenu aux internautes ?

Et c’est là qu’on arrive dans la technique.

Il y a beaucoup de choses à faire pour bien référencer son blog. Pour commencer, je vais te montrer dans le prochain article comment j’ai fait pour sélectionner des mots clés pertinents sur lesquels je positionne mes articles.

 

Et sinon, t’en penses quoi de tout ça ?

Ca me ferait plaisir de savoir ce que tu penses du référencement. Ajoutes ton grain de sel dans les commentaires !

Créer une landing page sans coder

OK, c’est tricher. Le but de ce blog, c’est d’apprendre à coder ! MAIS c’est important de savoir qu’il existe des alternatives, entre le fait de créer une landing page en la codant soi-même et le fait de totalement déléguer la production de son site à une agence digitale.

Entre les deux, c’est la création d’une page web avec un outil tellement facile qu’on en pleurerait. Un outil génial, à condition d’avoir un petit budget, dont on se refile le tuyau de bouche à oreille dans le milieu startup.

Cet outil s’appelle … (roulements de tambours) … STRIKINGLY !

 

A qui s’adresse cet outil ?

Strikingly répond à un besoin particulier, celui d’avoir UNE page web pour accueillir tes visiteurs. Quand on est une startup, un freelance, quand on veut vendre quelque chose en ligne, on a forcément besoin d’avoir une page dédiée. Cela s’adresse à tous ceux qui veulent mettre en ligne leur CV ou leur portfolio, créer une page business pour leur entreprise, annoncer le lancement de leur produit/service (cad une landing page), valoriser un événement à venir.

Strikingly s’adresse aux pressés qui n’ont pas l’envie ou les compétences pour coder soi-même, ni les moyens de se payer un développeur pour le faire, et qui veulent mettre en ligne leur projet le plus rapidement et simplement possible

Cerise sur le gateau, Strikingly propose des choses très belles, avec un design qui colle bien dans l’air du temps (non pas que ce soit le principal critère, mais ça fait toujours plaisir d’avoir un joli site à montrer).
creer un site avec strikingly

 

Ce que Strikingly ne permet pas de faire:

Pour résumer, Strikingly s’adresse à des gens qui ont besoin de mettre en ligne très rapidement une page unique.

Impossible de créer plus d’une page : c’est la règle du jeu énoncée par Strikingly, ce qui te permet rapidement de savoir si cet outil est pour toi ou pas.

Strikingly n’est pas un site fait sur mesure : il faudra se plier aux modèles de pages préconçus (plutôt bien fichus, d’ailleurs). Mais il faut accepter que le site ne corresponde pas exactement à ce qu’on souhaite. De plus, les sites réalisés avec Strikingly ont tendance à tous se ressembler, alors c’est un choix à assumer.

 

comment utiliser strikingly

 

Et ça coûte combien, cette petite merveille ?

 

Ils proposent 3 tarifications :

  1. Une option gratuite : Tu peux publier autant de sites que tu veux, mais ils auront tous le mot strikingly dans l’URL (ex : monsiteinternet.strikingly.com). Ils parlent aussi la limitation au niveau de la bande passante (bandwidth) mais je n’ai pas compris ce que c’est.
  1. Une option à 8$ par mois pendant un an : tu peux autant de sites que tu veux, et cette fois tu as une URL clean. En cadeau, ils t’offrent un nom de domaine (tu n’auras pas à le payer de ta poche) et la possibilité d’avoir un email personnalisé (tu auras un email plus ‘pro’, du genre bidule@macompanie.com)
  1. Une option à 16$ par mois pendant un an : avec ça, tu as tout le paquet. Bien entendu, tu peux toujours créer un nombre illimité de sites, avec une URL personnalisée et les cadeaux offerts dans le tarif précédent. Mais tu as aussi accès à tous les services complémentaires, pour intégrer des services de paiement et des captures de mail (très important pour le business).

 

 

Ce qui fait la différence entre les tarifications :

  • L’URL personnalisée
  • L’intégration des services complémentaires : Paypal, Google Maps, Mailchimp, Wufoo, les commentaires Facebook, Slideshare, Eventbrite, etc.

Strikingly, ça peut couter cher. Ils te poussent forcément à acheter la tarification ultime, celle où tu vas pouvoir faire plein de trucs géniaux. C’est donc pour ça que les plans gratuits et intermédiaires sont limités. Bref, je t’engage à bien lire les petites lignes sur leur site : https://www.strikingly.com/s/pricing?ref=dashboard 

 

Ce que j’en pense ? 

Strinkingly et moi, c’est une histoire compliquée : j’y vais pleine d’espoir et j’en reviens déçue à chaque fois. Je crée ma page dans mon coin, je teste différents modèles de page, je me creuse la tête sur les informations que j’y place, je peste un peu parce que je n’arrive pas à faire exactement ce que je souhaite…

Finalement, je me retrouve avec une URL qui ne me satisfait pas et je ne peux pas intégrer les services que je souhaite parce que je suis en mode gratuit.

J’hésite un peu, je vais voir les tarifs et à chaque fois ça me pique méchamment les yeux. 16$ par mois pendant un an, gloups… J’en arrive toujours à la même conclusion : il faut vraiment que j’arrive à coder moi-même !

Voilà, moi j’ai toujours été rebutée par les prix et j’ai jamais voulu investir autant pour un site vitrine. Ce qui ne veut pas dire que tu dois l’être aussi ! Clairement, Strikingly propose des sites de qualité, pour des gens qui manquent de temps ou d’expertise. Et ça a un prix.

Ou bien on se satisfait de l’option gratuite et d’accepter d’avoir un URL moins propre, ne serait-ce que pour clarifier son idée et tester l’intérêt auprès du public. En mode #rienàfoutre

 

Concrètement, comment on fait pour créer une landing page ?

  • Connecte-toi sur strikingly.com
  • Ouvre un compte et choisit ta tarification
  • Clique sur « My Sites » et « Create a New Site »
  • Choisis un template (cad un modèle graphique)
  • Rajoute ton texte, ton logo, tes photos, etc.
  • Clique sur « Settings » et dans « Title et URL », rajoute le nom de ton site et modifies l’URL (par défaut, l’URL est comme ça : http://12347634.strikingly.com)
  • Une fois que tu as fini, clique sur « Publish ». Et voilà !

 

Et toi, tu as déjà eu besoin de créer une landing page ?

Racontes-nous ton expérience dans les commentaires !

Et si le web design t’intéresse, tu découvriras ici un article sur le design émotionnel qui t’aideras à créer des sites web irrésistibles !