CSS & Webdesign » E-commerce

Conventions de nommage pour les CSS — identifiants et classes — de votre site web

Bruno Bichet — Fri, 17 Sep 2010 12:04:08 +0000

Le nommage des identifiants et des classes est une question à laquelle l’intégrateur web est confronté chaque fois qu’il démarre un projet. Dans l’idéal il faut trouver des intitulés d’identifiants et de classes reflétant la signification des contenus qu’ils enveloppent. A cet égard, #publicite-principale est plus judicieux que #publicite-en-haut-a-droite dans la mesure où l’emplacement de la publicité — fut-elle principale — peut être placée à différentes endroits stratégiques. Pour nous aider à y voir plus clair, Andy Clarke (revisitant Eric Meyer) a eu la bonne idée de partager ses réflexions sur le sujet (dès 2004) sous la forme d’une proposition de convention de nommage pour les identifiants et les classes susceptibles de faire partie de la majorité des projets web.

Eléments communs

#container: Bloc pour l’ensemble de la page (généralement une balise `div`).

#branding

En-tête, bannière ou marque du site.

#branding-logo: Logo du site.

#branding-tagline: Accroche, slogan, sous-titre définissant le but du site.

#nav or #navigation

Contient les éléments pour la navigation dans le site.

#nav-main: Navigation principale.

#nav-section: Navigation vers les pages appartenant à la section en cours.

#nav-external: Navigation vers des pages externes au site.

#nav-supplementary or #nav-supp: Liste de liens supplémentaires (ex. dans le pied de page).

#nav-(whatever): Listes de liens à nommer en fonction des besoins.

#search

Contient les outils de recherche et l’affichage des résultats.

#search-input: Formulaire de recherche.

#search-output: Résultat de la recherche, dans une balise `div` ou dans une liste de définition `dl`.

#content

Zone de contenus ayant un autre but que la navigation.

#content-main: Zone de contenu principal.

#content-news: Contenu de type « News ».

#content-(whatever): Tout autre type de contenu, incluant #content-related, #content-quote, etc.

#siteinfo

Regroupe toute sorte d’information relatives au site.

#siteinfo-legal: Informations de copyright.

#siteinfo-credits: Crédits divers.

Eléments spécifiques au e-commerce

#content-products

Zone globale accueillant des produits.

.products: Produit individuel.

.products-prices: Prix, rabais, offres spéciales, etc.

.products-description: Résumé ou description détaillée d’un produit.

.products-review: Avis de consommateur.

.products-(whatever): Tout type de contenu lié au produit.

Articles sur le même sujet

Le Design serait inutile dans 80% des cas

Bruno Bichet — Fri, 03 Sep 2010 13:23:35 +0000

Désolé pour le titre accrocheur, mais que voulez-vous, c’est la tendance ! Et les tendances dans le webdesign, c’est sacré. Du moins c’est ce que l’on a tendance à croire parce que c’est pratique.

Votre site, vous le voulez comment ?: Oh, quelque chose de minimaliste, orienté typographie : c’est pour consommer sur place.
Ah… Si j’ai bien compris, vous êtes dans la mouvance du web 2.0: Oui, oui, on ne produit rien, c’est l’utilisateur qui s’y colle… Nous voulons juste un design web 2.0 libre de droits (pas cher, donc)
Votre cible, c’est un peu l’utilisateur de l’iPhone, quand même ?: Tout à fait ! On veut un truc genre Apple, sobre et moderne, vous voyez ?
Genre le nouveau logo iTunes ?: Heu, non, pas jusque-là quand même…

Après ce préambule plus défoulatoire qu’autre chose, venons-en au coeur du sujet. Est-ce que le design d’un site a autant d’importance qu’on le pense généralement, surtout quand on regarde des sites web qui font beaucoup d’audience et d’argent comme Craiglist, Amazon, Ebay ou Google ?

Dans The Ugly Truth ou Le Design Ne Sert À Rien ! les auteurs mettent en avant les qualités de l’interface utilisateur au sens large pour expliquer la réussite de certains site relativement moches. C’est séduisant. Surtout lorsqu’on est plus attaché au fond qu’à la forme. Mais, l’ergonomie n’explique pas tout. Il existe une chose plus forte qu’un design affreux, plus solide qu’une ergonomie à la ramasse… C’est la MO-TI-VA-TION qu’a l’utilisateur de venir sur les sites en question.

Tous les sites montrés ~~du doigt~~ en exemple ont ceci en commun qu’ils proposent quelque chose dont l’internaute a besoin. Quelque chose qui fait qu’il est prêt à souffrir pour arriver essoufflé, la main tremblante sur la souris, jusqu’au formulaire de commande, heureux, enfin, de pouvoir sortir sa carte bancaire.

Articles sur le même sujet

HTML5 — Une orientation encore trop « littéraire » et pas assez « web »

Bruno Bichet — Tue, 02 Feb 2010 08:57:52 +0000

Dans HTML5, il manque quand même la balise panier pour aller avec article. Ce début de réflexion que je partageais sur Twitter m’est venu en lisant les ~~tables de la loi~~ spécifications de HTML5, notamment la partie semantics. Là, j’ai eu comme une révélation : Les balises HTML et surtout HTML5 sont orientées vers les contenus littéraires (dialog), le monde de la presse (article) et les publications à caractère scientifique (section).

C’est normal si on considère que le web est issu du monde de la recherche universitaire mais ça l’est moins au regard des autres pratiques du web en général et du commerce en ligne en particulier. Du coup, mon côté réactionnaire a pris le dessus et je me suis mis à regarder HTML5 comme un sous-produit de XHTML réservé aux contenus dits de « qualité » vs le commerce qui ferait partie du côté « obscur » de la force.

Pour prendre le contre-pied de ce que j’écrivais dans Favoriser les sites de contenus, n’est-ce pas exclure de fait les sites d’entreprises ? je pense qu’il est peut-être temps de se pencher sur la structure sémantique des sites de vente en ligne.

Les balises qui manquent à HTML5

Et là, je ne parle pas que de e-commerce. Quelqu’un pourra-t-il m’expliquer la présence d’une balise dialog alors qu’il manque la balise logo, élément bien plus largement utilisé sur le web ? Idem pour une éventuelle balise motto ou baseline ? Je veux bien y mettre de la bonne volonté, mais HTML5 est quand même un truc bancal quand on regarde de près la structuration des contenus présents sur le web.

Et le e-commerce, ça pue ?

Et oui, à côté des blogs, des articles d’information et des sites corporate (qui partagent la même structure), le gros du web est composé de sites de vente en ligne. Quand on y regarde de plus près, les éléments composant la notice d’un article (produit) sont autrement plus complexes que ceux d’un article (billet) : on retrouve les mêmes éléments (titre, sous-titre, résumé, etc.) en plus des éléments spécifiques au commerce comme le prix (price ?), le nombre d’éléments en stock (item ?), etc. Sans compter tous les éléments qui caractérisent un produit comme la taille, la couleur, etc.

Vous vous doutez bien qu’il ne serait pas très pratique d’avoir autant de balises dites « sémantiques » pour caractériser chaque élément de personnalisation possible pour un article donné. C’est pourquoi, je propose d’inventer un mécanisme permettant de spécifier un élément sous forme ce classe CSS histoire de s’en sortir avec tous les micro-contenus… Mais attendez, on me souffle dans l’oreillette que les microformats existent déjà…

En (très) bref

HTML5 sera parfait pour structurer l’exemplaire papier de Roméo et Juliette qui se trouve dans ma bibliothèque. En ce qui concerne les contenus disponibles sur le web le travail ne fait que commencer.

Articles sur le même sujet

Sites de contenus vs sites commerciaux ?

Bruno Bichet — Thu, 25 Sep 2008 05:02:50 +0000

La notion de pertinence est centrale. Les choix de Google dans la détermination de ce qui est pertinent ou non sont-ils innocents ?

Favoriser les sites de contenus, n’est-ce pas exclure de fait les sites d’entreprises ?

Eh oui, ce n’est pas toujours possible de faire du contenu intéressant quand on fait un métier qui n’est pas grand public.

J’ai saisi mon clavier suite à un commentaire du billet Faut-il payer des liens pour augmenter sa popularité ? paru sur le blog Abondance où Olivier Andrieu aborde l’achat de liens sponsorisés sur des sites à fort PageRank. La position de l’auteur est la suivante :

J’ajouterais même qu’en être réduit à ce type d’expédients [acheter des liens sponsorisés] revient à avouer la faiblesse du contenu de son propre site : acheter des liens, cela signifie qu’on ne peut en obtenir de façon naturelle, comme un site de bonne qualité en gagne rapidement lorsqu’il est souvent consulté grâce à sa valeur intrinsèque, « organique »…

Don’t do evil do business

Dans les commentaires qui ont suivis je note beaucoup d’amertume venant des webmasters de sites commerciaux qui ne comprennent pas pourquoi Google s’autorise la vente d’AdWords tout en interdisant l’achat et la vente de PageRank au kilo via les liens sponsorisés…

Il est de bon ton de se liguer contre les puissants, et de ce point de vue, Google est une cible privilégiée et prête le flan aux critiques : on ne joue pas impunément le rôle de gendarme du web.

Pour autant, laisser penser que Google est un parasite sans valeur ajoutée qui profite sans vergogne du web en prélevant sa dime au passage est assez surréaliste. Je me souviens qu’avant l’arrivée de Google sur le marché, les résultats permettaient plus souvent qu’à leur tour de s’ouvrir sur l’inconnu, et je reste poli ;)

En permettant aux internautes de trouver rapidement des réponses à leurs questions, la valeur ajoutée de Google à la communauté est immense. Le fait que Google pousse les entreprises à acheter des mots-clés AdWords pour exister dans des résultats (privilégiant naturellement les sites à forte valeur ajoutée au niveau des contenus) est une critique récurrente ; je suis convaincu que c’est plutôt une bonne chose.

Le fait de se plaindre d’avoir du contenu qualifié au lieu de « fermes de liens » plus ou moins déguisées m’étonnera toujours. La séparation dans les SERP des pages à contenu purement commercial, des pages dont le but est d’informer gratuitement les visiteurs a été une avancée majeure pour le web.

Sans cette distinction, le web tel qu’on le pratique aujourd’hui ne serait qu’une vaste foire d’empoigne aux mains de quelques sociétés et de leurs régies publicitaires. Qu’on se le dise.

Favoriser les sites de contenus, n’est-ce pas exclure de fait les sites d’entreprises ?

Pour en revenir à la citation de départ qui m’a fait réagir, il est heureusement possible pour une entreprise — quel que soit son secteur d’activité et quel que soit la complexité de son offre commerciale — d’être présente dans les résultats naturels… A condition d’accepter de travailler dur pour trouver la bonne approche rédactionnelle et la régularité nécessaire pour que ça se sache.

Et si on lançait un blog d’entreprise ?

Pour autant, cela ne signifie pas qu’il suffit de lancer un blog d’entreprise pour économiser le budget des mots-clés AdWords en comptant sur les backlinks : ils ne viendront pas spontanément mais après une immersion in vivo dans l’écosystème de l’entreprise afin d’en cartographier la marketosphère et de s’y faire une place.

Articles sur le même sujet

Martine 2.0 fait du blog d'entreprise

Bruno Bichet — Sun, 27 Jul 2008 10:25:48 +0000

Le sujet des blogs d’entreprise est souvent traité de manière roborative dans la blogosphère. Il faut souvent lire des kilomètres de mise en garde sur les dix ou vingt erreurs à éviter et autres dangers qui peuvent impacter une marque en terme de contre-performance, avant de tomber sur un article intéressant. Toutes ces tentatives pour mettre en place une plate-forme anxiogène à propos des blogs d’entreprise de la part de sociétés de conseil en marketing et autres agences de publicité qui en veulent à votre porte-feuille vous seront épargnées ici.

Les secrets pour avoir un blog d’entreprise efficace sont à portée de clic. Je vous les résume rapidement : un ton positif, gai et plein d’entrain avec un soupçon d’auto-dérision. C’est tout. Du positivisme qui ne s’interdit pas une certaine complexité par moment : le visiteur doit sortir de la blogosphère pour renaître, ou comme vous l’aurait dit Kyle MacLachlan : le dormeur doit se réveiller (ça, c’était avant de devenir Trey MacDougal)…

Cette digression cinématographique étant terminée, je reviens vers vous sur le thème des blogs corporate sur lequel j’ai lu quelques billets (le blogueur doit s’influencer lui-même avant de s’adresser aux autres), et je me suis mis à rêver.

Ah… Les blogs d’entreprise ! J’imagine le responsable d’une fabrique de jouets poser la question suivante :

Dites-moi Martine, nous avons bien un blog, n’est-ce pas ?: Et l’assistante du service Communication de répondre :; Heu… Personne ne m’a mise au courant. Je vais me renseigner de ce pas !

A partir de là, Martine va en voir de toutes les couleurs :

En fin de journée, la question du patron arrive dans l’oreillette du Responsable du Département Communication qui flaire-là une bonne occasion de grignoter le budget du Chef du Département Marketing qui grossit un peu trop à son goût (le budget, pas le Chef).
Et hop ! l’affaire est dans le sac. Martine, qui s’y connait un peu, bouscule le service informatique qui lui fait une petite place sur le serveur de l’entreprise et lui ouvre un accès FTP.
Martine est une grande fille. Ca tombe bien parce que le service informatique n’a pas que ça à faire. Elle installe donc elle-même DotPress et roule ma poule : pendant la première pause-déjeuner le premier billet est publié. Elle rigole pas, Martine !
Comme elle a quelques talents d’écriture et de synthèse (ça tombe bien, ce sont exactement les compétences qu’on lui a demandé à l’embauche) et qu’elle est rapide et organisée, elle poste un billet par jour sur la vie de la société, les trucs et astuces pour mieux utiliser les jouets, une information par-ci par-là pour débiner la concurrence dans la joie et la bonne humeur :) Pendant son temps libre, elle filme ses enfants qui jouent avec les jouets de la société. Et hop, ça alimente le blog de l’entreprise.
Peu à peu, l’audience du blog dépasse le cadre de l’entreprise, et les statistiques grimpent, grimpent… Les commentaires se bousculent après chaque billet. Il faut dire que Martine qui ne connait pas l’url rewriting, a néanmoins trouvée l’option qui permet d’avoir ces belles adresses qui plaisent tant à Google.
Chaque visiteur y va de son expérience sur les jouets, et parmi eux, de véritables experts proposent même des améliorations, voire des idées de nouveaux jouets !
Chaque idée est soigneusement notée et suivie par Martine qui met en place des sondages sur le blog afin que le département Conception & Prospective puisse sortir une série limitée immédiatement proposée aux visiteurs les plus assidus.
Martine, qui commence à se prendre au jeu, propose aux visiteurs les plus motivés de la rejoindre sur le blog comme rédacteurs pour décrire précisément la merveille qu’ils viennent de recevoir et l’utilisation qu’il en font.
Ces retours précieux permettent d’optimiser les jouets qui partent en production dans l’usine délocalisée quelque part dans le monde. Les fournisseurs font bien leur travail, mais selon les pièces disponibles, ils prennent parfois quelques libertés : une pièce en moins ici, une forme légèrement différente par là, et c’est au final tout le mode d’emploi qui n’est plus respecté. Parce que dans la boite de Martine, les modes d’emploi sont rédigés avant la mise en production : ils ne tiennent pas compte des modifications de dernière minute. Maintenant, vous savez pourquoi tout est si difficile à monter soi-même…
Revenons au blog de Martine. Elle a ouvert une nouvelle rubrique où les erreurs des notices techniques sont corrigées au fur et à mesure par la communauté qui grandit, grandit…Cette affluence qui ne ne cesse de grossir se répercute peu à peu sur les ventes de l’entreprise.
Le bouche à oreille fonctionne très bien. Et puis Martine sait comment se faire accepter dans les forum consacrés aux petits et aux grands : elle y donne régulièrement des conseils.
C’est là qu’elle a découvert que de nombreux parents vendaient sur eBay les jouets qui n’étaient plus adaptés à leurs enfants. Et hop, après discussion avec les gars du marketing (qui suivent de près les progrès du blog et qui n’attendaient qu’une occasion pour se rendre utiles), une plate-forme de vente pour les jouets d’occasion est mise en place…

Driiiiiiing Driiiiiiing… Driiiiiiing Driiiiiiing… Le téléphone ne s’arrête plus ? Et non, c’est le réveil qui sonne… Ce n’était donc qu’un rêve ?..

Articles sur le même sujet

Le web 2.0 peut être dangereux… pour vos profits

Bruno Bichet — Mon, 17 Dec 2007 19:40:44 +0000

Le gourou de l’utilisabilité, de l’ergonomie et du design web (au sens d’architecture web) Jakob Nielsen nous propose de réfléchir sur le web 2.0 du point de vue des fonctionnalités et de leur adéquation avec les besoins et les attentes de l’utilisateur. Voici un rapide résumé de son alertbox.

Ajax, interfaces riches, mashups, web social et User Generated Content ajoutent souvent plus de complexité qu’ils n’offrent de solution. Ce web 2.0 détourne les ressources graphiques et prouve (une fois encore) que le ramage ne se rapporte pas toujours au plumage :

Ajax et les interfaces riches : trop de complexité,
Réseaux sociaux et User Generated Content : trop peu d’utilisateurs,
Mashups : confusion des marques,
Modèle économique basé sur la publicité : bulle 2.0,
Sites web qui « déchirent » : non-représentatifs des sites commerciaux.

En bref

Ajoutez une pincée de fonction web 2.0, mais concentrez-vous sur le coeur de votre service ! Pour nous guider, Jakob propose de doser l’infusion des fonctionnalités web 2.0 en fonction des différentes sortes d’expérience utilisateur :

Information, marketing (corporate, gouvernemental ou associatif) : 10%,
E-commerce : 20%,
Médias : 30%,
Intranets : 40%,
Applications web : 50%.

Articles sur le même sujet

e-commerce : quel E-CMS pour gérer votre boutique en ligne ?

Bruno Bichet — Mon, 03 Dec 2007 00:02:35 +0000

Si certains blogueurs-entrepreneurs parviennent à gagner leur vie en bloguant, c’est loin d’être une généralité et l’arrêt de PointBlog n’est pas fait pour rassurer. Dans ces conditions, il peut être tentant de démarrer sa petite entreprise sur le web. Si le choix du E-CMS (pour E-Commerce Management System) pour présenter ses produits ou services est très important, il ne faut pas perdre de vue que la création d’une boutique en ligne revient à créer une boutique tout court…

le e-commerce : des fois, c’est facile, des fois… pas facile !

Les outils évoqués ici proposent des procédures d’installation et d’administration assez simples. Il est toutefois préférable d’avoir des compétences en création de sites web pour être autonome. Si ce n’est pas le cas, vous envisagerez peut-être la location d’une boutique hébergée chez un prestataire. Si le principe semble séduisant, la réalité l’est souvent moins. Par ailleurs, le prix à payer permettrait souvent de faire appel à un free-lance pour mettre en place votre boutique.

Je ne vise pas tous les prestataires : disons que vous devriez vous méfier de ceux qui proposent un financement sur 5 ans en n’ayant eux-mêmes qu’un an d’ancienneté dans le domaine…

Par ailleurs, si vous êtes en phase de recherche d’éléments de comparaison pour choisir un fournisseur ASP ou vous débrouiller avec une script opensource, je vous conseille vivement la lecture du billet très instructif intitulé Vous êtes plutôt Lego ou Playmobile ? Si une boutique en mode ASP vous attire, en voici une liste.

le e-commerce, c’est surtout du commerce

Même avec des connaissances en développement web, gérer une boutique en ligne ou un commerce en dur c’est kif kif. C’est peut-être même plus difficile online, car aux contraintes du commerce en général, s’ajoutent celles du commerce en ligne en particulier :

rédaction des notices des produits (charte rédactionnelle),
prises de vues des produits,
référencement du site,
choix du ou des modes de paiement,
mise en place des conditions générales de vente,
prise en compte des différentes législations en vigueur,
emballage et expédition des commandes,
etc.

Sans parler des contraintes propres à votre système de boutique qui ne manquera pas de vous faire perdre quelques cheveux tôt ou tard ;) Bref, même le meilleur E-CMS demandera du temps pour être maitrisé et adapté à vos besoins. Et oui, il ne suffit pas de lancer un script d’installation et remplir une base de données avec vos produits pour que les commandes s’emballent et s’expédient dans la foulée pendant que vous buvez une bière un thé un café sur votre canapé ;)

Quelques outils pour gérer votre boutique en ligne

Si vous être prêt à mettre les mains dans le camboui, voici un aperçu des outils que j’ai eu l’occasion d’utiliser :

osCommerce, le plus répandu

osCommerce est certainement l’outil le plus répandu en France et dans le reste du monde. Non sans raison, car le projet existe depuis longtemps et une communauté importante s’est peu à peu constituée pour répondre à vos questions, y compris en français, ce qui peut avoir son importance.

Le point fort d’osCommerce est cette forte communauté. Son point faible, c’est que sans cette communauté vous aurez des difficultés pour avancer tout seul à cause de la structure des fichiers : l’organisation du code fait passser n’importe quelle usine à gaz pour un modèle de clarté.

La critique est aisée mais l’art est difficile, j’en conviens : ce côté usine à gaz à sa raison d’être et si vous ne tentez pas de vous soustraire à l’organisation et à la logique de fonctionnement de l’outil, vous pourrez gérer de nombreux paramètres en quelques clics. Le plus difficile sera peut-être de trouver où cliquer car osCommerce disperse allègrement les options dans son interface d’administration.

Une fois les fonctions de base assimilées, vous trouverez sans peine une foultitude de plugins contributions pour étendre les fonctionnalités de votre boutique. Malgré les qualités d’osCommerce, il reste un point qui calme mon enthousiasme : l’utilisation abusive des tableaux pour la mise en page ; je ne veux pas faire le standardiste de service, mais là c’est vraiment exagéré… Toutefois, il semblerait que la prochaine version apporte quelques améliorations.

osCSS passe en version 1.2

Si vous n’avez pas envie de plonger dans une soupe de balise pour intégrer votre charte graphique, osCSS vient de passer en version 1.2 et reprend le coeur des fonctionnalités d’osCommerce en laissant de côté la couche de présentation en tableaux. Il devient possible de skinner sa boutique en ligne presque aussi facilement qu’un blog !

Quelques templates sont proposés à l’installation. Pour vous faire la main, je vous déconseille les thèmes qui utilisent jusqu’à une trentaine de feuilles de style importées. Pour en avoir fait l’expérience, il est préférable de partir de zéro ou du thème défault qui contient le minimum, quitte à garder un oeil sur les autres fichiers CSS pour s’inspirer de la liste quasi exhaustive des classes et des ID’s utilisées dans le code HTML.

Par rapport à la version osCSS 1.1 dont j’avais déjà dit quelques mots, cette nouvelle version propose une interface d’administration plus évoluée, à l’image de ce que l’on trouve dans les autres versions d’osCommerce.

Télécharger osCSS 1.2

osCommerce version CREloaded

Si osCSS peut être considéré comme une version light d’osCommerce, la version CREloaded en est la version bodybuildée ! De nombreuses contributions ont été intégrées pour en faire un package prêt à l’emploi. Cette version possède son propre écosystème avec une philosophie orientée business : si la version Standard est gratuite, il existe une version Pro à partir de 150$. Des modules supplémentaires, des templates et une aide à l’installation peuvent également être achetés.

Comme pour osCommerce, une communauté francophone existe pour vous guider dans toutes les étapes de la création de votre boutique avec CREloaded.

Autres systèmes pour vendre sur le web

Il n’y a pas que osCommerce et ses avatars pour tâter du e-commerce (Liste constituée d’après le blog kardamome) :

Certains CMS possèdent des plugins e-commerce :

En bref

Le nombre de solutions disponibles pour vendre sur internet augmente peu à peu. Il était temps car pour nombre de créateurs, les solutions osCommerce et CREloaded ne correspondent plus vraiment à ce que l’on est en droit d’attendre en terme de respect des standards du web. Pas pour les standards en eux-mêmes, mais parce qu’ils garantissent une maintenance aisée du code, ainsi qu’une plus grande facilité pour adapter vos templates à l’air du temps comme le font les boutiques faites de briques et de mortier qui réorganisent leurs vitrines plusieurs fois dans l’année.

Articles sur le même sujet

Templates et boutique en ligne osCSS

Bruno Bichet — Wed, 10 Jan 2007 22:46:04 +0000

Après avoir abandonné l’idée d’adapter une charte graphique un peu funky dans osCommerce, j’ai regardé de plus près le projet osCSS. C’est une version CSS ready du projet osCommerce. La particularité d’osCSS est de fournir du code valide au regard des standards du W3C, qu’il s’agisse d’XHTML 1.0 ou 1.1. Les templates sont construits sur des fichiers CSS facilement personnalisables et interchangeables.

CSS ready signifie notamment (même si les tableaux sont aisément stylables en CSS) que les table cachées dans quasiment tous les recoins d’osCommerce sont remplacées par des balises sémantiquement plus correctes : liste non-ordonnée ul pour les menus, liste de définition dl pour l’affichage des produits… Si le bonheur n’est pas dans le pre, il est peut-être dans la le li…

Le principe des templates est connu. Je rappellerais seulement qu’il s’agit le plus souvent d’un dossier contenant les éléments personnalisables d’une application. Généralement, ce dossier contient :

un dossier images pour placer les éléments graphiques,
un ficher index.php ou template.php qui contient le squelette XHTML ainsi les appels des fonctions PHP,
un fichier CSS pour mettre en forme les balises du fichier cité plus haut.

Une application bien pensée devrait idéalement séparer la partie métier (les fonctions) et laisser à l’intégrateur le soin de choisir l’emplacement des appels de fonctions. C’est plus ou moins le cas dans osCSS.

En effet, une charte graphique peut imposer de regrouper ou séparer certaines balises pour former des groupes d’éléments positionnables avec float: left ou position: relative, etc. Dans le cas d’osCSS, il est parfois nécessaire de modifier des fichiers situés en dehors du dossier template, contrairement aux systèmes modernes de blogs comme Dotclear ou WordPress, où les principes de programmation retenus permettent de garder une saine séparation entre la forme et le fond.

Je n’ai pas encore testé la partie administration de la boutique pour remonter les bugs éventuels qui ne manquent jamais d’apparaitre quand on pense avoir terminé. Mais en ce qui concerne la partie design CSS, si on oublie l’idée de ne modifier que le dossier template en cas de maquette un peu complexe, la solution osCSS semble un très bon choix.

Outre les qualités intrinsèques d’osCSS (templates full CSS, simplification de l’organisation des fichiers), le projet semble soutenu par une communauté vivante et motivée qui alimente un forum et un wiki pour suivre les développements et la documentation !

Sur ce, meilleurs voeux pour 2007 et à bientôt sur le sujet ;)

Articles sur le même sujet

Boutique en ligne : osCSS vs osCommerce ?

Bruno Bichet — Wed, 20 Dec 2006 07:36:04 +0000

Si je n’ai pas beaucoup écris ces derniers temps, c’est la faute à osCommerce ! Si vous avez déjà mis les mains dans le cambouis de cette « solution » pour adapter la charte graphique de votre boutique en ligne, vous avez certainement eu l’occasion de fustiger le mélange des fonctions et des classes PHP avec les balises table qui compliquent inutilement la tâche de l’intégrateur HTML et CSS.

Après l’installation de osCSS, vous avez une boutique en ligne prête à respecter les standards avec un doctype strict et un code xhtml sémantiquement correct.

En attendant la version 1.2 finale, vous pouvez vous faire une idée du travail de titan effectué par manmachine et j4k en installant la version 1.1-RC1 basée sur la version MS2.2 d’osCommerce.

Ceux qui tournent sur une version Creloaded n’auront donc que leurs yeux pour pleurer, à moins qu’ils ne changent leur fusil d’épaule et essaient la boutique Thelia proposée sous licence GPL par la société Octolys.

PS : On me souffle dans l’oreillette qu’une version MS3 d’osCommerce devrait voir le jour sous peu. D’après ceux qui l’ont testée, des efforts auraient été fait concernant l’organisation des templates. A suivre…