Dans cet article je partage avec vous la méthode de création de site web que j’ai développée afin de maximiser l’utilisation de mon temps tout offrant un produit final attirant, fonctionnel et d’allure professionnelle.
Dans l’article précédent j’ai suggéré 6 étapes préliminaires à faire AVANT la programmation d’un site web. Vous pouvez vous y référer pour en savoir plus.
Créer un site web est de plus en plus facile et plaisant grâce aux nouveaux systèmes de gestion de contenu (CMS – content management system) tels que WordPress, Joomla et Drupal. Il est maintenant possible pour un néophyte de se créer un site en quelques heures et à peu de frais. Cela permet à n’importe qui d’avoir sa propre page web pour afficher ses produits et services.
Le CMS que je préfère est WordPress. Il me procure un grand plaisir et me permet de m’exprimer librement sans m’obliger à résoudre sans cesse d’insolubles problèmes de programmation. WordPress est intuitif et malléable, tout en étant performant et facile à optimiser pour les réseaux sociaux. C’est donc celui-ci que je vous recommande pour la création de votre site web, mais tout autre CMS pourra être utilisé selon votre préférence.
Cet article couvre les étapes de base pour créer un site web, à partir de zéro jusqu’à la mise en ligne officielle. Voici donc comment je procède pour créer un site web.
1 – Installation de WordPress
WordPress est facile et rapide à installer grâce à l’installateur automatisé inclus dans la majorité des panneaux de contrôle (Cpanel) offert par les compagnies d’hébergement.
Entrez dans votre Cpanel, cliquez sur l’icône «Install WordPress» et suivez le processus d’installation. En quelques clics voilà déjà votre site en ligne et prêt à être programmé.
Pour accéder au tableau de bord de votre site WordPress il suffit d’ajouter wp-admin à votre nom de domaine et d’y entrer le mot de passe et le nom d’utilisateur que vous avez choisi lors de l’installation (exemple : http://monsite.com/wp-admin).
Astuces :
- Évitez le nom d’utilisateur ADMIN proposé automatiquement lors de l’installation. C’est la première chose qu’un hacker va essayer pour tenter d’entrer illégalement sur votre site.
- Choisissez un mot de passe complexe et difficile à deviner. Évitez les références trop directes au nom de votre entreprise ou des mots qui se retrouveront dans le contenu du site.
2 – Installation du thème
Pour gérer l’apparence et certaines fonctionnalités de WordPress il est nécessaire d’installer un «thème». WordPress propose certains thèmes gratuits que je trouve trop pauvres pour créer le type de site qui m’est généralement demandé. Mon choix se porte donc sur des thèmes plus complexes qui peuvent être achetés à peu de frais. L’avantage est qu’ils incluent un support technique très pratique lorsqu’un site a un problème.
Sur le site de Themeforest.net il vous est possible de chercher des thèmes par catégorie afin de trouver exactement ce qui conviendra pour votre nouveau site.
Mon préféré à ce jour est Zephyr (utilisé entre autre pour ce site). Deux autres thèmes que j’aime sont The7 et Kleo. Ils sont très malléables et multifonctionnels, ils conviennent donc pour la majorité de mes projets.
Une fois que vous avez choisi votre thème il suffit de l’installer, en passant par votre Cpanel ou FTP ou directement via le Tableau de bord: Apparence / Thèmes / Ajouter.
Les thèmes viennent souvent avec des plugins et vous serez guidés pour les installer si cela est nécessaire. Chaque thème possède une documentation pour vous aider en cas de doute. Voici par exemple le manuel d’utilisateur de Kleo.
Une fois que vous avez installé le thème et les plugins associés ainsi que programmé le menu tel que suggéré dans le manuel de l’utilisateur vous pouvez passer à l’étape suivante.
Astuce: les thèmes viennent généralement avec l’option d’ajouter du contenu démo. Voilà un moyen idéal de bien comprendre le thème que vous venez d’acheter. Prenez le temps d’installer le démo (à une autre adresse URL) afin d’en tester les fonctionnalités et vous donner des idées pour votre propre site.
3 – Installation des extensions (plugins)
Il existe une infinité d’extensions (plugins en anglais) qui peuvent installés pour aider votre site à s’ajuster à vos désirs. Les extensions gèrent diverses fonctionnalités non incluses telles que la mémoire cache, la sécurité, les formulaires de contact, l’optimisation des images, le référencement, la boutique, l’inscription à l’infolettre, etc.
Vous pouvez découvrir les extensions, dont plusieurs sont gratuites, via le tableau de bord : Extensions / ajouter ou directement sur le site de WordPress.
Il suffit d’installer les extensions désirées et de les activer.
Dans un prochain article je partagerai mes extensions préférées, celles que j’utilise sur la majorité des sites que je conçois.
4 – Créer les pages et le menu
Si vous avez fait les 6 étapes préliminaires à faire AVANT la programmation d’un site web vous avez déjà tous les textes et l’architecture du site. Voilà maintenant le moment d’ouvrir le fichier et de l’utiliser.
Afin de mieux voir la structure du site j’ai l’habitude, à cette étape, de créer toutes les pages qui seront disponibles. Pour ce faire je me contente de créer les pages en y ajoutant le titre et comme contenu je mets seulement «…».
Ainsi, en quelques minutes, j’ai toutes les pages potentiellement disponibles. Je peux alors les ajouter au menu. Cela me permet d’avoir un sketch rapide du site.
Je m’assure alors que tous les liens du menu sont fonctionnels et mènent au bon endroit, avant de commencer à ajouter le contenu.
5 – Couleur dominante et accent
À cette étape je décide de la couleur dominante du site et de l’accent. L’accent est une couleur qui vient complémenter la dominante. On retrouve généralement l’accent dans les onglets du menu et dans les boutons.
Les couleurs choisies devraient être celles contenues dans votre logo ou des couleurs qui le complémentent.
Je ne prends pas beaucoup de temps pour expérimenter à cette étape. Je cherche plus à donner une idée de base de ce dont aura l’air le site qu’à en fixer les couleurs exactes.
Lorsque j’ai ajouté le contenu (étape 6) et les images (étape 7) je reviens généralement à cette étape pour ajouter des subtilités et des nuances plus précises. Il est plus facile alors d’aller chercher des nuances qui fonctionnent avec les images et les divers éléments graphiques du site.
6 – Mise en forme d’une page type
J’aime procéder méthodiquement afin de gagner du temps et surtout de m’assurer de la cohérence du site. En effet, quand plusieurs styles et couleurs sont ajoutés sans logique, un site en vient à ressembler à une pizza, ce qui lui donne un aspect amateur et mine ainsi son potentiel de conversion.
Je commence donc par faire la mise en forme d’une page type. J’en détermine le style, le positionnement des éléments tout en y ajoutant le contenu. J’y ajoute aussi les images.
Je prends le temps de m’assurer que j’aime la présentation de cette page type avant de passer aux autres pages. Je la montre à mon client pour avoir son avis. Je la regarde sur plusieurs appareils, plusieurs types d’écran.
Voici un site pour tester une page sur tous les appareils efficacement : https://www.responsinator.com/
Astuce: pour trouver des images gratuites qui peuvent légalement être utilisées pour un site web j’opte généralement pour celles offertes sur Pixabay.com. Je peux ainsi demander à mes clients d’y jeter un coup d’œil afin de trouver eux-mêmes leurs images.
7 – Mise en forme des autres pages
À cette étape je m’élance et, en un clin d’œil, le site apparaît dans toute sa splendeur. En effet, il me suffit de copier les codes html de la page type et de les transposer sur les autres pages. Puis je remplace le contenu par celui qui convient à chaque page.
Puisque les textes sont déjà disponibles dans le fichier Word préparé à l’avance, je peux rapidement les copier-coller dans les bonnes sections.
En agissant ainsi je m’assure que la mise en page sera similaire sur toutes les pages du site. Cela donne à un site une allure professionnelle et en augmente la clarté. Par exemple, le titre de la page est toujours de la même grandeur et couleur, les espacements sont standardisés, les lettrages sont tous de la même famille, etc.
Astuce: Je passe les textes dans un programme comme TextEdit pour les nettoyer de codes invisibles qui pourraient avoir été ajoutés dans Word (style, grandeur, épaisseur, couleur, etc). Il est préférable d’ajouter le contenu en format texte seulement afin d’éviter d’avoir plusieurs styles à travers le site.
8 – Création de la page d’accueil
La page d’accueil étant le résumé du site, j’attends toujours à la fin pour m’en occuper. À cette étape le reste du site est terminé et fonctionnel. Il me suffit alors d’aller piger dans les diverses pages et sections afin de présenter le mieux possible cette page, la plus importante.
En effet, puisque c’est sur cette page que la majorité des visiteurs arrivent, il est crucial d’y mettre toute l’attention nécessaire. Il est bon d’éviter les redondances, les fautes grossières, les images trop lourdes qui pourraient en ralentir le téléchargement… bref tout ce qui pourrait inciter les visiteurs à rebrousser chemin.
La page d’accueil doit être invitante et inclure des appels à l’action pour rediriger les visiteurs vers les diverses sections du site.
8 – Optimisation
Une fois le site terminé il reste à l’optimiser afin qu’il soit le plus rapide possible. Cela est d’une grande importance dû au fait que beaucoup de visiteurs consultent des pages web via leur téléphone cellulaire. D’ailleurs Google tient compte de la vitesse de téléchargement dans le classement des sites web.
Pour ce faire j’ajoute une extension pour optimiser les images (WP Smush) et une pour optimiser les bases de données (WP-Optimize).
Ensuite j’ajoute une extension pour gérer la mémoire cache (W3 Total Cache). Une mémoire cache enregistre temporairement des copies de données provenant du site, ce qui a pour résultat d’en rendre le téléchargement plus rapide.
Une fois l’optimisation terminée, je vérifie la vitesse de téléchargement du site que je viens de créer. Le diagnostique me donne aussi certaines recommandations pour améliorer le site.
Voici mes préférés :
Voilà ! Vous avez à présent un site web optimisé et fonctionnel.
