Refonte du site d'Apperture

Mission

Voir le projet

Le besoin

Apperture ayant revu sa stratégie marketing et son identité, il était donc nécessaire pour l’entreprise d’actualiser son site web. L’importance est telle, que le support en ligne est le premier lien entre les attentes du client et les solutions que peuvent proposer Apperture. Impressionner et se démarquer face à la concurrence tout en mettant en avant les nouvelles technologies et le portfolio de la société était mon brief principal pour cette mission.

Il devait bien sûr véhiculer une image positive jeune et dynamique tout en créant une sensation d'immersion à travers notre page grâce à des animations et des vidéo 360°.

Pour ce faire, la réalisation de la plateforme sous le CMS Wordpress m’était imposé afin que les community manager puissent enrichir et ajouter du contenu facilement sur la partie blog. La principale contrainte était de mettre en place un thème qui soit facilement modifiable par n’importe quel administrateur sans formation préalable. Mais je tiens à préciser qu’il faut tout de même être familiarisé avec l’environnement Wordpress afin de mettre à jours la plateforme sans créer de confrontation entre plugins ou créer des problèmes internes qui sont difficilement réparables pour une personnes non aguerrie.

Le site d’Apperture devait bien entendu être consultable sur ordinateurs, tablettes et mobiles. Pour cela, l’entreprise a investi dans un template premium : “Stratus”. Ayant pourtant l’atout d’être responsive (qui s’adapte au format de l’appareil utilisé), une grande partie de mon travail fut de faire en sorte que les éléments constituant le site web s’adaptent sur téléphone et tablette. L’avantage de celui ci est qu’il possède une grille de mise en page Bootstrap, c’est à dire une grille se décomposant en 12 colonnes qui s’adapte aussi bien sur ordinateur que sur téléphone et tablette.

Le second atout d’un thème est qu’il est facilement personnalisable dans les limites du possible. C’est donc après une veille sur l’actualité des templates wordpress, et discussion avec mon directeur artistique que nous avons choisis delight.com et https://live.oculus.com comme source d’inspiration principale.

Je pouvais donc passer à la deuxième phase de la conception d’un site: l’installation et le paramétrage d’un template sous Wordpress. Je devais mettre en place un CMS (système de gestion de contenu) sécurisé et installer tous les plugins afin de faire fonctionner parfaitement le template.

Création d'un thème enfant

Lorsqu’on utilise un thème wordpress, nous pouvons modifier le thème depuis la plateforme facilement. Mais on peut vite se retrouver dans le besoin d’adapter des classes CSS ou des comportements pour pouvoir le personnaliser au maximum. Certes il est toujours possible de modifier le code source directement dans le back office grâce à son éditeur intégré, mais certaines de ces modifications risquent fort d’être écrasées lors de la prochaine mise à jour du thème.

Pour ne pas perdre l’ensemble de ses modification, il existe la possibilité de créer un Thème Enfant (Child Theme) et ainsi de pouvoir adapter le thème ‘parent’ et l’enrichir tout en s’affranchissant des problèmes de mises à jour ultérieures. C’est donc ce que j’ai mis en place directement dès mes premières heures de travail sur ce site web

Sécurité du CMS

Concernant la sécurité, j’ai installé et paramétré un plugin gratuit “All In One WP Security” qui permet de modifier énormément de paramètres essentiels au bon fonctionnement de la plateforme.

Grâce à lui, j’ai pu notamment mettre en place une une technique efficace de prévention contre Brute Force qui consiste à changer l’URL par défaut de la page de connexion à WordPress. En temps normal, si vous souhaitez vous connecter au back office, vous tapez l’URL de votre site attendue par wp-login.php. Cette fonction permet de modifier l'URL de connexion en définissant votre propre alias et ajoutant l'URL de connexion à wp-login.php. En procédant ainsi, les robots et pirates ne pourront accéder à votre page de connexion, car ils ne connaîtront pas la bonne URL.

Une autre section de celui ci permet également de sécuriser sa base de données, ses fichiers internes ainsi que la prévention contre le spam. Il faut savoir qu’une grande partie des SPAM de commentaire de blog WordPress est principalement produite par des robots automatisés et pas nécessairement par les humains. Cette fonctionnalité va considérablement réduire le trafic et les chargements inutiles sur votre serveur dus aux SPAM de commentaires en bloquant toutes les demandes de commentaire qui ne proviennent pas de votre domaine. En d’autres termes, si le commentaire n’est pas présenté physiquement par un humain sur votre site, il sera bloqué. Pour renforcer le tout, nous pouvons ajouter un captcha qui est un programme de test visant à protéger un site web des robots mal intentionnés.

Gestion des rôles

Étant donné que le site d’Apperture est amené à terme à être utilisé par des community manager et d’autres administrateurs, il était important de mettre en place un système de rôles bien défini pour garantir la sécurité et la bonne utilisation de tous. Pour cela, j’ai choisi le plugin gratuit “Members)”, une extension de gestion de rôles et d’utilisateurs qui vous donne un contrôle total des autorisations sur votre site. Cette extension permet de créer, cloner, modifier les rôles et les capacités, d'assigner plusieurs rôles à un utilisateur, de bloquer l’accès à vos contenus et même de rendre votre site totalement privé.

En dernière partie, j’ai installé une extension appelé “Coming Soon Page & Maintenance Mode par Seed Prod”. Celle ci permet de mettre en maintenance le site web et de rediriger tous les visiteurs non connectés vers une page les informant que le site est actuellement indisponible. En parallèle, il est important de s'occuper de tous les liens qui acheminent vers une page qui n'existe pas sur le site, autrement dit une page 404. C’est pourquoi j’ai installé le plugin “404 to 301” afin de rediriger l’utilisateur vers une page spécifique si jamais il venait à tomber sur une page inexistante de notre site.

Fonctionnement du template

Concernant le fonctionnement du template en lui même, il se présente sous une forme de plusieurs extensions et bloc prédéfinis que nous pouvons ajouter à une page pour la créer et l’alimenter. Tout se passe donc sur l’éditeur de page. Nous pouvons ajouter et modifier le nombre de bloc que nous souhaitons facilement dans la partie “Meta Box Builder” se décomposant en trois onglet : “Meta Box” pour ajouter les blocs et les extensions, “Quantities” pour gérer leur nombre, et “Order” pour modifier leur emplacement dans la page. Il fonctionne sous un système de glisser déposer qui permet de modifier aisément la disposition des blocs.

Problématiques esthétiques

Mon plus gros challenge sur ce projet était d’adapter la toute nouvelle identité d’Apperture au site web pour permettre une immersion totale dans le monde de la réalité virtuelle et de l'innovation numérique que propose l’entreprise. La charte graphique conçue sur une base d’une seule tonique contrastant aussi bien sur des noirs comme des blancs, offrait une multitude de possibilités concernant l’univers qui allait être créé. Malgré l’utilisation d’un thème premium et assez complet, j’ai du revoir énormément de paramètres de mise en page pour que le site soit en parfaite cohérence graphique avec l'identité d’Apperture. Il faut donc savoir passer au dessus des règles CSS imposées par le template sans toutefois surcharger le site web, au risque de ralentir son chargement et de perdre des utilisateurs.

Voir le projet