Message-ID: <1192044717.377574.1711634654631.JavaMail.root@confluence-doc2-production> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_377573_1072530210.1711634654623" ------=_Part_377573_1072530210.1711634654623 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html Bonnes pratiques

Bonnes pratiques

Contenu

 

=20 =20

Bonnes pratiques

De la conception de votre th=C3=A8me dans Photoshop =C3=A0 l'optimisatio= n de son code pour les moteurs de recherche, il y a quelques =C3=A9tapes = =C3=A0 suivre, =C3=A9tablies comme =C3=A9tant des passages oblig=C3=A9s du = d=C3=A9veloppement de th=C3=A8me. Suivez ces meilleures pratiques pour obte= nir un meilleur th=C3=A8me.

Penser en amont

Avant m=C3=AAme d'ouvrir Photoshop, GIMP ou tout autre =C3=A9diteur grap= hique, vous devriez simplement vous assoir avec une feuille et un crayon, e= t r=C3=A9fl=C3=A9chir =C3=A0 l'arborescence de votre boutique, afin de la r= endre aussi flexible que possible. Par exemple, toutes les boutiques n'ont = pas le m=C3=AAme nombre de cat=C3=A9gories, ou de produits par cat=C3=A9gor= ie.

Un th=C3=A8me complet de PrestaShop requiert au moins 30 pages ou sectio= ns de page :

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=C3=A8me= incomplet, et donc une mauvaise exp=C3=A9rience utilisateur.

Dans les faits, ces 30 fichiers ne sont que la partie =C3=A9merg=C3=A9e = de l'iceberg. Pour avoir une meilleure id=C3=A9e des pages =C3=A0 prendre e= n compte, plongez-vous dans le th=C3=A8me par d=C3=A9faut, situ=C3=A9 dans = le dossier /themes/defaut. Il a plus de 60 fichiers template, = sans parler des fichiers CSS, JavaScript ou des images, ainsi que la versio= n mobile (dans le dossier /themes/default/mobile) qui lui-m=C3= =AAme comprend 58 fichiers template et ses propres fichiers CSS, JavaScript= et images.

Une fois que vous ma=C3=AEtrisez votre arborescence, faites quelques cro= quis pour l=E2=80=99interface, afin d'avoir une premi=C3=A8re id=C3=A9e de = la position des divers =C3=A9l=C3=A9ments : nouveaux produits, promotions, = images, texte, etc.). Par ailleurs, incluez les d=C3=A9tails importants, te= ls que les diverses mentions sur la page du produit : en solde, promotion, = nouveau produit, prix barr=C3=A9...).

Bien entendu, ce ne sont l=C3=A0 que des conseils d'ordre g=C3=A9n=C3=A9= ral ; certains professionnels pr=C3=A9f=C3=A8reront travailler directement = dans Photoshop, puis passer au code PHP, HTML et CSS.

Concevoir le = th=C3=A8me dans Photoshop

Vous =C3=AAtes rarement seul =C3=A0 cr=C3=A9er un th=C3=A8me : que ce so= it un coll=C3=A8gue ou un client, vous devrez montrer/partager votre travai= l en de nombreuses occasions. Vous devriez donc faire en faciliter cet =C3= =A9change d=C3=A8s le d=C3=A9part.

L'un des premiers aspects =C3=A0 respecter est d'utiliser un espace de c= ouleur RVB, en 72 ppp, et de toujours partager le fichier avec tous les cal= ques, sans les aplatir. (sauf si c'est pour l'envoyer au client final, auqu= el cas vous ne devriez lui donner le PDF aplati que si cela fait partie de = votre contrat).
En g=C3=A9n=C3=A9ral, vous ne devriez jamais aplatir les= calques de votre cr=C3=A9ation, =C3=A0 moins d'=C3=AAtre certain de ne jam= ais avoir =C3=A0 travailler dessus =C3=A0 l'avenir.

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

Couleurs

Utilisez toujours le r=C3=A9glage RGB. N'utilisez pas le r=C3=A9glage CM= YK, qui n'est adapt=C3=A9 qu'=C3=A0 l'imprimerie.

Unit=C3=A9s

Quand vous cr=C3=A9ez pour le Web, l'unit=C3=A9 de base est le pixel. Ne= faites pas vos mesures en picas, points ou centim=C3=A8tres.

Polices

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

Le texte standard (titre, sous-titre, texte normal) devrait =C3=AAtre li= mit=C3=A9 aux polices suivantes, afin de vous assurer que les visiteurs voi= ent tous la m=C3=AAme chose :

Utilisez le strict minimum de police : trop de polices diff=C3=A9rentes = ne peuvent que rendre votre design plus confus.

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

Taille de texte

Gardez toujours en t=C3=AAte que l'utilisateur choisit la taille finale = du texte, =C3=A9tant donn=C3=A9 que les navigateurs modernes peuvent l'augm= enter ou la r=C3=A9duire au besoin.
En fait, vous devriez tester votre = site avec diff=C3=A9rentes variations dans les r=C3=A9glages de votre navig= ateur, afin de voir si votre design est solide... et donc de voir ce qu'il = vous faut retravailler pour =C3=A9viter qu'il soit facilement cass=C3=A9.

Cela =C3=A9tant, vous pouvez prendre ces mesures comme base :

Transparence

Les images transparentes ne fonctionnent pas bien sur les anciens naviga= teurs, en particulier Internet Explorer, donc =C3=A9vitez les images PNG en= 24 bits. Pour ce qui est des images GIF avec transparence, utilisez-les pa= r-dessus un fond uni pour vous assurer que l'effet fonctionne. De plus, =C3= =A9vitez les pixels semi-transparents en d=C3=A9finissant une couleur de ca= che (la m=C3=AAme que celle du fond).

Enfin...

Ergonomie

Sans plonger dans les th=C3=A9ories complexes sur les interactions homme= -machine, nous allons ici tenter de faire en sorte que votre boutique acces= sible au plus grand nombre de clients possible. Votre but final devrait =C3= =AAtre que vos visiteurs aient suffisamment confiance en votre boutique pou= r acheter.

A chaque probl=C3=A8me d=E2=80=99utilisation, vous perdez la confiance d= es visiteurs. Si elle arrive en dessous d=E2=80=99un certain niveau, la fru= stration s=E2=80=99installe et l=E2=80=99internaute quitte le site. D=E2=80= =99o=C3=B9 l=E2=80=99importance de l=E2=80=99ergonomie dans un site e-comme= rce.

N=E2=80=99oubliez pas que votre but (en plus de vendre, bien s=C3=BBr) e= st de montrer aux visiteurs que derri=C3=A8re le site e-commerce que vous f= aites, il se cache des personnes s=C3=A9rieuses et comp=C3=A9tentes.

La page d'accueil

Cette page est la plus importante de votre boutique, car c'est ici que t= out se joue. C'est ici que le visiteur va se faire une opinion de votre bou= tique et qu'il va d=C3=A9cider s'il peut faire confiance =C3=A0 votre site = et vous donner son num=C3=A9ro de carte bleue.

Vous devez faire en sorte d'avoir un style g=C3=A9n=C3=A9ral distinct, f= acilement reconnaissable et d'avoir votre catalogue visible d=C3=A8s la pre= mi=C3=A8re page.

L'en-t=C3=AAte du site vous permet de placer les =C3=A9l=C3=A9ments les = plus repr=C3=A9sentatifs : 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=E2=80=99=C5=93il =C3=A0 votre catalogue sans avoir =C3=A0 = faire d=C3=A9filer la page. En d'autres termes, l'utilisateur ne devrait ja= mais avoir =C3=A0 faire d=C3=A9filer la page pour voir vos premiers produit= s.

L=E2=80=99aspect visuel est tr=C3=A8s important, d=E2=80=99o=C3=B9 la ph= ase de r=C3=A9flexion en amont. Vous devez trouver un moyen =C3=A9l=C3=A9ga= nt de mettre en avant vos produits sans pour autant surcharger votre page. = De plus vous devez utiliser des couleurs et un graphisme homog=C3=A8nes ent= re les pages. Par exemple, si vous utilisez un effet sur les boutons d'une = page, pensez =C3=A0 r=C3=A9utiliser les m=C3=AAmes effets sur toutes les pa= ges de votre site.

Le moteur de recherche doit =C3=AAtre facile =C3=A0 trouver. Les visiteu= rs savent souvent ce qu'ils sont venus chercher sur un site, et n'aiment pa= s devoir parcourir des cat=C3=A9gories et sous-cat=C3=A9gories pour trouver= le produit qu'ils veulent.

Cependant, lors de la cr=C3=A9ation du contenu de votre site, pensez =C3= =A9galement =C3=A0 la navigation dans les cat=C3=A9gories : elle doit =C3= =AAtre simple et intuitive.

Afin de renforcer la confiance des visiteurs, pensez =C3=A0 mettre en av= ant vos partenaires (banques, transporteurs) et votre classement FIA-NET. C= e sont des =C3=A9l=C3=A9ments de r=C3=A9assurance.

Si vous avez un contact t=C3=A9l=C3=A9phonique ou un tchat en ligne, n= =E2=80=99h=C3=A9sitez pas =C3=A0 le mettre en avant. Cela montrera votre pr= oximit=C3=A9 avec le client et c=E2=80=99est ce qui fera la diff=C3=A9rence= .
Bien entendu, n'utilisez pas votre num=C3=A9ro de t=C3=A9l=C3=A9phon= e personnel : les clients doivent sentir qu'ils contactent une =C3=A9quipe = de support, pas qu'ils vous d=C3=A9rangent 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=E2=80=99est qu=E2=80=99il est in= t=C3=A9ress=C3=A9 par votre produit et qu=E2=80=99il souhaite des d=C3=A9ta= ils. Il vous faut donc lui en fournir un maximum.

Mettez en avant le bouton "Ajouter au panier". Il doit =C3=AAtre bien vi= sible et se distinguer du reste de la page de par sa couleur ou sa taille = =E2=80=93 mais tout en restant homog=C3=A8ne avec le reste du design : si l= e bouton se d=C3=A9tache trop, le visiteur pourrait ne pas le voir, de la m= =C3=AAme mani=C3=A8re que de nombreuses personnes ont appris =C3=A0 ne pas = voir les publicit=C3=A9s sur Internet.

Mettez en avant aussi les "labels" li=C3=A9s =C3=A0 ces produits (nouvea= ut=C3=A9, promotion, coupon de r=C3=A9duction, etc. =E2=80=A6), et affichez= clairement les d=C3=A9lais de livraison.

Le tunnel de conversion (Mon compte et ses pages int=C3=A9rieures= )

Le "tunnel de transformation" (en anglais, "conversion funnel", c'est =C3=A0 dire "entonnoir de conversion", c= e qui est plus proche de la r=C3=A9alit=C3=A9) correspond aux pages o=C3=B9= vous transformerez vos visiteurs en clients (d=E2=80=99o=C3=B9 le terme "t= ransformation" ou "conversion"). Si ces pages sont mal structur=C3=A9es, ce= la peut vous faire perdre plusieurs clients potentiels et donc les commande= s qu'ils auraient pu passer. Pour en apprendre plus sur le "conversion funn= el", lisez cette page Wikip=C3=A9dia : http://en.w= ikipedia.org/wiki/Conversion_funnel

Cr= =C3=A9ation de compte / "Mon compte"

Le th=C3=A8me par d=C3=A9faut de PrestaShop dispose d'un formulaire appo= rtant un tr=C3=A8s bon taux de transformation. Mais suivant votre site, il = ne sera pas forc=C3=A9ment adapt=C3=A9 =C3=A0 vos besoins. Voici donc quelq= ues conseils =C3=A0 suivre si le formulaire de base ne vous convient pas :<= /p>

Le paiement

Le visiteur a cr=C3=A9=C3=A9 son compte client, f=C3=A9licitations ! Mai= s tout n'est pas gagn=C3=A9, il doit encore passer l'=C3=A9tape de l'acte d= 'achat.

L=C3=A0 encore, m=C3=AAme chose que le formulaire de cr=C3=A9ation de co= mpte :

Apr=C3=A8s cette =C3=A9tape cruciale votre visiteur est =C3=A0 pr=C3=A9s= ent un de vos clients. Bravo !

Ces conseils en ergonomie pour votre site e-commerce ne sont pas exhaust= ifs, mais constituent une base de travail pour am=C3=A9liorer l=E2=80=99uti= lisation de votre site e-commerce.

Optimisation des images

L'un des points importants =C3=A0 garder en t=C3=AAte et que les images = ralentissent votre boutique, particuli=C3=A8rement si elles ne sont pas opt= imis=C3=A9es. Cette section vous pr=C3=A9sente comment optimiser vos images= , mais au bout du compte, la meilleure optimisation consiste =C3=A0 ne gard= er que les images essentielles, et =C3=A0 laisser les autres de c=C3=B4t=C3= =A9.
Il y a quelques images importantes dans un th=C3=A8me de boutique := les images de produits et leurs miniatures, le logo de la boutique ou son = en-t=C3=AAte, et peut-=C3=AAtre le carrousel d'images. La plupart des autre= s images peuvent =C3=AAtre remplac=C3=A9s en utiliser de mani=C3=A8re intel= ligente HTML et CSS, surtout si ces images font partie du design de la bout= ique. Faites en sorte de garder au plus bas le nombre d'images par page : p= lus votre boutique sera rapide, plus votre client potentiel passera du temp= s =C3=A0 circuler de page en page.

L'optimisation d'images implique deux aspects :

Vous devriez modifier la taille de vos images directement dans Photosoho= p : n'utilisez jamais une image qui sera trop trop grande pour =C3=AAtre af= fich=C3=A9e telle quelle dans le navigateur. Utilisez la taille n=C3=A9cess= aire, ni plus, ni moins.
Photoshop dispose =C3=A9galement d'un outil "En= registrer pour le Web", qui vous aide =C3=A0 comparer les formats et les al= gorithmes de compression, et enl=C3=A8vera certaines donn=C3=A9es inutiles.=

Il existe =C3=A9galement des outils en ligne qui vous aideront =C3=A0 op= timiser vos images sans perte de qualit=C3=A9, gr=C3=A2ce =C3=A0 des t=C3= =A2ches automatiques s=C3=BBres :

Si vous ma=C3=AEtrisez les outils en ligne de commande, vous pouvez util= iser ceux-ci :

Q= uelques conseils de r=C3=A9f=C3=A9rencement (SEO)

L'am=C3=A9lioration du classement de votre site est essentielle pour ame= ner de nouveaux clients. Bien que nous ne plongerons pas dans le SEO avec c= e chapitre, voici quelques conseils =C3=A0 suivre :

  • Travaillez vos adresses web, vos titres et vos m=C3=A9ta-donn=C3=A9es := assurez-vous que tous les champs texte du back sont remplis, =C3=A0 la foi= s pour les produits et les cat=C3=A9gories. Utilisez des descriptions court= es et pr=C3=A9cises, mettez les informations les plus importantes dans le t= itre afin que ces d=C3=A9tails apparaissent dans l'adresse web, etc.
  • Am=C3=A9liorez l'affichage de vos images : utilisez des titres et l=C3= =A9gendes.
  • N'h=C3=A9sitez pas =C3=A0 utiliser des listes HTML lorsque vous citez l= es diff=C3=A9rents composants ou fonctionnalit=C3=A9s d'un produit.
  • R=C3=A9-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=C3=A9duisant les tailles de vos images ou en= passant =C3=A0 un h=C3=A9bergeur plus performant.

=C3=80 lire =C3=A9galement, le guide SEO gratuit de PrestaShop : http://www.prestashop.com/fr/livre-blanc-seo

------=_Part_377573_1072530210.1711634654623--