usbpowerbox-home.png

Le site du mercredi : une mini boutique au design minimaliste

usbpowerbox-home.png

Cette semaine nous vous présentons www.batterie-usb.com un site réalisé par Nicolas, un développeur e-monsite. Je passe tout de suite à la première personne puisque c'est moi qui écrit ce billet ! Voici donc une mini boutique en ligne, qui a la particularité de ne proposer qu'un produit. Il s'agit en l’occurrence d'une batterie USB rechargeable. Je vais vous expliquer comment, en une quinzaine d'heures, j'ai pu réaliser ces quelques pages, personnaliser le design et créer une page panier à partir de 0. 

Préparation du contenu

J'ai d'abord organisé mon contenu sur papier, déterminé le nom des pages et leur contenu dans les grandes lignes. Cette réflexion est essentiellement orientée par les impératifs du SEO (optimisation pour les moteurs de recherche). Il s'agit de mettre en scène le nom du produit dans un contenu rédactionnel : déterminer les expressions à utiliser, à associer, à décliner. 

Le produit en lui même présente un aspect innovant, il s'agit donc de créer un contenu pédagogique, j'ai retenu l'idée des pages Mode d'emploi, FAQ et Simulateur de charge. Des pages essentiellement destinées à "éduquer" le visiteur.

Astuce : la page d'accueil propose des liens vers des listes d'appareils compatibles. Sans réel intérêt pour les visiteurs, ces pages sont essentiellement destinées à capter du trafic sur des requêtes précises comme "batterie pour Raspberry Pi".

Création du site

A partir d'un nouveau site, j'ai simplement activé les modules pages et contact. J'ai retenu le thème responsive "Old Wall", créé mes pages et le menu correspondant. La composition des pages repose sur l'utilisation intensive des blocs. En parcourant le site, on devine d'ailleurs rapidement les lignes et les colonnes.

Astuce : Pour éviter les pavés de texte indigestes, j'ai choisi de diviser mes contenus en petits blocs, en espérant que mes visiteurs laisseront leurs yeux se promener sur les pages.

Design du site

Je voulais m'orienter vers un design sobre qui favorise la mise en avant du produit et des contenus. J'ai choisi un thème responsive, qui facilite l'accessibilité du site sur les appareils mobiles (téléphones et tablettes), d'autant que dans mon cas, il s'agit d'une bonne partie de ma cible potentielle.

En bricolant avec les paramètres du thème (Configuration > Apparence > personnaliser) et un peu de CSS dans les zones éditables (Configuration > Réglages > zones éditables), j'ai créé quelques styles CSS supplémentaires, que j'ai exploités dans les pages (grâce aux classes CSS des blocs).

Via la page Configuration > Menus , j'ai volontairement désactivé les colonnes de menus, au profit d'un menu principal qui fait office de header. Le footer, exclusivement composé de liens vers les pages internes du site, a été créé à partir des zones éditables.

Astuce : Dès la création du site, j'ai profité des nouveautés sur les zones éditables, en utilisant la variable {{ site.url }} dans les urls des liens du footer. Ainsi, lors de l'installation du nom de domaine, l'adresse de mon site a changé, mais ces liens ont continué à fonctionner.

La page Panier

usbpowerbox-panier.png

Je ne souhaitais pas activer le module boutique, car avec un seul produit, il me paraissait disproportionné. J'ai opté pour le développement en javascript d'un panier totalement personnalisé, qui calcule une ristourne selon le nombre de produits achetés. Le bouton de validation de la commande renvoie vers la solution de paiement Paypal. Sans être développeur, vous pouvez reproduire ce genre de page grâce au widget Paypal, qui se configure rapidement et offre à vos clients la garantie d'un paiement sécurisé.

Astuce : Avec quelques connaissances en programmation et le widget "Code HTML", il est possible d'apporter de l'interactivité à vos pages. La méthode est mise en oeuvre sur la page "simulateur de charge", qui permet de calculer des données précises en fonction d'une valeur saisie par le visiteur.

Bilan

Pour la création de ce site, il aura fallu une quinzaine d'heures, une version PRO et un nom de domaine. Un "investissement" très accessible pour lancer une petite activité de commerce en ligne. En fonction du succès rencontré, les possibilités d'évolution sont nombreuses :

  • vente à l'étranger avec un site multilingue
  • plus de références et une gestion de stocks  avec le module boutique
  • un espace membre pour créer une communauté autour du produit
  • un album photo et des vidéos de démonstration
  • un blog pour annoncer les nouveautés
  • etc

Commentaires

  • CLAIRE WILMOTTE
    • 1. CLAIRE WILMOTTE Le 21/08/2013
    super idée
  • Jean
    • 2. Jean Le 21/08/2013
    Super site ! J'aime beaucoup ! Vous êtes par contre très mal référencé :/... Comment ce fait-il que lorsqu'on tape dans Google "batterie usb", vous n’apparaissez qu'au 48ème résultat (soit dans la 5ème page) ? Et non pas dans les 5 premiers résultats...
  • nicolas_giraud
    Merci @Jean. Effectivement le site est mal (voir pas du tout) référencé, mais il est tout neuf et vient à peine d'être mis en ligne. De plus il ne s'appuie encore sur aucun réseau de liens. Si l'attention apportée aux contenus est essentielle, l'étape de la création de liens sur d'autres sites est capitale. Ce billet, qui fait référence au site, est un bon début, il faut maintenant "faire parler" de ce site sur un maximum de pages: sites spécialisés, forums, blogs. Les réseaux sociaux (twitter, facebook ou google+) sont aussi un levier intéressant à ne pas négliger. Cela dit, certaines requêtes particulières sur Google proposent déjà quelques liens en première page, c'est le cas par exemple de "batterie pour raspberry pi".
  • Sophie Webmaster
    Bonjour,

    Un développeur du coté utilisateur en voilà une super bonne chose :-)
  • Mathieu
    Bonjour Nicolas,

    Belle réalisation. J'ai deux questions :

    - pouvez-vous développer votre astuce
    Dès la création du site, j'ai profité des nouveautés sur les zones éditables, en utilisant la variable {{ site.url }} dans les urls des liens du footer. Ainsi, lors de l'installation du nom de domaine, l'adresse de mon site a changé, mais ces liens ont continué à fonctionner.


    - En dire plus sur l'intégration en javascript du panier interactif ; un lien vers de la documentation peut-être ?

    Bien cordialement
  • nicolas_giraud
    @Mathieu Merci
    Concernant les zones éditables, vous pouvez à présent utiliser des variables dans le code. Dans le cas présent, j'ai écrit les liens de la manière suivante: href="{{site.url}}/nom-d-une-page.html" Ainsi, lors de l'affichage du site, la variable {{ site.url }} est "remplacée" par l'url du site. Sans cette variable, j'aurai du écrire l'adresse complète de mon site, qui a changé depuis, puisque j'ai installé un nom de domaine.
    Pour le panier, il n'y a hélas aucune documentation, je l'ai codé pour l'occasion. C'est écrit en javascript, directement dans la page. Vous pouvez essayer d'en comprendre le fonctionnement en observant le code source de la page (le code est commenté). Vous êtes par ailleurs libre de le réutiliser à votre guise.
  • Daïana
    Je cherche désespérément comment faire un beau pied de page avec des colonnes bien faites et des liens comme sur votre site...
  • Mathieu
    @ Nicolas
    Merci pour votre retour.

    J'ai effectivement lu le billet sur les variables insérées dans les zones éditables, dont je dois dire, je n'ai pas compris la portée (euphémiste...).
    Question : la variable {{ site.url }} remplace donc le nom de domaine, suivi donc du chemin de la page en lien relatif.
    Ceci étant dit, quelle est l'utilité d'insérer une telle variable ?

    Par ailleurs je vais voir comment est codé le js du panier.

    Bien cordialement

    Image
  • Arthur
    Bonjour,

    Très sympa le design épuré du site !

    Une petite question : comment faites vous pour ajouter une couleur de fond (grise sur votre site) avec bords arrondi aux blocs de texte ?

    D'avance merci !

    Arthur
  • Condrail
    • 10. Condrail Le 12/09/2013
    Je pourrais créer un site comme celui-ci: http://www.franceprix.fr/ ?

Ajouter un commentaire

Code incorrect ! Essayez à nouveau