Le CSS ( cascading style sheets )
Encapsulées avec la classe .lf_hf
L’ensemble de votre css doit étre préfixé avec la class .lf_hf
L’encapsulation va permettre de résoudre les conflits entre le CSS des Thèmes Store Locator de Bridge et celui de votre header & footer.
/!\ L'ensemble des propriétés CSS nécessaires au bon affichage de votre header & footer doit se trouver encapsuler à l'intérieur de la classe .lf_hf y compris et surtout les balises génériques ( div, span, *, ...).
Pour les balises html et body il faudra reporter le CSS au niveau de la classe .lf_hf
Le menu et les sous‐menus
Information sous menu
Pour information, nous avons seulement 3% de clic sur le menu enseigne depuis le Store Locator. Un internaute du Store Locator recherche des informations relatives à une boutique et non des informations sur un produit ou la marque dans la plupart des cas.
Pour des questions de SEO nous déconseillons fortement un menu avec un maillage trop important. Par expérience celui-ci nuit considérablement au référencement du Store Locator.
Suppression des sous menu et des scripts liés
Afin d’intégrer au mieux ce menu allégé, il faudra nous fournir un menu avec les liens en absolu redirigeant vers vos rubriques principales, isoler les éventuelles animations du menu de rang 1 ( hover ) et les rendre compatibles avec notre librairie javascript jQuery (version Bridge V2 : 1.11.3; version Bridge V3 : 3.2.1).
La version V4 de notre starterkit n'embarque plus la librairie javascript jQuery mais uniquement du javascript natif pour garantir de meilleures performances.
Ajout de vos sous-menus et des scripts liés.
Comme pour le menu, il faudra isoler le comportement des sous-menus et les rendre compatibles avec notre librairie javascript jQuery (version Bridge V2 : 1.11.3; version Bridge V3 : 3.2.1), dans le cas ou ils utilisent une librairie jQuery
La version V4 de notre starterkit n'embarque plus la librairie Javascript jQuery mais uniquement du javascript natif pour garantir de meilleures performances.
Attention, nous n’intégrerons pas vos animations ou script si ils ne sont pas compatibles.
Les liens en absolu pour les balises <a>
https://
Les liens du votre header et footer doivent tous être en absolu et commencer par votre nom de domaine.
Exemple : <a href:"https://www.solocal.com/bridge/"> Mon lien </a>
Les images de votre Header Footer
Stockage de vos fichiers avec BRIDGE
Nous stockons les images liées à votre header et footer sur nos serveurs pour optimiser les accès et le chargement. Nous stockons aussi vos images en local afin d'anticiper tout changement d'URL, de taille d'image etc... qui pourrait provoquer une erreur d'affichage.
Pour se faire, pensez à nous fournir l'ensemble de ces images dans les sources du Header/Footer. Pensez aussi à les référencer dans vos sources via des URLs relatives et non absolues
Exemple en CSS: background: url(/images/bg.png);
Les balises titres
Supprimer les balises titres
La priorité du Store Locator est d’être référencé par les moteurs de recherche sur le contenu élaboré par notre équipe SEO. Notre solution Bridge est entièrement hiérarchisée dans cette optique, pour ne pas interférer avec notre optimisation, nous vous demandons de n'inclure aucune balise H* (H1, H2, H3, H4 ..) dans votre code HTML.
Les scripts
Version de JQUERY et BOOTSTRAP
La version V4 de notre starterkit n'embarque plus la librairie Javascript jQuery et Bootstrap mais uniquement du code javacript et CSS natif pour garantir de meilleures performances.
OLD version
Pour information, nous chargeons les librairies javascript jQuery (version Bridge V2 : 1.11.3; version Bridge V3 : 3.2.1) et Bootstrap (version Bridge V2 : 3.3.4; version Bridge V3 : bootstrap-sass 3.3.7), afin d’éviter les conflits, nous vous demandons de retirer ces appels dans votre code et d'adapter votre module.
Gestion des scripts
Pour intégrer au mieux vos scripts et animations nous souhaitons qu’ils soient séparés en module avec :
- le code js avec les appels aux éléments du DOM.
- les appels aux librairies associées nécessaires au fonctionnement. Vous pouvez utiliser des outils online pour les rendre autonomes comme http://codepen.io/ ou http://jsfiddle.net/
Structure HTML pour votre base de réalisation
Codepen exemple : vous pouvez fork notre exemple ici : https://codepen.io/inteleadformance/pen/YzvbVgV
Les éléments spécifiques
Le panier
Nous ne gérons pas l’affichage du nombre de produits dans le panier e-commerce.
Il faudra donc le supprimer.
Le panier utilisateur étant un élément propre au site de l’enseigne, il n’est pas possible de l’inclure au header du Store Locator. La seule action possible est l’affichage d’un lien redirigeant sur la page panier de l’utilisateur.
La barre de recherche
Nous ne gérons que les formulaires html simple et standard en GET ou POST. Le formulaire est directement soumis à la page de résultat du site de l’enseigne (l’utilisateur est donc redirigé sur le site de l’enseigne).
Authentification
Nous ferons un lien de redirection vers la page d’authentification de votre site corporate.
Commentaires
0 commentaire
Cet article n'accepte pas de commentaires.