Copywriting Pratique

Ecrivez facilement des textes qui font agir


Ressources gratuites pour Copywriters  |  Pourquoi ?  |  Un article au hasard

Créer une page de vente 100% responsive pour multiplier ses ventes par 2

Je suis allé jeter un oeil sur mes stats de visite, hier... Je voulais voir quelle était la page de mon blog qui apportait le plus de visiteurs sur Google.

Sans grande surprise, c'est le Générateur d'Accroches Hypnotiques. Puis ensuite, je suis allé regarder la répartition des connexions.

Il s'avère que plus de 60% utilisent cet outil via leur téléphone ou leur tablette.

Et quand je regarde l'ensemble de mon blog, il n'y a que 41% des gens qui se connectent via un ordinateur.

Et encore, je suis dans la fourchette basse.

Certains de mes clients ont 95% de consultation sur téléphone.

Il s'ensuit que lorsque l'on crée une page de vente, il faut la créer D'ABORD pour les téléphones.

Et pour cela, pas de chichi :

Pour la lisibilité, on va utiliser du CSS de base.

Je vais vous montrer comment faire ça en quelques minutes, sans vous prendre la tête.

C'est pas du codage propre à 100%, et les spécialistes du design vont sûrement s'ouvrir les veines (ceux qui ont résisté à mon article de vendredi), mais c'est rapide, efficace et 100% lisible sur tous les supports.

1. Optimisation pour les téléphones

Une fois qu'on a notre texte, on va juste personnaliser notre balise <body>.

Et lui rajouter un simple style avec 2 instructions :

Ça nous donne une ligne comme ça :

Avec cette simple ligne rajoutée dans la balise body (vous pouvez rajouter des styles de polices, si vous voulez, et même de la couleur), votre page est 100% lisible sur un téléphone.

Ça donne ça : Page pour téléphone.

Une fois qu'on a créé ça, on peut tenter de l'améliorer pour l'ordinateur.

2. Optimisation pour les ordinateurs

Pour faire ça, il faut encore utiliser du CSS, et une seule ligne de code :

Il suffit d'encadrer votre texte avec des balises <div> et de rajouter 2 instructions dans le style :

Vous pouvez aussi rajouter ce qu'on appelle un "padding" (une marge intérieure, pour que le texte ne colle pas aux bords de la page) et une bordure :

Et voilà.

Avec cette mise en forme somme toute assez simple, vous vous assurez du "responsive" facile et salutaire pour tous les supports.

Voici le style complet et final :

Ça donne ça : Page pour ordinateur.

3. Détection du support = page 100% responsive

Aujourd'hui, on a des fonctions CSS qui permettent de détecter la taille des écrans.

Donc on peut rassembler toutes nos infos sur une seule page, qui sera affichée de manière optimisée sur n'importe quel support.

Pour cela, on va utiliser la résolution d'écran de l'appareil sur laquelle notre page de vente s'affiche.

Et tout ça ne tient que dans quelques lignes de codes.

Il va falloir rajouter des balises <style></style> en haut de votre page.

Et marquer un truc comme ça :

Avec ça en haut de votre page (évidemment, on supprime tout ce qu'on avait mis avant, dans la balise body + la <div> qu'on avait rajoutée autour de notre texte.

Cela donne ça : Page 100% responsive.

Vous pouvez englober tous les styles d'écran en rajoutant à chaque fois un bloc dans le style, et en changeant le nombre à côté de "max-width".

La page ci-dessus est affichable sur ordi et sur téléphone de la bonne manière.

Si vous êtes sur un ordinateur, réduisez la taille de votre fenêtre, et vous allez voir l'affichage pour téléphone arriver. :)

Pour aller plus loin

Il existe même une fonction php qui arrive à reconnaître quel style d'appareil est en train de visiter votre site. Pas la résolution de l'écran. Le TYPE d'appareil.

Ça peut servir pour simplement afficher votre page d'une certaine manière sur un téléphone, et d'une autre sur un ordinateur.

Sans considération de taille d'écran.

Cela peut permettre ainsi de rajouter des trucs spécifiquement pour les ordinateurs, sans que les téléphones les affichent (c'est le cas des pop-up par exemple, qui ne s'affichent jamais correctement sur un portable), sans passer par du CSS.

Je vous parlerai de cet fonction dans un prochain article.

Normalement, avec ce que vous avez écrit sur cette page, vous avez là une façon rapide de mettre votre page de vente en forme pour qu'elle soit la plus optimisée possible, et qu'elle balaye les obstacles à l'action.

On peut trouver ça inutile, et pourtant, je vous assure qu'une page de vente sur laquelle on doit naviguer en faisant passer l'écran de droite à gauche sur un téléphone n'obtiendra aucun résultat probant.

Dommage, je trouve.

Conclusion : a retenir

Avec toutes les infos techniques que je viens d'aborder, on pourrait oublier la chose la plus importante à se rappeler de tout ça :

A la base, il faut écrire sa page de vente pour consultation sur un téléphone :

Vous prenez un éditeur de fichiers texte (Notepad ou TextEdit par exemple), et vous écrivez vos arguments les uns sous les autres.

Et ensuite vous les intégrez dans une structure web (html, head, style, body, footer).

C'est la meilleure façon de faire pour des résultats de vente optimisés.

Après tout, on cherche à multiplier son CA par 2, non ?

 

Partagez :

Publié le 18 MAI 2020 - Catégorie : Lisibilité

A lire aussi :


Ou alors, continuez votre voyage au hasard »



RECUPEREZ VOS RESSOURCES GRATUITES POUR COPYWRITERS

Le Générateur de Slogans, le Sympathomètre, le Créateur de Marque Instantané, le Générateur d'Accroches Hypnotiques et bien d'autres...

Mais aussi : des guides pour apprendre le copywriting et l'IA, des éléments graphiques pour embellir vos blogs et vos pages de vente...

Générateur de QRCodes | Générateur d'accroches hypnotiques | Contact

Cultivez l'amour du copywriting avec Yvon CAVELIER

Mentions légales | Conditions Générales de Vente
Conditions Générales d'Utilisation | Politique de confidentialité