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 :

  • Une seule colonne,
  • les éléments les uns en dessous des autres.

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 :

  • font-size: 400% (on augmente la taille de la police pour que ce soit lisible aidément sur un petit écran)
  • padding: 3% (on rajoute une petite marge pour éviter que le texte colle aux bords de l’écran)

Ç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 :

  • margin: 0 auto (ça centre votre <div>)
  • max-width: 650px (ça réduit la largeur d’affichage si l’écran fait plus de 650 pixels de large, ce qui est le cas des ordinateurs)

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 :

  • padding: 3% (marge en % pour s’adapter à tous les supports)
  • border: 1px solid #000000 (une bordure de 1 pixel – une ligne fine -, solide, de couleur noire)

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 :

  • Une seule colonne,
  • les éléments les uns en dessous des autres.

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 ?

 

Devenez membre de Copywriting Pratique !

Si vous souhaitez recevoir :

  • Chaque nouvel article du blog directement dans votre boîte mail,
  • Un article complet, pratique et inédit chaque semaine, non publié sur le blog et réservé aux seuls membres, à consulter par mail et/ou à télécharger en PDF,
  • Un guide qui vous explique comment trouver plus de 354 millions d’images gratuites et libres de droits...

Pour vous inscrire et recevoir tout ça, c'est facile : Indiquez votre prénom et votre email dans le formulaire ci-dessous :