Voici un rapide aperçu de ce que je vous propose dans ce livre :

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 l'on peut se sentir bloqué de pas en avoir. Mais, on ne sait pas encore à quel point on est prêt à investir dedans ou l'on n’est pas encore assez sûr de ce que l'on veut pour ça.

Bien sûr, pas la peine d'attendre d'avoir une réflexion parfaitement aboutie pour se lancer (sinon on ne fait jamais rien). Mais, passer par un.e graphiste/webdesigner professionnel.le à ce moment-là, ce n'est pas forcément le bon choix (sauf si vous avez le budget pour tout refaire 6 mois après).

Bref, ce n'est pas grave de ne pas avoir un site parfait dès le début. 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é.

Vos outils de communication sont là pour donner confiance !

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. Je vous propose d'ailleurs de jeter un œil à mon article sur comment mettre toutes les chances de son côté pour avoir une belle communication. C'est à ce moment-là, toutes les cartes seront en main pour que la collaboration soit top et que le résultat le soit aussi !

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, j'ai eu du mal à savoir comment commencer et à faire le tri.

Et puis, il y a tous ces sites défectueux sur lesquels je tombe régulièrement et je me dis que c'est dommage d'avoir mis du temps et/ou de l'argent pour avoir un site qui ne fait pas le job. Un exemple ? Un site de restaurant, sans menu, sans même l'adresse ou le moyen de réserver parfois. Ou un site si lourd qu'il ne charge même pas, etc. Oui oui, ça m'arrive, plus souvent que je ne remarquais avant. En tout cas, moi, ils ne me gagnent pas en cliente. Et, franchement, à quoi sert leur site ??

Avec ce guide, j'espère vous faire gagner du temps en pointant les éléments qui permettent d'obtenir au moins un résultat net et fonctionnel... et qui pourra même être canon.

Déjà, attention au piège de vouloir un site internet uniquement, car c’est le « passage obligé ».

Avoir un site ne fera pas de vous un professionnel plus compétent. Avoir un site ne remplace pas la prospection, les rencontres ou le bouche-à-oreille pour vendre (du moins pas au début). Et ça remplace encore moins une réflexion commerciale plus globale.

La question la plus importante, même pour un site fait "maison", c'est bien :

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.

Alors c'est bien de se demander si : c'est un outil dont je me servirai ? Est-ce que je suis prêt.e à l'entretenir ? Est-ce que je le communiquerai vraiment ? Est-ce que mon public y sera sensible ? etc.

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 ?

J'ai écrit deux autres articles pour vous aider dans vos réflexions :

- D'abord : Réfléchir à votre positionnement

- Puis : Bien définir le type de contenu dont vous avez besoin

Si vous avez déjà un positionnement établi, cela sera plus rapide. Sinon la réflexion autour de la création d’un site est un super exercice pour ça. 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.

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.

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.

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

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.

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.

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 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).

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.

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.

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.
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

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.

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

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.

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é.

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.

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).

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.

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.

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 avant le design. C’est guidé par les besoins définis à ce moment-là que vous ferez de meilleurs choix pour le reste. Voir la checklist que je vous propose.

- 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).

On doit ensuite rajouter le contenu : les habitants et les meubles (on ne choisit pas le même appart’ si on est deux ou dix). Donc, on réfléchit à la structure de son site en se demandant de quoi on a besoin, quelles informations on veut transmettre, quel texte va dans quel page et comment on agence tout ça.

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

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

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

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

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

Wix ou WordPress.com ?

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

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 changer de thème en gardant votre contenu (compter quand même du temps pour la refonte) 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à.

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).

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.

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.

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.

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) :

1 - [ce nom de domaine] «Existe déjà. Il vous appartient ? Transférez-le»
2 - «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.

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.

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

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

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

Ultra-simple, laissez-vous guider par la plateforme (capture d'écran prise en 2021, il est possible que ça est évolué depuis).

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 ?

Paf ! Votre site est presque prêt.

Faites votre choix de templates, de couleurs, etc.
Mettez les plugins (appelés « applis ») supplémentaires si besoin.
Mettez le bon contenu et les bonnes images.

Plan de référencement proposé par WIX dans votre tableau de bord ou dans onglet « site ».

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.

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 « Basique ». 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.

Info : en 2022 cette offre est à 12 €/mois (hors réduction spéciale). Vous pourrez toujours à tout moment prendre l'offre du dessus si celle-ci devient limitée.

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.

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. Voici un comparatif :

En même temps et au même endroit.

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

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).

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

(voir Plugins)

(voir Thèmes)

(voir Plugins)

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).

(voir Plugins)

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.

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 recevoir vos mails dans la messagerie de votre hébergeur.

Vous pouvez aussi faire une redirection afin que les messages soient redirigés 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.

BREF : Un thème pas adapté et/ou peu personnalisable, ce n'est pas forcément grave, mais ça sera toujours une perte de temps.

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).

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.

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

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)

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

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

Updraftplus
Le plugin – Configurer Updraftplus

Yoast
Le plugin – Configurer 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

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.

En attendant 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).

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.

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)

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

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

Ninja form
Le plugin – Configurer Ninja form

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

Autoptimize
Le plugin – Configurer Autoptimize

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)

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.

Il y a toujours de la législation quelque part, sinon ça ne 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.

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

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

Il a trois objectifs :

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. Source officielle

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

La forme que ça peut prendre sur votre site :

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.

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

C'est une réflexion essentielle à avoir lorsque l'on crée son site (et sa communication en général). Prenez ce temps, même si vous avez peu de contenu.

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) :

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à.

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 :

Voir Checklist de contenus – Arborescence

Un site d'e-commerce engendrera forcément plusieurs autres pages :

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

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.

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.

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 plus minimaliste et éthique : 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, ce sont 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.

Pour le référencement, je n’évoquerai que le naturel, gardez aussi en tête que je ne suis pas experte dans ce domaine.

Vous n'avez pas de logo ?

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 crée par un générateur ou votre petit cousin, et vous permettra d’attendre une création plus travaillée.

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

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

Vous pouvez sélectionner 3 couleurs principales :

Exemple

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.

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 malgré ces variances.

C'est pour ça que lors de votre choix de couleurs, je vous conseille d'aller voir leur rendu sur différents appareils (au moins sur votre ordinateur et sur votre mobile).

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.

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.

Il existe trois grands types de typographies :

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.

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.).

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).

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).

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.

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 !

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.

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.