Ou comment une jeune entreprise a su développer son image grâce à ses sites Internet…
Anthone, société fondée en 2010, et spécialisée dans le domaine de la lubrification et de l’assemblage par collage, a décidé comme toute enseigne qui se respecte, de créer son propre site Internet (http://www.anthone.fr), ainsi que les sites présentant les produits destinés à la vente (http://chemicalromance.fr/).
- Et alors ? Me direz-vous. Qu’y-a-t-il d’original à cela ?
Pas grand-chose de très affriolant en apparence, je le conçois, et pourtant :
- les sites sont réalisés en HTML5, ce qui a permis, entre autres choses, de mettre en exergue la balise canvas et ses multiples opportunités ;
- mise à contribution également de règles propres aux CSS3 ;
- fluidité de la navigation à travers les différentes sections grâce à des effets de parallaxe (sur les sites produits) ;
- qualité exceptionnelle de l’iconographie;
- mise en valeur de leur image sur les réseaux sociaux ;
- mais surtout, et voici la cerise sur le gâteaux : mise sur la touche des vieux navigateurs tels que IE 6,7,8 (comment ? ils ont osés ?).
Cette petite mise en bouche mérite bien une petite explication, alors allons-y :
Mais enfin, pourquoi se donner tant de mal ?
En fait, le but avoué de la direction, était de donner une image moderne et décalée, considérant leurs clients potentiels à leur image : attirés par les dernières évolutions du web et tirant parti des médias sociaux tels que Facebook, viadéo ou twitter…
Qu’ont-ils fait des navigateurs un peu à la traîne ?
Il est tout bonnement impossible de consulter le site via ces navigateurs. Le message, dès lors qu’on arrive sur les sites de la marque est clair :
« Anthone, la version de votre navigateur est trop ancienne… Merci de mettre à jour votre navigateur pour voir ce site».
Ce message est alors suivi d’une page colorée en rouge.
HTML5 et balise , CSS3, parallaxe et sobriété des pages intérieures…
Outre l’utilisation du HTML5 et des effets propres aux CSS3 comme les transitions, le site met à profit certaines techniques, qui à mon humble avis, ne sont pas là pour jeter de la poudre aux yeux à qui veut bien s’émouvoir, mais réellement mettre en valeur leurs produits. Et pour cause, Anthone n’est autre qu’une société spécialisée dans la lubrification, et qui dit lubrification, dit huile. Or, quoi de plus léger que de voir des vaguelettes d’huile onduler dans leur container…
Le footer et la balise :
Cette balise, qui à l’aide du langage Javascript, permet de créer des formes, des dessins et des animations, est utilisée dans le but de faire onduler le footer au survole :
- Parallaxe :
Les sites produits (http://chemicalromance.fr/) sont réalisés sous forme de parallaxe, ce qui donne encore une fois une sensation de légèreté et de navigation bien huilée. - CSS3 :
Leur esprit d’initiative leur a valu un prix décerné par Prix Cssdesignaward.com . Pour info, les critères pour faire partie de la liste des nominés sont les suivants :
- un haut niveau de créativité visuelle ;
- un code CSS professionnellement irréprochable ;
- un bon fonctionnement des scripts ;
- la validation W3C (souhaitable mais non obligatoire). - Sobriété des pages internes du site corporate : http://www.anthone.fr
Sur fond blanc, le texte est écrit en gris clair (#666666). Rien à voir avec les fioritures des pages des sites produits. La mise en page est sobre, laissant place à des textes de présentation et des fiches techniques. Le tout agrémenté de visuels triés sur le volet.
Un petit bémol cependant ! Au niveau du site Corporate, on peut regretter le manque de balisage en HTML5. Je pense notamment aux balises structurelles telles que <section>, <article>, <header> et <footer>…
Réseaux sociaux et popularité
Outre une politique résolument moderne et décalée, et par conséquent, prônant tout naturellement pour une ouverture vers les médias sociaux, le prix décerné par Cssdesignaward a également joué un rôle en faveur de leur popularité croissante sur les différents médias :
- visualisation du site dans près de 100 pays ;
- présence sur Facebook, Twitter, Viadeo, LinkedIn…
Et les téléphones mobiles
A priori, une version d’Anthone sur Smartphone (et tablettes certainement) est prévue. Notamment pour la diffusion de tutoriels supportés par Youtube. Quant aux techniques types media queries, chères au Responsive Web Design, il n’y a pas de traces actuellement sur les sites… A suivre donc.
Iconographie
L’une des grandes forces de la marque réside dans le choix des visuels. Ils ont réussi à allier humour (noir parfois), décalage et esthétisme. D’autre part, les prises de vues en mode macro de pièces totalement anodines tels qu’un écrou, une chaîne ou un engrenage prennent vie sous le joug de l’objectif. Voici un petit échantillon :
Source visuels : site Internet Anthone
Source visuels : site Internet Anthone
Petit mot de fin
Milieu peu connu du grand public, cette entreprise toute jeune (faisant néanmoins partie du Groupe Aifranis, fondé en 1954), à l’image des membres constituant l’équipe (consulter la présentation de la société), a su en moins de 2 ans s’offrir une place de choix au sein de la planète Web. Bravo donc. D’autant que le décalage, se fait rare dans les sites d’entreprises… Saluons donc leur esprit d’initiative !
Sources et liens utiles :
- le magazine Webdesign n°34 (p18), dont cet article s’est inspiré ;
- www.anthone.fr / http://chemicalromance.fr ;
- http://blackthornsdesign.com/ : création du site ;
- Cssdesignaward.
Sylvère Visiedo






































