Webdesign et développement Web : Guide pour débutants

Voici un petit article à destination des débutants en développement web et web design afin de leur donner quelques conseils très simples mais importants qu’ils doivent connaître pour se lancer dans ce beau métier !

Avant de commencer

Il est important de connaître l’objectif du site à concevoir !
Connaître la cible de votre site Internet (ses visiteurs) ainsi que les exigences du client sont primordiales et vous aidera à définir les outils à utiliser dans la mise en œuvre de votre projet. La conception web est un sujet pluridisciplinaire et il demande des compétences dans différents domaines (ergonomie, graphisme, colorimétrie, développement…) qui contribuent toutes à la conception d’un site Internet.
Identifier les exigences va donc vous aider à organiser les ressources mais aussi définir un budget pour la réalisation du projet web !

Organisez-vous

Après avoir décidé de l’objectif, il est temps de rassembler les ressources (images, photos, couleurs, code…) et élaborer un plan (ou organigramme) en détail. Cela contribue à améliorer votre flux de travail, vous pouvez utiliser, à ce stade, des outils comme des frameworks PHP (Zend PHP, Cake PHP, Symfony) pour l’élaboration d’un fil de fer et donner au client une idée sur la présentation globale du site.

Il vous faudra ensuite créer des pages Html professionnelles, vous aurez donc besoin d’avoir de bonnes connaissance en languages HTML et CSS.

Concevez pour les moteurs de recherche

La plupart des visiteurs du site Internet que vous allez concevoir sont susceptibles de provenir de moteurs de recherche. Sachant cela, il est essentiel pour vous de vous assurer que le site pourra être facilement exploré par les moteurs de recherche populaires comme Google et Yahoo. Ce processus est généralement appelé SEO (Search Engine Optimization).

Il vous faudra donc correctement définir certains éléments d’entêtes de pages, tels que le titre ou les balises META (Meta description, meta keyword) uniquement visibles par les moteurs de recherche mais aussi utiliser au mieux certains éléments contenus dans votre page HTML, tels que les titres, sous-titres, listes, mise en forme de caractères etc… autant d’éléments indispensables au bon référencement dans les moteurs de recherches.

Fluidifiez la navigation

Les sites qui se chargent rapidement sont appréciés par les utilisateurs et les moteurs de recherche. Votre site web doit pouvoir se charger en maximum 10 secondes. Simplifiez la navigation et l’interface utilisateur va permettre à vos visiteurs de mieux parcourir votre site et va les aider à trouver l’information désirée rapidement.

Il est donc important d’utiliser des noms court et populaires pour vos menus de navigation (Accueil, Aide, Produit, Contact, etc) plutôt que de faire dans des termes plus originaux mais qui pourraient dérouter l’internaute. Si vous envisagez d’utiliser des animations Flash pour l’ensemble de votre site Internet, sachez qu’il est toujours préférable de proposer également une version HTML du site, même si cette tendance commence à devenir moins populaire avec l’arrivée de l’Html 5.

Les liens de navigation devront être placés au même endroit sur chaque page du site, mais pour les pages plutôt longues et demandant un défilement vertical important, vous pouvez envisager de mettre un menu supplémentaire en pied de page. Pensez également à utiliser un Fil d’Ariane, cela aide en général beaucoup un visiteur à identifier dans quelle partie du site il se trouve.

Votre site doit se charger rapidement

Un des critères du moteur de recherche Google our vous classer dans les résultats de recherche, réside sur le temps de chargement de votre site. Plus celui-ci sera lent, plus sa position dans les résultats de recherche sera dégradée.

Afin de palier au surpoids de vos pages, pensez à optimiser le poids de vos images et de vos animations Flash. Essayez de maintenir une taille de page en dessous de 30 ko. Si vous avez les connaissances adéquates, privilégiez l’utilisation des CSS pour un maximum d’éléments contenu dans vos pages (boutons…). La compression des CSS, l’utilisation de codes propres et la mise en cache permet d’accélérer le chargement des pages.

Assurez la compatibilité avec les différents navigateurs

Comme pour tout débutant dans la conception Web, l’adaptation de votre site à l’ensemble des navigateurs web existants aujourd’hui sur le marché ne va pas être une tâche facile. En effet on pourrait croire que tous les navigateurs affichent les pages de la même manière, et bien non, il n’en est rien. De plus chaque navigateur existe aujourd’hui en plusieurs versions différentes qui elles même interprètent votre page web d’une manière qui leur est propre, ce qui rajoute encore une difficulté supplémentaire. C’est d’ailleurs pour cela qu’il est important de toujours mettre à jour son navigateur dès qu’une mise à jour est disponible ou qu’une nouvelle version fait son apparition.

Bon, si autrefois avec des navigateurs tels que Internet Explorer 6 ou Netscape les résultats pouvaient être bien différents, il vous aussi avouer que l’apparition des normes W3C (World Wide Web Consortium) il y a plusieurs années maintenant ont permis d’uniformiser un peu l’affichage des pages web. Cela a été possible grâce aux développeurs de nos navigateurs favoris qui prennent de plus en plus en compte ces normes pour un meilleurs affichage des sites Internet.

Il est souhaitable pour un débutant de se concentrer sur les navigateurs couramment utilisés comme Internet Explorer, Firefox, Chrome, Opera et Safari. Il existe plusieurs outils disponibles en ligne pour tester la compatibilité du navigateur. (browsershot…)

La création de site Internet peut paraître compliquée au premier abord, mais il ne faut pas oublier qu’elle demande aussi beaucoup de connaissances diverses et variées qui ne pourront être assimilées qu’avec le temps et l’expérience. Il vous faudra donc avancer progressivement mais ne pas vouloir non plus aller trop vite au risque de négliger certaines étapes essentielles qui pourront mettre en péril vos compétences futurs !

Partagez cet article


Laisser un commentaire


8 − cinq =