Petit rappel pour les étourdis, l’intégrateur web est celui qui récupère les maquettes du web designer pour les transformer en pages web. Une fois ceci en tête, inutile de rappeler que le rôle de l’intégrateur dans la conception d’un site est primordial d’où l’utilité de rappeler des bonnes astuces d’intégration notamment sous PrestaShop :
- Organisez votre feuille de style CSS : regroupez intelligemment les règles, hiérarchisez avec indentation, et commentez pour plus de lisibilité.
- Faites des scripts non intrusifs : les éléments doivent rester lisibles et utilisables sur la boutique même si le Javascript est désactivé.
- Utilisez au maximum des unités dynamiques pour les tailles comme les police ou les marges. Avec les em ou les % vous aurez plus de souplesse.
- Utilisez la balise <label> pour le texte accompagnant les champs de formulaire, et spécifier l’attribut for=”identifiant-du-champ”. Avec cette balise, le clic sur le label appliquera le focus sur le champ associé.
- Insérez les images à la taille réelle sur le site, pour ne pas charger une image plus lourde d’abord, pour éviter l’affichage de mauvaise qualité du au redimensionnement CSS.
- Pensez à toujours spécifier un texte alternatif aux images.
- N’utilisez pas les majuscules et caractères spéciaux dans les noms des fichiers ; séparez les différents mots composant le nom du fichier par un tiret cadratin – et non par un tiret bas _.
- Indiquez bien une couleur de fond pour les éléments de formulaire input[text], textarea, select, ainsi que la police d’écriture. Selon le navigateur, le fond par défaut n’est pas toujours blanc et les propriétés font n’héritent pas du body.
- Définissez bien un style pour tous les titres (h1, h2, h3…) en respectant une hiérarchie (le h1 est plus gros que le h2 qui est plus gros que le h3 qui est…).
- Appliquez un style différent pour chaque état d’un lien (survol (hover), le focus (focus), déjà visité (visited)…) toujours dans un souci d’ergonomie.
- Distinguez visuellement les liens externes des liens internes au site.
- Utilisez les sprites à petit niveau pour réduire le poids de la page et éliminer le chargement des images à la volée lors du survol d’un lien par exemple.
- N’oubliez pas le code Google Analytics dans l’en-tête du site ; PrestaShop permet d’inclure ce code directement dans le back office.
- Détail visuel, n’oubliez pas de créer le favicon pour la boutique.
- Pensez à indiquer la langue, la section… en tant que class sur la balise body ; pensez aussi à indiquer l’identifiant de la page en tant qu’id.
Et pour compléter cet article, voici 5 astuces pour l’intégration web. Partagez vous-aussi vos astuces d’intégrateur, vos pense-bête pour ne rien oublier et obtenir un résultat optimal 🙂