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
Contenu
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.
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.
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 :
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.
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.
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.
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.=
p>
Cela =C3=A9tant, vous pouvez prendre ces mesures comme base :
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).
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.
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.
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 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
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 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.
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 :
pngnq -vf -s1 image.png
op=
tipng -o7 image-nq8.png
pngcrush image.png -rem alla -reduce -brute result.png=
code>
jpegtran -copy none -optimiz=
e -perfect src.jpg dest.jpg
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 :
=C3=80 lire =C3=A9galement, le guide SEO gratuit de PrestaShop : http://www.prestashop.com/fr/livre-blanc-seo