Un blog qui s'adapte à tous les écrans

Les techniques dites de "responsive design" visent à rendre un même site compatible avec tous les écrans. Les thèmes des années 2010 doivent s'adapter à tous les supports. On en trouve pour Blogger ou Wordpress

Pour contourner le problème de la taille réduite des smartphones et autres tablettes, les plateformes de blogs ont mis en place des versions mobiles des blogs : le blog se retrouve souvent affiché avec un thème unique. C'est le cas avec CanalBlog, Eklablog, Tumblr, Blogger ou Overblog... Un pis-aller dont il ne faut pas se contenter car les lecteurs sur tablettes sont souvent privés d'une partie du contenu sur cette version réduite.

Version mobile vs version responsive

Version mobile vs version responsive

Les thèmes d'overblog ne sont pas "responsive design"

OverBlog annonce sur sa page d'accueil que 'le design de votre blog est adapté aux mobiles, tablettes, TV connectées et PCs grâce au responsive Design'. Ah bon ? Un exemple est présenté avec un design qui s'adapte à différents supports. Mais quel est donc ce thème ? Introuvable dans la liste des thèmes proposés par overblog.

Un thème responsive design présenté par overblog : introuvable sur la plateforme

Un thème responsive design présenté par overblog : introuvable sur la plateforme

Adapter son blog

La première chose à faire est de regarder comment ce comporte votre blog si vous réduisez la taille de la fenêtre. Un ascenseur horizontal apparaît ? Problème...

Largeurs relatives

La méthode simple (simpliste ?) pour adapter son blog est de remplacer les largeurs en pixels par des largeurs en pourcentages. Par exemple pour une structure à deux colonnes :

/*cadre du blog*/
#global{width:950px;margin:auto;} 
/*en tête */ 
#cl_0_0 {margin:0;padding:0; width:950px;} 
/*colonne principale à gauche */ 
#cl_1_0 {width:620px;} 
/*colonne modules à droite */ 
#cl_1_1 {width:330px;} 
 
/*cadre du blog*/ 
#global{width:100%;margin:auto;} 
/*en tête */ 
#cl_0_0 {margin:0;padding:0; width:100%;} 
/*colonne principale à gauche */ 
#cl_1_0 {width:70%;} 
/*colonne modules à droite */ 
#cl_1_1 {width:30%;} 

Les images et les vidéos dans les articles doivent aussi s'adapter aux différentes largeur d'écran.

 
img, object, iframe { max-width: 100%; height: auto; } 

Cibler des écrans

Les media quieries introduites récemment permettent d'aller plus loin en ciblant certains écrans dans la feuille de style. En pratique, on place à la fin de la feuille de style des propriétés qui marchent uniquement pour certains écrans. Cela permet d'éviter les effets d'écrasement avec les largeurs en pourcentage.

Ce bout de code CSS fonctionnera uniquement pour les écrans de moins de 640px :

@media screen and (max-width: 640px) {
/*colonne principale à gauche */ 
#cl_1_0 {width:100%;}
/*colonne modules à droite */
#cl_1_1 {width:100%;}  
} 
</style> 

Les modules vont se retrouver sous les articles, ce qui améliore le confort de lecture pour un petit écran.

Meta tag viewport

La méta tag « viewport » indique au navigateur comment afficher le site et évite donc les effets de zoomage ou dézoomage indésirables. C'est une ligne à ajouter au début du code du thème (après <head>)

 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

initial-scale=1.0 définit un zoom initial de 100% ; width=device-width définit une largeur d'affichage adaptée à celle de l'appareil.

Sur les autres plateformes

Adapter son blog à tous les supports n'est pas une mince affaire et ceci ne sont que quelques indications. Les appareils et les navigateurs ont des spécificités et des comportements différents qui donnent du fil à retordre aux développeurs.

Sur Blogger, plusieurs thèmes sont proposés ici par exemple.

Quelques articles à lire :