Adapter son site à la lecture mobile

 Article modifié dernièrement le 30 Déc 2013 @ 20 h 40 min

Mes nouveaux blogs, je les adapte de manière à ce qu’ils passent de mieux en mieux sur smartphone, tout simplement parce qu’il faut avoir à l’esprit que ce vecteur d’internet représente désormais l’avenir. Les smartphones, les tablettes, ou du moins leurs formats détrôneront tôt ou tard les ordinateurs portables, qui ont déjà détrôné l’ordinateur fixe. Malheureusement pour moi, je ne suis pas un spécialiste de la programmation et de nombreuses questions se posent.

Comment s’y prendre pour rendre votre site plus présentable sur un smartphone ? La question m’intéresse vraiment.

1 – La résolution 320*480

C’est dans ce petit rectangle qu’il faut savoir présenter ses écrits désormais. Finis les grands écrans 16 neuvième où l’on peut accoler deux sites côte à côte. De cause à effet, il faut parvenir à supprimer les colonnes, et j’envisage sérieusement de supprimer pour ma part mes sidebars affichant, sous wordpress, mes widgets tels que les articles récents ou les commentaires.

2 – Pour les images, j’ai un doute :

Est-ce que les navigateurs internet vont réussir à redimensionner automatiquement mes images ?

Et même si c’est le cas, est-il utile que mes images soient si lourdes si une dimension inférieure suffit ?

D’un côté les images sont importantes dans un blog ou un site, de l’autre il faut élaguer tout ça pour rendre la page la plus rapide possible, la marge de manoeuvre est assez faible il me semble. Pour ou contre la réduction de la taille des images ?

3 – Les marges

Il faut que votre site puisse adapter vos marges et votre texte au mode portrait ou paysage du smartphone. Le problème qui se pose, c’est que lors du changement, votre image va alors changer de place au sein du texte. Si vous comptiez sur cette image à un endroit précis, vous risquez alors de perdre l’ensemble de votre mise en page.

Tout ce mode de fonctionnement propre au smartphone reste encore un peu flou pour moi.

4 – Agencer le contenu à la verticale

C’est ce qu’il faut faire pour éviter que le lecteur ait, à chaque fois, à charger une nouvelle page pour afficher la suite du contenu. Si vous mettez tout votre contenu à la suite de haut en bas, il n’aura qu’à faire défiler l’écran vers le bas pour lire la suite de votre texte. D’où un gain de temps.

5 – Réduire ou supprimer votre titre

Si vous laissez un titre et un menu de navigation en haut monopolisant tout l’écran, le lecteur aura beau cliquer sur différentes pages, il tombera à chaque fois sur votre titre. S’il n’a pas le réflexe de descendre l’écran pour accéder au contenu (votre texte), il peut ne pas comprendre. Si vous supprimez ou réduisez votre titre, il pourra avoir accès au contenu tout de suite après le chargement de la page.

6 – Je pense, finalement, qu’il faut créer des sites plus simples, plus clairs, plus propres

C’est mon avis définitif. La navigation tactile sur un smartphone est moins précise : il faut des cases bien visibles, des liens assez gros, et supprimer les petits détails qui ne sont plus cliquables au doigt. Finalement, si ça permet de simplifier les choses, je suis pour la navigation mobile !

Lecture conseillée sur le sujet :

http://www.journaldunet.com/developpeur/expert/41563/conseils-et-bonnes-pratiques-pour-ouvrir-votre-site-aux-smartphones.shtml

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Mimie 15 septembre 2012, 16 04

    Pour qu’un site s’adapte automatiquement (enfin de la façon dont vous l’avez programmé) à la taille d’un écran, il faut le coder avec le principe du Responsive Web Design.
    C’est avec ce terme qu’il faut chercher des informations sur Google.

    Pour tester ensuite son site « responsive », cette application est faite pour vous.

  • Greg 15 septembre 2012, 22 10

    Ok, ces quelques adresses peuvent se révéler utiles – Ce qui m’inquiète c’est que quand je teste, mes blogs ne se redimensionnent pas automatiquement au nouveau format choisi…

  • Mimie 16 septembre 2012, 19 07

    Oui, il faudrait un thème « Responsive Design » ou un plugin qui modifierai le thème utilisé.

    Une piste en se rendant sur ce site qui permettrait de changer n’importe quel thème en un thème « Responsive », mais à priori ce n’est pas encore disponible, pour être informé de l’ouverture il faut entrer son email.

    Sinon voici une liste de thèmes Wordpress déjà « Responsive » qui s’adaptent déjà au support et au format.

  • Greg 19 septembre 2012, 12 12

    Ok, thx.

  • Samuel 25 septembre 2012, 13 01

    Tu as un plugin pour tes sites sous wordpress ici par exemple : http://wordpress.org/extend/plugins/wordpress-mobile-pack/
    Il switche de thème selon le support qu’utilise le surfeur. Tu devrais aussi installer KeyWordLuv sur ton site, c’est un bon complément avec le dofollow, ça permet de discuter avec de vrais gens et aux webmaster de poser un petit lien optimisé. 😉

  • Greg 26 septembre 2012, 18 06

    Ok, même si j’aime pas trop les plugins.. Dommage que mon thème ne puisse pas s’adapter directement aux smartphones.

  • Digipad 12 décembre 2012, 8 08

    Tout à fait, l’avenir appartient aux sites « responsive » .
    La tablette tactile est de plus en plus présente dans ménage et est en passe de remplacer l’ordinateur…

  • marie@zumba 25 janvier 2013, 21 09

    Tellement d’accord avec l’intitulé de ton article, en 2013 plus personne ne peut passer à coté du mobile, nous sommes et serons de plus en plus connecté. Bonne continuation, Marie

  • Greg 26 janvier 2013, 1 01

    Pour finir, Mimie avait raison, j’ai opté pour un thème « responsive » qui s’adapte à la dimension de l’écran – Tellement plus simple au final de ne plus s’occuper de la taille de notre site puisqu’il sera adapté au support.

Article suivant:

Article précédent:

Share This