Proposition

Proposition de refonte du site www.gbau.fr. Une maquette interactive est associée à ce devis.

Bien cordialement,

Maxime

Index

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

I. « Mission »

Le contenu de cette partie se veut être une synthèse des différents échanges avec Laetitia Bildgen.

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.

II. Devis

Esquisse de devis avant proposition définitive.

1j = 200€

12 ou 14 * 200

2400€ ou 2800€ TTC

III. Maquette

Vous trouverez une maquette fonctionnelle de cette proposition sur www.maximebouton.fr/GBAU/maquette/.

IV. Vues

Full HD 1980x1080

/index e=0.3

/projets/[item] e=0.3

HD 1280x720

/index e=0.5

/projets/[item] e=0.5

Galaxy S5/Note 3 360x640

/index e=1

/projets/[item] e=1

Galaxy Note 9 414x846

/index e=1

/projets/[item] e=1

iPad vertical 768x1024

/index e=0.8

/projets/[item] e=0.8

iPad horizontal 1024x768

/index e=0.62

/projets/[item] e=0.62

iPhone 5/SE 320x568

/index e=1

/projets/[item] e=1

iPhone XS Max 414x896

/index e=1

/projets/[item] e=1

HiDPI Screen 1440x900

/index e=0.44

/projets/[item] e=0.44

MDPI Screen 1280x900

/index e=0.5

/projets/[item] e=0.5

V. Arborescence et navigation

Actuel

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.

Arboresence

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/arguments
GBAU                                        -> /index/gbau
Projets                                     -> /index/catalogue
Éléments de théorie                         -> /index/arguments
/index/gbau
GBAU                                        -> /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
/index/catalogue
[projet_item_1]                             -> /index/catalogue/[abreviation_du_projet]
[projet_item_2]                             -> /index/catalogue/[abreviation_du_projet]
[...]                                       -> /index/catalogue/[abreviation_du_projet]

Notes

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.

Proposition

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.

arborescence

+-- 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]
header
Projets                                     -> /about/equipe
Équipe et partenaires                       -> /about/equipe
Publications, conférences, expositions      -> /about/publication
Iconographie autobiographique               -> /about/iconographie
/index
[projet_item_1]                             -> /projets/[abreviation_du_projet]
[projet_item_2]                             -> /projets/[abreviation_du_projet]
[...]                                       -> /projets/[abreviation_du_projet]

VI. «Responsive» et identité graphique

Actuel

Composition

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 (header)

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.

typographie et composition

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.

Proposition

Composition

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 (header)

En-tête en liste intégré aux colonnes, non fixe durant le scroll.

Typographie et composition

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.

Logo

Version du logo prévue pour un affichage fixe sur écran sans effet de déformation (dessin au pixel près).

VII. Logiciel de gestion de contenu (CMS) et hebergement

Actuel

Joomla, un logiciel de gestion de contenu vieillissant, propriétaire. Hébergement sur contrat avec xefi et infomaniak.

Proposition

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 :

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.