Depuis la mise en place de la version responsive design du CMS Wmaker, nous rencontrions un "léger" bug d'affichage. Cela ne concernant que les versions "Responsive" puisque la version dite "Adaptive" est constituée d'une maquette à part entière pour le mobile et le tient donc pas compte des règles de la version desktop.
Lors du la création de certain site internet, le choix design du client réclamait des sites s'affichant sur des largeurs différentes du standard de 980 pix.

Ainsi certains sites récents ont été imaginé avec des largeurs de 1032 pix ( Les Eaux Saint Georges) , 1200 pix ( le dernier site de l'hôtel Costa Rossa) ou autres tailles encore allant de 960 à 1200 pix de large.
 

Perte de pixel sur Ipad

L'affichage sur Ipad rencontrait alors un vrai défaut. 
De façon très curieuse, les pix supplémentaires au 980 ( 1200 - 980 = 220 pix = beaucoup !) décalaient l'affichage du site depuis la partie droite de l'affichage.
Ce problème existe sur d'autres CMS et pas exclusivement sur Webzine. Les différents messages trouvés sur des forums montrent que d'autres webmaster se sont creusés la tête sur ce défaut d'affichage.

 

La solution sur Ipad

Un petit bout de code tout bête, est hop tout va mieux 

<meta name="viewport" content="width=1200, maximum-scale=1.0" />

Et hop, tout va beaucoup mieux. Le site vient bien s'adapter à 100 % de l'écran de la tablette, format paysage ou panorama sans décaler les fameux pixel de trop.
Il est donc temps de reprendre et vérifier l'ensemble des sites réalisés par La Boite A Truc dont la version responsive est basée sur une solution différentes des 980 pix de base.

Crédit photo : Sorry par Pic Jumbo

Dans la gamme très complète des outils Google, voici le dernier né, destiné à tester l'affichage de n'importe quel site internet et en vérifier la notion de responsive design.
Ce nouvel outil est gratuit, totalement accessible sur le web sans connexion ni téléchargement.
 

Tester le responsive design ?

La notion de responsive design est bien connue maintenant. Google Resizer permet donc de vérifier à partir d'un simple url l'affichage du site étudié sur les multi écran que représentent les ordinateurs, les tablettes ou les smartphones.

Comment utiliser Google Resizer ?

Le site est accessible par tous à l'adresse suivante : http://design.google.com/resizer/
Il présente la possibilité, dans la partie haute du site, d'y taper l'url d'un site ou d'une page en particulier, afin de lancer le test.
Le reste se fait presque tout seul.
Google Resizer va afficher automatiquement l'aperçu du site tester en 3 résolutions standards : Desktop, Tablettes et smartphone.

Mais Google va plus loin ! 
Tout d'abord, le site s'anime dans l'outil comme il le ferait dans un affichage classique.
Les éventuels slider s'actionnent, les vidéos se lancent, les éléments de navigations sont actifs etc...
Un vrai test grandeur nature ! 

Il est possible aussi de choisir directement l'un des 2 affichages spécifiques, en cliquant sur les icones présentes en haut à droite de l'écran. Ainsi, l'affichage tablette (panorama) ou smartphone (portrait) sont donc visibles de façon individuelle. 

Autre fonction possible, bien plus intéressante selon nous :
L'affichage selon la taille d'écran sélectionnée : Depuis 1280 jusqu'à des tailles dites Windows large de 480 pix, en passant par les classiques 960, 840 et 600 pix de large. 
Ces affichages permettent de contrôler l'aspect du site selon les tailles, le respect des zones de rupture choisies etc... Un très bel outil rapide et très simple d'utilisation !

Comment faisait-on avant ?

Avant le lancement de l'outil Google Resizer, il existait et existe toujours plusieurs méthodes permettant de contrôler le côté "mobile friendly"d'un site et son aspect selon les tailles d'écrans. 
Retrouvez toutes ces astuces décrites dans ce billet publié juste après le premier grand avertissement de Google : Tester l'affichage responsive d'un site internet 
 

Quelques jours après le vrai-faux cataclysme du Google Mobile Friendly, vous êtes sans doute nombreux à chercher comment vérifier l'affichage de votre site selon les écrans.
Voici quelques solutions simples et efficaces

 

Comment vérifier l'affichage responsive ?

Il existe donc toujours plusieurs méthodes permettant de contrôler le côté "mobile friendly"d'un site et son aspect selon les tailles d'écrans.
Les plus classiques : 

• En réduisant manuellement la fenêtre du navigateur.
  C'est sans doute le moyen le plus simple, pas toujours le plus efficace mais il permet rapidement ( un clic de souris) d'avoir un "aperçu" correct.
   
• En testant de visu sur les différents écrans en votre possession

L'outil de test google mobile

• Le site de test google "mobile Friendly" qui permet de tester l'affichage mais surtout de valider ou non la compatibilité, selon Google, du site testé pour les mobiles. Lancé avant le Mobilegedon du 21 avril 2015, cet outil offre parfois des résultats très surprenant, donnant son "blanc sein" à des sites dont l'affichage est "très" surprenant.

L'inspection par Google Chrome

• La fonction "inspecter l'élément" (raccourci CTRL + Maj + I ) permettant d'ouvrir un élément à droite du site. Une icône apparait avec un téléphone portable.
  Ce clic vous permettra de tester les différentes tailles et affichage selon le mobile ou la tablette.
  
  Encore mieux, un menu en haut à gauche vous permet de choisir le modèle d'appareil très précisément pour pouvoir tester la différence d'affichage entre un iphone 5 S et un Nexus 7, voir même un laptop.
  Un autre élément de tri est possible : l'affichage en portrait ou en paysage du site, très utile pour les versions tablettes.
  (il est nécessaire de rafraîchir la page à chaque nouveau test)
  
  C'est sans aucun doute l'outil le plus puissant du moment pour un vrai contrôle visuel, tant nous sommes perplexe de l'outil précédent !

La même fonction existe sur le navigateur Mozilla et sur Mac.


 

Source photo FirmBee / Pixabay
Dernier edit de l'article : 18 mars 2016 ( sortie de Google Resizer)