Le site du Fil, vu de l’autre côté de l’écran

Le projet de création du site internet du Fil a été une belle aventure que nous avons envie de partager.

Sur les bases de l’expérience du site précédent, nous avons mis le doigt sur une difficulté récurrente :
“ Comment mettre en valeur la programmation tout en valorisant les autres activités du Fil ? “

Cibles différentes, usages distincts

Pour aller voir un concert au Fil

www.le-fil.com est centré sur la programmation et s’adresse à un large public. C’est une web app, c’est-à-dire un site internet conçu et réalisé comme une application pour smartphones. Le site internet vit au rythme des trimestres et adopte une forme graphique différente à chaque nouveau programme papier.

La méthodologie de conception est dite « Mobile First ». C’est l’usage du mobile qui est étudié et maquetté en premier. La contrainte du petit écran oblige à aller à l’essentiel, démarche également profitable lorsqu’on consulte la programmation sur ordinateur portable ou de bureau.

Pour informer les partenaires, artistes, pros, bénévoles…

www.le-fil.org regroupe l’ensemble des activités autre que la programmation et s’adresse également à tous les publics, mais en particulier aux partenaires, artistes, professionnels et bénévoles. Pour ce site à vocation plus institutionnelle, la forme graphique est stable, mais la structure est très évolutive. Le rubriquage et le nombre de pages est sans limite.

Son contenu plus exhaustif le destine plus naturellement à une consultation sur ordinateur portable ou de bureau même si le site est « responsive » c’est-à-dire capable de s’adapter à toutes les tailles d’écran dont les mobiles.

Wireframe ou zoning

Nous avons tenu à passer par l’étape du « wireframe » pour valider l’ensemble des principes de mise en page avant de passer au maquettage : une étape collaborative mené avec Marie (graphiste NiaksNiaks), Sandrine et Pauline (équipe com du Fil). L’intérêt principal de cette méthode est de pouvoir réfléchir aux usages, à la structure et aux contenus avant d’aborder la « créa ».

Maquettage complet

Une fois le « wireframe » stabilisé, nous avons pu passer au maquettage en étant sécurisé sur la structure et les contenus. On peut avoir l’impression d’avancer lentement, mais au final, on se pose les bonnes questions au bon moment et on ne revient jamais en arrière. La motivation de tout le monde est préservée, surtout celle du graphiste qui n’a pas à payer les pots cassés d’une subite modification de structure ou de contenu.

Nous avons ensuite réalisé exactement le même travail pour la version grand écran et à nouveau l’ensemble du processus pour le site www.le-fil.org

Développement

D’abord, une première étape de développement « front » qui consiste à réaliser la partie publique du site internet en respectant le plus fidèlement possible la maquette tout en ajoutant les éléments d’interactivité et de mouvements qui ne pouvaient pas y figurer. Les technologies sont : Html 5, Less/Css, JQuery, JQMobile, Bootstrap, Masonry, JPlayer.

Ensuite, un développement « back » dont l’objectif est de fournir au Fil des outils simples et efficaces pour qu’ils puissent mettre à jour la programmation très régulièrement, tout en gérant l’actualité et l’ensemble des pages d’infos. Pour cette étape, nous avons travaillé avec Romain Filinto qui a mis en place un Wordpress qu’il a su personnaliser et adapter aux besoins du projet : gestion de dates, d’artistes, d’actualité, de photos, etc.

Testez-le !

Bien sûr, beaucoup de gens savent ce qu’est un site « responsive », mais si vous avez besoin d’être éclairé là-dessus rendez-vous sur :
www.le-fil.com

Faites varier la dimension de la fenêtre du navigateur. Vous verrez, le site s’adapte et se transforme pour garantir une meilleure expérience au visiteur que la fenêtre soit petite (comme sur un mobile) ou géante comme sur de gros mac.

Un projet réalisé en collaboration avec :
Sandrine Bruneton : Responsable de la com. et des relations publiques du Fil
Pauline Chalus : Attachée à la communication web & numérique du Fil
Marie NiaksNiaks : graphiste indépendante — www.niaksniaks.com
Romain Filinto : Développeur indépendant — www.romainfilinto.fr