En tant que graphiste, ce qui m’intéresse a toujours été de pouvoir accompagner au mieux mes clients. Être visible sur le web est une étape primordiale pour beaucoup de projets. C’est pourquoi après une formation en graphisme print, j’ai décidé d’apprendre à coder et à mettre en place des sites web en autodidacte.

Débute alors ma grande aventure dans ce nouveau monde.

Croyez-moi, ce fut laborieux ! Je n’y connaissais rien. 0. Nada.

Je me suis perdue dans les forums, les meet-up, les cours en ligne.

Cherchant à comprendre comment tout ça fonctionnait, comment trouver des sources fiables et pertinentes pour avancer correctement.

Il y a tellement d’informations en ligne ! Je ne savais plus où donner de la tête.
Plus j’en apprenais, plus j’avais l’impression de ne rien savoir.

Dans ma tête, c’était ça :
« Bon, ok je comprends pourquoi c’est bien d’utiliser tel outil. Ah oui, mais si je veux bien faire les choses, il va falloir que j’apprenne ça, mais du coup ça et ça aussi. Puis que je me lance dans ça, car c’est important pour ça et ça…»

J’avais l’impression qu’il fallait que je sache tout faire.

Spoiler : Personne ne sait tout faire.

Là où aujourd’hui je mets deux minutes à installer un élément, à l’époque je mettais deux ou trois jours. J’avais des sueurs froides à chaque fois que je ne comprenais pas d’où venait un problème.

Mais j’ai aussi fait plein de rencontres. J’ai appris à définir ce que je voulais apprendre et à déléguer le reste à des personnes géniales.

Enfin, j’ai appris à dédramatiser : je fais un site web, pas une opération cardiaque, même le pire des bugs ne détruira pas la planète.

Je vous rassure, si j’y ai passé autant de temps, c’est aussi parce que je voulais en faire mon métier.

Note

Dans ce livre, je ne propose que ce que je pense essentiel et utilisable sans avoir à toucher ni aux codes ni aux manipulations trop techniques. J’omets volontairement bon nombre d’éléments qui ne sont pas indispensables pour avoir un premier site qualitatif et fonctionnel.

Sachez aussi que si ce livre donne quelques bases d’éco-conception (car même à petit niveau ça me semble important) que ce n’est pas le sujet ni l’objectif premier de ce livre. Il est là pour vous apporter une base simple à appréhender.
Cependant, en choisissant la solution WordPress.org, un hébergeur éco-responsable, un thème léger et en vous documentant plus dans ce domaine (un article est à venir sur ce sujet, n’hésitez pas à vous inscrire à ma liste !), vous pourrez obtenir quelque chose de très correct côté éco-conception.

Être tenu au courant
des mises à jour et des prochains articles !

Et télécharger gratuitement le livre en PDF *

Vous pouvez vous désabonner
à tout moment
Politique de confidentialité

* Télécharger un document consomme de l’énergie.
Le livre est entièrement publié ici, téléchargez-le que si nécessaire ! Vous pouvez vous inscrire uniquement pour avoir des nouvelles. Cela montrera l’intérêt que vous avez pour mon travail, et ça fait plaisir !

Pourquoi ai-je fait ce livre alors que c’est mon métier ?

Je suis partie de constatations.
Lorsqu’on démarre une activité, on est enthousiaste et motivé. Mais on peut aussi avoir du mal à trouver son rythme et à savoir à quel investissement donner la priorité.

Avoir une identité visuelle et un site web, c’est un peu posé là, comme ça… On peut en avoir vraiment besoin ou on peut se sentir bloqué de pas en avoir. Mais on ne sait pas encore à quel point on est prêt à investir dedans ou on n’est pas encore assez sûr de ce qu’on veut pour ça.

Bref, on devient frileux et si on se décide à faire appel à un pro, on sert le budget au max. Et c’est vrai que même basique, un site internet (et une identité visuelle), c’est forcément investir et s’investir. Payer les compétences d’un professionnel, quel que soit le domaine, ça a un coût.

Cependant, si on réduit les options et le temps de travail pour se donner l’unique objectif d’y mettre le prix minimum, on perd l’intérêt de passer par un expert. Et en étant de l’autre côté du miroir, je peux vous dire que c’est frustrant.

Faire son site soi-même, c’est donc être enfin visible sur le web. C’est ne plus se trouver d’excuses pour ne pas lancer son projet. C’est se faire plaisir d’avoir enfin un espace d’exposition à soi. En contrepartie du temps que vous y passerez, le prix sera sans concurrence.

Mais attention au piège de vouloir un site internet uniquement, car c’est le « passage obligé ».
La question la plus importante est bien : ai-je vraiment besoin d’un site internet ?
C’est important d’avoir conscience que ça prend forcément du temps et de l’énergie et, qu’en plus, écologiquement, un site (même minuscule) n’est pas neutre. Donc autant qu’il soit vraiment nécessaire.

Si la réponse est non, cela sera vécu que comme une charge de travail supplémentaire, pas terrible pour construire un outil impactant. Franchement autant mettre son énergie ailleurs et attendre le bon moment.

Si la réponse est oui, alors cela doit être plus vécu comme une réflexion globale : comment est-ce que je construis mon discours et à qui est-ce que je m’adresse ? Quelle image je veux renvoyer ?

Si vous avez déjà un positionnement établi, cela sera plus simple. Sinon la réflexion autour de la création d’un site est un super exercice et est primordiale. Si vous ne savez pas vraiment les valeurs que vous voulez refléter ou à qui vous voulez vous adresser, c’est le moment pour vous poser les bonnes questions. Ces réflexions seront votre fondation, non seulement pour votre site, mais également pour toute votre future communication.

Il n’y a pas besoin d’avoir un site parfait pour se lancer. Par contre, la qualité se voit.

D’où mon envie de créer ce livre pour vous accompagner à aborder (techniquement et graphiquement) les choses proprement. Cela vous permettra de comprendre vos besoins et de réserver votre argent pour engager des pros avec le budget adéquat, un jour.

Et à ce moment-là toutes les cartes seront en main pour que la collaboration soit top et que le résultat le soit aussi !

Ce livre est pour vous si

  • Vous voulez faire un site internet sans rien n’y connaître
  • Vous voulez mettre en place un site vitrine (textes, images, vidéos) sommaire, mais efficace
  • Vous voulez des solutions simples, avec un rendu professionnel
  • Vous êtes prêt à mettre un minimum de 10 à 20 euros/mois dans votre site
  • Vous êtes prêt à vous investir le temps nécessaire (compter une douzaine d’heures minimum à plusieurs jours)
  • Vous êtes un minimum à l’aise avec le web (faire des recherches, explorer de nouvelles fonctionnalités)
  • Vous n’avez pas peur de découvrir de nouveaux outils numériques
  • Vous souhaitez quelques pistes pour avoir la possibilité de faire un e-commerce
  • Vous voulez des conseils pour créer un univers graphique

Ce livre n’est pas pour vous si

  • Vous voulez du sur mesure
  • Vous avez besoin de fonctionnalités complexes spécifiques à votre projet
  • Vous avez le temps et/ou les capacités, mais vous n’avez pas envie de le faire vous-même
  • Vous n’êtes pas à l’aise avec le web et le numérique
  • Vous ne voulez pas de site internet

Prenez ce livre comme un fil d’Ariane, une vue globale des questions qu’il faudra se poser pour faire un site cohérent avec qui vous êtes et ce que vous proposez. J’ai à cœur d’apporter des solutions simples et efficaces qui permettront d’avoir un site propre et pro. Voici un rapide aperçu de ce que je vous propose dans ce livre :

1 La partie technique

Zoom sur WIX et WordPress.org (je ne parle pas d’autres solutions) et comment faire son choix. Les éléments à prendre en compte pour bien installer la plateforme choisie (nom de domaine, hébergeur, choix de thème et des fonctionnalités, etc.).

2 La partie des bonnes pratiques

Les contraintes légales à connaître et pouvoir rendre son site plus performant grâce à l’UX, l’accessibilité, l’optimisation, le référencement et en introduisant doucement l’éco-conception.

3 La partie esthétique

Mes principaux conseils pour personnaliser son site en choisissant correctement ses couleurs, ses typographies et ses images.

Avant toute chose

  • Juste après se trouve le lexique. Je vous conseille de le lire avant de poursuivre. Il expose les termes techniques qui vous aideront à comprendre ce livre.
  • Je vous propose ensuite de survoler une première fois l’ensemble du livre afin de voir l’intégralité des solutions proposées. Ainsi vous pourrez suivre la piste qui vous intéresse le plus, en toute connaissance de cause.
  • N’hésitez pas à me faire des retours et à me poser des questions par email ou sur mes réseaux sociaux.
  • Tout au long du livre, des liens vous permettront d’accéder à des informations supplémentaires ou aux documentations techniques à jour.
  • Les liens seront reconnaissables comme ceci : Lien

Lexique

Backoffice

Le backoffice est une interface permettant de gérer le contenu de votre site web.
C’est souvent un gestionnaire de contenu (dit CMS – payant ou gratuit) qui met à disposition ce genre d’interfaces simplifiées. Les CMS permettent de construire et d’administrer un site sans connaissance particulière en développement web.
Un nombre incalculable de sites utilisent des CMS pour leur backoffice et ne font développer que l’aspect esthétique et fonctionnel.

Exemple de CMS : WordPress, WIX.

Ci-dessous un exemple du backoffice de WordPress avec des onglets pour vos articles, vos pages, les commentaires, l’apparence, etc. :

Capture d'écran montrant le backoffice de WordPress

Développeur

Un développeur développe des fonctionnalités d’un site sans s’occuper du rendu graphique de ce qui s’affiche à l’écran. Par exemple, il pourrait s’occuper du développement d’un outil de prise de rendez-vous en ligne spécifique à votre projet.
Si tous les intégrateurs utilisent le HTML et le CSS, tous les développeurs web ne parlent pas le même langage.
Je ne m’étends pas trop dessus, car c’est un monde très vaste qui sort du cadre de ce livre.

Graphisme print

Le print est l’ensemble des supports imprimés dans une communication : catalogue, bannière, papeterie, affiches, packaging, etc.

Note

La création de logo est souvent associée au graphisme print (même dans le cas où le logo n’est utilisé que pour un projet web).

Hébergeur et serveurs

Comme son nom l’indique, un hébergeur héberge votre site en fournissant les éléments nécessaires à cela (notamment les fameux serveurs connectés à internet 24h/24 -7j/7). Ils peuvent également proposer la location de nom de domaine.

Mon grain de sel

On peut penser que ce ne sont que d’énormes entreprises un peu fumeuses, mais il existe aussi des indépendants (comme Jérôme) qui proposent ce type de services. Donc ça peut aussi être local et éthique !
Évidemment cela ne sera jamais un service écologique en soi, mais il peut y avoir des intentions faites dans ce sens-là. Après, le choix dépendra de vos envies, de vos besoins et de votre budget. Voir mes suggestions d’hébergements dans la partie WordPress.org.

Intégrateur web

L’intégrateur web va créer votre site web à partir de la maquette produite par le graphiste.
Suivant la complexité du projet, un développeur va aider l’intégrateur pour créer certaines fonctionnalités. Ensuite, l’intégrateur s’occupera de les afficher à l’image de la maquette.
Les langages web utilisés par un intégrateur web sont : le HTML, et le CSS, et parfois le JavaScript.

Le header

L’en-tête d’une page web

C’est la partie où se trouve le menu, en général en haut de page ou sur les côtés. Elle est présente et visible sur toutes les pages.

Le body

Le corps d’une page web

Entre le header et le footer, c’est ce qui contient le contenu d’une page. La forme et la nature du body peut changer à chaque page (blog, e-commerce, présentation, etc.).

Le pied de page d’une page web

L’autre partie présente et visible sur tout site, situé en bas de page.
Il sert souvent à récapituler certaines informations (comme les mentions légales par exemple).

Marketplace

Une marketplace est une plateforme permettant aux vendeurs d’ouvrir une boutique en ligne. Ils n’ont plus à gérer un site web, les paniers, les paiements, etc. Ça leur permet de se concentrer pleinement sur leur métier. Pour se rémunérer, la marketplace prend généralement une commission sur chaque vente.

Il en existe sur tous les sujets (art, artisanat, etc.).

Par exemple :

Etsy est une marketplace qui permet aux artisans de vendre leurs créations.

Le Google Play est une marketplace qui permet aux développeurs de proposer des applications Android.

Udemy est une marketplace qui permet aux créateurs de formations en ligne de vendre directement leurs cours.

Nom de domaine

C’est l’adresse de votre site internet et votre identité commerciale sur le web. Il ne vous appartient que durant un temps donné (sur location renouvelable annuellement, souvent automatiquement). Il est souvent inclus dans le prix de l’hébergement, mais
pas toujours.

Il se termine en général par .com, .fr, ou .org (il existe des milliers de terminaisons possibles). Par exemple, mon nom de domaine est quifaitmouche.com. Plusieurs noms de domaine peuvent pointer sur un même site. Cela peut être utile
lorsqu’il y a risque de confusion avec d’autres orthographes ou la volonté d’optimiser les chances de trouver un site.

Par exemple, si vous tapez cecileuzel.com (mon prénom et nom), cela vous ramène sur mon site quifaitmouche.com.

Plugin (ou extensions)

Ce sont des extensions que on rajoute pour avoir une fonctionnalité que on ne possède pas initialement dans son logiciel ou dans son thème.
Un plugin n’a pas besoin d’avoir de relation avec les auteurs du logiciel principal. Sur WordPress, par exemple, n’importe qui peut en créer un et le mettre à disposition du public. Il y en a des mieux que d’autres, d’où l’importance de bien les sélectionner.

SEO (référencement)

ou Search Engine Optimization (optimisation pour les moteurs de recherches)

Tout ce qui est mis en œuvre pour améliorer le classement d’un site internet sur les pages de résultats des moteurs de recherches.

Support

C’est le service client et la documentation qui sera associé à un outil ou un service.

Responsive

Un site web responsive est un site web qui s’adapte aux différents types de supports sur lequel l’utilisateur s’en sert (ordinateur, tablette, téléphone). Aujourd’hui, plus de 50% des visiteurs d’un site web sont sur mobile, donc il est indispensable d’avoir un site web responsive.

Format desktop (ordinateur)

Format mobile

Thèmes et templates

Un thème

C’est un ensemble de fichiers qui a pour rôle de modifier et personnaliser l’apparence globale de votre site. En fonction de votre choix, les couleurs, les typographies et les templates utilisés ou mis à votre disposition seront différents. Certains thèmes sont très neutres et vous permettront de personnaliser votre site pratiquement sans contrainte. Mais d’autres ne permettront que peu de flexibilité.

Un template

C’est un ensemble de gabarits proposés par un thème qui permettent de mettre en forme des pages d’un site internet (au niveau de la structure et de la mise en page, utilisant parfois un texte alternatif comme simulateur de contenu). Ces gabarits utilisent l’univers proposé par le thème (couleurs, typo, etc.) pour compléter le design.

Un constructeur (“builder”)

Le constructeur est un outil permettant de construire des pages sur mesure avec une interface simple et intuitive, sans avoir besoin de coder. Certains thèmes WordPress incluent un constructeur par défaut pour vous aider à créer vos pages. Par exemple, le thème DIVI propose le constructeur d’Elegant theme (vous pouvez voir à quoi ça ressemble sur cette vidéo).

Note

Suivant les projets, certains sites sont codés entièrement. Mais souvent, les intégrateurs se servent des constructeurs (pour les projets sur mesures) pour créer l’ossature des sites web et faire certaines parties du design. Tout ce qui n’est pas faisable avec le constructeur sera alors intégré en codant.

UX design (ou design d’expérience utilisateur)

C’est l’expérience globale vécue sur un site internet ou une interface digitale, c’est-à-dire l’ensemble des interactions qui est ressenti par l’utilisateur.

Note

L’UX = ergonomie + design + interface + responsive + marketing
L’UI design (design d’interface utilisateur) est la conception d’une interface.

Web-designer

Le web-design est la conception de l’organisation et du graphisme d’un site web. À l’instar de l’architecte, le web designer ne construit pas le site en ligne. Il crée une maquette représentant le site à partir de la charte graphique et de l’identité visuelle
liées au projet. Une fois la maquette validée, ce sera au tour de l’intégrateur de s’en servir pour créer le site web.

Note

Il est possible d’intégrer un site web sans maquette pour des sites simples.
C’est d’ailleurs ce que je vous propose dans ce livre. Cependant, il reste nécessaire de bien réfléchir à vos besoins afin de faire des choix cohérents (comme le thème et le template que vous utiliserez).
Par contre, pour des projets sur mesures et/ou complexes, se passer de ces deux étapes n’offre pas le même champ de créativité ou de recherche. De plus intégrer sans savoir où on va peut facilement rajouter de la confusion et ralentir le projet. Cela reviendrait à construire une maison sans faire de plan au préalable.

Ressources

Dictionnaire du web marketing et SEO
Lexique pour webmaster

Être tenu au courant
des mises à jour et des prochains articles !

Et télécharger gratuitement le livre en PDF *

Vous pouvez vous désabonner
à tout moment
Politique de confidentialité

* Télécharger un document consomme de l’énergie.
Le livre est entièrement publié ici, téléchargez-le que si nécessaire ! Vous pouvez vous inscrire uniquement pour avoir des nouvelles. Cela montrera l’intérêt que vous avez pour mon travail, et ça fait plaisir !

La partie technique

Avant toutes choses

  • Avoir un site web ne fait pas tout. Vous pouvez même vous lancer sans ! La simple création d’un site web ne fera pas décoller votre activité. Une fois mis en ligne, il faudra le communiquer autour de vous et mettre en place une stratégie marketing.
  • Faites attention de toujours avoir vos informations importantes (numéro de téléphone, descriptifs de vos services/produits, etc.) et votre page de mentions légales à jour et facilement trouvables sur votre site. Quand une personne arrive sur votre site web, c’est avant tout pour trouver des réponses à leurs questions.
  • Il n’est pas nécessaire d’avoir un site parfait dès le départ pour le mettre en ligne. Mais attention à ne pas confondre perfectible et de mauvaise qualité : Il vaut mieux ne pas avoir de site du tout qu’un site complètement bâclé.

Pourquoi ne proposer que Wix et WordPress.org comme solution ?

  • Il existe des tonnes d’outils pour créer un site web. Mais trop de solutions tuent la solution. Il serait moins pertinent et complètement indigeste de tout présenter.
  • Ce sont des solutions que je connais bien et que j’ai pu suffisamment tester pour savoir qu’elles seront appropriées.
  • De plus, ce sont des plateformes populaires et donc bien documentées. Si vous avez une question sur Wix ou WordPress qui n’est pas abordée dans cet ouvrage, vous trouverez en général rapidement la réponse sur Google.

Globalement que faut-il pour faire un site web ?

Pour faire un site web, on a besoin :

  • D’un hébergeur (qui va héberger le site sur un serveur)
  • D’un nom de domaine (la plupart du temps fourni par l’hébergeur)
  • Du contenu du site (la présentation de vos services et produits, votre blog, etc.). Attention, la réflexion autour du contenu ce fait en amont. C’est guidé par les besoins définis à ce moment-là que vous ferez de meilleurs choix pour le reste. Voir la checklist
  • Du design du site (parce qu’un beau site, c’est mieux qu’un site moche)

En gros, créer un site, c’est un peu comme louer un appartement. Le propriétaire (l’hébergeur) va mettre un espace à disposition pour vous (le serveur), et aussi vous fournir une adresse (le nom de domaine).

Vous devrez ensuite rajouter le contenu : les habitants et les meubles (on ne choisit pas le même appart’ si on est deux ou dix, d’où l’importance d’avoir une idée du contenu en amont).

Pour finir, afin de rendre l’habitation plus accueillante, personnelle et agréable, il ne faudra pas oublier la déco.

Six questions importantes à se poser avant de commencer !

1 Quel est l’objectif de mon site ?

Vendre mes produits ? Augmenter ma notoriété ? Avoir plus de client ? Me faire plaisir ? etc.

2 De quelles fonctionnalités ai-je besoin ?

Un site vitrine avec possibilité de newsletter ? Une boutique en ligne ? Un blog ? etc.

3 Comment vais-je gérer la configuration et maintenance du site ?

Je veux apprendre comment faire (et c’est pour ça que je lis ce livre).
Je ne veux pas m’en occuper donc je demanderai à un prestataire une fois que mon site sera en ligne.
Je ne le ferai pas (le meilleur moyen pour que votre site tombe en panne dans un an sans que vous compreniez pourquoi).

4 Comment vais-je créer le design du site ?

Je compte m’appuyer sur un thème de base.
J’ai confiance en mon sens artistique pour créer un joli site.
Je demanderai à mon cousin qui connaît bien Photoshop.

5 Qui sera mon audience ou ma cible ?

Votre site devra être réfléchi différemment suivant si vous vous adressez à des ados ou à des personnes âgées par exemple.

6 Quel sera le contenu du site ?

Conseils

  • N’hésitez pas à faire des recherches internet dès que vous bloquez quelque part.
  • Pour vos recherches techniques, l’idéal est de les faire en anglais. Si vous maîtrisez cette langue, les résultats seront bien plus pertinents.
  • N’hésitez pas à chercher sur YouTube. Une vidéo peut être plus parlante qu’un article de blog. J’ai d’ailleurs mis quelques liens par-ci par-là pour que vous visualisiez mieux certains outils.
  • Attention toutefois à la date de l’article ou de la vidéo. Plus c’est récent, mieux c’est !
  • Préparer vos contenus à l’avance, ça vous permettra d’en tenir compte lors de la création de votre site.

Les plateformes

WIX

C’est une plateforme qui permet de créer des sites web directement via l’interface visuelle.
WIX met à disposition un certain nombre de thèmes, templates et de nombreux plugins qui permettent de personnaliser un site à son goût et son besoin.
Vous dépendez du cadre que vous propose la plateforme, mais il permet déjà pas mal de choses. Elle héberge votre site et le code lui appartient. En contrepartie Wix gère entièrement la maintenance technique (mise à jour et sauvegarde).

Voir le site de WIX

WordPress

Il existe deux WordPress : WordPress.com et WordPress.org.
Dans ce livre, j’abrègerai les deux en : Wp.com et Wp.org.
Wp.com est peu développé par la suite, mais il me semble important de l’évoquer pour que vous ne fassiez pas de confusion.

WordPress.com

Il se rapproche fortement de la solution de WIX.
Wp.com héberge votre site et possède votre code en contrepartie de la maintenance technique. C’est pour cela que les thèmes et plugins sont plus limités que sur WordPress.org, mais vous aurez quand même largement le choix.
Par contre, le backoffice est similaire sur les deux WordPress.

Voir le site de Wp.com

WordPress.org

Dans cette solution, vous n’avez que le backoffice, à vous de choisir un hébergeur et de l’installer dessus. À vous de rechercher, installer et configurer thèmes et plugins. À vous de faire les maintenances et les sauvegardes régulièrement. Par contre, vous aurez une capacité d’évolution et de personnalisation biiiien plus importante (même s’il vous faudra passer par un professionnel pour vraiment en profiter). C’est le CMS le plus populaire et donc vous n’aurez aucun mal à trouver des supports et de la documentation. Il a de nombreux avantages, mais si vous partez sur cette solution il est évident que le démarrage vous prendra plus de temps et plus d’énergie que pour un Wp.com ou un Wix.

Voir le site de Wp.org

Aperçu global

PrixSimplicité de
mise en place
Possibilité de
Personnalisation
Entretien
(mises à jour, sauvegardes)
WIXDe 0 à 24,50 euros mensuels
Recommandation minimum : formule à 12,50 €
Voir les prix
++++Inclus
Wp.comDe 0 à 45 euros mensuels
(recommandation minimum : formule à 12,50 euros/mois)
coût annuel du nom de domaine .com/.fr
à partir de la deuxième année
Voir les prix
+++Inclus
Wp.org0 euros pour WordPress.com
coût de l’hébergeur
coût annuel potentiel du thème
coût annuel potentiel de plugins
(tous ceux que je recommande sont gratuits)
coût annuel du nom de domaine
= Peut aller de 5/10 euros/an à plusieurs centaines
+++Non inclus
HébergementNom de
domaine
Possibilité de
e-commerce
Flexibilité d’évolution
WixInclusInclus en extension .wix.com en formule gratuite
Inclus en .com ou .fr en formule premium
Oui
Plutôt pour
les petits commerces
(100 produits max)
(Offre business à
20.40€/mois recommandé)

Impossibilité de transférer ou exporter le contenu de votre site si besoin.
Changement de template et personnalisation possible dans le thème choisis, mais changement de thème impossible sans devoir repartir de 0.
Wp.comInclusInclus en extension .WordPress.com en formule gratuite
Inclus en .com ou .fr pendant 1 an en formule premium
Non en gratuit
Oui en premium
Plutôt pour les petits commerces (à partir de l’offre business à 25€/mois)
++
Changement de thème possible (avec un gros travail de refonte à prévoir tout de même)
Possibilité d’exporter votre site avant sa suppression afin de l’importer sur WordPress.or
Wp.orgNon inclusNon-inclusoui
Pour commerces de petites à très grosses capacités
+++
Si vous passez de Wp.com à Wp.org vous pourrez facilement importer le .com dans le .org pour travailler à partir du contenu déjà créé.
La flexibilité dépendra du thème choisi. Cependant un changement de thème ou technique est toujours possible (avec un gros travail de refonte à prévoir)
Possibilité d’exporter votre site avant sa suppression.

WIX ou WordPress.com ?

Comparons ce qui est comparable !

Les deux proposent des prestations similaires. Le résultat est important car je ne parlerai ensuite que du vainqueur ! Quel suspens 😉

CritèresWixWp.com
Facilité d’inscription+++++
Facilité de prise en main+++
Facilité de personnalisation++-/+
Intuitivité générale+++-/+
Évolution possible++

Mon grain de sel

Pour ma part, je n’avais jamais utilisé ces deux options (je me suis mis à Wp.org directement).
J’ai donc ouvert des comptes et j’ai testé les deux, pour vous donner mon point de vue. Mon jugement est objectif, car je n’avais jamais fait de site ni avec l’un ni avec l’autre.
Avec WIX j’ai eu l’impression qu’on me guidait. Très vite, en farfouillant l’interface, j’ai pu percevoir beaucoup de possibilités pour pouvoir personnaliser mon site si besoin.
Pour Wp.com, j’ai cru comprendre que la personnalisation pouvait être plus poussée que sur WIX. J’ai réussi à m’en sortir, car je connais Wp.org et que le backoffice prend une forme similaire. C’est vrai qu’il y a possibilité de faire pas mal de choses. Mais si j’en attends une expérience similaire à celle de WIX, elle est clairement moins intuitive tant dans le choix du thème que dans la compréhension de l’interface.
En plus les options intéressantes (référencement, suppression de la pub, etc.) de WP.com se trouvent dans les offres les plus élevées alors qu’avec WIX c’est inclus dès les offres les plus basses.
Si on choisit une de ces solutions, a priori, le but, c’est pour ne pas se prendre la tête, donc mon jugement est franc.

Winner : WIX

Le point noir de WIX

Si vous souhaitez changer de thème ou changer de plateforme par la suite, il vous faudra repartir de 0. Contrairement à Wp.com où vous pourrez plus facilement changer de thème en gardant votre contenu ou exporter ce contenu pour le réutiliser ailleurs (sur Wp.org par exemple).
Choisir Wp.com pour anticiper Wp.org ?
La bonne raison qui vous pourrait vous faire pencher vers Wp.com serait par ambition de bifurquer sur Wp.org ensuite. Ça peut être intéressant pour un site de type blog où il peut y avoir très vite beaucoup de contenu. Cela permet d’avoir un site plus simple à mettre en place tout en commençant à se familiariser avec le backoffice de Wp.org. Vous pourrez ensuite passer sur Wp.org sans perdre tout le travail effectué jusque-là.

WordPress.org

Hors compétition

Pourquoi hors compétition ?

Parce qu’il vous demandera plus de travail sans aucun doute.
Ça sera moins facile à mettre en place, ça demandera plus d’entretien et c’est celui qui pourrait vous revenir le plus cher. Ce sera à vous de choisir : votre hébergement, votre thème, vos plugins, de configurer le tout et d’en faire la maintenance. C’est également pour toutes ces raisons qu’il est plus sensible aux cyberattaques (rassurez-vous, il y a des armes simples à mettre en place contre ça).

Pourquoi j’en parle ?

Car ça reste une option accessible et qui vous permettra de donner une autre dimension à votre site si vous le souhaitez.
C’est important d’avoir conscience qu’un site est vivant et évolutif (si vous vous en occupez bien sûr). Avec cette option vous serez libre de faire tout ce que vous souhaitez, même ce que vous ne prévoyez pas encore.
C’est une solution qui vous permet d’anticiper vos besoins, de vous garder toutes les options possibles ouvertes. En choisissant cette option vous appuyez votre volonté d’investir dans votre projet autant maintenant que dans le futur.

Du coup, WIX ou WordPress.org ?

Les +Les –
WIX, l’option locataire Rapidité de mise en ligne.
Un large choix de thèmes et plugins, fonction éditeur possible.
Facilité de personnalisation.
Maintenance technique automatique.
Thèmes, plugins et référencement entièrement pensé par WIX pour WIX, donc pas de risque dans son choix
Votre site ne vous appartient pas, vous dépendez des outils que WIX met à votre disposition.
Si vous souhaitez changer d’hébergeur ou rajouter une fonctionnalité particulière vous ne pouvez pas.
WIX a la propriété intellectuelle de votre site, si vous partez de WIX, vous perdez tout le travail de design et de contenu mis dedans (aucun moyen d’exportation).
Difficile de concurrencer un site réalisé sur mesure par un graphiste ou un référencement fait par un spécialiste. Et ils ne pourront pas faire plus que ne propose WIX.
Wp.org, l’option propriétaireVotre site vous appartient complètement : vous pouvez l’héberger où vous souhaitez, vous pourrez rajouter toutes les fonctionnalités nécessaires, faire un design à partir d’un thème ou sur mesure, etc.
Un large choix de thèmes et plugins, constructeurs de pages possibles.
Outil très utilisé par les pro qui pourront vous aider, modifier et faire évoluer votre site facilement si vous faite ensuite appel à eux.
Évolutions techniques et graphiques possibles quasi infinies.
Mise en place plus longue.
Choix de l’hébergement à faire soi-même.
Choix du thème et des plugins à faire soi-même parmi des options plus ou moins bonnes.
Configurations à faire soi-même.
Maintenance à faire soi-même.
Pour pouvoir profiter de toutes les possibilités que propose Wp.org, il vous faudra au moins l’expertise d’un pro et/ou prendre le temps de vous formez de manière approfondie.

Comment faire son choix ?

Voir l’image en grand sur téléphone

Note

Cela peut être aussi être intéressant de faire le calcul de combien votre site vous coûtera sur 3 ans, en fonction des options que vous prenez. Par exemple avec l’offre à 12,50€/mois de WIX : (12,50 x 12) x 3 = 450€.

Ressources

Comparatif avec d’autres plateformes
Comparatif WIX/WordPress
Descriptif de WIX
Descriptif de WordPress
Les avantages et inconvénients de WIX, vidéo que j’ai trouvé très explicite

Votre nom de domaine

Rappel

C’est l’adresse de votre site internet et votre identité commerciale sur le web. Il ne vous appartient que durant un temps donné (sur location renouvelable annuellement, souvent automatiquement). Il est souvent inclus dans le prix de l’hébergement, mais pas toujours.
Il se termine en général par .com, .fr, ou .org (il existe des milliers de terminaisons possibles). Par exemple, mon nom de domaine est quifaitmouche.com.
Plusieurs noms de domaine peuvent pointer sur un même site. Cela peut être utile lorsqu’il y a risque de confusion avec d’autres orthographes ou la volonté d’optimiser les chances de trouver un site. Par exemple, si vous tapez cecileuzel.com (mon prénom et nom), cela vous ramène sur mon site quifaitmouche.com.

Pour WordPress.org

Si vous choisissez l’option Wp.org, ça sera à vous de choisir votre hébergeur.
Prenez votre nom de domaine avant ou en même temps que la création de votre compte.
Ainsi, lorsque vous installerez WordPress, votre URL sera directement associée à votre site. C’est important car si vous le prenez ailleurs, cela demandera un acte plus technique, ce qui est évitable.

Pour Wix

Vous n’aurez pas à vous occuper de votre hébergement. Cependant sans l’offre Premium votre URL se terminera par .wix.com. Pas très pro. Passez en premium pour pouvoir choisir une URL avec une extension avec uniquement .com ou .fr. Vous pourrez acheter le nom directement chez WIX.

Passez sur Wp.org tout en gardant le nom de domaine créer sur Wix ?

Lorsque vous aurez fait votre choix d’hébergeur, faites la demande d’un nom de domaine au même endroit. Choisissez le même nom de domaine que vous avez déjà sur Wix. Vous aurez alors le choix entre deux types d’options (la formulation peut être différente suivant l’hébergeur) :

[ce nom de domaine] «Existe déjà. Il vous appartient ? Transférez-le»
«Il est à vous et vous ne voulez pas le transférer, vous pouvez commander uniquement un hébergement et l’associer.»
Choisissez la solution qui transfère votre nom de domaine à votre nouvel hébergeur.Dans mon exemple, la solution 1.

Conseils

  • Faites qu’il soit facilement prononçable et communicable.
  • Attention à ce que ce ne soit pas déjà une marque existante et déclaré (même si le nom de domaine n’a pas encore été acheté)
  • Si vous êtes en création d’entreprise, vérifiez bien que l’URL associée au nom de marque que vous voulez communiquer soit disponible avant de le crier sur les toits. Le risque étant de se rendre compte qu’il ne l’est plus. Vous devrez alors choisir un nom de domaine différent de votre nom de marque, rendant la communication et le marketing plus difficile.

Note

Si possible acheter votre nom de domaine au moins en .fr (si vous êtes français) ET en .com, même si vous l’un des deux ne vous sert pas pour l’instant. Cela évitera qu’un concurrent ou un site peu recommandable ait une URL trop proche de la vôtre.
Dans l’idéal, faites une redirection de la deuxième URL pour qu’elle pointe également sur votre site. C’est un acte qu’il faut réaliser via son compte hébergeur. Je vous invite donc à vous documenter chez celui que vous aurez choisi. Cherchez dans leur support : redirection nom de domaine.

Ressources

En savoir plus sur les noms de domaines
Voir si son nom de domaine est disponible
Vérifiez les marques déjà existantes

Avoir une e-boutique

Avant toutes choses !

  • Avoir un e-commerce c’est un commerce, donc cela ajoute pas mal de choses supplémentaires à un simple site vitrine.
    Cela implique devoir enregistrer des données (au moins nom, prénom, adresse). Et donc il faut bien se renseigner pour savoir gérer correctement et légalement ces données (voir RGPD).
  • Cela demande un travail régulier d’organisation et de vente : mettre des produits, paramétrer la TVA, faire de la comptabilité, communiquer dessus, etc.
  • Il faut faire attention à la maintenance du site afin d’être sûr que le site n’est pas obsolète, avec le risque de contenir plus de failles. Voir Maintenance

L’option de la marketplace

Une marketplace est une plateforme permettant aux vendeurs d’ouvrir une boutique en ligne sans avoir à gérer un site web, la gestion des paniers, des paiements, etc., ce qui leur permet de se concentrer pleinement sur leur métier.
Par exemple : Etsy, Udemy, Google Play, etc.

Pour qui ?

  • Pour ceux qui ne veulent pas se prendre la tête.
  • Pour ceux qui débutent tout juste et/ou qui n’ont pas de communauté déjà construite et qui veulent profiter de la visibilité qu’offre cette option.
  • Pour ceux qui détestent les réseaux sociaux ou faire du marketing (même si ça demandera autant de travail que pour les autres solutions si vous voulez de vrais résultats et non pas juste récolter les gens en errance sur ces marketplaces).

Coût

Suivant la marketplace choisie (+ commission sur chaque vente).

Ressources

Liste des marketplace en France

Mon grain de sel

Lorsqu’on a envie d’avoir son propre e-commerce, cette option peut sembler peu appropriée ou un peu décevante. Néanmoins, avoir un site vitrine et renvoyer vos clients sur votre page boutique créée en marketplace est une solution qu’il ne faut pas mettre tout de suite à la poubelle. Elle sera beaucoup moins contraignante techniquement (en termes de gestion de données, encaissement, compta, affichage TVA, etc.) et peut offrir une visibilité supplémentaire.

L’option commerce WIX

Pour qui ?

  • Pour ceux qui partiront sur un site WIX (évidemment).
  • Pour ceux qui veulent quelque chose de rapide à mettre en place.
  • Pour ceux qui n’ont pas envie de se mouiller dans des configurations et des maintenances (elles sont gérées par Wix).
  • Pour ceux qui veulent quelque chose de simple dans l’utilisation et sans fonctionnalités sur mesure.
  • Pour ceux qui ne veulent pas une boutique trop grosse (et qui n’ont pas l’ambition d’avoir plus d’une centaine de produits à mettre en ligne).
  • Pour ceux qui veulent un e-commerce pour tester le travail que ça demande et/ou la demande de clients.

Coût

Forfait Entreprise et e-commerce de 17€ à 35 €/mois TTC.

Ressources

Les prix de WIX directement sur leur site
Avoir un avis plus détaillé sur la création d’une boutique WIX

L’option Woocommerce pour WordPress

Pour qui ?

  • Pour ceux qui partiront sur un site WordPress (non ! C’est pas vrai ?).
  • Pour ceux qui sont prêts à passer du temps sur la configuration.
  • Pour ceux qui ont la volonté de prendre régulièrement du temps pour l’entretien de leur site (maintenance à faire soi-même).
  • Pour ceux dont l’e-boutique sera l’essence de leur activité et qui peut être destinée à grossir.

Coût

Gratuit (pour la version de base, déjà très complète).

Ressources

Voir Plugins

Être tenu au courant
des mises à jour et des prochains articles !

Et télécharger gratuitement le livre en PDF *

Vous pouvez vous désabonner
à tout moment
Politique de confidentialité

* Télécharger un document consomme de l’énergie.
Le livre est entièrement publié ici, téléchargez-le que si nécessaire ! Vous pouvez vous inscrire uniquement pour avoir des nouvelles. Cela montrera l’intérêt que vous avez pour mon travail, et ça fait plaisir !

Le choix WIX

La démarche

1 Créer son compte

2 Créer son site en suivant la procédure (ultra-simple, laissez-vous guider par la plateforme.)

Captures d'images pour montrer comment le fonctionnement de WIX : questionnaire du début

Captures d'images pour montrer comment le fonctionnement de WIX : questionnaire sur les fonctionnalités

Captures d'images pour montrer comment le fonctionnement de WIX : choix du thème

3 Attention au choix de votre thème !

Si vous en validez un et travaillez beaucoup dessus, pour ensuite vouloir en choisir un autre, vous perdrez tout votre travail.
Vous pouvez tester rapidement plusieurs thèmes facilement en refaisant la démarche plusieurs fois (et en supprimant à chaque fois le site créé juste avant). Vous pourrez toujours faire des changements de templates, de couleurs, de mise en page, changer le contenu, rajouter des pages, etc. après l’étape 2 et 4, par contre, vous ne pourrez plus changer de thème.
Votre choix est fait ?

4 Validez.

Paf ! Votre site est presque prêt.

5 Personnalisez votre site (choix des templates, des couleurs, etc.).

Mettez les plugins (appelés « applis ») supplémentaires si besoin.
Mettez le bon contenu et les bonnes images.

Captures d'images pour montrer comment le fonctionnement de WIX : backoffice de Wix
Captures d'images pour montrer comment le fonctionnement de WIX : backoffice de Wix

6 -Vous rendre visible pour Google (plan de référencement proposé par WIX dans votre tableau de bord ou dans onglet « site »).

Et voilà, c’est fini !

Ressources

Tuto vidéo (2020) pour avoir un aperçu des 6 étapes de mise en place d’un WIX (pour e-commerce ou non)
Tuto vidéo (2020) pour donner un exemple du backoffice et d’une personnalisation de thème

Estimation du temps

De l’inscription à la mise en ligne : d’une douzaine d’heures à plusieurs jours (suivant le temps que vous passerez à personnaliser votre site) + le temps que vous passerez sur la sélection et création des éléments indispensables (design et contenu). Cela dépendra énormément de l’investissement que vous aurez envie de mettre dedans.

Quelle offre choisir ?

Même si le choix reste le vôtre et qu’il dépend de votre projet, je vous recommande de souscrire au moins à l’offre « Artisans et Indépendants ». Il vous permet d’avoir votre nom de domaine, mais aussi de supprimer la pub WIX qui se trouve sur tous les sites des offres inférieures. En plus la bande passante sera plus conséquente (c’est ce qui permettra à un nombre plus important de visiteurs de voir le site en même temps sans ralentissement).

Info : en 2020 cette offre est à 12.50 €/mois (hors réduction spéciale).

Conseils

Au moment de la création de votre site, WIX vous proposera de répondre à un certain nombre de questions afin de vous proposer les thèmes pouvant correspondre au mieux à vos besoins. Je vous conseille cette option afin que WIX vous sélectionne et vous propose directement des thèmes adaptés à votre projet.
Vous pouvez aussi faire le choix d’éditer vous-même votre site. Vous pourrez changer de place tous les éléments, à votre guise. Si vous êtes doué en design, éclatez-vous.
Si vous n’avez pas de compétence en graphisme, utilisez l’éditeur avec parcimonie. Le risque est d’y passer beaucoup de temps pour un résultat… pas terrible.
Cela peut être frustrant d’avoir un site qui ressemble à beaucoup d’autres. Mais parfois mieux vaut un site classique qui soit propre et cohérent qu’un site original qui soit mal fait et incompréhensible.
Prenez plutôt le temps d’explorer Wix, de bien choisir les templates proposés, de modifier les couleurs et la typographie, sélectionnez avec soin vos images, créez un contenu de qualité. Vous arriverez déjà à une personnalisation efficace – Voir Design.

Votre e-commerce

Vous devrez souscrire à une offre Premium permettant la vente.
Si vous créez votre site dans cette optique, choisissez un thème intégrant des pages de vente dès la création. Mais dans tous les cas, vous pourrez rajouter une partie e-commerce sur un Wix déjà existant.

Ressources

Les prix de WIX
Le support de WIX

Être tenu au courant
des mises à jour et des prochains articles !

Et télécharger gratuitement le livre en PDF *

Vous pouvez vous désabonner
à tout moment
Politique de confidentialité

* Télécharger un document consomme de l’énergie.
Le livre est entièrement publié ici, téléchargez-le que si nécessaire ! Vous pouvez vous inscrire uniquement pour avoir des nouvelles. Cela montrera l’intérêt que vous avez pour mon travail, et ça fait plaisir !

Le choix WordPress.org

Hébergement et installation

La démarche

1 Faire votre choix d’hébergeur. Afin que cela reste simple, le plus important sera de choisir un hébergeur qui inclut une installation de WordPress par leurs soins.

Je vous propose : OVH, O2switch ou Infomaniak.

OVHO2switchInfomaniak
Prix
(indicatifs)
À partir de 2,99 euros/moisOffre unique à 5 euros/moisÀ partir de 5,75 euros/mois
+Pas cher
Renommée mondiale,
mais Français, cocorico !
100 % français
Conscience écologique
Bon support, réactif
Messagerie incluse
Suisse
Conscience écologique importante, Certifié vert
Thèmes de qualité offert à l’installation (thème DIVI par Elegant theme.)
Bon support
Low cost
Support pas forcément performant si problème
Plus pour les experts que le tout publicPas de nom de domaine inclus dans le prix
Nom de domaineOui
1 nom offert la première année puis payant
Oui
1 nom inclus
Non
À acheter en plus sur le site.
Offres
recommandées
L’offre PRO
(messagerie mail incluse)
Offre uniqueL’offre Web
(messagerie non incluse)
L’offre Classic
(messagerie incluse)

2 Prendre votre nom de domaine en même temps et au même endroit.

3 Créer votre compte et installer WordPress depuis l’administration de votre hébergeur.

4 Aller sur votre backoffice WordPress.

Pour accéder à son WordPress, il faut noter votre URL et rajouter : /wp-admin
Par exemple : votrenomdedomaine.com/wp-admin

Vous arrivez sur la page où votre identifiant et votre mot de passe vous seront demandés.
Voici un lien qui vous permettra de mieux visualiser la démarche : Comment accéder à son WordPress

C’est l’accès par défaut, mais il est recommandé de le changer par la suite via un plugin de sécurité (voir Plugins).

Page de login

Backoffice

5 Aller dans le menu Réglages et configurer votre site WordPress
Article pour vous aider dans les configurations

6 Installer et configurer les plugins indispensables (voir Plugins)

7 Choisir et installer son thème (voir Thèmes).

8 Installer et configurer tous les autres les plugins de votre choix (voir Plugins)

9 Commencer la personnalisation !
Comment personnaliser son thème (vidéo en anglais de 2015, mais la personnalisation se fait toujours de façon similaire, vous verrez également que suivant le thème choisi ces options peuvent être plus ou moins nombreuses).

10 Ne pas oublier de sauvegarder (voir Plugins)

Conseils

  • Durant tout votre travail d’installation de votre site, de la création de votre compte hébergeur à l’accès à votre backoffice WP, prenez bien soin de noter tous les codes (et à quoi ils correspondent) qui vous seront donnés.
  • Vous en aurez besoin ensuite pour activer ou accéder au backoffice de votre WordPress, ainsi que pour faire de potentielles manipulations sur votre compte hébergeur.
  • Gardez-les bien, si vous faites appel à un pro plus tard, il vous les demandera forcément.

Estimation du temps

Pour un néophyte, entre les temps de recherches et de choix d’hébergements, d’installation, de recherches de thème, de plugins, de configuration, compter plus ou moins 2 jours. Temps de personnalisation non compris.

Messagerie ?

L’intérêt d’avoir une messagerie chez son hébergeur est de pouvoir se faire créer une adresse mail avec le nom de sa marque.

Exemple : monnom@lenomdemamarque.com (ou .fr).

Vous pouvez ensuite faire une redirection afin que les messages arrivent directement dans votre boite mail habituelle. C’est un acte que je n’aborderai pas ici, car ça dépend de votre hébergeur. Si ça vous intéresse, je vous invite à regarder leur documentation.

Ressources techniques

Comment fonctionne le backoffice WordPress.org (où se trouvent les articles, les menus, etc.) – vidéo 2020
Une autre vidéo sur le backoffice de WP.org (date de 2016, donc certains éléments peuvent être légèrement différents ou pas à la même place, mais globalement c’est très similaire à celui d’aujourd’hui – vidéo plus complète que la précédente, mais plus longue)

Les thèmes et Les templates

Un thème – Rappel

C’est un ensemble de fichiers qui a pour rôle de modifier et personnaliser l’apparence globale de votre site. Voir le lexique

Un template – Rappel

C’est un ensemble de gabarits proposés par un thème qui permettent de mettre en forme des pages d’un site internet (au niveau de la structure ). Voir le lexique

Un constructeur (“builder”) – Rappel

Le constructeur est un outil permettant de construire des pages sur mesure avec une interface simple et intuitive, sans avoir besoin de coder. Voir le lexique

Note

Suivant les projets, certains sites sont codés entièrement. Mais souvent, les intégrateurs se servent des constructeurs pour créer l’ossature des sites web et faire certaines parties du design. Tout ce qui n’est pas faisable avec le constructeur sera alors ensuite intégré en codant.

Le risque de mal choisir son thème ?

Qu’il n’y ait aucune flexibilité de personnalisation. Rien de plus frustrant de ne pas pouvoir personnaliser son site un minimum.
Qu’il devienne obsolète. Cela veut dire que le reste du web va évoluer sans lui et qu’un jour il ne marchera plus bien ou créera des bugs à la moindre mise à jour.

BREF : Un thème pas adapté et/ou peu personnalisable est une perte de temps.

Comment savoir si un thème vaut la peine ?

  • Prévisualiser le thème qui vous intéresse
  • Regarder la date de la dernière mise à jour : plus la dernière mise à jour est récente, mieux c’est. Cela veut dire que le créateur maintient correctement son produit (plus de 5/6 mois sans mise à jour peut déjà être mauvais signe).
  • Vérifier également qu’il soit compatible avec votre version de WordPress et de PHP (normalement avec les dernières versions vu que votre site est tout neuf).
  • Regarder la note globale (plus il est utilisé et bien noté, mieux c’est)
  • Regarder les commentaires (cliquer sur le nombre de votes pour y accéder)
  • Regarder s’il est responsive. Indispensable, s’il ne l’est pas, oubliez-le.

Mettre en place son thème

Menu Apparence > Thèmes > Prévisualisation > Vérifier et choisir son thème > Installer

Si vous avez un thème payant vous aurez une clé API à rentrer pour l’activer complètement. Vous pourrez rentrer cette clé dans l’espace de configuration du thème, qui apparaitra dans la barre gauche de votre backoffice, parmi les autres menus (l’endroit exact peut varier selon les thèmes).

Comment personnaliser son thème (vidéo en anglais de 2015, mais la personnalisation se fait toujours de façon similaire, vous verrez également que suivant le thème choisi ces options peuvent être plus ou moins nombreuses).

Les plugins

Ce sont des extensions qu’on rajoute pour avoir une fonctionnalité qu’on ne possède pas initialement dans son logiciel ou dans son thème.

Le risque de mal choisir un plugin ?

  • Qu’il ne soit pas bien entretenu par son créateur et provoque des conflits lors des mises à jour en créant des bugs (pas forcément grave, mais stressant). Voir Maintenance
  • Que vous manquiez des informations sans vous en rendre compte (par exemple un mauvais plugin d’agenda peut mal se synchroniser avec votre propre agenda, vous faisant louper un rendez-vous). Le risque 0 n’existe pas, mais bien choisir son plugin évitera considérablement les mauvaises surprises.

Comment bien choisir son plugin

  • Regarder la date de la dernière mise à jour : plus la dernière mise à jour est récente, mieux c’est. Cela veut dire que le créateur maintient correctement son produit (plus de 5/6 mois sans mise à jour peut déjà être mauvais signe).
  • Vérifier également qu’il soit compatible avec votre version de WordPress et de PHP (normalement avec les dernières versions vu que votre site est tout neuf).
  • Regarder la popularité avec le nombre d’installations actives.
  • Regarder la note (plus il est utilisé et bien noté, mieux c’est).
  • Regarder les commentaires (noter sur le nombre d’étoiles).
  • S’il rajoute un élément visible sur le site, vérifier l’aspect responsive.

Démarche

L’installation

Menu Extensions > Ajouter > Rechercher une extension (mettre le nom exact si vous en cherchez un en particulier) > Faire vos vérifications > Installer maintenant > Activer

Où configurer

Sur le page de configuration. Une fois installés, les plugins apparaîtront :
Soit de manière visible en tant que menu dans la colonne de menus à gauche du backoffice
Soit toujours dans cette même colonne, mais en sous-menu dans les menus Outils ou Réglages.

Vous pouvez aussi accéder à leur page de configuration en passant par : Extensions > Extensions installées (voir le plugin souhaité et suivre le lien proposé en dessous : Réglages ou Settings)

Les plugins que je vous recommande

Avant toutes choses !

Tous les plugins que je vous conseille ne coûtent rien. Certains proposent des offres premium, mais dans tous les cas les offres gratuites font déjà bien le job.
Votre site et WordPress fonctionnent déjà sans plugin. Un plugin n’est jamais indispensable, même si certains sont très important. Dans tous les cas ce n’est pas parce que vous installez un plugin qu’il faut forcément configurer l’ensemble des options. Vous pouvez très bien vous contenter que de certaines de ces fonctionnalités.
Plus il y a de plugins, plus votre site risque : d’être lent, d’avoir des incompatibilités entre les plugins et/ou le thème, de causer des bugs lors de mises à jour, d’avoir des failles de sécurités. C’est pour ça que c’est important de réfléchir à ceux dont on a besoin et de supprimer ceux dont on ne se sert pas.

Les INDISPENSABLES
Pour la sécurité de votre site

IthemeSecurity (backoffice en anglais) ou Secupress (backoffice en français)
Le plugin IthemeSecurity Configurer IthemeSecurity (article en français)
Le plugin SecupressDocumentation Secupress

Pour passer votre site en https (plus sécurisé que le http)

Really simple SSL ou via IthemeSecurity
Vous verrez que la première étape est d’avoir accès au certificat SSL. Chez les trois hébergeurs recommandés, cela est automatiquement inclus.
Si vous choisissez un autre hébergeur, il faudra peut-être leur en faire la demande avant d’activer l’extension.
Plugin et configurer Really simple SSL


Pour les sauvegardes

Updraftplus
Le pluginConfigurer Updraftplus

Pour le référencement

Yoast
Le pluginConfigurer Yoast
Je vous invite à lire l’ensemble de l’article, mais si vous ne voulez faire que le minimum je recommanderais de configurer au moins les parties :
1.1.1 – les structures permaliens
L’ensemble 1.2 – optimiser vos titres pour le SEO
L’ensemble 1.3 – optimiser vos descriptions
L’ensemble 1.4 – optimiser des images

Les OPTIONNELS (mais pas négligeables)

Liste non exhaustive

Il en existe pléthore ! Évidemment il existe des plugins pour faire des statistiques, des plugins pour créer des newsletters, etc. Je vous propose ceux que j’utilise le plus souvent.

Page de maintenance (pour attendre que votre site soit au poil)

Coming Soon Page, Under Construction & Maintenance Mode by SeedProd
Le plugin
Configuration : Je n’ai pas trouvé de site qui explique simplement sa configuration, mais le plugin reste simple à utiliser (en anglais).

Dupliquer ses pages

Duplicate (car oui, WordPress est ultra pointu, mais sans ce plugin vous ne pourrez pas dupliquer vos pages, et, franchement, c’est vachement utile)
Le plugin
Aucune configuration à faire, il suffit de l’activer.

Gérer les cookies

GDPR Cookie Consent
Le plugin et configurer GDPR Cookie Consent
(Configuration en anglais, mais il y a une vidéo qui montre très explicitement la démarche)

Accessibilité

One Click Accessibility
Le pluginConfigurer One Click Accessibility
(Configuration en anglais, mais c’est une vidéo donc très explicite)

Partage pour les réseaux sociaux

AddToAny Share Buttons
Le pluginConfigurer AddToAny Share Buttons
(Configuration par vidéo en anglais. Elle date un peu, néanmoins le plugin reste très similaire.)

Formulaire de contact

Ninja form
Le pluginConfigurer Ninja form

Gestion de taille d’images

Imsanity
Le plugin
Configurer Imsanity : suivre mes conseils – Voir Optimisation – ou garder leur proposition par défaut

Optimisation de vitesse

Autoptimize
Le pluginConfigurer Autoptimize

Le plugin d’e-commerce

Le site Woocommerce (avec documentation et support)
Et plusieurs liens qui répondront à vos questions (à vous de voir celui qui répond à vos besoins)
Configurer Woo-commerce par WpFormation
(Installer, configurer et utiliser WooCommerce)
Configurer Woo-commerce par WpMarmite
(Sélection d’articles sur tout ce qui se rapporte à la vente de produits en ligne)

Note

Si vous ne vous servez plus d’un plugin, pensez à le supprimer (et non pas juste à le désactiver) dans le menu Extensions !

Maintenance

Pourquoi c’est important de faire une maintenance régulièrement ?

Pour une question de sécurité. Des failles de sécurités sont sans cesse découvertes et réparées par les développeurs. Les mises à jour permettent de garder tout ça à la pointe des réparations. Primordial si vous avez un e-commerce.

Pour qu’il ne devienne pas obsolète. Si vous ne vous occupez pas de votre site régulièrement, internet va évoluer sans lui. C’est ce qui augmentera considérablement le risque de bugs aux prochaines mises à jour. Et si on attend trop, c’est l’effet boule de neige : on n’ose plus les faire, jusqu’au jour où le site est tellement obsolète qu’il faut repartir de zéro.

Pourquoi il y a risque de bug ?

Bien que chaque mise à jour ait été minutieusement testée par les développeurs de WordPress, de vos plugins ou de votre thème, il est possible qu’une incompatibilité existe entre les trois (ou avec la configuration des serveurs de votre hébergeur).

Il est également possible que les développeurs soient passés à côté de quelque chose en faisant leurs tests (personne n’est infaillible). Même s’il est faible, ce risque reste existant. C’est aussi pour ça que tant que on ne fait pas de mise à jour tout fonctionne bien, et là BIM problème. Rassurez-vous, même si un bug apparait, la plupart du temps cela se résout simplement.

Maintenance (quand tout se passe bien)

1 Avant chaque mise à jour, il faut toujours faire une sauvegarde avec son plugin de sauvegarde.

2 Faire les mises à jour (soient toutes en même temps soit l’une après l’autre si c’est un peu stressant) dans le menu Tableau de bord > Mises à jour.

3 On vérifie que tout fonctionne en allant sur son site.

4 On refait une sauvegarde

5 C’est fini

Suite de la démarche (lorsqu’il y a bug)

6 On restaure la sauvegarde qu’on vient de faire (voir Updraft Plus)

7 On fait les mises à jour une à une et on regarde si c’est l’une d’elles qui pose problème

8 Lorsqu’on a trouvé ce qui pose problème, on fait de nouveau une restauration.

9 Certains plugins utilisent des comptes utilisateurs. Vérifier s’il n’y a pas eu déconnexion (en vous reconnectant, le problème sera sûrement résolu).

10 Vérifiez que vous avez bien fait le paiement annuel du thème (si c’est un thème payant, mais ça sera sûrement une opération automatique)

11 Puis on fait les mises à jour de tout ce qui fonctionne, sauf du vilain petit canard

12 Et on laisse comme ça jusqu’à la maintenance du mois prochain, faites alors vos mises à jour normalement. Entre-temps, le bug aura peut-être été réparé.

13 Si le problème persiste, il faut changer l’élément perturbateur :
Si c’est un plugin : le désactiver, le supprimer et en mettre un autre avec une fonction similaire à la place. Réajuster le design.
Si c’est le thème : changez de thème. Vous ne perdrez pas votre contenu, mais aurez à trouver un autre thème et à réajuster probablement tout le design. Attention : les mises en pages construites via un constructeur ne permettent pas de garder le contenu si changement de thème, il y a. Pensez à le copier/coller quelque part avant.

14 Si le problème persiste encore, fait appel à un pro qui pourra vous le résoudre.

Note

Si vous n’arrivez plus à accéder à votre backoffice, pas de panique. Vous pouvez faire cela via votre hébergeur, la plupart font leurs propres sauvegardes. Attention aux hébergeurs low-cost, certains proposent cela en option.

Conseils

  • Faites vos mises à jour tous les mois ou deux mois
  • Installez une routine, sinon c’est trop facile à oublier (je fais les miennes et celles de mes clients le premier lundi de chaque mois). Pour les sites vitrines très simples, une fois tous les trimestres, ça marche aussi, mais pensez-y bien.
  • Avec Updraft Plus et les plugins de sécurité proposés, vous pouvez mettre en place des mises à jour et des sauvegardes automatiques. S’il y a un problème, vous recevrez un email de WordPress. L’option est intéressante pour les sites simples avec peu de fonctionnalités.
  • Si devoir assumer votre maintenance vous gêne, je vous conseille de choisir la solution WIX. Sauf si vous préférez payer un pro qui s’occupera de cette partie à votre place.
Bugs sans raisons apparentes (hors mise à jour)
Testez !
  • Demandez-vous la dernière chose que vous avez faite avant le problème et allez jeter un coup d’œil de ce côté-là (il y a de fortes chances que le problème se trouve là, même si vous avez l’impression d’avoir rien fait de spécial).
  • Faites le même processus que lorsqu’il y a un bug lié à une mise à jour (restauration, désactiver/activer) pour vérifier d’où vient le problème (problème lié aux plugins ? Au thème ? Si aucun des deux, c’est possible que cela vienne de l’hébergeur).
  • Si le problème semble lié à l’hébergeur : attendez donc un ou deux jours, voir si cela se résout. Sinon vous pouvez les appeler. Si le problème vient d’eux, vous ne pourrez rien faire de plus qu’attendre qu’ils l’aient résolu.
  • Vérifier si ce n’est pas le compte utilisateur d’un plugin qui se serait déconnecté, en vous reconnectant le problème sera résolu.
  • Contacter un professionnel si vous ne trouvez pas la cause.

Mon grain de sel

Mon premier client avait un site qu’il n’avait pas touché depuis au moins 3 ans.
Tant qu’il ne faisait pas de manipulation aucun bug n’était visible, pourtant tout était obsolète. Lorsque j’ai voulu faire une première mise à jour pour partir sur des bases saines, tout a sauté.
Après avoir fait un malaise et pensé revenir au salariat, j’ai analysé la situation, demandé conseil auprès de professionnels avec plus d’expériences, mais il n’y a pas eu le choix que de repartir de zéro.
Évidemment, c’est un cas extrême. La quasi-totalité du temps, vous n’aurez jamais de problème ou des bugs mineurs. Surtout si votre site n’a pas de grosses fonctionnalités et que vous faites les mises à jour régulièrement.

Conclusion : ce n’est pas parce qu’on a l’impression de faire des mises à jour pour rien que ça ne sert à rien !

Être tenu au courant
des mises à jour et des prochains articles !

Et télécharger gratuitement le livre en PDF *

Vous pouvez vous désabonner
à tout moment
Politique de confidentialité

* Télécharger un document consomme de l’énergie.
Le livre est entièrement publié ici, téléchargez-le que si nécessaire ! Vous pouvez vous inscrire uniquement pour avoir des nouvelles. Cela montrera l’intérêt que vous avez pour mon travail, et ça fait plaisir !

Légalement

Avant toutes choses

  • Il y a toujours de la législation quelque part, sinon ça serait pas drôle ! Pensez bien à adapter cette partie-là à votre situation et à vous renseigner de votre côté (suivant votre projet peut-être y a-t-il d’autres éléments à prendre en compte).
  • Je vous indique plusieurs liens de générateurs de pages légales. Si vous les utilisez, relisez bien les textes et adaptez-les à votre situation. L’idéal étant de les faire relire, voire rédiger sur mesure par un juriste.

Mentions légales

Le but

Permettre d’identifier le propriétaire du site, de valider sa légitimité et de pouvoir avoir ses contacts. Devront notamment être identifiables :

  • Le propriétaire
  • Le webmaster (celui qui s’occupe du site)
  • Le nom et le contact de l’hébergeur
  • Les données légales liées à la société (s’il y a)

Ressources

Trouver les infos à mettre en fonction de votre activité : source officielle
Générateurs de mentions légales

Le RGPD ou Règlement Général de Protection des Données

Le but

C’est un texte de loi qui expliquera ses droits à votre visiteur.

Il a trois objectifs :

  • Renforcer les droits des personnes
  • Responsabiliser les acteurs traitant des données
  • Crédibiliser la régulation grâce à une coopération renforcée entre les autorités de protection des données.

Est-ce que vous êtes concerné ?

Si vous récoltez des données personnelles (quelles qu’elles soient : du simple nom, en passant par l’adresse email pour une newsletter par exemple à l’adresse ou autres). Par exemple : pour une newsletter, ou pour un commentaire

Si vous êtes vendeur ou sous-traitant.

La réponse est oui*

*Voir les ressources et la source officielle pour plus d’exactitude. Mais si vous avez un doute, partez du principe que oui. Source officielle

Qu’est-ce qu’on attend de vous globalement ?

  • Constituez un registre de vos traitements de données
  • Faites le tri dans vos données (ne collectez que les données vraiment nécessaires)
  • Respectez le droit des personnes en matière de consultation, de rectification ou de suppression des données
  • Sécurisez vos données

Comment ?

La forme que ça peut prendre sur votre site :

  • Intégrez le texte RGPD à votre page de mentions légales
  • OU Ajoutez une page (en plus de celles des mentions légales) sur votre site qui s’appellera « Politique de confidentialité ». Mettez le lien dans le footer pour qu’elle soit visible sur tout le site (obligatoire si vous récoltez des données).
  • ET Rajoutez un bandeau d’acceptation et refus des cookies (obligatoire si votre site utilise des cookies) – En savoir plus sur les cookiesSe mettre en conformité avec les cookies

Ressources

Source officielle
Comprendre le RGPD
Le RGPD et WordPress (date de 2018, donc à actualiser, mais explique globalement cela très bien)
Générateur de page de confidentialité

Les CGV ou Les Conditions Générales de Vente

Le but

Ce sont les informations légales et obligatoires à indiquer sur tout site ayant une activité commerciale. Elles encadrent le processus de vente et expliquent la politique commerciale de la société.
Elles sont importantes pour signifier à chacun (vendeurs et acheteurs) leurs responsabilités.

Ressources

Source officielle
Générateur de page CGV

Être tenu au courant
des mises à jour et des prochains articles !

Et télécharger gratuitement le livre en PDF *

Vous pouvez vous désabonner
à tout moment
Politique de confidentialité

* Télécharger un document consomme de l’énergie.
Le livre est entièrement publié ici, téléchargez-le que si nécessaire ! Vous pouvez vous inscrire uniquement pour avoir des nouvelles. Cela montrera l’intérêt que vous avez pour mon travail, et ça fait plaisir !

Rendre votre site efficace

L’UX (= parcours utilisateur)

Le but

Permettre une visite fluide (que on ne cherche pas mille ans où se trouvent telles informations) et agréable (univers graphique cohérent).

Conseils

  • Savoir à qui vous vous adresser. Réaliser l’ergonomie de votre site en fonction des visiteurs qui sont censés venir (pensez à faire des réajustements si vous vous rendez compte que votre public n’est pas celui que vous croyiez.).
  • N’hésitez pas à impliquer vos utilisateurs : demander leur ce qu’ils pensent de votre site, s’ils s’y retrouvent, comment l’améliorer, etc. Demander à des personnes de votre entourage de trouver certaines informations ou de faire certaines actions sur le site et regardez-les chercher sans les aider. S’ils peuvent vous dire à voix haute comment ils procèdent, c’est encore mieux. Repérer les points de difficultés et essayer de les corriger.
  • Nommez clairement vos pages. Si vous optez pour des noms plus poétiques, essayez de garder quelque chose de compréhensible.
  • De même pour le nom des boutons, des liens, etc, que ce soit intelligible.
  • Éviter de créer des pages et du contenu non qualitatifs juste pour meubler.
  • Réduire au maximum les informations que les visiteurs doivent renseigner s’ils souhaitent s’inscrire ou passer commande (et ça fait du bien au RGPD, pas de renseignements superflus !).
  • Faire un design qui vous fait plaisir, mais un design adapté (voir Design) et fonctionnel (voir Accessibilité)

Les trucs en plus

À rajouter dans les sites qui sont susceptibles d’avoir un nombre de pages important (notamment les blogs ou les e-commerces) :

  • Une barre de recherche pour rechercher ce qu’on souhaite
  • Un fil d’Ariane pour savoir où on se trouve.

Ressources

Astuces UX pour les e-commerces

Le responsive

Quelque soit l’outil qu’utilise votre cible, il faut que votre site s’adapte à tous ces formats : ordinateur, tablette, téléphone. Si vous vous rendez compte que votre cible visite votre site principalement via le téléphone, pensez à prioriser le rendu et l’ergonomie sur ce format-là.

Conseils

  • Sélectionnez bien votre thème
  • Lorsque vous changez un élément, vérifiez bien votre site au moins sur votre mobile (que le rendu soit correct sur petit écran).

Arborescence d’un site

Qu’est-ce que c’est ?

C’est la structure d’un site : ses différentes pages et rubriques.
Ne faites que des pages et rubriques qui seront vraiment utiles et construisez le tout de manière logique. Par exemple :

Les pages de base : la tiny house
  • Page d’accueil (peut très bien contenir toutes les informations nécessaires, et dans ce cas, c’est ce qu’on appelle un site « one page »).
  • Page de mentions légales (voir Mentions légales).
Pages optionnelles : Du studio au château de Versailles
  • Page de confidentialité (si vous êtes sujet au RGPD).
  • Pages de présentation du projet, de votre société ou de vous-même.
  • Pages de portfolio, de vos références, de présentation de vos produits.
  • Pages de présentation de vos services ou de vos expertises.
  • Page calendrier, de contact, etc.

Voir Checklist de contenus – Arborescence

À savoir : un site de e-commerce engendrera forcément plusieurs autres pages :

  • La fameuse page boutique
  • Une page panier
  • Une page commande
  • Une page compte
  • Une page CGV

Accessibilité

Le but

Aider les personnes en difficulté (malvoyantes, daltoniennes, etc.) à pouvoir visiter facilement votre site.

Conseils

  • Ne pas supposer que tout le monde sait comment fonctionne un site donc soyez clair ou donnez des instructions pour les démarches plus subtiles. Même si, bien sûr, cela dépendra du style de visiteurs que vous attendez. Par exemple : un site conçu pour un public de personnes âgées ne sera pas pareil qu’un site prévu pour des ados.
  • Privilégier des polices lisibles et des couleurs contrastées et/ou utiliser un plugin d’accessibilité qui aidera à rendre ça clair si besoin. Voir Plugins
  • Remplir les cases qui permettent de décrire les images afin qu’une personne malvoyante puisse avoir une description de celles-ci (balise Alt, ou champ texte alternatif dans WordPress) et bien nommer ces photos/images. Cela a une double utilité, car si les images ne s’affichent pas suite à une connexion un peu difficile, ces infos apparaîtront quand même.

Optimiser la vitesse de votre site

Le but

Que votre site s’affiche le plus vite possible pour le visiteur. Si votre site est trop long à se charger, certaines personnes laisseront tomber avant de voir ce que vous proposez.

Mon grain de sel

Il y a plein de façons d’optimiser un site, mais si vous vous occupez déjà des images, c’est top ! Le reste sera sûrement plus du ressort de l’intégrateur et du développeur, donc ce n’est pas votre travail ni le propos de ce livre.

Poids image plein écran400 ko max
Poids image dans la page100 ko max
Format pour les images sans fond transparent – le plus légerÀ enregistrer en .jpeg
Format pour les images avec fond transparent
Un peu plus lourd – Souvent pour les logos
À enregistrer en .png
Format des images animéesÀ enregistrer en .gif
Taille maximum d’une image pour le web
Au-delà cela n’aura aucun intérêt
Largeur : 1920 px
Hauteur :1080 px
Résolution des images web72 dpi
Mode colorimétriqueRVB (voir Couleurs)

Attention !
Poids et taille sont deux choses différentes. Une image minuscule peut-être bien plus lourde qu’un grand fond d’écran. Évidemment en compressant une image on perd de la résolution, mais si c’est bien fait ce n’est pas perceptible. Dans tous les cas, mettre une image avec une définition plus grande qu’un écran d’ordinateur ne le permet, n’a pas d’intérêt.

Conseils

  • Voici un compresseur d’images pour optimiser encore plus ses images sans les abîmer (Cela n’empêche pas de faire attention à la taille de l’image au moment de l’enregistrement, mais cela allégera encore plus celle-ci.)
  • Pour les utilisateurs de WordPress, mettre un plugin d’optimisation des images : voir Plugins (ne remplace pas le fait d’enregistrer correctement ses images non plus !)
  • Ne pas mettre d’image en grand format si celle-ci est destinée à être affichée en petit (enregistrez-la à la bonne taille !).

Introduction à l’éco-conception

Le web fait partie de ces choses qui polluent beaucoup. Je pense que je n’ai pas besoin de beaucoup développer pour que ce constat ne soit pas une surprise pour vous.

Pour information ce qui est le plus énergivore en terme d’utilisation web, et donc polluant, ce sont les plateformes de vidéos : YouTube, Netflix, le porno…

Être dans la volonté de rendre son site plus responsable vous amènera vers un site au code plus minimaliste : pour cela son design et ses fonctionnalités seront plus réfléchis et mieux optimisés.

L’idée est surtout de créer des sites moins lourds à charger afin de prolonger le plus possible la vie de nos ordinateurs, téléphones, etc. En effet, c’est leurs productions qui sont principalement une source monstrueuse de pollution (en termes de CO2, d’eau et d’utilisation de matériaux rares).

Si on a les connaissances en éco-conception, Wp.org permet une action plus poussée de ce côté-là.
Mais que ce soit WordPress ou WIX, je veux être claire : ce sont de grosses machines, ce ne sont pas les solutions optimales pour faire un site éco-conçu (le pire étant WIX, car il n’est pas possible de beaucoup agir techniquement dessus).

Dans tous les cas, faire un site éco-construit est un vrai parti pris dès le départ du projet et non une option à cocher. Cependant, il y a quelques astuces accessibles à tous, c’est pour cela que j’en parle ici.

Conseils pour un site plus responsable

  • Se poser la question : est-ce que j’ai vraiment besoin d’un site internet ?
  • Bien optimiser ses images.
  • Ne pas trop mettre de plugins et autres gadgets non indispensables (réfléchir à leurs réelles utilités).
  • Supprimer toutes choses (images, plugins, thèmes) non utilisées.
  • Avoir un contenu qualitatif et ne pas chercher à arnaquer le public (c’est être responsable d’un point de vue plus moral que technique, on est d’accord, mais c’est aussi important).
  • Avoir un design et/ou choisir un thème épuré.
  • Vous pouvez également faire le choix d’un hébergeur plus respectueux de l’environnement, je vous en suggère d’ailleurs deux Voir hébergeur.
  • Avec la solution WordPress.org, vous aurez à choisir votre thème de manière beaucoup plus libre. Certains thèmes sont pensés pour être plus éco-responsables. Exemple de thème WordPress éco-penséEncore un autre.
  • Tester son site :
    Performance d’un point de vue optimisation de vitesse : PageSpeed Insights
    Performance d’un point de vue purement écologique : Ecoindex

Mon grain de sel

L’idéal serait de faire des sites sans backoffice et sans de thème préconçu. Que du sur mesure. Mais pour des néophytes, il serait alors impossible de gérer leur site seul sans apprendre à coder.
Comme tous les domaines du web, il existe des professionnels spécialistes de sites éco-conçus. Je continue de me documenter et de m’améliorer petit à petit pour tendre vers une spécialisation à ce niveau. Je trouve que c’est essentiel de réfléchir de façon raisonner à notre manière d’utiliser le web.
Dans tous les cas, ça revient à travailler son optimisation globale, donc si on souhaite tendre vers ça, il y a tout à y gagner !

Référencement et contenus

Avant toutes choses

  • Je n’évoquerai que le référencement naturel.
  • Je ne suis pas une experte en référencement, mais je peux pour donner les conseils de base.
  • Un article avec la checklist des types de contenus possibles arrive bientôt !! Abonnez-vous à pour être informé !

Mini lexique

Référencement payant (SEA = Search Engine Advertising ou Publicité sur les moteurs de recherche) : lorsque on paie pour arriver en tête dans les moteurs de recherche ou de la publicité.

Référencement naturel : lorsqu’on est bien référencé grâce aux efforts qu’on fournit dans son site et en dehors.

Petit détail qui a son importance : le référencement d’un site internet ne se fait pas seulement de façon globale, mais aussi page par page. Il se fait par rapport à des mots clés (de façon quantitative, mais aussi qualitative). Vous pouvez être très bien référencé sur votre page « À propos » mais très mal sur votre page « Accueil ».

Conseils ultimes

  • Soignez votre contenu !
  • Faites des textes bien pensés et bien écrits, avec les bons mots clés. Au-delà de la qualité que cela apportera à votre site, cela aidera fortement au référencement.
  • Et pour ceux qui espèrent un résultat probant : minimum 500 mots par page.
  • Des créateurs de contenu peuvent travailler vos textes dans cette optique. En plus, ils seront faire ressortir parfaitement vos compétences et votre univers. C’est ce que propose l’agence Le diable est dans les détails par exemple.
  • Rendez vos pages attractives (un site agréable à visiter invitera forcément les gens à rester plus longtemps).

Voici une citation extraite du guide de Google :

« Créer du contenu attrayant et utile aura probablement une plus grande incidence sur votre site internet que tous les autres facteurs [de ce guide] ».

Micros conseils

  • Ne pas copier coller de texte sur plusieurs pages (la duplication de texte est très mal vu par les moteurs de recherche).
  • Ne pas hésiter à mettre des liens à l’intérieur de votre site vers d’autres pages de votre site.
  • Intéressez-vous aux mots clés que votre cible cherchera, et pas seulement ce que vous pensez vous-même de votre produit ou de votre service.
  • Mettre les mots clés dans les titres (plus un titre est important plus il faut le privilégier = titre de page > titre de section > sous-titre > contenu). Et bien respecter cette hiérarchie.
  • S’intéresser aux plugins de référencement (en choisir un seul, ou deux s’ils sont complémentaires, mais pas la peine d’en avoir 10 000).
  • Remplir avec des mots clés les balises Alt des images.

Pour aller plus loin

  • Entretenez votre réseau. Et communiquer votre URL afin que d’autres sites mettent des liens vers le vôtre… mais uniquement si c’est pertinent ! Par exemple : si l’URL de votre magasin de sport apparaît sur le site d’un magasin de déco, ça n’apportera rien. Ce n’est pas la quantité qui compte, mais la qualité.
  • Allez à un meet-up sur le sujet
  • Si le référencement est vraiment primordial pour vous, le meilleur investissement est d’aller voir un spécialiste du domaine.

Ressources

Aide pour trouver vos mots clés 1
Aide pour trouver vos mots clés 2
Dictionnaire des synonymes (pour varier les termes)

Être tenu au courant
des mises à jour et des prochains articles !

Et télécharger gratuitement le livre en PDF *

Vous pouvez vous désabonner
à tout moment
Politique de confidentialité

* Télécharger un document consomme de l’énergie.
Le livre est entièrement publié ici, téléchargez-le que si nécessaire ! Vous pouvez vous inscrire uniquement pour avoir des nouvelles. Cela montrera l’intérêt que vous avez pour mon travail, et ça fait plaisir !

Notions de design

Pourquoi avoir un design et un univers graphique soigné est important ?

  • Avoir un univers graphique à vous, vous rendra mieux identifiable et mémorisable plus rapidement.
  • C’est ce qui donnera confiance en votre site. C’est ce qui donnera envie à vos visiteurs d’y rester plus longtemps, et c’est aussi ce qui permettra de comprendre comment il fonctionne (par exemple : tous les boutons auront la même forme).
  • Enfin vous aurez confiance en votre projet et vous serez fier de le communiquer.

Mon grain de sel

Vous savez, moi je ne crois pas qu’il n’y ait de bon ou de mauvais design. Si je devais résumer mon état d’esprit aujourd’hui, je dirais qu’il y a deux façons principales d’envisager le graphisme :

Soit on crée sa marque et son site de façon à ce qu’il nous ressemble au mieux (à notre goût), car c’est qui on est qui attirent les autres.

Soit on crée sa marque et son site de façon à plaire à une cible particulière, et donc on crée son identité graphique en tenant compte de ce qui les attirera (leurs goûts, leurs façons de penser, etc.)

Cela ne veut pas dire qu’on ne peut pas mixer des deux (choisir de vendre un produit pour une certaine clientèle, tout en gardant ses valeurs et son identité). Mais les priorités à avoir et certains choix pourront être un peu différents suivant l’axe de réflexion..

Éléments graphiques minimum à prendre en compte pour votre site

Penchez-vous sérieusement sur la question au moins sur ces éléments-là pour un rendu plus personnalisé et qualitatif :

Faire un site moche

Vidéo de « Un créatif »

Certains sites sont d’un design qui peut rendre un peu perplexe (pour être polie et ne pas dire mauvais #chacunsesgoûts #maisquandmême).
Sans vouloir les nommer, mais les sites des petits imprimeurs me filent souvent des sueurs froides ! Honnêtement, parfois je ne sais pas comment ils arrivent à avoir des clients avec ça. La première impression me donne rarement confiance en général…
Mais à force de me faire la remarque, je me suis rendu compte que mes réflexions se sont inversées : si un imprimeur a un site plus réfléchi que les autres, je me demande s’il n’y a pas anguille sous roche ! #parano
Conclusion : Suivant vos objectifs, vérifiez la concurrence. Si tout le monde a des sites atroces, faites mieux mais sans dérouter votre cible. Sauf si c’est votre objectif, mais là je ne peux plus rien faire pour vous…

Conseils

  • Pas plus de 4/5 couleurs – Voir Couleurs
  • Pas plus de 3 typos différentes – Voir Typographies
  • Choisir des images qualitatives et cohérentes entre elles et avec le projet – Voir Images
  • Réutiliser les éléments graphiques de votre logo : reprendre une ou toutes les couleurs, la typographies, les éléments graphiques, etc.
  • Être cohérent entre les différentes pages (garder le même état d’esprit dans les visuels le contenu et la même façon de naviguer) – Voir UX
  • Être cohérent dans votre intention
  • Sélectionner bien votre thème et vos templates, en prendre un adapté à vous ou à votre cible.
    Respecter la structure du thème sélectionnée. Le risque de trop bidouiller est de perdre sa cohérence, sa netteté et son aspect professionnel. Un thème a été pensé par un professionnel, donc profiter de ça. (Évidemment si vous avez des compétences en graphisme et mise en page, lâchez-vous !)
  • Garder à l’esprit qu’un site peut toujours être amené à évoluer. Une fois lancé, vous vous rendrez compte de ce qu’il faut, vous connaîtrez de mieux en mieux l’outil choisi et pourrez vous aventurer dans des choses plus personnalisées. Et s’il vous faut plus, vous saurez dire pourquoi et chercher le professionnel adéquat pour retravailler le site de façon plus approfondie.
  • L’idéal est de créer une identité visuelle qui sera déclinable sur différents supports (site internet, réseaux sociaux, documents imprimables, etc.), en fonction de vos besoins actuels, mais aussi futurs.
  • S’inspirer : aller voir d’autres sites (notamment ceux de vos concurrents) et regarder ce qui vous plaît ET ce qui ne vous plaît pas.

Conseils ultimes

  • Réfléchissez bien : Qui êtes-vous ? Que vendez-vous ? Pourquoi ? Qui sera votre public ? Quelle posture voulez-vous avoir ? Comment voulez-vous être perçu ? Tout cela guidera et influencera votre design.
  • Restez sobre. C’est un des exercices les plus compliqués. Veillez à ce que votre site soit visuellement équilibré et lisible sans trop rajouter d’éléments de déco inutiles.
  • N’ayez pas peur de garder des marges et du vide « blanc » : aérez votre site ! On y pense rarement ou on a peur que le site ait l’air vide. Mais ce sont justement ces espaces non occupés qui rythmeront la lecture et rendront la visite bien plus agréable !

Avant toutes choses

Pour ce sujet-là je ne vous fournirai pas d’outils gratuits et autres liens pour générer des logos. Il en existe et vous les trouverez facilement. Mais un logo sera votre représentant et votre signature. Ne pas mettre un minimum d’engagement et de réflexion dedans ne fera pas partir votre projet du bon côté.
Sans connaître votre projet ni votre personnalité, je ne peux que vous donner des conseils génériques. Trop de précision risquerait de vous mener à une solution inadaptée à vos besoins.

Pourquoi faire faire son logo par un pro est long et cher ?

Il faut au minimum :

  • Comprendre les besoins et les attentes (temps d’échange primordial)
  • Faire des recherches et des propositions (les fondations de toute la charte graphique est construite à cette étape)
  • Prendre le temps d’échanger sur les retours (puis rectifier, ajuster, re-discuter) jusqu’à validation finale
  • Décliner en noir & blanc, en différentes formes ou avec différentes couleurs suivant les futures utilisations (avec potentiellement des retours)
  • Enregistrer tous les fichiers en différents formats (JPG, PNG, PDF vectoriel)

Et tout ça, ça prend du temps.
Sans oublier d’ajouter le prix : de l’expertise, de l’accompagnement, de l’expérience et de la valeur ajoutée par la qualité de la réalisation…

En passant par un pro.

Inconvénients Avantages
Il faudra trouver le professionnel qui saura réponde à vos attentesVotre logo sera unique
Ce sera plus longIl y aura eu de vraies recherches et réflexions lors de la création
Le logo sera plus cherIl saura transmettre les valeurs et la profondeur de votre projet
Ça demandera de s’investir (personnellement)Il dégagera une vraie identité et sera facilement identifiable
Il pourra se décliner et s’adapter à vos besoins
Le processus créatif vous invitera à réfléchir à votre positionnement
Il sera construit en même temps que la charte graphique pour créer un univers complet
Le professionnel saura vous écouter, vous guider dans la réflexion, vous conseiller et vous faire des propositions appropriées
Il aura les outils adaptés pour travailler correctement
Vous pourrez vous investir dans sa création
Vous débuterez sûrement une belle collaboration avec le professionnel choisi
Vous serez fier de communiquer votre image

En passant par un générateur

ou toute autre technique visant à avoir un logo rapidement sans un vrai positionnement

Inconvénients Avantages
Les inconvénients sont l’inverse des avantages de passer par un professionnel, en bref :Le logo ne sera pas cher
Le logo risque d’être fade, sans profondeurCe sera pas long
Il n’y aura eu aucun regard professionnelVous économiserez aussi le temps de chercher un professionnel
Il ne sera pas une bonne base pour développer une charte graphique intéressante car il n’y aura eu aucune recherche ni réflexion constructive derrièreIl sera plus propre que si vous le faites un collage sur Paint
Vous bidouillerez ou tomberez peut-être sur quelque chose qui vous semblera pas mal, mais par hasard et par manque de recul sur le vrai potentiel de votre projet

Puis-je le faire moi-même ?

Oui, bien sûr ! Ça sera un gain d’argent… mais rarement de temps !

Peut-être que vous créerez rapidement LA réalisation parfaite pour vous. Mais, en général, ça demandera un travail conséquent avant que vous ayez une réalisation qui vous plaise et qui soit aboutie. Malgré ça, il y a aussi de fortes chances qu’il semble moins professionnel que s’il est fait par un spécialiste.

Conseil

  • Attention à l’équilibre de votre logo. Il faut qu’il soit harmonieux tant dans le choix et la proportion des couleurs que dans celui de la typographie ou des dessins et autres éléments graphiques.
  • La typographie peut être assumée et originale, mais attention à la lisibilité.
  • De manière générale, attention à la lisibilité. Ça permettra une meilleure mémorisation. Tentez de l’agrandir au max ou rendez le minuscule : regardez ce qui ressort. Testez, imprimez, et, si besoin, n’hésitez pas à faire des déclinaisons qui s’adapteront à différents fonds ou différents formats.
  • Il faut qu’il soit unique : attention au plagiat ! (Ce qui n’empêche pas d’aller s’inspirer.)
  • Un logo avec un fond transparent s’enregistre en PNG, et pour un fond opaque un JPG conviendra.
  • Faites-vous plaisir, c’est une notion importante selon moi. Même si cela dépendra des projets (perso ? Institutionnel ?), si vous aimez sortir des codes, assumez-le : soyez hors mode, décalé, original. Attention tout de même à maîtriser la création ou de le faire faire par quelqu’un qui maitrise. Ne pas oublier qu’il faut que ça puisse être utilisable (et probablement sur différents supports et formats). Même s’il peut être très créatif, un logo n’a pas les mêmes fonctions qu’une œuvre d’art.
  • Soyez sur la même longueur d’onde que le professionnel qui fera votre logo (soit dans l’état d’esprit soit dans le style) et investissez-vous dans le processus.

Mon grain de sel

S’il n’y a pas de budget, mais urgence pour vous de pouvoir mettre quelque chose sur votre site : pourquoi ne pas essayer de trouver une typographie qui correspond à vos attentes, et simplement écrire le nom de votre marque avec ?
Cela sera toujours plus efficace qu’un logo bancal, et vous permettra d’attendre une création plus travaillée.

Les couleurs

Points techniques

Il y a deux modes colorimétriques à connaître :

  • Le mode RVB (rouge vert bleu), exclusivement réservé pour le web.
  • Le mode CMJN (cyan magenta jaune noir), pour tout ce qui est impression.

En RVB, le blanc sera noté : 255,255,255 (rouge = 255, vert = 255, bleu = 255)
En CMJN, le blanc sera noté : 0,0,0,0 (cyan = 0, magenta = 0, jaune = 0, noir = 0)
Dans le web, vous aurez souvent affaire au format hexadécimal (ou HTML).
En HTML, le blanc sera noté : #ffffff

Mon grain de sel

Personnellement j’aime énormément jouer avec la couleur (surtout dans mes créations). Je pense qu’il n’y a pas de mauvaises associations de couleurs.
Par contre, ce qui fera un rendu harmonieux, c’est le dosage et la manière d’agencer les éléments colorés.

Conseils graphiques

  • Ne pas utiliser plus de 5 couleurs différentes dans votre charte graphique (pouvoir en mettre davantage, sans faire mal aux yeux, demande d’avoir une vraie sensibilité sur les combinaisons colorées)
  • Si votre logo comporte des couleurs, il peut être intéressant de les réutiliser soit en petites touches soit en couleurs principales.
  • Ne pas hésiter à assombrir ou éclaircir une même couleur pour apporter une tonalité supplémentaire sans alourdir la page. Exemple : un bleu, le même bleu + un peu de blanc pour qu’il soit plus clair, le même bleu + un peu de noir pour qu’il soit plus foncé.
  • Attention à la symbolique des couleurs. Par exemple : rien ne vous empêche de décider que votre agence de croque-mort aura comme couleur phare le rose pastel. Mais le message peut mal compris, voire ne pas être très apprécié (pas assez respectueux, trop enfantin, etc.).
  • Utiliser des générateurs de couleurs ou s’en inspirer pour trouver sa gamme colorée

Ressources

Générer des couleurs à partir d’une image
Générer des harmonies de couleurs
Traduire une couleur en différents modes colorimétriques

Gérer les couleurs

Les exemples qui suivent aideront les plus frileux à s’en sortir un peu facilement. Mais rien n’empêche de faire quelque chose de très bien en utilisant des proportions complétement différentes, de même que les plus artistes arriveront à associer joliment les couleurs les plus improbables !

La règle du 60/30/10


Vous pouvez sélectionner 3 couleurs principales :

  • Une couleur maîtresse qui représentera environ 60% de l’utilisation colorée sur votre site. Elle peut être sombre ou claire, mais ne doit pas être trop agressive. Par exemple : rose clair, bleu nuit, vert forêt = bien. Vert fluo, orange fluo, fuchsia fluo = pas bien.
  • Une couleur secondaire, qui apportera un vrai contraste et qui attirera l’œil. Elle pourra être utilisée à hauteur de 30%. Peut dépendre de votre couleur maîtresse : un orange doux sur un bleu nuit profond = bien. Un violet pastel sur du rose pastel = pas bien (la tonalité est la même donc ça ne ressortira pas).
  • Enfin une dernière couleur plus vibrante, qui pourra être utilisé avec minutie (10%), elle sera là pour appuyer les éléments les plus stratégiques. Go pour l’orange fluo, le vert fluo, le fuchsia, le vert acidulé, le rouge intense !

Exemple

Suivant la répartition des couleurs le rendu n’est pas du tout le même… même en gardant les mêmes couleurs sur deux maquettes identiques !
Le modèle 1 est beaucoup moins lisible. Ce rouge utilisé en aplat fait mal aux yeux. Le bleu ressort mal. Le jaune est plus visible, mais il manque une cohérence dans l’utilisation des couleurs et cela ne permet pas de hiérarchiser les éléments de la page. Le visiteur aura du mal à distinguer les informations importantes (même si ce n’est pas grave vu que ses rétines auront grillé à la vue de l’association de ce bleu superposé à ce rouge).
Le modèle 2 apporte une meilleure hiérarchie et utilisation des couleurs : les éléments rouges mettent en valeur certains éléments, qui attireront plus facilement l’œil du visiteur. Et les couleurs réparties de cette manière s’associent mieux entre elles.

Disque chromatique

Pour finir voici un petit disque chromatique. Les couleurs opposées l’une à l’autre sont des couleurs complémentaires. Souvent l’une est associée à l’autre pour bien mettre en exergue certains éléments ou textes.
Par exemple : bleu et jaune, vert et magenta, rouge et cyan, etc.
Ce sont des associations assez classiques, mais qui fonctionnent bien.

Note importante !

Lors de votre choix de couleurs, allez voir leur rendu sur différents appareils.
Certaines couleurs peuvent paraître très différentes en fonction du calibrage des écrans. Par exemple un jaune peut facilement sembler verdâtre ou fluo, ou un gris/bleu peut apparaître plus ou moins bleu. Ça ne sera jamais parfait partout (tout le monde n’a pas des écrans bien calibrés) mais en ajustant un peu vous pourrez trouver une nuance qui passe bien partout malgré ces variances.

De même pour le rendu imprimé, une couleur en RVB et en CMJN est souvent très différente (voir exemple ci-dessous). C’est normal, les couleurs en CMJN apparaîtront toujours plus terne. Pour ne pas être déçu le jour où vous utilisez vos couleurs sur des documents imprimés, lorsque que vous sélectionnerez vos couleurs pour votre site, convertissez-les en CMJN afin d’avoir un aperçu du rendu.

Image en RVB
Image en CMJN

La typographie

La base !

La typographie est élément très important en design. Les typographies choisies doivent être en harmonie entre elles et elles doivent être cohérentes avec votre sujet. Leurs utilisations rendront un contenu plus attrayant et percutant.
Une typographie est une famille de police, par exemple : « Helvetica » est une typographie, et « Helvetica bold » ou « Helvetica Italic » sont des polices.

Les familles typographiques

Il existe trois grands types de typographies :

  • Les Sans-serifs : Ceci est une typographie sans-serif
  • Les Serifs : Ceci est une typographie avec serif
  • Les Cursives/Scriptes : Ceci est une typographie cursive

Ressources

Les différentes familles de typographies
Portrait robot et usages des typographies

Comment faire un choix

  • Savoir à qui vous vous adressez (votre cible) et/ou savoir ce que vous voulez transmettre. Écrire “J’AIME LE FROMAGE” en majuscule grasse et sans serif, ne sera pas perçu pareil qu’avec une fine typo cursive : “J’aime le fromage”.
  • Si votre typographie peut proposer plusieurs polices, c’est bien mieux, cela vous permettra de donner un rythme à vos textes de façon plus simple (en utilisant la police grasse pour les informations importantes par exemple).
  • Assurez-vous de la lisibilité (peut dépendre de vos besoins et intentions).
  • Lorsque vous cherchez une typographie sur le net, vérifiez bien que celle-ci propose les accents, des majuscules et des caractères spéciaux/ponctuations. Ce serait dommage de créer tout un univers autour et de se rendre compte que la typo n’est pas optimale.

Astuce

Certaines bibliothèques de typographies proposent un outil pour avoir directement un aperçu des typographies avec le mot ou la phrase de votre choix. Pensez à rajouter quelques caractères spéciaux, accents et majuscules, vous vous rendrez compte rapidement si ceux-ci sont pris en compte. ex : lenomdemamarque é à ç A & «

Conseils graphiques

  • Dans le lot, sélectionnez une typographie qui sera très lisible et sobre, qui vous servira pour les longs textes. Pour les titres ou annotations brèves, vous pouvez vous permettre un peu plus de fantaisie.
  • Inspirez-vous ou reprenez-la/les typo/s utilisée/s pour votre logo pour mettre en exergue certains textes (titres, citations, témoignages, etc). À petite dose si celle-ci est plus originale ou cursive.
  • Toutes les typographies ne vont pas ensemble, faites attention à l’harmonie.*
  • N’hésitez pas à jouer avec les polices pour rythmer votre contenu.
  • Attention à votre ponctuation ! Les fautes de ponctuation sont moins perturbantes, pour beaucoup, que des fautes d’orthographe, mais c’est une attention aux détails qui peut compter ! Règles de ponctuation
  • Dans le même registre : attention à ne pas couper les mots en fin de phrase, cela gêne un peu à avoir une lecture fluide. Évitez aussi d’avoir un mot seul à la ligne en fin de paragraphe ou de phrase.

*Quelques exemples :

1 – L’utilisation systématique de typographies d’un même style peut donner un résultat avec peu de relief et/ou peu lisible (par exemple ici avec 3 cursives).

2 – Une combinaison de styles trop différents pourront apporter de la confusion dans l’intention du site. Et le choix de cursive pour le texte courant le rend peu lisible.

3 – Mélanger les styles de typographie avec modération (ici deux sans-serif avec une cursive) en mettant en valeur un ordre d’importance structurera bien le texte.

Points techniques

Le dossier qui sera téléchargé sera souvent en .zip, et le format du fichier typographie qui vous sera le plus utile est en .ttf.
Avec ce fichier, vous pourrez aussi l’installer sur votre ordinateur afin de pouvoir utiliser vos typographies sur tous vos logiciels perso (Photoshop, Word, etc.).

Bibliothèques typographiques

Google Font (recommandation)
La bibliothèque est vraiment grande et intéressante, mais surtout elle permet d’être utilisé très facilement sur le web. WordPress les propose déjà dans sa bibliothèque.

Fontsquirrel
Vous aurez des polices de qualité avec un guide pour les intégrer à votre site

Spoongraphics
Certaines typographies sont des classiques et intemporelles (comme la helvetica par exemple). Mais elles sont souvent payantes. Voici une page où vous trouverez des alternatives de qualité !

Dafont
Très fun, mais la qualité est aléatoire et elles ne seront pas forcément adaptées au web. J’en parle tout de même, car c’est un site très connu sur lequel vous tomberez sûrement si vous cherchez d’autres bibliothèques de typo. À utiliser avec parcimonie.

Et toujours plus avec ce lien magique, attention vous risquer de vous perdre 😉

Images, illustrations, icônes

Légalement

*Cela vaut pour toutes images, illustrations et icônes.

Si vous prenez vos propres photos ou faites vos propres illustrations.

Ce sont les vôtres, vous en faites ce que vous voulez.
Notez bien dans les mentions légales qu’elles vous appartiennent et que vous ne permettez pas au premier venu de s’en servir (pour encore plus de sécurité, intégrez votre signature directement sur l’image).

Si vous faites faire vos images/illustrations/icônes par quelqu’un d’autre.

N’oubliez pas de noter son nom dans vos mentions légales (et mettez un lien vers son site, ça fait plaisir et ça lui fait un peu de référencement).
Attention, même si cette personne vous a vendu ces images/illustrations, il en reste l’auteur, même si vous les avez payés. Normalement il vous aura signifié pour quelle utilisation il vous cède ces œuvres. La seule manière d’en faire ce que bon vous semble est que l’artiste vous cède les droits d’auteur et/ou d’utilisation (normalement de manière payante, malgré ça il en restera toujours légalement l’auteur aux yeux de la loi).

Et enfin si vous comptez prendre des images sur le web.

Il faut être très vigilant. Les auteurs d’images prises sur le net ont les mêmes droits qu’un artiste que vous sollicitez (ci-dessus).
Ne prenez jamais les images qu’un moteur de recherche vous affiche. Vous n’en connaissez pas la source, ni l’auteur, ni les droits qui leur sont associées.
Il existe des banques d’images justement pour ça. Et pour le coup, il y en a pour toutes les bourses. Évidemment, plus vous allez vers du payant, plus vous aurez de choix et plus vous aurez la possibilité d’avoir des images haute-définition (pas toujours utile pour une utilisation purement web d’ailleurs – voir optimisation).
N’oubliez pas de lire les conditions d’utilisation liées à chaque site, certains vous demanderont de citer certaines sources, d’autres non.

Conseils graphiques

  • Choisissez des images qui ont les même tonalités et/ou les mêmes luminosités, le rendu sera plus harmonieux et cohérent
  • Veillez à la qualité de l’image (optimiser ne veut pas dire pixeliser)
  • Sélectionnez des icônes de la même famille (dans un même pack), sinon en choisir d’autres qui sont dans le même esprit (grosseur des traits, niveaux de détails, etc.)
  • N’hésitez pas à passer par un photographe, illustrateur ou graphiste pro pour réaliser sur mesure vos contenus visuels. Ça aura un coût, mais, comme pour le texte, ça jouera énormément sur l’aspect qualitatif de votre site.

Note

  • Une image peut être rétrécie, mais jamais agrandie. Augmenter la taille d’une image revient à étirer ses pixels, jamais à en ajouter, et donc l’image perd de sa qualité.
  • Attention à la taille et le format des images (voir Optimisation).

Ressources

Pour les images

Gratuit et libre de droit : Unsplash, Pixabay, Pexels
Payant : Getty images, IStock, adobestock

Pour les icônes

Gratuit et libre de droit : Icon icons, Fontawesome, Flaticon
Payant : Icomoon

Pour aller plus loin

Quelle est la différence entre droits d’auteur et droit à l’image
Fiche technique sur les droits d’auteur et les droits voisins

Conclusion

Bravo (et merci) d’être arrivé jusqu’ici !
N’hésitez pas à me faire vos retours, à me donner vos avis et suggestions d’amélioration !

Et ensuite ?

Investir dans la qualité des outils qu’on se crée, c’est respecter son projet et lui donner toutes les chances de marcher. C’est un pari ! On ne fait pas de bonne cuisine avec de mauvais ingrédients.
Ce livre est là pour donner une base pour commencer facilement et correctement tout seul.
Suivant les projets cela suffira peut-être, mais pour le faire évoluer de manière efficace il n’y aura rien de mieux que de passer par des professionnels adaptés.

Quelques métiers du graphisme et du web :

Graphiste, Web-designeur, Intégrateur, UX designer, Maquettiste, Hébergeur, Développeurs, Rédacteur, Photographe, Illustrateur, etc.
Tout comme certains photographes se spécialisent en photos de mode ou de nature, les pros du web peuvent avoir leurs spécialités : en référencement, en cybersécurité, en e-boutique, en site vitrine, etc.

À retenir que pour un site internet sans fonctionnalité particulière, en général les langages utilisés sont : HTML, CSS, PHP, JavaScript.

Conseils ultimes finaux

  • Noter précieusement les besoins qui apparaissent, c’est eux qui vous guideront vers le ou les professionnels adaptés. Et c’est en connaissant ces besoins qu’ils sauront vous aider au mieux.
  • Chacun son métier et sa spécialité. Un projet mérite souvent que plusieurs branches de métiers s’unissent pour une réalisation optimum.
Aller au contenu principal