WP Channel 2016, retour d’expérience et conseils sur une refonte en profondeur

Après des mois de développements sur mon temps libre, j’aimerais vous faire partager les difficultés rencontrées dans le cadre de cette refonte et et vous présenter les nouveautés. Nous approchons de la 7e année d’existence et votre fidélité est toujours au rendez-vous ! Merci à chacun de vous, lecteur de passage ou habitué.

Un changement de nom

WordPress Channel devient WP Channel ! Cela n’a l’air de rien mais c’est un aspect essentiel en terme d’identité. Le nom du site est désormais en parfaite adéquation avec le nom de domaine et le compte Twitter. Autre aspect important : la mise en conformité avec Automattic concernant l’utilisation de la marque WordPress. Bien que n’ayant jamais eu de souci à ce niveau, il m’est apparu essentiel de profiter de cette refonte pour aller dans le sens de la cohésion.

Une nouvelle identité graphique

Comme vous pouvez le constatez, le site a subi un renouveau complet en matière de web-design. Cette prestation a été confiée à Marina Mourguiart, web-designeuse talentueuse avec qui je collabore – entre autres, sur le projet WP Alacarte.

Son travail a tout d’abord consisté à créer un nouveau logo reflétant davantage de modernité que l’ancien. La recherche artistique puis les premières ébauches sont déterminantes dans la conception d’un logo.

C’est un travail qui doit reposer sur une relation de confiance avec votre prestataire que je qualifierai ici de partenaire.

Un bon web-designeur doit être capable de comprendre vos attentes, suggérer des pistes créatives parfois insoupçonnées et vous guider vers les bons choix.

En parallèle, Marina s’est penchée sur la conception graphique de différents gabarits de pages : accueil, archives (catégories, étiquettes, auteur, date), article, page standard, page des contributeurs et page À propos. Ce fut un travail colossal nécessitant plusieurs journées de travail. Le problème principal sur lequel nous nous sommes focalisés concernait la facilité d’accès à l’information. Un énorme de travail de brainstorming fut nécessaire et toutes les pistes envisageables ont été mises sur la table. Au final, un système de cartes à hauteur fixe fut la solution retenue pour lister les contenus. Côté recherche d’information, 2 possibilités : filtres par catégorie ou par terme de recherche, le tout en Ajax pour un affichage instantané.

Je tiens à remercier chaleureusement Marina de son implication tout au long du projet !

Des efforts techniques supplémentaires

Sur le plan de l’intégration graphique, le développement précédent a servi partiellement de base. Des structures HTML ont pu être reprises ici ou là mais de façon limitée. Les principales difficultés concerne les comportements à imaginer sur les différents niveaux de résolutions tout en conservant un haut de niveau d’expérience utilisateur. Le recours à l’Ajax sur les recherches, les filtres de catégorie ou encore le bouton Charger plus d’articles est l’un des points forts de cette nouvelle mouture.

La partie Ajax est l’œuvre de Mickaël Gris que je remercie !

Pour cette nouvelle version, je me suis fixé les objectifs suivants :

1. Maintenir un haut niveau de performances sans pour autant perdre en qualité graphique et fonctionnelle : de ce point de vue là, je pense que l’on peut difficilement faire mieux en termes d’optimisation. Le site dispose depuis plusieurs mois d’un hébergement sur nos propres serveurs dédiés, de PHP 7, d’un code optimisé bien que toujours perfectible et de l’extension WP Rocket pour assurer la mise en cache. Je tenais à démontrer que l’on peut développer un site WordPress graphiquement très abouti sans pour autant lésiner sur les performances, à vous d’en juger ;
2. Améliorer l’accessibilité : chaque internaute perçoit le Web différemment et c’est à nous autres concepteurs de site Internet de nous préoccuper des questions d’accessibilité. De nombreuses ressources existent à ce sujet : référentiel Opquast avec l’extension pour Mozilla Firefox (nécessite de modifier sa configuration pour pouvoir l’installer correctement), le handbook dédié à l’accessibilité sur Make WordPress, les conférences de Gaël Poupard lors du WP Tech 2014 et du WPMX Day 2015 qui m’ont sensibilisé. Je suis persuadé qu’il reste de nombreux efforts possibles pour améliorer encore plus l’accessibilité sur ce site, c’est un sujet complexe à apprendre et qui évolue sans cesse ;
3. Garantir une maintenance efficace et stable dans le temps : cette version doit durer dans le temps, il est donc primordial d’être d’autant plus exigeant avec soi-même sur la qualité du code produit. Dans la mesure du possible, utilisez les fonctionnalités natives de WordPress et faites les choses simplement. Il existe de nombreuses technologies à la mode mais qui seront périmées dans six mois, prenez le temps ;

Parmi les technologies utilisées, on citera :

• Le framework CSS Twitter Boostrap pour les notions de responsive design notamment ;
• HTML 5, CSS3, PHP 7 pour les langages de programmation et leurs versions à jour ;
• jQuery 2.2.3 comme librairie JavaScript, une version plus récente que celle proposée nativement par WordPress ;
• Des polices Web fournies par Adobe Typekit ;
• La police Dashicons optimisée via Icomoon pour ne charger que les icônes réellement utilisés dans le projet.
• Prise en charge HDPI (Retina), c’était déjà le cas jusqu’à présent mais de nouvelles techniques comme le recours aux SVG, l’utilisation de balises srcset dans les images ont été utilisées ;

Pour vous donner un ordre d’idée approximatif, le projet de refonte a nécessité 15 jours / homme en totalité avec le haut niveau d’expérience qui est la nôtre dans nos domaines respectifs. Nous pourrions facilement doubler le temps nécessaire mais il faut savoir se fixer des limites.

La parole est maintenant à vous, chers lecteurs, que pensez-vous de cette nouvelle version de WP Channel ?