la colle ne marche pas sur internet

Thème: on colle ou on élastique?

Dans le cadre d’une série d’articles avec plusieurs co-amateurs de WordPress, je me suis retroussé les manches et les neurones pour vous parler d’une chose qui me turlupine depuis que je touche au web et à la création de sites, je vais vous parler de templates.

Aujourd’hui, le visuel d’un site web est quand même très important. N’étant pas designer dans l’âme, je vous passerais les considérations purement esthétiques pour aborder le point purement technique du thème qui fait quand même un peu débat : faut-il un thème élastique ou un thème fixe ?

Un thème élastique?

Qui veux tâter de mon design élastique?

Non, ce n’est pas un thème qu’on utilise pour châtier un utilisateur imprudent (mais c’est une piste à explorer).

À l’heure actuelle, il existe un nombre incalculable de moyens de se connecter au web: pc de salon avec écran plus ou moins grand, pc portable avec écran de 11 »3 à 18 », tablettes tactiles ou ultraportables dont la diagonale oscille entre 7 et 11 », ou encore smartphones à tout petit écran. Point commun entre ces outils? On les utilise indifféremment pour visiter nos sites favoris.

C’est pour cela qu’a pu se démocratiser et prospérer cet outil génial pour développeur un peu feignasse qu’est le thème élastique. Ranafout’ si l’utilisateur est dans son salon, dans le tram ou aux toilettes, on lui propose la même interface. C’est juste que ça va s’afficher plus ou moins grand selon l’écran, mais les proportions resterons les mêmes. C’est sympa quand même non?
Gros inconvénient à mon goût, il y a un gros risque d’avoir des déplacements d’éléments, des chevauchements, bref des corones dans le potage si le développement n’est pas effectué aux petits oignons (et encore). De même, un site lisible sans problème sur un écran 15 » sera plus compliqué à lire réduit à la taille d’un smartphone de 4 »…

Un thème fixe?

Illustration d'un design fixe

Ok, c’est parce que les chats ça fait du trafic…

C’est selon moi la base de tout. Le thème fixe, c’est un thème qui ne bougera pas, quel que soit votre écran. Il fait x pixels de large et puis c’est tout. Pour ce type de thème, on part de plusieurs postulats:

  1. 87% des utilisateurs mondiaux est encore sur ordinateur fixe
  2. La résolution la plus utilisée est du 1336*768 (quasi 23% d’utilisation dans le monde), sinon 1024*768 (16%) ou 1280*800 (11%).
  3. la majorité de mes utilisateurs correspond à ce statistiques

On peux ensuite adapter en fonction des stats récupérées via Analytics par exemple.
Une fois ces règles posées, on va créer un design sur mesure. Certains frameworks existent, tels 960.gs, qui permettent une mise en page basé sur une grille de largeur fixe de 960 pixels, qui rend super beau.
Inconvénient majeur (mais y’a des astuces pour ceux qui lirons la suite), c’est que sur une résolution plus basse, il faudra utiliser les barres de défilement horizontal, ce qui est assez pénible.

Mais alors, qu’est ce que je doit choisir?

Comme de bien entendu, la réponse sera: « Fait comme tu le sent » 🙂 Mais il y a quelques questions à se poser.

Déjà, à quel point est-ce que je compte m’embêter?Vous pouvez prendre un thème élastique qui va être en général assez bien fait dans la base de WordPress. Par contre n’oubliez pas que vos utilisateurs peuvent connaître quelques déboires visuels sur les petits écrans.

La deuxième solution est de créer des thèmes fixes et d’utiliser les média queries pour définir ce qui va s’afficher en fonction des contraintes de l’écran.

Enfin, la troisième solution – ma préférée – est de faire un thème fixe, et d’ajouter le plugin WP Touch. Ce dernier vous propose de faire un affichage particulier pour les portables et tablettes et bien sûr de personnaliser l’affichage en fonction de vos envies de couleurs / logos.

Voici le screenshot promis. Mon site ressemble à ça sous Android par exemple.

Voici le screenshot promis. Mon site ressemble à ça sous Android par exemple.

C’est cette dernière que je commence à mettre en place sur ce site, et que je vous conseille fortement dans le cadre d’un blog pur et dur.

 

Vous trouverez d’autres articles relatifs aux thèmes WordPress en allant voir le choix d’Isabelle Ostermann pour son thème, en vous référant aux mises en gardes de Thibaut, et bien entendu en regardant les thèmes de sites questions et réponses proposés par Julien sur Jguiss.com.

4 réponses
    • Etienne Cassiat
      Etienne Cassiat dit :

      Effectivement, c’est la réponse ultime 😉

      Mais j’avoue que la question était sur cette opposition entre le fixe ou l’élastique que j’entendais beaucoup autours de moi ^^

      Mais le responsive c’est (presque) la meilleure solution désormais…

      Répondre

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *