IV. Vues
Full HD 1980x1080
/index e=0.3
/projets/[item] e=0.3
Proposition de refonte du site www.gbau.fr. Une maquette interactive est associée à ce devis.
Bien cordialement,
Maxime
I. « Mission »
II. Devis
III. Maquette
IV. Vues
V. Arborescence et navigation
VI. « Responsive » et identité graphique
VII. Logiciel de gestion de contenu (CMS) et hébergement
Le contenu de cette partie se veut être une synthèse des différents échanges avec Laetitia Bildgen.
« Responsive » : l’affichage du site www.gbau.fr s’adapte mal à la diversité des formats des appareils pouvant s’y connecter, la compréhension de son contenu devient difficile.
« Manque d’intuitivité » : l’interface administrateur du site ne permet pas de le configurer ni d’en modifier le contenu facilement.
« Accompagnement dans une nouvelle solution d’hébergement » (optionnel) : aide pour la mise en place d’une méthode d’hébergement plus autonome et avec le moins d’intermédiaires possible.
Après une étude approfondie du site.
Bien que le site actuel possède un contenu relativement modeste dans sa complexité et une identité graphique solide, l’arborescence du site et l’organisation éditoriale de ses contenus est confuse ce qui rend difficile à la fois sa gestion et la définition d’un système d’affichage permettant une qualité de lecture équivalente sur tout les appareils.
Certains choix typographiques (taille fixe, capitalisation et graisse unique), d’autres de compositions ( très larges marges et nombre de colonnes fixé à deux ) réagissent mal à certains formats très grands ou très petits.
Dans l’ensemble le site repose sur un grand nombre de scripts et de dépendances incohérentes avec l’échelle de son contenu ce qui rajoute à la rigidité générale de son usage (affichage lent des images, bugs, exceptions étranges ou incohérences d’affichage, difficulté de modification).
Dans les parties qui suivent je vous propose l’argumentation d’une version plus solide de votre site, plus cohérente et simple dans son organisation avec une augmentation de son identité graphique minimale et moderniste pour une qualité de lecture équivalente sur tout les formats d’affichage.
Esquisse de devis avant proposition définitive.
1j = 200€
12 ou 14 * 200
2400€ ou 2800€ TTC
Vous trouverez une maquette fonctionnelle de cette proposition sur www.maximebouton.fr/GBAU/maquette/.
/index e=0.3
/projets/[item] e=0.3
/index e=0.5
/projets/[item] e=0.5
/index e=1
/projets/[item] e=1
/index e=1
/projets/[item] e=1
/index e=0.8
/projets/[item] e=0.8
/index e=0.62
/projets/[item] e=0.62
/index e=1
/projets/[item] e=1
/index e=1
/projets/[item] e=1
/index e=0.44
/projets/[item] e=0.44
/index e=0.5
/projets/[item] e=0.5
Le site actuel fonctionne autour de deux dossiers /gbau et /catalogue, à chaque dossier correspond une page “liste” permettant d’accéder aux pages du dossier. Il existe un dossier /arguments mais son contenu est inexistant ou inaccessible. le dossier /catalogue contient la majorité du contenu du site tandis que /gbau renvoi à du contenu annexe.
Un en-tête (header) est présent sur toutes les pages du site et permet de naviguer entre ces deux pages “liste” et une page d’accueil mettant en scène un carrousel diffusant les images des éléments iconographiques de la page liste du dossier /catalogue.
index -> /index
|
+-- gbau -> /index/gbau
| |
| +-- equipe -> /index/gbau/equipe
| +-- evenements -> /index/gbau/evenements
| +-- rencontres -> /index/gbau/rencontres
| +-- contact -> /index/gbau/contact
| +-- iconographie -> /index/gbau/iconographie
| +-- [...] -> /index/gbau/[gbau_item]
|
+-- catalogue -> /index/catalogue
| |
| +-- [projet_item_1] -> /index/catalogue/[abreviation_du_projet]
| +-- [projet_item_2] -> /index/catalogue/[abreviation_du_projet]
| +-- [...] -> /index/catalogue/[abreviation_du_projet]
|
+-- arguments -> /index/argumentsGBAU -> /index/gbau
Projets -> /index/catalogue
Éléments de théorie -> /index/argumentsGBAU -> /index
Équipe -> /index/gbau/equipe
Publications, conférences, expositions -> /index/gbau/evenements
Liste des références -> /index/gbau/rencontres
Partenaires -> /index/gbau/rencontres
Contact -> /index/gbau/contact[projet_item_1] -> /index/catalogue/[abreviation_du_projet]
[projet_item_2] -> /index/catalogue/[abreviation_du_projet]
[...] -> /index/catalogue/[abreviation_du_projet]La page d’accueil possède très peu de contenu.
La page about possède très peu de contenu.
La page /index/argument (nommé Éléments de théorie dans la navigation) apparait comme une page de type liste mais permet d’accéder à un seul élément présent dans un dossier différent /index/gbau/iconographie.
Deux éléments de navigation possèdent le même nom “GBAU” tandis qu’ils renvoient sur des pages différentes, “GBAU” dans la page d’accueil renvoie sur /index/gbau une page de type liste permettant d’accéder au contenu du dossier /gbau tandis que “GBAU” sur cette dernière page renvoie à la page d’accueil /index.
Deux éléments de navigation possèdent des noms différents (Liste et références, Partenaires) mais renvoient à la même page /index/gbau/rencontres.
Le contenu de la page /index/gbau/rencontres est doublé sur la page /index/gbau/equipe.
Une arborescence resserrée autour de deux dossiers /about et /projets. Le dossier /projets possède une page de type “liste” tandis que les pages du dossier /about sont accessibles sur l’ensemble du site via le header. Ce dernier renvoie également à la page “liste” du dossier /projet.
L’ancienne page d’accueil est remplacée par la page “liste” du dossier /projet permettant un accès direct au contenu principal du site. “Partenaires” et “Références” se fondent avec “Équipe” en “Équipe et partenaires”. Le dossier /arguments disparait et “Iconographie autobiographique” est clairement situé dans le dossier /about.
L’ancienne page “about” disparait et son contenu est accessible sur l’ensemble du site via l’ajout d’un footer.
+-- index -> /index
|
+-- about
| |
| +-- equipe -> /about/equipe
| +-- publications -> /about/publications
| +-- iconographie -> /about/iconographie
| +-- [...] -> /about/[about_item]
|
+-- projets
|
+-- [projet_item_1] -> /projets/[abreviation_du_projet]
+-- [projet_item_2] -> /projets/[abreviation_du_projet]
+-- [...] -> /projets/[abreviation_du_projet]Projets -> /about/equipe
Équipe et partenaires -> /about/equipe
Publications, conférences, expositions -> /about/publication
Iconographie autobiographique -> /about/iconographie[projet_item_1] -> /projets/[abreviation_du_projet]
[projet_item_2] -> /projets/[abreviation_du_projet]
[...] -> /projets/[abreviation_du_projet]La composition des pages fonctionne sur deux colonnes centrées quel que soit le format. Un affichage en “mosaïque” est possible pour les projets mais n’implique pas une différence d’accès au contenu suffisante pour se distinguer clairement de l’affichage en deux colonnes.
Sur certaines pages (équipe) la colonne de gauche garde une largeur minimum d’une douzaine de mots, sur les autres pages la largeur des colonnes se réduit indéfiniment jusqu’à 1-3 mots par ligne.
Sur certaines pages (équipe) les colonnes passent en hors-champ lorsque le format est très étroit (mobile).
La largeur des colonnes et des marges augmente indéfiniment avec la largeur de l’écran pouvant produire un très grand nombre de mots par lignes.
En-tête fixe avec de larges marges, 1/5 de la hauteur de l’écran est constament occupé par un logo et trois liens.
Rappelle à la composition en deux colonnes, le logo est aligné à gauche, les éléments de navigation sont alignés à droite. Ces derniers se divisent sur deux lignes si le format est étroit. Sur format très étroit (mobile) les éléments de navigation basculent en dessous du logo, ce qui produit un envahissement de la moitié de la hauteur de l’écran par un élement fixe.
Quelques bugs d’affichage peuvent apparaitre décalant le header du haut de la page produisant une fine marge dans laquelle apparait le contenu lors du scroll.
Des effets de transitions font apparaitre un menu déroulant permettant un choix alternatif d’affichage des projets, sur mobile, ces effets poussent parfois les éléments adjascents ou les masquent partiellement.
Corps fixe pour titre, sous-titre, paragraphe (12px), le corps principal choisi est petit (la norme recommande environ 16px), fixé en pixels, sa taille ne prend pas en compte les spécificités des écrans des différents appareils ce qui le fait apparaitre encore plus petit sur certains écrans.
Très petit corps fixe pour les légendes et les menus déroulant (75%, 9px).
Graisse moyenne pour tout les éléments.
Les titres et les liens (parfois) sont signifiés par capitalisation ce qui entraine parfois une confusion ou l’impossibilité de comprendre la présence d’un lien (page équipe). La capitalisation ne prend pas en compte les accents et entraine une confusion entre le ‘I’ majuscule et le ‘l’ minuscule, ce qui pose parfois de gros problèmes de lecture.
Les listes sont présentes mais non signifiées ou signifiées par une division exceptionnelle de la colonne.
le logo est légerement redimensionné produisant un gris et une variation de graisse entre les lettres.
Ensemble des contenus affichés composés dans un nombre de colonnes variable selon la largeur de l’écran : 1 pour mobile et formats étroits, 2 pour petites resolutions, 3 pour hautes résolution, 3-4 pour très hautes résolutions.
En-tête en liste intégré aux colonnes, non fixe durant le scroll.
Corps de base définit par l’appareil ( 1 rem, environ 16px sur ordinateur personnel ). Titre et sous-titres en gras de la même famille typographique avec un corps plus élevé. Pas de capitalisation. Liens signifiés en gras, soulignés au survol. Listes et parties signifiées par une bordure.
Version du logo prévue pour un affichage fixe sur écran sans effet de déformation (dessin au pixel près).
Joomla, un logiciel de gestion de contenu vieillissant, propriétaire. Hébergement sur contrat avec xefi et infomaniak.
Il sera plus simple pour moi (et plus économique pour vous) de réinstaller proprement un CMS et d’y migrer vos données afin de mettre à jour correctement votre site que de reconfigurer et modifier votre version de Joomla, je vous propose de travailler avec l’un des logiciels suivants :
Django logiciel libre, fonctionne en python, je travaille généralement avec celui-ci.
Processwire, open-source, fonctionne en php.
Tout deux sont des logiciels ouverts, très bien documentés avec une communauté de développeurs et d’utilisateurs très active. Faciles à modifier et à “personnaliser” pour faciliter la modification du contenu du site.
Si vous le souhaitez, je vous propose de faire une migration de votre nom de domaine et de votre hébergement chez gandi.net, fournisseur historiquement engagé dans le logiciel libre, l’intégrité des données personnelles et l’autonomie des utilisateurs dans l’usage du web.