Google+
Linkedin

Refonte graphique des sites web du Codérando78

Le comité départemental de la randonnée pédestre des Yvelines (Codérando 78) m’avait confié il y a quelques années la conception graphique de leurs deux sites internet. Ils m’ont renouvelé leur confiance pour réaliser la refonte graphique de ces deux sites.

Le Codérando des Yvelines possède deux sites web. Le premier étant celui du Codérando et le second un site web mis à la disposition des associations membres souhaitant communiquer sur internet directement. Réalisés il y a quelques années, les sites web du Codérando nécessitaient un passage en mode responsive et un rafraichissement graphique. Bien entendu et comme pour la première fois, les deux sites web devaient être différents mais dotés d’une identité visuelle reconnaissable et d’un système de navigation identique.

Nouvelle version du design responsive des sites web du Codérando 78

Développement en mode responsive

Sur internet peut être plus qu’ailleurs, les technologies évoluent vite et les goûts changent rapidement. Le codérando avait donc choisi de moderniser l’aspect graphique de chacun de ses sites web, mais aussi de passer en mode responsive. En 2017, tout site qui se respecte, se doit de pouvoir s’adapter aussi bien à nos écrans d’ordinateurs qu’à ceux de nos tablettes et de nos smartphones.

Vous souhaitez une refonte de votre site web ?
ou

Lors de la création d’un site web adaptatif (terme français pour responsive) il ne faut pas prendre seulement en compte l’adaptation du graphisme, ou de la mise en page, mais également la navigation et surtout le menu principal.
N’étant pas un grand fan des menus horizontaux déroulants de type mégamenu. J’ai donc opté pour garder le menu vertical existant mais en le développant en off-canvas (ou hors cadre). Un élément off-canvas est un élément non visible, mais qui apparait suite à une action de la part de l’internaute.

Menu principal en off-canvas

Le principe fut donc de créer un bouton [menu] qui une fois cliqué fait apparaitre une barre latérale avec l’ensemble des liens du menu principal. Ce bouton est positionné de manière fixe pour qu’il soit toujours visible par l’internaute même quand celui-ci effectue un scrolling de la page (utilise l’ascenseur).
Après échange avec l’équipe en charge du site du Codérando, il fut décidé de faire apparaitre d’office le cadre latéral pour les grandes résolutions d’écrans (à partir de 1680px de largeur).

Menu secondaire en version hamburger

A l’origine le site du Codérando affichait dans son menu plusieurs sous-menu. Pour alléger celui-ci dans la nouvelle version, un menu secondaire avec les items de second niveau est affiché dans une colonne à droite et reste lui aussi fixe lors d’un scrolling de la page. L’autre différence pour ce menu secondaire est qu’il apparait au format “hamburger" (bouton avec trois barres horizontales) et laisse ainsi toute la largeur pour le contenu principal sur les écrans de taille réduites.

Une refonte graphique sans bouleversement

Refonte graphique du site web du Codérando des Yvelines

La refonte graphique devait donner un “coup de jeune” au web design mais ne devait pas pour autant “déboussoler” les adhérents et autres utilisateurs du site.
En plus de garder la navigation principale à gauche et à la verticale, les bandeaux du haut ont conservé un aspect très proche de la version précédente. Un peu de retouche sous photoshop pour assurer l’affichage de l’image sur les écrans larges, et du développement CSS pour permettre l’affichage du titre en responsive sur les basses résolutions.
Le bandeau du bas a lui aussi été conservé avec une retouche pour s’adapter à la nouvelle largeur. La gamme de couleur est restée à peu de chose prêt la même, un peu de marron est venu réhausser le tout.

Graphiquement, la refonte effectuée du design a permis de donner un aspect plus moderne et plus aéré.
Le passage de la colonne de droite en off-canvas a permis sur les petites et moyennes résolutions d’écrans de donner toute sa place au contenu. Ce dernier est ainsi moins tassé et plus lisible.
La page d’accueil a été revisité afin de mettre les informations principales en avant.

De l’utilité d’un CMS

La refonte graphique des sites web du Codérando n’a nécessité aucune modification du contenu. Les sites web étant développés sous le système de gestion de contenu (ou CMS) Joomla et maintenus par l’agence web Betterliving.
Une partie de mon travail a consisté à mettre en place le théme graphique et de paramétrer de nouveaux modules.
La technologie utilisée par les CMS (la séparation de la forme et du contenu, pour faire court) permet de basculer rapidement un site internet sous un nouveau design graphique.

Besoin d'infos pour une refonte de votre site web ?
ou
comments powered by Disqus