Développeur-front-end
Développeur wordpress
Webdesigner / créateur d’interfaces
freelance
Me contacter

Comment augmenter vos ventes grâce aux meilleures pratiques front-end 2017

Nous serons d’accord, il y a plusieurs éléments pour augmenter vos ventes sur votre site web. Un bon design, le marketing, la quantité et la qualité du trafic, une campagne de publicité, et d’autres. Et il y a aussi le front-end, la fondation de votre site web.

Que ce soit pour votre propre entreprise ou startup, ou pour vos propres clients si vous êtes une agence, les recommandations dont je vous parle ci-dessous vous permettront de faire plus de ventes.

Créez une Progressive Web Application (PWA)

Depuis novembre 2016, les sites web sont d’avantage consultés à 60% depuis un mobile. Une grande partie des gens achètent depuis un mobile donc.

La majorité des visiteurs n’attendent pas plus de 2 secondes pour le chargement de votre site web. 1 seconde plus pour ouvrir une page de plus et c’est 7% de conversions en moins, et 17% de satisfaction en moins. À plus de 10 secondes vous avez perdu l’attention des visiteurs.

Un site web qui se charge rapidement à:

  • un impact positif mesurable sur les ventes.
  • plus de visiteurs répétés, particulièrement sur mobile.
  • un référencement plus haut dans les résultats de recherche Google.

Tout le monde parle des PWA, c’est le buzz, le marché va vers ça. Les PWA c’est comme les vieux bons site web, mais en mieux avec les technologies utilisées par les applications natives.

En fait une Progressive Web Application est une collection de technologies web à appliquer sur votre site web. Exemple: utiliser le https, être indexable par Google, permettre les notifications push, avoir le bouton retour comme une app native, et d’autres points plus avancés. Voici la checklist de Google d’une Progressive Web App.

Une PWA est:

  • Mobile-first: sur desktop, c’est un site web comme vous avez l’habitude de voir. Par contre sur mobile, c’est pas juste du responsive, le site web ressemble et se comporte comme une application mobile.
  • Fiable et offline-first: elle se charge quasi instantanément. Et le mode hors-ligne vous assure que votre PWA est consultable tout le temps.
  • Rapide: Elle répond vite aux cliques. Les animations sont fluides. Elle doit se charger en moins de 5 secondes sur un mobile 3G.
  • Engageante: naturelle, avec une expérience immersive

Ajoutez l’icône de votre site web sur l’écran d’accueil du mobile

Une PWA permet de créer un icône sur la page d’accueil mobile sans que l’utilisateur ait besoin de passer par l’app Store. Une possibilité merveilleuse quand on sait qu’environ 20% des gens sont perdus sur le chemin lorsqu’ils doivent aller télécharger une application sur le app store (car difficulté à trouver l’app, détours, le temps de la procédure).

Il suffit de créer un fichier manifest.json, et définir le chemin url vers les icônes de différentes tailles.

Le code à ajouter à vos pages HTML: <link rel=”manifest” href=”/manifest.json”>

Le lien complet vers le manifeste d’application web.

Les startups par exemple peuvent vouloir utiliser une app native pour engager les utilisateurs fidèles, mais une progressive web application leur permettra de toucher aisément de nouveaux internautes et faire plus de ventes.

Pensez maintenabilité et évolutivité

La maintenabilité et l’évolutivité de votre site web, ça veut dire un code bien architecturé, propre, structuré en différents fichiers avec le code aisément lisible et modifiable. Donc vous économisez du temps et de l’argent. Ça permet aussi à différents développeurs de travailler facilement sur le même code.

Comment rendre un site maintenable et évolutif?

Réponse: avec une code HTML, Angular, React, ou autre, de qualité. En créant des composants réutilisables.

Personnellement j’utilise aussi la méthode SMACSS pour le SCSS. Le SCSS c’est du Super CSS, du CSS avec des commandes en plus bien pratiques. SMACSS c’est une méthode de structuration du CSS en différents fichiers. Vous avez un fichier pour le header, le footer, les typographies, les sliders, les boutons, ect… Sur un gros site web quand il y a des milliers de lignes de code c’est très appréciable.

J’ai crée un kit de démarrage basé sur SMACSS téléchargeable sur mon GitHub.

Utilisez de bonnes pratiques front-end

De bonnes pratiques front-end vous assureront un impact positif sur votre référencement.

Voici ce que j’entend par bonnes pratiques:

  • Toujours avoir une balise title dans les liens. Mettre les attributs dans cet ordre précis: <a href= » » title= » » class= » »></a>
  • Toujours avoir une balise alt sur les images (même vide). Point important pour le SEO, car Google attribue désormais pour un poirds référencement plus grands aux images. Je ne crois pas que c’était le cas ces dernières années.
  • Utiliser une seule balise H1 par page.
  • Encoder les adresses en microdatas (pré-requis pour avoir une Progressive Web App). Ça permet de voir l’adresse dans les résultats Google s’afficher sur une google map, avec les détails, voire afficher la notation sur 5.
  • Corriger les erreurs W3C. Le standard W3C c’est tout simplement la manière académique de coder le HTML/CSS. Testez votre site web, s’il contient beaucoup d’erreurs W3C votre site web s’affichera toujours convenablement, les navigateurs d’aujourd’hui font bien leur travail. Par contre pour le référencement Google, même si c’est un critère mineur, ça a un impact.

Soignez l’accessibilité et compatibilité multi-navigateurs

Assurez d’une bonne compatibilité multi-navigateurs de votre site web pour vos visiteurs qui utilisent encore de vieux navigateurs ou les premiers mobiles iOS/Android et tablettes, sinon vous perdez des ventes.

J’utilise browserstack.com qui permet de faire des simulations sur tous les navigateurs et périphériques.

Avoir un design persuasif

Je crois qu’un site web beau c’est bien, c’est important, mais ce n’est pas ça qui vous fera plus convertir en ventes, clients, ou inscrits.

Personnellement je crée des sites web cleans, minimalistes, avec un travail focalisé sur les conversions. Ensuite il faut chercher à optimiser, tester des modifications du design, améliorer le copyrighting. Il faut lister les hypothèses, les analyser, tester systématiquement chaque hypothèse. Un travail qui peut être long. Mais vous améliorerez les conversions en cherchant à optimiser.

Imaginez si vous faites 20% de conversions en plus. Au lieu de 2% de conversion, vous faites 2.4%. Ça peut représenter un impact très significatif sur votre chiffre d’affaire.

C’est tout pour cet article, j’ai essayé de garder ça simple et court. Si vous êtes une agence ou une startup ambitieuse et que vous pensez que vous pourriez profiter de mes services, contactez-moi, n’hésitez pas.