Comment créer votre site internet ?

Tout le monde vous le dit autour de vous, avoir un site vitrine pour son entreprise c’est indispensable ! Si vous n’avez pas de site web, vous n’êtes pas visible.

Vous voulez coder votre site internet vous-même

Dans ce premier article, nous allons détailler les étapes pour développer son propre site statique (notez bien ce terme).

Vous êtes motivé et vous voulez vous lancer dans l’aventure de créer votre site de A à Z.

 

Pour créer un site web professionnel, il vous faudra endosser plusieurs étiquettes : intégrateur, UX/UI designer, graphiste et référenceur web. C’est à cette étape que certains d’entre vous se rendent compte que ça sera probablement plus difficile qu’il ne le paraît.

En effet, vous faudra vous familiariser avec les connaissances techniques et théoriques

Installez les bons outils nécessaires à votre projet

Pour ceux qui ont les moyens, une des références reste la gamme Adobe, principalement pour le graphisme. La plupart des « web agency » ou graphistes travaillent avec Photoshop. Cependant, si vous avez un budget limité, Gimp pourra faire le travail.  Notez toute fois que les tutoriels sont plus difficiles à trouver pour ce logiciel.

Pour le code, vous pourrez utiliser Dreamweaver même si je trouve que ce dernier reste trop lourd, pour une utilisation simple.

Dans mes débuts en autodidacte, je l'utilisais surout pour sa partie " ça code tout seul "  (wysiwyg). Malheureusement, le code n’était pas propre et apportait plus de soucis qu’autre chose. Le logiciel a peut-être évolué à ce niveau, je ne pourrais vous le dire. En effet, je l’ai abandonné depuis longtemps.

Il existe alors une multitude d’outils gratuits. Un simple bloc-notes windows ou mac peut suffire mais j’ai une petite préférence pour Notepad ++ qui est un bon outil gratuit et simple d’utilisation pour un débutant.

Apprenez les langages web.

Avant de commencer la conception du site, familiarisez-vous avec le HTML5 et le CSS3. Ces deux éléments sont les bases absolues pour apprendre à développer son site internet soi-même. Bien entendu, pour être performant, il faudra vous spécialiser en approfondissant vos connaissances.

Une page HTML se présente sous cette forme :

<!DOCTYPE html>
<html>
<head>
<title>Title de la page qui apparait dans la barre d'adresse</title>
</head>

<body> 
<div id="Nom-d-identifiant-unique" class="nom-uitilise-plusieurs-fois-dans-le-site">
<!-- Le contenu de votre site-->
</dv>
</body>

</html>

 

L'HTML correspond à la structure de votre page ; son squelette. Vous allez construire les fondations de votre maison.

L’habillage et la construction des murs, quant à lui, se place du côté du CSS. Grâce à ce langage web, vous pourrez attribuer des couleurs, des polices ou encore de créer votre mise en page.

Il y a 20 ans, on indiquait le CSS directement dans le code HTML de cette manière :

<!DOCTYPE html>
<html>
<head>
<title>Ma page d'accueil</title>
</head>

<body style=" background-color:red;">
<div style=" background-color:blue;">
</div>
</body>

</html>

 

<!DOCTYPE html>
<html>
<head>
<title>Ma page de contact</title>
</head>

<body style=" background-color:black;">
<div style=" background-color:yellow;">
</div>
</body>

</html>

Cependant, cette technique avait un gros défaut ; si vous deviez faire des modifications il fallait modifier pages par pages…

C'était donc un travail très fastidieux et pas adapté à des gros sites.

J’en avais fait les frais à l’époque en fabriquant moi-même mes premiers sites internet au collège. Croyez-moi rajouter 1 page par épisodes d’une série que vous adorez à la main… imaginez un peu le temps perdu.

La solution est de créer un fichier CSS unique que nous appelons dans notre HTML afin de modifier vos éléments à un seul endroit.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="monstyle.css">
<title>Ma page d'accueil</title>
</head>

<body>
<div id="identifiant-unique" class="identifiant-reutilisable">
</div>
</body>

</html>

 

Ainsi si toutes vos pages possèdent la même structure. On identifie nos éléments grâce à des classes et d' ids qui sont paramétrés dans le fichier monstyle.css.

 

#identifiant-unique{
background:blue;
}

.identifiant-reutilisable{
background:yellow;
}

 

En changeant les propriété dans ce fichier unique, tous les éléments portant le nom de "identifiant-reutilisable", par exemple, changeront de propriété.

CSS3 et HTML5 ou CSS et HTML ?

HTML5 et CSS3 font partie des normes web mises en place. L’HTML5 reste du HTML et le CSS3 restent du CSS mais ils ont des propriétés plus poussées . Ces derniers sont surtout reconnus par les différents navigateurs. Ils obéissent à une norme appelée W3C.

Ce dernier point est très important. Vous ne saviez probablement pas, mais chaque navigateur (chrome, firefox…),  interprète le code à sa manière. Internet explorer / Edge est la bête noir de l’intégrateur.  Utiliser les normes W3C, limite les soucis d’affichage entre les différents navigateurs.

De plus, notre ami Google favorisera un code « propre » donc respectant les normes pour le référencement.

Donnez un côté dynamique, tournez-vous vers le Javascript et le PHP.

L’HTML et le CSS vous fournissent la base. Cependant pour rajouter de la dynamique; un site plus vivant ou des fonctionnalités particulières et répétitives vous aurez besoin du Javascript et/ou du PHP.  Ainsi vous pourrez créer des formulaires de contact,  avoir un site sécurisé, des pages de même apparence mais avec une gestion de contenu automatique.

Familiarisez-vous avec la notion de « site responsive »

Le responsive design est la capacité de votre site à s’adapter aux différentes tailles d’écran. De nos jours, 70% des clients potentiels vont visiter votre site depuis leur smartphone et tablettes. Certains même auront un écran 4K.

Ce sont tous ces paramètres qui font que votre site doit s’adapter à toutes les tailles d’écran.

Pour faire un site, il faudra coder en pensant web et mobile.

Il existe de nombreuses plateformes qui vous proposent des cours payants ou gratuits afin de vous former.

L’UI/ UX Design

En langage moins technique, on parlera « d’interface utilisateur » et « d’expérience utilisateur », il s’agit de réfléchir à votre webdesign.

Il faudra construire la structure de votre site afin qu’il soit le plus intuitif possible pour votre visiteur et avoir un design qui plaira à l'internaute .

Statistiquement, un visiteur reste 4 secondes sur un site avant de partir s’il ne trouve pas les informations recherchées. Il faudra réfléchir intelligemment à la place de chaque élément.

Mettez-vous à la place de vos visiteurs.

Vous entendrez parler alors de « zones chaudes » ou encore de « ligne de flottaison ».

Dans l’UI design, on prend également en compte l’arborescence (la structure de votre site) qui est un élément très important pour votre référencement.

Une fois ces parties théoriques acquises, penchez-vous sur le design.

Recherchez les tendances

Le site internet de votre entreprise doit être moderne. Pour cela différents outils s’offrent à vous afin de rechercher les designs du moment.
Utilisez tout simplement Google avec une recherche simple « template website 2018 » par exemple ou pinterest, behance qui seront une source d’inspiration.
Mais attention, vos recherches doivent être uniquement une d’inspiration ; venir copier entièrement un webdesign ou un graphisme est une infraction aux droits d’auteurs.

Réalisation  de la maquette sur Gimp ou Photoshop

Bien entendu cette étape nécessite la maîtrise de ces deux logiciels. Réalisez le design de chaque page type (celles ayant un design différent) et aidez-vous d’une grille afin d’aligner correctement vos éléments et d’avoir une homogénéité dans votre design.

Une fois ce dernier prêt, il vous suffira de découper vos éléments pour les intégrer.

 

Intégrez votre site internet

Vous travaillerez en local, donc sur votre PC, réalisez votre mise en page à l’aide de vos éléments de graphisme découpés et vos connaissances en langage web.

 

Familiarisez-vous avec le référencement naturel

Avant de mettre votre site en ligne, renseignez-vous sur les bases de référencement et modifiez votre contenu, vos images et votre code afin de rendre votre site « SEO Friendly ».

Pourquoi est-ce important ?

De nos jours avoir un site internet est devenu plus facile, cependant il faut que vos clients puissent vous trouver parmi les milliards de pages web existantes. C’est ici que votre SEO entre en œuvre. Un bon référencement travaillé, vous permettra d’apparaître devant vos conurrents dans les recherches google.

Achetez un nom de domaine et un hébergement et mettez votre site en ligne

Votre site est prêt mais il faut encore le rendre disponible sur internet. Il existe plusieurs hébergeurs sur le marché. En France les deux principaux sont OVH et 1and1.

Inscrivez-vous sur la plateforme de votre choix et achetez un nom de domaine en monsite.fr ou monsite.com ainsi qu'un hébergement adapté à votre besoin.

Utilisez un logiciel FTP pour mettre votre site en ligne.

Graphikart vous fourni un excellent tutoriel bien détaillé sur le sujet

A présent vous avez les connaissances informatiques, graphiques pour créer votre page web optimisée.

 

Comment font les professionnels ? Utilisent-ils les mêmes techniques pour créer un site internet ?

 

aurelieschmitt

Après 10 années en temps qu'infographiste salariée, j'ai ouvert ma société freelance après la naissance de mes jumeaux. Ainsi, j'accompagne mes clients dans la conception de l'identité de leur entreprise

logos

Une identité visuelle

Besoin d'un logo pour votre entreprise ? Inu Média réalise une identité forte vous démarquant de vos concurrents.

encart-suppers-commnication

Vos supports de communication dès 150€

Faites réaliser vos flyers, cartes de visite ou logos professionnels par Inu Média à Montbéliard

site internet pas cher pour collectivites inu media a montbeliard dans le doubs

Votre site vitrine clé en main dès 1400€

Un site web intuitif, responsive, sécurisé et optimisé SEO