[News] Site de vente pour infusions (Thé, tisanes...)

[Atreïde]

Bonjour

Je vous présente un petit site réalisé pour une amie.-> etaflore.com

Joomla 2.5.4

Modules

Phocagallery
Virtuemart 2
Xmap

Template

Cloudbase (copieusement modifié) qui tourne sous Framework Gantry

Je serai intéressé si vous avez le temps par vos retours sous smartphone qui est géré nativement par Gantry. Un bon moyen de juger ce framework.

[niarevous]

Re : Site de vente pour infusions (Thé, tisanes...)

Pas mal du tout, juste à revoir les différentes images qui sont mal coupées (fond blanc visible). Mais à part ca j'aime bien, c'est sobre et efficace.

[Atreïde]

Re : Site de vente pour infusions (Thé, tisanes...)

juste à revoir les différentes images qui sont mal coupées (fond blanc visible).

Ben en fait c'est pas mal coupé, c'est volontaire le cadre autour, un peu comme une carte postale...
J'ai pas essayé sans mais je pense que les images se détachent mieux ainsi.

[PhilJ]

Re : Site de vente pour infusions (Thé, tisanes...)

Je serai intéressé si vous avez le temps par vos retours sous smartphone qui est géré nativement par Gantry. Un bon moyen de juger ce framework.

Bonjour,



Ce n'est pas mal du tout, mais il y a plusieurs choses qui plantent (!)... euh, qui déparent, ou du moins pourraient / devraient être améliorées :
—

1. Sur PC tout ce qu'il y a d'ordinaire (je n'ai pas les sous pour le smartphone ), écran 17" réglé au standard de 1024px ( <= 20 à 25 % des visiteurs, en incluant les iPad) : le site est trop large. Il est vrai que le template d'origine (Cloudbase) présente lui aussi ce défaut — comme d'ailleurs le site de son concepteur.
   —
2. Des effets supplémentaires en CSS3 pourraient être utilisés en boutique. Par ex., concernant le fond blanc sur lequel se trouvent les photos de plantes (cf message précédent), vous pourriez peut-être tenter un ombrage. Essayez ceci par exemple pour obtenir un effet de « relief » (ombrage interne) : box-shadow: inset 0 0 5px #888; sur la classe browseProductImage. Il y aurait peut-être aussi qqchose à faire pour product-price (une bordure fine ?) et / ou pour a.product-details (un ombrage extérieur, et qui s'assombrit doucement au survol ?).
   —
3. Votre site donne l'impression d'être double : d'un côté un site sur les plantes, et de l'autre un site boutique. Or les visiteurs (et, par suite, les moteurs) seraient plus satisfaits s'il existait des liens entre les deux : page d'information Hibiscus <=> page détail produit Hibiscus de la boutique infusion.
   —
4. Le référencement est certainement quelque chose de très important pour un site de vente en ligne. Or, le titre (= balise <title>) de la boutique est « Plantes » = un terme, unique, trèèèèèès trèèèèèès générique, et ne comportant que 7 lettres (sur un potentiel de 60 ou 65 affiché par les moteurs de recherche). Quant au lien de menu 'Plantes', dont l'alias est plantes, il aboutit à une page dont le titre est... oui : Plantes. => Mettez-vous à la place d'un visiteur (et donc d'un moteur), tout ceci ne sent guère la tisane .
   —
5. Plusieurs pages (je n'ai pas tout vérifié) ont la même balise méta description : pas très favorable non plus pour le référencement.
   —
6. Sur la page Plantes, la moitié de l'écran est occupée par la phrase « Écrit par Super Utilisateur », répétée 8 fois. => vous allez recevoir des visites d'internautes qui cherchent à savoir ce qu'est un « Super Utilisateur » !

—

...Je dois me sauver.


Amicalement,




PhilJ

[Atreïde]

Re : Site de vente pour infusions (Thé, tisanes...)

Merci PhilJ pour cette remarque exhaustive

Pour le point 1,

Je pense que la taille est défini par le framework Gantry sous-jacent c'est une taille fixe. C'est vrai il y a encore des gens avec des écrans 17''*?
Sinon Gantry est basé sur le framework grid 960, et ça doit passer en 1024.
PS*: J'ai vérifié avec viewlike.us en 1024 le coeur du site reste visible.

Pour le point 2,

Quelques shadows supplémentaires peuvent donner un peu plus de relief, je vais faire quelques essais. Par contre je suis pas trop pour les effets mootools/jquery surtout que virtuemart est très (très) sensible avec ce genre de conflit...

Pour le point 3,

C'est vrai, je devais le faire mais j'ai oublié, c'est toujours sur ma TODO liste, en plus j'ai déja eu la remarque en interne :-)

Pour le point 4 et 5,

Je vais m'y atteler, c'est vrai que les balises ne sont pas géniales.

Point 6,

J'ai supprimé l'auteur, mais j'aimerai encore mieux que cette page n'apparaisse pas mais je n'ai pas réussi à la supprimer. Elle semble automatiquement créée avec le type de menu*: liste des articles d'une categorie

Merci encore d'avoir passé du temps pour moi.

[Rafidi]

Re : Site de vente pour infusions (Thé, tisanes...)

Bonsoir,

Hai, un jolie duplicate content interne. On accède au site par www et sans www. Donc, mettez une redirection 301 pour le www (pour qu'il redirige vers le sans www).

Je ne sais pas si je suis clair ? Mais c'est très important pour le référencement.

[PhilJ]

Re : Site de vente pour infusions (Thé, tisanes...)

Merci PhilJ pour cette remarque exhaustive

...J'ignore si c'est exhaustif : c'était une visite rapide, pas un audit de site.



Juste quelques compléments :

Je pense que la taille est défini par le framework Gantry sous-jacent c'est une taille fixe.

...Oui : une largeur fixe de 1024px incluant l'ascenseur, à droite de l'écran (et non pas une fenêtre utile de 1024). => Un écran de 1024px de large n'autorise donc pas des sites de 1024px.

D'où les frameworks T3 (Joomlart), Gantry (RocketTheme), Vertex (Shape5), Gavern (Gavick), Warp (Yootheme)...

Un tour d'horizon des frameworks par ici (en anglais) : http://www.joomvision.com/9-joomla-t...ons-developers.

A noter aussi : la plupart de ces frameworks prennent en charge les petits appareils — smartphones et autres mobiles — dont la croissance sur internet commence à être impressionnante, du moins dans certains secteurs.

Gantry est basé sur le framework grid 960, et ça doit passer en 1024.

Depuis quelques temps déjà, tous les templates RocketTheme sont construits avec ce framework respectueux du standard 1024 strict.

Les templates CloudAccess utilisent également Gantry. Plus exactement, CloudAccess dit que ses templates sont « basés sur » Gantry. Mais en réalité ils ne respectent pas le standard 1024. Comparez un template RocketTheme et un template CloudAccess, vous verrez la différence.

C'est vrai il y a encore des gens avec des écrans 17''*?

...J'en possède 3, dont 2 régulièrement utilisés. Je suis peut-être vieux jeu, mais je ne travaille que sur de tels écrans. C'est la garantie d'un résultat tout terrain. Des tests sont ensuite réalisés sur des écrans plus larges. Si ça passe avec un 17", ça passe partout.

Mais même sans changer d'écran, on peut déjà se faire une première idée en simulant approximativement un écran plus large ou plus étroit en utilisant la combinaison CTRL+ roulette de la souris.

Concernant les statistiques : vous pouvez consulter les statistiques des résolutions d'écran sur différents sites spécialisés. Par exemple, http://gs.statcounter.com/#resolutio...-201104-201204 donne l'indication pour la dernière année (Avril 2012 => Avril 2012).

Il est vrai que le pourcentage de visiteurs utilisant un écran de 1024px (ou moins large) diminue doucement mais sûrement. Cependant, les écrans 1024– (= 1024 et moins) représentent encore environ 20 % du parc, soit un écran sur 5 au cours du premier trimestre 2012 (environ 15 % au total en France), et il ne semble pas question de faire disparaître les tablettes du genre iPad.

Enfin, il faudrait de longs développements pour expliquer que le standard 1024 (= 1024 strict) n'est pas fait seulement pour (ou à cause de) ces 15 ou 20 % de visiteurs. Il y a d'autres arguments en faveur de son maintien. Voyez par exemple dans cet article : http://www.journaldunet.com/ebusines...sequence.shtml.

J'ai vérifié avec viewlike.us en 1024 le coeur du site reste visible.

...Le test proposé par ce site ne fonctionne pas chez moi.

Quoi qu'il en soit, je ne suis pas sûr de bien comprendre ce que vous appelez le coeur d'un site.

Voici une copie d'écran (17", 1024px) :



Ce n'est pas dramatique (on voit bien pire), mais il faut avoir conscience qu'une part non négligeable du public du site voit cela et fait l'expérience d'un site qui « ne tient pas (ou : pas tout à fait) dans l'écran ».


Point 2 :

Quelques shadows supplémentaires peuvent donner un peu plus de relief, je vais faire quelques essais. Par contre je suis pas trop pour les effets mootools/jquery [...]

...Je parlais seulement de modifier un peu les feuilles de styles, en y ajoutant des directives CSS3, pas d'injecter du Javascript, ce qui est inutile, voire nuisible, vous avez raison. On peut maintenant faire de jolies choses avec du CSS3, des ombrages, des dégradés, des effets animés, et les navigateurs s'y mettent tous les uns après les autres — même Internet Explorer, encore que bien timidement et bien trop lentement.



Point 6 :

J'ai supprimé l'auteur, mais j'aimerai encore mieux que cette page n'apparaisse pas mais je n'ai pas réussi à la supprimer. Elle semble automatiquement créée avec le type de menu*: liste des articles d'une categorie.

...Dans ce cas, une suggestion : créez vos fiches avec un CCK. Vous aurez beaucoup plus de souplesse pour la mise en page. Le choix ne manque pas : Seblod, k2, Sobi2, Zoo... Si ces composants vous paraissent un peu complexes et lourds pour une petite quantité de fiches, je vous conseille vivement Dj-catalog2 : facile à apprendre mais efficace, il est livré avec des modules et vous pourrez créer des diaporamas. Gratuit pour J 1.5, coût de la licence pour J 2.5 : environ 7 euros.

Merci encore d'avoir passé du temps pour moi.

...Pas de quoi, c'est avec plaisir. Et c'est aussi pour moi une occasion de faire un peu le point.

Bon courage pour les modifs que vous prévoyez.




Amicalement,




PhilJ

[Atreïde]

Re : Site de vente pour infusions (Thé, tisanes...)

Hai, un jolie duplicate content interne. On accède au site par www et sans www. Donc, mettez une redirection 301 pour le www (pour qu'il redirige vers le sans www).

Merci c'est fait Rafidi, pour ceux que ça intéresse je suis passé par mon hébergeur (siteground) via le cpanel, pas besoin de toucher au htaccess directement.

Quoi qu'il en soit, je ne suis pas sûr de bien comprendre ce que vous appelez le coeur d'un site.

Je voulais dire la partie essentielle du site, le bord absent (la dizaine de pixels) ne contient pas d'infos.

Or les visiteurs (et, par suite, les moteurs) seraient plus satisfaits s'il existait des liens entre les deux : page d'information Hibiscus <=> page détail produit Hibiscus de la boutique infusion.

C'est fait aussi