LogoLogo
Homepage
  • Documentations for PrestaShop 1.5
  • English documentation 1.5
    • About PrestaShop 1.5
    • New features in PrestaShop 1.5
    • Getting Started
      • What you need to get started
      • Installing PrestaShop
      • Installing PrestaShop using the command line
      • Updating & Uninstalling
      • Misc. information
    • Updating PrestaShop
      • Automatic update
      • Manual update
      • Making and restoring your own backup
      • In case of issues
    • User Guide
      • Training
      • Customizing your shop
      • Browsing the front-office
      • Connecting to the PrestaShop back-office
      • First steps with PrestaShop 1.5
      • Adding Products and Product Categories
      • A Look Inside the Catalog
      • Managing Orders
      • Managing Customers
      • Creating Price Rules and Vouchers
      • Managing Shipping
      • Understanding Local Settings
      • Managing Modules and Themes
      • Making the Native Modules Work
      • Understanding the Preferences
      • Understanding the Advanced Parameters
      • Administering the Back-Office
      • Understanding Statistics
      • Advanced Stock Management
      • Managing Multiple Shops
    • Developer Guide
      • Developer tutorials
        • Using the PrestaShop Web Service
          • Webservice one-page documentation
          • Chapter 1 - Creating Access to Back Office
          • Chapter 2 - Discovery - Testing access to the web service with the browser
          • Chapter 3 - First steps - Access the Web service and list client
          • Chapter 4 - Retrieve Data - Retrieving a Client
          • Chapter 5 - Modification - Update client
          • Chapter 6 - Creation - Remote Online Form
          • Chapter 7 - Removal - Remove customer accounts from the database
          • Chapter 8 - Advanced Use
          • Chapter 9 - Image management
          • Chapter 10 - Price management
          • Cheat-sheet - Concepts outlined in this tutorial
          • Web service reference
        • Helpers
          • HelperForm
          • HelperOptions
          • HelperList
          • Using helpers to overload a back-office template
        • New Developers Features In PrestaShop 1.5
        • Using the Context Object
        • DB class best practices
        • Public and overloadable methods
        • Overriding default behaviors
        • Using addJquery(), addJqueryPlugin() and addJqueryUI()
        • Handling special characters in links
        • Auto-updating modules
        • Front-Office Controllers
        • Controllers correspondence table
        • Specifics of multistore module development
        • Developer tips and tricks
        • PrestaShop's developer tools
        • Using the backward compatibility toolkit
      • Fundamentals
      • Coding Standards
      • Setting up your local development environment
      • Diving into PrestaShop Core development
      • Creating a PrestaShop module
      • Creating a front-office module
      • Creating a module with both front-end and back-end controllers
      • Hooks in PrestaShop 1.5
      • Translations in PrestaShop 1.5
      • How to use the Forge to contribute to PrestaShop
      • How to write a commit message
      • Contributing code to PrestaShop
    • Designer Guide
      • Theme development fundamentals
      • Integrating content in a page using hooks
      • Characteristics of a front-office theme
      • Characteristics of a back-office theme
      • Creating your own theme
      • Theme templates and Smarty
      • Using jQuery and Ajax
      • Best practices
      • Designer tutorials
        • Changes in version 1.5 which impact theme development
        • Changing a 1.4 theme to support gift products
        • Implementing layered navigation in a theme
    • System Administrator Guide
    • Merchant's Guide
      • Our advices
      • Sample price rules
    • FAQ
      • Using PrestaShop with WordPress
    • Troubleshooting
  • Documentation française 1.5
    • À propos de PrestaShop 1.5
    • Nouveautés de PrestaShop 1.5
    • Guide de démarrage
      • Ce dont vous avez besoin
      • Installer PrestaShop
      • Installer PrestaShop en ligne de commande
      • Mettre PrestaShop à jour
      • Informations diverses
    • Guide de mise à jour
      • Mise à jour automatique
      • Mise à jour manuelle
      • Faire une sauvegarde et la restaurer
      • En cas de problème
    • Guide de l'utilisateur
      • Formations
      • Personnaliser votre boutique
      • Parcourir le front-office
      • Se connecter au back-office de Prestashop
      • Premiers pas avec PrestaShop 1.5
      • Ajouter des produits et des catégories de produits
      • Un aperçu du catalogue
      • Gérer les commandes
      • Gérer les clients
      • Mettre en place des promotions
      • Gérer les transporteurs
      • Comprendre les réglages locaux
      • Gérer les modules et les thèmes
      • Configurer les modules natifs
      • Comprendre les préférences
      • Comprendre les paramètres avancés
      • Administrer le back-office
      • Comprendre les statistiques
      • Gestion avancée des stocks
      • Gérer plusieurs boutiques
    • Guide du développeur
      • Fondamentaux
      • Norme de développement
      • Mettre en place votre environnement de développement
      • Plonger dans le développement PrestaShop
      • Créer un module PrestaShop
      • Les hooks de PrestaShop 1.5
      • Les traductions dans PrestaShop 1.5
      • Comment utiliser la Forge pour contribuer à PrestaShop
      • Comment écrire un descriptif de modification
    • Guide de l'intégrateur
      • Fondamentaux de la création de thème
      • Intégrer du contenu dans une page à l'aide de hooks
      • Caractéristiques d'un thème front-office
      • Caractéristiques d'un thème back-office
      • Template de thème et Smarty
      • Utiliser jQuery et Ajax
      • Bonnes pratiques
    • Guide de l'administrateur système
    • Guide du vendeur
      • Exemples de promotions
      • Nos bons conseils
    • Questions fréquentes
    • Dépannage
  • Documentación española 1.5
    • Acerca de PrestaShop 1.5
    • Introducción
      • Lo que necesita para empezar
    • Guía del usuario
      • Formación
      • Personalización de su tienda
      • Exploración del front-office
      • Conexión al back-office de PrestaShop
      • Primeros pasos con PrestaShop 1.5
      • Añadir productos y categorías de productos
      • Una mirada interna al catálogo
      • Gestionar pedidos
      • Gestionar clientes
      • Crear reglas de precios y cupones
      • Gestionar el transporte
      • Comprender la Configuración Local
      • Gestionar módulos y temas
      • Configurar los Módulos Nativos
      • Comprender las Preferencias
      • Comprender los Parámetros avanzados
      • Administrar el Back-Office
      • Comprender las estadísticas
      • Gestión avanzada de stock
      • Gestionar varias tiendas
    • Guía del Desarrollador
      • Tutoriales para Desarrolladores
        • Uso del Web Service de Prestashop
          • Capítulo 1 - Creación de acceso al Back Office
  • Документация на русском языке 1.5
    • Информация о PrestaShop 1.5
    • Новые функции в PrestaShop 1.5
    • Приступая к работе
      • Что нужно чтобы приступить к работе
      • Установка PrestaShop
      • Установка PrestaShop при помощи командной строки
      • Обновление и удаление PrestaShop
      • Прочая информация
    • Руководство пользователя
      • Обучение
      • Настройка вашего магазина
      • Изучение публичной части сайта
      • Бэк-офис PrestaShop
      • Первые шаги в PrestaShop 1.5
      • Добавление товаров и товарных категорий
      • Внутри каталога
      • Управление заказами
      • Работа с клиентами
      • Создание правил ценообразования корзины и ваучеров
      • Управление доставкой
      • Ориентация в локальных настройках
      • Управление модулями и темами
      • Настойка встроенных модулей
      • Ориентация в настройках
      • Ориентация в расширенных параметрах
      • Администрирование Back-Office
      • Ориентация в статистике
      • Расширенное управление запасами
      • Управление мультимагазином
Powered by GitBook
On this page
  • Bonnes pratiques
  • Penser en amont
  • Concevoir le thème dans Photoshop
  • Ergonomie
  • Optimisation des images
  • Quelques conseils de référencement (SEO)

Was this helpful?

  1. Documentation française 1.5
  2. Guide de l'intégrateur

Bonnes pratiques

PreviousUtiliser jQuery et AjaxNextGuide de l'administrateur système

Last updated 4 years ago

Was this helpful?

Contenu

Bonnes pratiques

De la conception de votre thème dans Photoshop à l'optimisation de son code pour les moteurs de recherche, il y a quelques étapes à suivre, établies comme étant des passages obligés du développement de thème. Suivez ces meilleures pratiques pour obtenir un meilleur thème.

Penser en amont

Avant même d'ouvrir Photoshop, GIMP ou tout autre éditeur graphique, vous devriez simplement vous assoir avec une feuille et un crayon, et réfléchir à l'arborescence de votre boutique, afin de la rendre aussi flexible que possible. Par exemple, toutes les boutiques n'ont pas le même nombre de catégories, ou de produits par catégorie.

Un thème complet de PrestaShop requiert au moins 30 pages ou sections de page :

  • Accueil

  • Page de catégorie

  • Page de produit

  • Page de comparaison de produit

  • Page de résultat de recherche

  • Page "Mon compte" et toutes ses sous-pages :

    • Mes réductions

    • Mon historique de commandes

    • Mes informations personnelles

    • Mon panier

  • Page de connexion

  • Page de création de compte

  • Page de commande :

    • Liste d'adresses

    • Coût d'expédition

    • Choix du paiement (chèque, transfert...)

    • Page unique de commande

  • Création d'adresse

  • Page de livraison

  • Page de maintenance

  • Liste des fabricants et page de fabricant

  • Liste des fournisseurs et page de fournisseur

  • Page d'erreur 404 (page introuvable)

  • Page "Meilleures ventes"

  • Page "Nouveaux produits"

  • Page "Promotions actuelles"

  • Page "Mot de passe oublié"

  • Informations légales

  • Carte du site

  • Page des magasins

  • Formulaire de contact

Faites bien en sorte de prendre toutes ces pages en compte, afin de n'en oublier aucune, dans le cas contraire, vous pourriez obtenir un thème incomplet, et donc une mauvaise expérience utilisateur.

Dans les faits, ces 30 fichiers ne sont que la partie émergée de l'iceberg. Pour avoir une meilleure idée des pages à prendre en compte, plongez-vous dans le thème par défaut, situé dans le dossier /themes/defaut. Il a plus de 60 fichiers template, sans parler des fichiers CSS, JavaScript ou des images, ainsi que la version mobile (dans le dossier /themes/default/mobile) qui lui-même comprend 58 fichiers template et ses propres fichiers CSS, JavaScript et images.

Une fois que vous maîtrisez votre arborescence, faites quelques croquis pour l’interface, afin d'avoir une première idée de la position des divers éléments : nouveaux produits, promotions, images, texte, etc.). Par ailleurs, incluez les détails importants, tels que les diverses mentions sur la page du produit : en solde, promotion, nouveau produit, prix barré...).

Bien entendu, ce ne sont là que des conseils d'ordre général ; certains professionnels préfèreront travailler directement dans Photoshop, puis passer au code PHP, HTML et CSS.

Concevoir le thème dans Photoshop

Vous êtes rarement seul à créer un thème : que ce soit un collègue ou un client, vous devrez montrer/partager votre travail en de nombreuses occasions. Vous devriez donc faire en faciliter cet échange dès le départ.

L'un des premiers aspects à respecter est d'utiliser un espace de couleur RVB, en 72 ppp, et de toujours partager le fichier avec tous les calques, sans les aplatir. (sauf si c'est pour l'envoyer au client final, auquel cas vous ne devriez lui donner le PDF aplati que si cela fait partie de votre contrat). En général, vous ne devriez jamais aplatir les calques de votre création, à moins d'être certain de ne jamais avoir à travailler dessus à l'avenir.

Lorsque vous concevez un thème PrestaShop, vous devriez travailler avec 980 pixels de large et, en fonction de vos besoins, avec :

  • Un dossier Photoshop avec toutes vos couches de texte, afin que les développeurs web puissent facilement accéder à votre design.

  • Un dossier Photoshop par bloc de design (nouveaux produits, meilleures ventes, etc.).

Couleurs

Utilisez toujours le réglage RGB. N'utilisez pas le réglage CMYK, qui n'est adapté qu'à l'imprimerie.

Unités

Quand vous créez pour le Web, l'unité de base est le pixel. Ne faites pas vos mesures en picas, points ou centimètres.

Polices

N'utilisez pas de police atypique ! Faites en sorte que tout reste bien lisible !

Le texte standard (titre, sous-titre, texte normal) devrait être limité aux polices suivantes, afin de vous assurer que les visiteurs voient tous la même chose :

  • Arial

  • Verdana

  • Helvetica

  • Georgia

  • Tahoma

Utilisez le strict minimum de police : trop de polices différentes ne peuvent que rendre votre design plus confus.

Bien entendu, vous pouvez utiliser n'importe quelle police dans vos images, comme votre logo ou le carrousel de photos.

Taille de texte

Gardez toujours en tête que l'utilisateur choisit la taille finale du texte, étant donné que les navigateurs modernes peuvent l'augmenter ou la réduire au besoin. En fait, vous devriez tester votre site avec différentes variations dans les réglages de votre navigateur, afin de voir si votre design est solide... et donc de voir ce qu'il vous faut retravailler pour éviter qu'il soit facilement cassé.

Cela étant, vous pouvez prendre ces mesures comme base :

  • 18px pour les titres.

  • 14px pour les sous-titres

  • 10 à 12px pour le texte normal

Transparence

Les images transparentes ne fonctionnent pas bien sur les anciens navigateurs, en particulier Internet Explorer, donc évitez les images PNG en 24 bits. Pour ce qui est des images GIF avec transparence, utilisez-les par-dessus un fond uni pour vous assurer que l'effet fonctionne. De plus, évitez les pixels semi-transparents en définissant une couleur de cache (la même que celle du fond).

Enfin...

  • Pensez à activer toutes les options afin de voir le rendu avec le thème standard.

  • Modifiez une fiche produit pour voir quelles sont les options possibles (promotion, nouveautés, etc.) et leurs impacts sur l’affichage en front-office... s'il y en a un.

  • Le style graphique de votre boutique doit être homogène.

Ergonomie

Sans plonger dans les théories complexes sur les interactions homme-machine, nous allons ici tenter de faire en sorte que votre boutique accessible au plus grand nombre de clients possible. Votre but final devrait être que vos visiteurs aient suffisamment confiance en votre boutique pour acheter.

A chaque problème d’utilisation, vous perdez la confiance des visiteurs. Si elle arrive en dessous d’un certain niveau, la frustration s’installe et l’internaute quitte le site. D’où l’importance de l’ergonomie dans un site e-commerce.

N’oubliez pas que votre but (en plus de vendre, bien sûr) est de montrer aux visiteurs que derrière le site e-commerce que vous faites, il se cache des personnes sérieuses et compétentes.

La page d'accueil

Cette page est la plus importante de votre boutique, car c'est ici que tout se joue. C'est ici que le visiteur va se faire une opinion de votre boutique et qu'il va décider s'il peut faire confiance à votre site et vous donner son numéro de carte bleue.

Vous devez faire en sorte d'avoir un style général distinct, facilement reconnaissable et d'avoir votre catalogue visible dès la première page.

L'en-tête du site vous permet de placer les éléments les plus représentatifs : logo, nom, image de fond unique... Il doit faire au maximum 250 pixels de hauteur, afin que les visiteurs puissent au moins jeter un coup d’œil à votre catalogue sans avoir à faire défiler la page. En d'autres termes, l'utilisateur ne devrait jamais avoir à faire défiler la page pour voir vos premiers produits.

L’aspect visuel est très important, d’où la phase de réflexion en amont. Vous devez trouver un moyen élégant de mettre en avant vos produits sans pour autant surcharger votre page. De plus vous devez utiliser des couleurs et un graphisme homogènes entre les pages. Par exemple, si vous utilisez un effet sur les boutons d'une page, pensez à réutiliser les mêmes effets sur toutes les pages de votre site.

Le moteur de recherche doit être facile à trouver. Les visiteurs savent souvent ce qu'ils sont venus chercher sur un site, et n'aiment pas devoir parcourir des catégories et sous-catégories pour trouver le produit qu'ils veulent.

Cependant, lors de la création du contenu de votre site, pensez également à la navigation dans les catégories : elle doit être simple et intuitive.

Afin de renforcer la confiance des visiteurs, pensez à mettre en avant vos partenaires (banques, transporteurs) et votre classement FIA-NET. Ce sont des éléments de réassurance.

Si vous avez un contact téléphonique ou un tchat en ligne, n’hésitez pas à le mettre en avant. Cela montrera votre proximité avec le client et c’est ce qui fera la différence. Bien entendu, n'utilisez pas votre numéro de téléphone personnel : les clients doivent sentir qu'ils contactent une équipe de support, pas qu'ils vous dérangent tandis que vous cuisinez !

Enfin, affichez clairement les conditions de livraison, de retour de la marchandise, les C.G.V, et autres textes de loi.

La page produit

Si votre visiteur est sur cette page, c’est qu’il est intéressé par votre produit et qu’il souhaite des détails. Il vous faut donc lui en fournir un maximum.

Mettez en avant le bouton "Ajouter au panier". Il doit être bien visible et se distinguer du reste de la page de par sa couleur ou sa taille – mais tout en restant homogène avec le reste du design : si le bouton se détache trop, le visiteur pourrait ne pas le voir, de la même manière que de nombreuses personnes ont appris à ne pas voir les publicités sur Internet.

Mettez en avant aussi les "labels" liés à ces produits (nouveauté, promotion, coupon de réduction, etc. …), et affichez clairement les délais de livraison.

Le tunnel de conversion (Mon compte et ses pages intérieures)

Création de compte / "Mon compte"

Le thème par défaut de PrestaShop dispose d'un formulaire apportant un très bon taux de transformation. Mais suivant votre site, il ne sera pas forcément adapté à vos besoins. Voici donc quelques conseils à suivre si le formulaire de base ne vous convient pas :

  • Ne laissez que l’essentiel. Le visiteur doit se concentrer sur la création de son compte et l’acte d’achat. Inspirez-vous des formulaires d'Amazon et de la Fnac.

  • Réduisez au maximum le nombre d'étapes. Le visiteur doit savoir combien d'étapes il lui reste a parcourir avant la finalisation de son achat.

  • Affichez clairement toutes les erreurs que l'utilisateur fait, juste à côté du champ du formulaire. Les erreurs devraient être affichées avec une couleur distincte (le rouge a fait ses preuves), et les champs requis doivent être clairement indiqués (avec un astérisque *, par exemple).

Le paiement

Le visiteur a créé son compte client, félicitations ! Mais tout n'est pas gagné, il doit encore passer l'étape de l'acte d'achat.

Là encore, même chose que le formulaire de création de compte :

  • Réduisez au maximum le nombre d‘étapes: adresse de livraison, paiement.

  • Affichez clairement les erreurs et indiquez les champs obligatoires.

  • Page de paiement :

    • Pour un paiement par CB, avertir le visiteur qu'il passe sur le site sécurisé de votre banque. Par exemple, utilisez une icône "cadenas" avec un petit texte explicatif.

    • Si le paiement est par chèque (ou autre que paiement en ligne), indiquez clairement la marche à suivre (adresse, montant, ...)

Après cette étape cruciale votre visiteur est à présent un de vos clients. Bravo !

Ces conseils en ergonomie pour votre site e-commerce ne sont pas exhaustifs, mais constituent une base de travail pour améliorer l’utilisation de votre site e-commerce.

Optimisation des images

L'un des points importants à garder en tête et que les images ralentissent votre boutique, particulièrement si elles ne sont pas optimisées. Cette section vous présente comment optimiser vos images, mais au bout du compte, la meilleure optimisation consiste à ne garder que les images essentielles, et à laisser les autres de côté. Il y a quelques images importantes dans un thème de boutique : les images de produits et leurs miniatures, le logo de la boutique ou son en-tête, et peut-être le carrousel d'images. La plupart des autres images peuvent être remplacés en utiliser de manière intelligente HTML et CSS, surtout si ces images font partie du design de la boutique. Faites en sorte de garder au plus bas le nombre d'images par page : plus votre boutique sera rapide, plus votre client potentiel passera du temps à circuler de page en page.

L'optimisation d'images implique deux aspects :

  • Réduire la taille des images afin d'améliorer leur temps de chargement.

  • S'assurer qu'elles sont bien indexées par les moteurs de recherche.

Vous devriez modifier la taille de vos images directement dans Photosohop : n'utilisez jamais une image qui sera trop trop grande pour être affichée telle quelle dans le navigateur. Utilisez la taille nécessaire, ni plus, ni moins. Photoshop dispose également d'un outil "Enregistrer pour le Web", qui vous aide à comparer les formats et les algorithmes de compression, et enlèvera certaines données inutiles.

Il existe également des outils en ligne qui vous aideront à optimiser vos images sans perte de qualité, grâce à des tâches automatiques sûres :

Si vous maîtrisez les outils en ligne de commande, vous pouvez utiliser ceux-ci :

Quelques conseils de référencement (SEO)

L'amélioration du classement de votre site est essentielle pour amener de nouveaux clients. Bien que nous ne plongerons pas dans le SEO avec ce chapitre, voici quelques conseils à suivre :

  • Travaillez vos adresses web, vos titres et vos méta-données : assurez-vous que tous les champs texte du back sont remplis, à la fois pour les produits et les catégories. Utilisez des descriptions courtes et précises, mettez les informations les plus importantes dans le titre afin que ces détails apparaissent dans l'adresse web, etc.

  • Améliorez l'affichage de vos images : utilisez des titres et légendes.

  • N'hésitez pas à utiliser des listes HTML lorsque vous citez les différents composants ou fonctionnalités d'un produit.

  • Ré-utilisez les mots-importants dans la description du produit.

  • Optimisez l'affichage de votre site : faites en sorte que ses pages se chargent rapidement, soit en réduisant les tailles de vos images ou en passant à un hébergeur plus performant.

Le "tunnel de transformation" (en anglais, "conversion funnel", c'est à dire "entonnoir de conversion", ce qui est plus proche de la réalité) correspond aux pages où vous transformerez vos visiteurs en clients (d’où le terme "transformation" ou "conversion"). Si ces pages sont mal structurées, cela peut vous faire perdre plusieurs clients potentiels et donc les commandes qu'ils auraient pu passer. Pour en apprendre plus sur le "conversion funnel", lisez cette page Wikipédia :

Yahoo! Smush.it est le plus connu :

Kraken est un autre outil qui peut donner dans certaines conditions de meilleurs résultats, et dispose d'extensions Firefox et Chrome :

Image Optimizer vous permet également de changer la taille de l'image :

Pngnq : converti des images PNG 24-bits en équivalents 8- voire 6-bits, en ne gardant que les couleurs nécessaires. Téléchargement : Exemple d'utilisation : pngnq -vf -s1 image.png

OptiPNG : teste plusieurs méthodes de compression sur un fichier PNG afin de ne garder que la meilleure. Téléchargement : Exemple d'utilisation : optipng -o7 image-nq8.png

pngcrush : un autre outil d'optimisation PNG. Téléchargement : Exemple d'utilisation : pngcrush image.png -rem alla -reduce -brute result.png

jpegtran : réalise des traitements sans perte de qualité sur des images JPEG. Téléchargement : Exemple d'utilisation : jpegtran -copy none -optimize -perfect src.jpg dest.jpg

À lire également, le guide SEO gratuit de PrestaShop :

http://en.wikipedia.org/wiki/Conversion_funnel
http://www.smushit.com/ysmush.it/
http://kraken.io/
http://www.imageoptimizer.net/
http://pngnq.sourceforge.net/
http://optipng.sourceforge.net/
http://pmt.sourceforge.net/pngcrush/
http://jpegclub.org/jpegtran/
http://www.prestashop.com/fr/livre-blanc-seo
Bonnes pratiques
Penser en amont
Concevoir le thème dans Photoshop
Ergonomie
Optimisation des images
Quelques conseils de référencement (SEO)