Réussir la conception de son site internet : 10 étapes clés !

Un site internet est un ensemble de pages web qu’on peut visualiser dans un navigateur, reliées entre elles par des liens appelés hyperliens. Avoir un site web de nos jours permet une visibilité plus accrue de sa marque, de son commerce et de ses activités. Si vous désirez vous aussi créer votre site web, vous êtes au bon endroit pour en savoir plus et vous lancer en ayant toutes les armes de votre côté ! En 10 étapes clés, nous vous laissons découvrir de précieuses astuces et des conseils pour réussir votre projet.

Un hébergeur pour mon site

Les sites internet sont stockés sur des ordinateurs particuliers, appelés serveurs. Les serveurs, eux, ne possèdent pas d’écran, sont surpuissants et restent tout le temps allumés afin de générer les pages à toute heure du jour ou de la nuit.  Leur faible épaisseur permet de les empiler dans des baies. L’hébergeur est une entreprise qui s’occupe des baies de serveurs : il prend en charge leur entretien pour leur bon fonctionnement.  Pour votre hébergement web, il vous faut un hébergeur de qualité. Certaines plateformes mettent à votre disposition une panoplie d’extensions dans lesquelles vous pouvez retrouver celles de votre pays (Russie : .ru / Pays-Bas : .uk / Allemagne : .de), ou choisir celles se rapportant au thème que traite votre site (environnement : .earth / santé : .diet).

Il faut également savoir que le choix de votre hébergeur devra être fait pour la sécurité des utilisateurs. Sur certains hébergeurs, vous avez également la possibilité de faire gérer vos mails, avec toute une panoplie d’autres options.

Comment héberger mon site ?

• D’abord, choisissez un nom de domaine simple et clair, facile à retenir, qui ne comporte pas de tirets, et qui est unique, c’est-à-dire que personne n’a réservé avant vous. Le nom de domaine est l’adresse à laquelle votre site est retrouvable. Si votre site vise un pays en particulier, vous pouvez utiliser l’extension de ce pays. Si ce n’est pas le cas, il vous est recommandé d’utiliser les extensions populaires comme .com pour avoir une cible plus large encore ou permettre aux internautes de facilement vous retrouver.
• Une fois le nom de domaine choisi et vérifié, vous devrez entrer vos coordonnées et régler le paiement. Les hébergeurs de qualité offrent leurs services contre une rémunération qui pourra varier selon les cas.

Contenu du site

Le contenu de votre site web doit plaire au public, afin de bien positionner votre site web dans les moteurs de recherche. Il faut donc que les différents textes ou contenus soient agréables à lire, riches, informatifs et clairs, pour garder le lecteur le plus longtemps possible sur votre page et lui donner envie de revenir. Votre contenu doit contenir des mots clés susceptibles de l’attirer, et ceux-ci doivent être populaires. Il est vivement déconseillé de procéder à l’insertion de contenus déjà existants sur internet. Pour optimiser le positionnement de votre site, vous devrez ainsi procéder à la rédaction de contenus uniques et de qualité. Le recours à des rédacteurs professionnels est un bon moyen de s’en procurer, si vous n’êtes pas en mesure de rédiger des textes vous-mêmes.

Maquette du site internet

Pour créer un site, il faut que vous ayez une image assez précise de la façon dont il sera affiché. La maquette est une image de ce que vous voulez obtenir à la fin de votre travail, un objectif du site à réaliser. Vous aurez donc besoin des services d’un graphiste, mais vous pouvez également le réaliser vous-mêmes si vous avez une bonne connaissance des logiciels comme Photoshop, InDesign. Ou si vous manquez de créativité, il existe des sites web qui proposent des idées de design avec le code HTML/CSS tout prêt, si vous avez de la chance. N’hésitez pas à oser et à faire preuve d’originalité : plus votre site sera unique, plus il retiendra probablement l’attention des visiteurs. Il faudra veiller dans tous les cas à obtenir un rendu agréable au regard.

Contenu en HTML

Le site est accessible par une adresse web, un nom de domaine et une extension uniques, et hébergé sur un serveur web. L’ensemble des sites internet forme le Web, en acronyme WWW.

Tout comme les humains communiquent, les éléments du web communiquent entre eux grâce à des langages de programmation. Les plus basiques, et qui s’exécutent du côté de l’ordinateur du client sont HTML (se charge du fond de votre site) et CSS (configure le design de ce qui est codé en HTML).

C’est HTML qui pose les bases de votre site. De ce fait donc, il y a une charte à respecter, des balises à utiliser pour avoir un rendu brut qu’il faudra mettre plus tard en forme. Pour coder, vous avez besoin d’un éditeur de textes, comme NotePad++ ou votre Bloc-Note (veillez à prendre les versions récentes de ces applications), et de plusieurs navigateurs pour pouvoir tester votre site. C’est dans l’éditeur que le code sera saisi.

• Les balises indiquent la nature du texte qu’elles encadrent, comme pour dire “Ceci est le titre”, ou “Ceci est une image”. Les balises en paires s’ouvrent, contiennent du texte puis se ferment obligatoirement à la fin. (Exemple : <head> … </head> pour l’en-tête). Les balises orphelines se tapent une seule fois et servent à insérer un élément précis. (Exemple : <image … /> pour insérer une image).
• Les attributs complètent les balises afin de donner des informations supplémentaires. (Exemple : <image nom-”…” auteur-”…” /> ).
• Un code HTML commence toujours par le doctype. C’est ce qui prouve que votre page est bien une page HTML.

Le site OpenClassrooms vous donne plus de détails sur comment structurer son texte en HTML. Voici cependant un tableau résumant quelques balises HTML et leur utilité.

Il existe des éditeurs comme KompoZer, BlueGriffon, qui sont qualifiés d’éditeurs HTML WYSIWYG (What You See Is What You Get ou Ce que vous voyez est ce que vous obtenez). Ce genre d’éditeurs permet d’éditer directement du contenu sous la forme qui sera affichée aux utilisateurs, et non en tapant du code. Le logiciel lui-même se charge de générer automatiquement le code HTML de la page créée. Bien que cette solution soit très pratique, elle peut ennuyer si l’éditeur ne permet pas de réaliser ce que l’on veut. Toutefois, la meilleure manière d’apprendre à réaliser un site, comprendre son fonctionnement et avoir des codes bien rédigés et propres reste l’édition du HTML “à la main”.

Une mise en forme avec CSS

Le CSS est un langage informatique qui vient compléter HTML. Son rôle à lui est de mettre en relief les éléments qui doivent l’être. Autrement dit, il permet de mettre en forme le texte HTML. Comme on l’a dit plus haut, le HTML seul donne un aperçu brut, sans forme, pas attirant du tout. CSS vient corriger cela avec des fonctionnalités propres à lui. Cependant, certaines versions de navigateurs ne sont pas compatibles avec CSS 3 (dernière révision de propriétés CSS). Il faut donc vérifier le rendu à chaque fois que vous insérez une modification pour être sûr que votre commande est validée. Vous pouvez créer votre fichier CSS séparément du fichier HTML (vivement conseillé) portant l’extension .css, puis le rattacher au fichier HTML en insérant dans l’en-tête <link rel= »stylesheet » href= »style.css » /> juste après la ligne <meta />.

Ici, on décide quelles proportions du fichier HTML modifier et on change leur présentation avec CSS (polices, taille des polices, couleurs, souligner, barre, indices, l’alignement du texte). Il est aussi possible de modifier le fond (couleur, image), la transparence du texte.

• La propriété color change la couleur du texte, et la couleur du fond est modifiée avec la propriété background-color.
• On peut insérer une image de fond avec background-image, et la positionner où l’on veut sur la page.
• Opacity détermine la transparence du texte ou du fond, avec en complément une valeur indiquant le degré de transparence.

CSS possède de très nombreuses propriétés, qui agissent sur le rendu final de la page et permettent d’insérer des fichiers multimédias. Sur OpenWeb, découvrez plus de fonctionnalités de CSS.

Une dynamicité pour mon site

Jusque là, votre site web est statique. C’est dire que si vous l’avez créé en 2010, vous le retrouverez intact, sans modification en 2019. Pour le rendre dynamique, il faut insérer d’autres langages tels PHP, Django, ASP.NET qui sont des langages qui s’exécutent sur le serveur qui contient le site web, et JavaScript (ne rend pas réellement le site dynamique) qui s’exécute du côté visiteur, c’est-à-dire l’internaute.

Ces langages vous permettent de gérer sur votre site :

• Des forums;
• Des newsletters;
• Un système automatisé de news;
• Une gestion des membres;
• Des jeux web;
• Etc.

NB : Vous avez dû le remarquer, on ne code pas en Français : tous les codes sont en Anglais. Il importe donc que vous ayez une base minimale en Anglais technique. Le site que vous créez est encore à votre niveau ; personne d’autre que vous ne peut le voir puisqu’il n’est pas encore disponible sur internet. Cependant, n’oubliez pas de tester, tester et tester encore votre site web avant de le publier sur internet.

Par ailleurs, il est possible de créer des sites web plus facilement, grâce aux CMS (Content Management System, ou Système de Gestion des Contenus). Avec les CMS comme WordPress ou Joomla, il vous suffira d’insérer des outils et plugins pour personnaliser votre site, et ajouter votre texte. Et bien entendu, vous êtes dispensé des longues phases de codage HTML et CSS.

Le FTP

Le FTP, par définition File Transfert Protocol, est l’outil qui assure le transfert des fichiers vers internet. Toute une gamme de FTP est disponible. Ils peuvent être entièrement gratuits ou payants. Prenez le FTP qui vous convient, installez-le et configurez votre logiciel.

Configurer le client FTP

Quel que soit l’hébergeur ou FTP que vous avez choisi, le processus est le même. Vous devez insérer 3 informations indispensables pour que votre FTP se connecte au serveur : l’ID, le login, le mot de passe. Ces 3 informations vous sont fournies par l’hébergeur, qui vous les envoie par mail. Si vous ne les avez pas, réclamez-les.

• L’ ID ou l’Hôte : Il s’agit de l’adresse du serveur. Vous pouvez l’avoir sous un format numérique (Exemple 457.785.575), ou de type com.
• Le Login : C’est votre identifiant, votre pseudonyme ou le nom de votre site.
• Le mot de passe : Soit il vous a été attribué, soit on vous a demandé de le choisir. Insérez-le maintenant dans le champ dédié.

Transférer les fichiers

Une fois que le FTP est configuré, cliquez sur “Créer un nouveau site”, donnez-lui le nom que vous voulez et appuyez sur Connexion. Si cela ne marche pas, et que vous voyez des messages en rouge indiquant qu’il y a erreur, sachez que l’une des informations a été mal saisie, et reprenez le tout. Vérifiez bien que le type d’authentification choisi est “Normal”.

Si ça marche, cherchez où se trouvent, sur votre disque dur, les fichiers, images, multimédias se rapportant à votre site et double-cliquez dessus. Vous pouvez également transférer un dossier d’un coup, en double-cliquant également ce dossier. C’est la dernière étape : vos fichiers sont bien téléchargés sur le serveur, donc disponibles sur internet. Tout le monde désormais peut avoir accès à votre site.

Personnaliser mon site

Plusieurs outils existent pour personnaliser votre site. S’il est vrai que CSS a résolu le problème, de nouvelles fonctionnalités sont créées chaque jour, et recourir chaque fois au code source pour rééditer la(les) page(s) est assez contraignant. C’est d’ailleurs pourquoi il n’y a presque plus personne pour créer de A à Z un site web, vu qu’il existe les CMS. Vous n’avez plus qu’à choisir le design, le façonner à votre goût, et le tour est joué. Cependant, ces sites ne laissent pas souvent libre cours à la créativité, ce qui est indispensable pour avoir un bon positionnement de votre site internet, et principalement dans Google.

Pour personnaliser votre site ou en modifier le design, Genious vous offre des outils pour un design de qualité. Vous pouvez également recourir aux sites comme Coolors, Unsplash, Pixabay, Google Fonts. Ajoutez à votre menu l’onglet “Accueil”, et créez des pages pour vous présenter et donner les contacts sur lesquels vous joindre. Pour faire plus pro, je vous conseille de créer une boîte mail et d’avoir un numéro professionnel, afin de faire la distinction entre vos affaires personnelles et celles professionnelles. Le libellé de chaque élément doit être explicité. Aérez vos pages. Ne les encombrez pas, et gardez à l’esprit qu’il vaut mieux insérer peu d’éléments que trop d’éléments.

Élaborer une stratégie de Marketing digital

Pour un site web d’entreprise, de commerce, ce point est indispensable pour augmenter votre visibilité sur les réseaux sociaux (Facebook, Instagram, Twitter, KakaoTalk, etc.) et ailleurs. Pourquoi ? Parce que les réseaux sociaux regorgent de plus d’utilisateurs et génèrent des trafics énormes chaque jour. Vous devrez donc partager des contenus sur ces réseaux selon votre objectif.

Améliorer votre site web

Jetez un regard critique sur votre site dès la première semaine. Google Analytics vous affichera les résultats obtenus après le lancement du site. Vérifiez chaque fois le nombre d’utilisateurs qui s’ajoutent, et prenez soin de les fidéliser en ciblant leurs préférences et ce qu’ils n’ont pas aimé lors de leur première visite sur vos pages.