Faire un site web en 10 conseils (2/3) : Technique !

Aujourd’hui, on continue sur la lancée du mois précédent avec un article concernant les sites internets ! Après avoir analysé la « stratégie » (quel genre de site me faut-il), je te fais découvrir la « technique » (comment faire pour avoir un site). Alors, je me concentre ici sur des outils simples et/ou gratuits et je terminerai pas une idée du « budget » si tu veux faire appel à un professionnel du secteur (juste pour avoir une idée).

technologie_site_Web_technologie_entete_blogContenus

content-for-dealers

Avant de commencer « à fond les manettes », je te conseille de faire un petit tour de ce que tu veux et de ce que tu as déjà comme « matériel » ou « contenu ». Range dans des dossiers sur ton ordinateur les éléments suivants :

  • Dossier 1 – Visuels & pitchs
    • Le logo de ton entreprise / de ton projet;
    • les couleurs qui vont bien avec ton logo;
    • Une description en 3 paragraphes de MAX 5 lignes de ton activité/ton projet (ça a l’air facile, mais généralement c’est chaud patate);
    • Une description de toi/ton parcours en quelques paragraphes aussi (pour la page « about-me »);
    • Une photo « un peu pro » de toi / de ton équipe;
    • Une série de photos en lien avec ton activité en général.
  • Dossier 2 – Photos, Vidéos & projets : Un beau site web, c’est forcément un site avec du contenu visuel en plus du texte. Faites un dossier par « projet » ou par « sujet » et rassemblez-y un MAXIMUM d’informations et de visuels que vous avez déjà faits !
    • Photos (du produit final, de la fabrication, vidéo de mise en avant, présentation powerpoint, …)
    • Textes & informations (que dire sur ce projet, revues de presses, interviews, longueur largeur hauteur du produit, matériaux, …)
  • Dossier 3 – Informations légales et documents : les sites web sont des espaces publics, un petit peu de « réglementations » est nécessaire surtout pour les site d’e-commerce. Des générateurs de conditions d’utilisation des données personnelles et/ou des conditions générales de ventes peuvent t’aider !

Ce travail préparatoire est une bonne première étape qui permet d’alimenter la réflexion sur la suite du projet. En faisant un dossier par projet/sujet tu vas déjà « tout(e) seul(e) » faire une hiérarchie à ton projet de site web. Et tu verras s’il te manque des photos/contenus par rapport à certains sujet !

Si tu as un projet professionnel, je te conseille de faire appel à un vrai graphiste (pas ton cousin qui gère photoshop) pour te fournir un logo qui sera bien en phase avec tes valeurs/tes ambitions/ton public cible. Normalement, après une bonne discussion avec lui/elle et quand tu lui fournis le « dossier 1 » tu as de bonnes bases de discussions. Compte entre 450 et 1200 € pour un logo chez un graphiste.

Hébergeurs, nom de domaine, kessako ?

webhosting-1

Petites définitions :

  • L’Hébergement est un ordinateur allumé et connecté 24 heures sur 24 à Internet (des serveurs web par exemple) par une connexion à très haut débit (plusieurs centaines de Mb/s), sur lequel est installé des logiciels : serveur HTTP (souvent Apache), serveur de messagerie, de base de données… C’est le lieu où est stocké ton site web. Considérer entre 30 et 150 € / an pour un hébergement.
  • Nom de Domaine est l’adresse que les gens vont taper dans leur explorateur (ex. AuxMerveilles.be). Considérer entre 8 et 50€/an pour un nom de domaine en .be, .com, .bizz etc.

Analogie avec la construction d’une maison:

  • L’hébergement c’est le terrain (c’est vide, mais sans terrain pas de maison)
  • Le site web c’est ta maison (que les gens peuvent visiter), et le sujet de l’article d’aujourd’hui, c’est comment la construire 🙂 !
  • le nom de domaine c’est ton adresse (pour que les gens trouvent ta maison)

Technique

Alors, maintenant que tu sais ce que tu veux (site vitrine, blog ou e-commerce), comment vas-tu arriver à un site web « trop beau de la mort qui tue » ?

#4 – Coder un site avec bootstrap

bootstrapTu t’y connais un peu en HTML, coder ne te fait pas peur et tu as déjà suivi les cours consacrés au Web de OpenClassRoom ? Je te conseille Bootstrap qui est un ensemble de classes CSS qui te permettent de créer un site vitrine (pages fixes) compatible mobile (tablettes, smartphone) très rapidement.

  • Difficulté « technique » : ★★★☆☆ (3/5)
  • Prix : ★☆☆☆☆ (1/5)
  • Stratégie : Site vitrine ou blog
  • Hébergement nécessaire : oui.
  • Analogie : Bootstrap c’est tout plein de briques à mettre ensemble pour faire une maison, si t’es pas maçon dans l’âme, c’est compliqué, si tu n’as pas de terrain, difficile de construire !

Personnellement, c’est avec cette « astuce » que j’ai réalisé les sites/landing pages suivantes :

Je compte refondre complètement le site « LeCoqWallon.com » et le rendre compatible « mobiles & tablettes » prochainement grâce à ce système de classes pratiques. Comme c’est un site vitrine et que je sais coder, c’est dans la poche !

#5 – Utiliser une plateforme existante

integrate-analytics-with-cm

Alors, si le code ce n’est pas pour toi, je t’invite à utiliser une plateforme existante (Content Management System). Il y en a pour tous les goûts et toutes les couleurs, le principe est généralement commun : il y a une « architecture » de base que tu personnalises avec des « modules » (widgets) = fonctionnalités et un « thème » (template) = aspect visuel.

  • Difficulté « technique » : ★★☆☆☆ (1/5)  (/!\ l’installation peut être complexe)
  • Prix : ★☆☆☆☆ (1/5) (si vous prenez du libre)
  • Stratégie : Site vitrine, blog ou e-commerce
  • Hébergement nécessaire : dépend des services proposés.
  • Analogie : les plateformes, c’est un peu la maison pré-fabriquée ou clef sur porte où tout est préparé pour toi, tu peux encore gérer la déco, demander un garage, … Une fois que tu veux trop changer ou sortir du modèle, c’est galère !

Pour moi c’est la solution idéale une fois que l’on a un projet un peu conséquent car les solutions des plateformes sont souvent très complètes (système de paiement en ligne sécurisé, gestion d’un catalogue, gestion de multi-utilisateurs, thèmes, interactions avec les réseaux sociaux, …).

Tu trouveras ci-après les plateformes plus connues.

Pour les sites vitrine (gratuits)

Flow-chart-Wordpress-vs-Joomla-vs-Drupal-Matrix-compareLes trois grandes solutions connues pour les sites vitrines sont :

>> Un article qui compare ces 3 ténors (en français).

Pour les e-commerces

MagentoPrestashopSi tu souhaites vendre on-line directement, il faut envisager l’utilisation d’une de ces plateformes :

Website Builder

Certains sites proposent l’hébergement, le nom de domaine et la mise en place de site web dans le cloud (all-in-one) :

  • Wix : jamais utilisé mais ça a l’air simple & design. Version payante pour aller plus loin.
  • Jimdo
  • e-monsite

Pour les blogs (gratuits)

Beaucoup de blogs sont simplement mis en ligne sur les services « Website Builder » car c’est simple et demande peu de configuration. C’est d’ailleurs la solution que j’ai choisie.

Si tu veux quelque chose de « personnalisable » et surtout qui t’appartient à 100% (on ne sait jamais quand un service s’arrêtera d’être gratuit et/ou disparaîtra), il faut alors installer un système de blog sur ton hébergeur personnel :

Alors, vous avez beaucoup vu « WordPress« , en fait 1 site sur 4 sur internet est basé sur cette plateforme (source : http://www.blogdumoderateur.com/w3techs-cms-novembre-2015/)

#6- Avoir de beaux visuels

visual_contentTu peux bien entendu refiler la création de ton site web à une agence de Com’ ou à ton petit cousin/meilleur ami/frère qui s’y connait en informatique MAIS il y a une chose qu’ils ne feront pas pour toi : faire des belles photos et un bon contenu ! Alors, tu prends/empruntes un appareil photo et GO ! Un bon croquis, une petite vidéo ou une belle image aura toujours beaucoup plus d’impact que n’importe quel contenu texte !

Un site web, combien ça coute ?

Pie chart on a stock chart with a budget

En plus des frais d’hébergement et de nom de domaine que j’ai déjà mentionné plus haut, si tu veux faire appel à un professionnel il y a un budget à mettre de côté :

  • « vitrine basique » : Mise en ligne d’un site vitrine sans création de contenu avec installation d’un thème « tout fait » et légère personnalisation : autour de 1000€.
  • « vitrine complète » : Mise en ligne du site vitrine, avec plusieurs langues possibles, création de quelques contenus, personnalisation complète du thème/template pour correspondre aux couleurs de la société : entre 5.000 et 11.000 €.
  • « installation e-commerce » : Mise en ligne d’une plateforme e-commerce, ajout des modules, mise en place du thème et corrections, testing et importation de fiches existantes : 7.000 €.

Si tu veux le faire toi-même, voici une estimation du temps à prévoir (faire x3 si c’est ton premier site de ce genre) :

  • « vitrine basique » : 2 semaines à raison de 4h par jour
  • « vitrine complète » : 5 semaines à raison de 4h par jour, une solide connaissance dans l’édition de thème est nécessaire (ou un ami très doué)
  • « e-commerce » : environs 2 mois pour avoir tout préparé comme il faut avec un thème de base et quelques adaptations avec des modules gratuits. Prévoyez plein d’amis (environs 10 personnes) qui vont faire du « testing ».

Conclusions

titre_site_web_conseils

Il faut s’armer d’un peu de patience pour se faire son propre site web. Si tu passes par une agence, il est vraiment important de ne pas « by-passer » la partie « stratégie » car elle permettra de discuter très clairement avec le prestataire. Pour ma part, j’utilise ce combo-ci :

  1. Site d’e-commerce sur plateforme PRESTASHOP réalisée grâce à un prestataire (fiabilité, e-commerce efficace, templates et thèmes adaptés) de plus la création d’un e-commerce complet prend beaucoup de temps si on doit tout faire soi-même. Je me suis concentrée sur la création de contenus (fiches produits, textes, …) pendant que la société prestataire s’occupe de l’architecture.
  2. Blogging sur plateforme WordPress.com (simple, efficace, gratuit).
  3. Pour les « sideprojects » ou les petits sites d’explication, j’utilise bootstrap pour coder moi-même (gratuit, compatible avec les mobiles).

J’espère que cet article (un peu long) t’a été utile ! N’hésite pas à poser tes questions en commentaire ! Le mois prochain on s’attaque à « Comment amener des gens sur mon site ? » !

4 réponses sur « Faire un site web en 10 conseils (2/3) : Technique ! »

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s