Le site Responsive Design du mois : KarlParfums

KarlParfums (responsive design) Lancé lors de la sortie des nouveaux parfums de Karl Lagerfeld, le site combine esthétique raffinée et affichage fluide. Un mode dégradé pour navigateurs n'interprétant pas HTML5 est de la partie.

Existant depuis 1984, la marque Karl Lagerfeld a été revitalisée en 2012 pour s'inscrire désormais à 100% dans le digital. Pour traduire cette nouvelle orientation stratégique, Karl Lagerfeld a ainsi repensé entièrement sa présence sur le web et les réseaux sociaux, notamment par la mise en place d'un site web entièrement refondu.

Faisant partie intégrante de l'univers Karl Lagerfeld, KarlParfums.com constitue à ce titre le dernier étage en date de la fusée digitale du groupe de luxe, qui n'a pas hésité à exploiter les dernières technologies d'affichage web et faire la part belle au Responsive Design.

Une gestion de projet agile autour de Scrum

5
Affichage d'une vidéo extraite de KarlParfums. © Capture JDN

"Il était capital pour nous que le site soit accessible depuis n'importe quel terminal, tablette, et smartphone Android ou iOS", fait savoir Caroline Lebar, directrice de la communication de Karl Lagerfeld. "Nous avons voulu donner aux internautes qui visitent le site une extrême fluidité de navigation, le tout dans un environnement élégant, sans icones qui se baladent partout, assez dépouillé mais tout en donnant beaucoup d'informations."

Pour l'accompagner dans sa nouvelle aventure digitale, Karl Lagerfeld a fait appel à l'agence web Emakina. Pour ce qui est de KarlParfums, le site a nécessité trois mois de conception et de réalisation, de décembre 2013 à mars 2014. Le projet a été piloté par une équipe de cinq personnes. A savoir : deux intégrateurs, un directeur artistique, un chef de projet et un web designer.

En termes de gestion de projet, Emakina a opté pour un mode agile, via la méthode Scrum (sprint review, next step...), caractéristique des chantiers web nécessitant une extrême réactivité des équipes techniques et fonctionnelles.

Une expérience sensorielle encore perfectible sur mobile

Entièrement codé en HTML5 et JavaScript, KarlParfums a d'ailleurs nécessité de très gros efforts en matière de d'intégration. "La phase d'intégration a été rude car il a fallu prévoir l'affichage sur tous les terminaux du marché en tenant compte de toutes les versions des navigateurs sachant que certains n'interprètent pas HTML5", explique Manuel Diaz, PDG d'Emakina.

Pour pallier la situation, une importante phase de testing a été mise en place, ce qui n'a pas empêché l'agence de retenir un mode dégradé d'affichage pour les navigateurs ne supportant pas HTML5. KarlParfums apparaît comme un site à l'esthétique très aboutie, entremêlant de façon gracieuse de multiples contenus (texte, photo, vidéo...). Mais c'est très certainement sur postes de bureau que "l'expérience sensorielle" voulue par Emakina se révèle la plus efficace avec notamment le lancement automatique de vidéo.

6
Exemple de scroll de contenus horizontal sur le site KarlParfums. © Capture JDN

"L'approche Mobile First choisie par Emakina est très appréciable, avec un focus sur les éléments de contenu prioritaires en tenant compte de la surface de visualisation réduite sur les smartphones", analyse Benoît Vrins, interactive designer au sein de l'agence web Spade, après avoir étudié le site. "Alors que sur iPad un bouton permet de lancer la vidéo, ce n'est cependant pas le cas sur iPhone, ce qui est d'autant plus dommage qu'avec iOS7 un espace noir en fallback bloque la zone de scroll ou de glissé."

Un bug qui devrait être corrigé sous peu par Emakina : "Nous avons détecté que la dernière mise à jour de Safari pour iOS7 affectait à certains endroits l'affichage du site mais nous travaillons dessus pour le corriger rapidement", nous a indiqué Manuel Diaz.

Navigateurs / HTML