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)
 

Ils nous l'avaient promis, et il ont tenu leurs promesses. Les p'tits gars de chez Google avaient largement communiqué depuis des semaines sur la fin du monde : le 21 Avril 2015 allait ressembler à un mélange de fin du monde selon les Incas, Paco Rabane ou le bug de l'an 2000 ! On a même beaucoup parlé de Mobilegeddon (l'Armageddon mobile) ! 

Enfin, du moins pour les sites non optimisés en version mobile, sur les recherches faites via un smartphone et avec un déclassement dans les SERP version mobile. Ah c'est tout ? 
Alors oui, votre compte Google Webmaster Tools crie depuis des jours au danger et ce matin, vous avez essayé de tester votre site sur l'outil de compatibilité mobile de Google, et le résultat est tout rouge !

Cela va avoir deux ou trois effets bénéfiques.

• Tout d'abord, effectivement, mettre votre site internet ou votre boutique en ligne au format optimum pour la navigation sur un mobile. Il faudra alors se poser la question : oui mais c'est quoi le format optimisé ?
• Ensuite, cela va amener une réflexion plus profonde : Google nous dit que 20 à 30 % des visites se font depuis un smartphone. OK. Mais sur votre site, c'est combien ? Avez vous la moindre idée du ratio mobile/desktop ? Nous travaillons actuellement sur un audit et accompagnement de référencement SEO  d'une société spécialisée dans les app mobile. Pourtant 75 % de leur visite viennent d'un ordi classique, 7 % d'une tablette et 18 % d'un smartphone
• D'où la 3ème question : mon site, donc mon business, est il compatible avec une navigation smartphone ?
  Ou plutôt, ma cible est-elle vraiment là ? Question à laquelle on aura vite fait de répondre que de toute façon, autant être optimisé pour l'ensemble des moyens de lecture internet (certes...). Cela va juste poser le caractère d'urgence à la mise aux standards mobile.

Toujours est-il que Google a décidé qu'il fallait dès à présent rendre l'ensemble des sites "#mobilefriendly" (après être #googlefriendly of course) et il faut donc le faire. 
Pour être très honnête avec vous, du côté de La Boite A Truc, ça nous arrange assez !
D'abord parce que, avec l'étroite collaboration de notre CMS préféré, nous disposons de plusieurs possibilités d'adaptive pour répondre aux mobiles ( merci Wmaker), ensuite parce que effectivement, il semble opportun de ne pas se couper de 20 % de son lectorat surtout si la concurrence l'a anticipé, mais aussi parce que cela va faire pas mal le tri dans les sites en flash, les sites qui datent de 2001 etc...

Mais alors, c'est quoi vraiment un site "mobile friendly" ?
Si on s'en réfère a ce que dit Google pour les non-friendly, il s'agit d'un site dont les pages ne serait pas optimisées pour la lecture ou la navigation sur des supports type mobile. Ainsi il teste :

• La taille du texte et des polices de caractère
• La taille du contenu, s'il est trop large pour l'écran,
• Si les menus de navigation sont aisés à utiliser sur un écran de smartphone
• Si les formulaires de contact (par exemple) sont adaptés
• Si l'acte d'achat est facilité pour un site de e-commerce mobile
• Si les liens ou boutons sur une page ne sont pas trop proches, gênant le clic etc...

Le nouvel algo de Google Mobile est donc bien lancé, officiellement né et baptisé par Google comme le confirme l'article sur le blog officiel de Google pour les Webmaster. 
Par cet article il confirme aussi que cela affectera :

• Uniquement les résultats de recherche effectuées sur smartphone (du moins pour l'instant)
• Que le déploiement est international, toutes les langues étant concernées.
• Que chaque page doit être considérée individuellement, et non le site dans sa totalité ou seulement la home ( ce point méritera une analyse plus profonde prochainement car peut-on penser à une home friendly et a des pages profondes moins friendly ?)

Mais quel sera l'impact réel ?
Il ne semble pas s'agir d'un algo a sanction comme le furent Panda et Pingouin, mais plutôt d'une "favorisation" des #mobilefriendly.
Pour l'instant, dans les recherches effectuées, on voit effectivement apparaître devant les sites optimisés une notion de "site mobile" et rien pour les site non optimisés alors que Google avait brandi le drapeau rouge du "low" et de la dénonciation.
Cela veut dire que l'action de Google est immédiate dans sa reconnaissance d'un site mobile, qu'il va donc le favoriser dans l'affichage des résultats mais qu'il prendra en compte votre site "mobile" dès que celui ci sera optimisé....On est bien loin des semaines et mois de galères post-zoo google.

Un peu plus ?
Si vous voulez en savoir plus sur ce sujet, je vous invite à lire le (toujours) très bon résumé du site Axenet sur l'algorithme Mobile Friendly.

 

Au sein de la Boite A Truc, nous avions réalisé déjà quelques "blogs pro" comme ce guide d'informations pour organiser ses vacances en Corse, mais jamais je n'avais approché d'aussi près "le monde de la mode". 
Bref, comme il faut s'imprégner du l'univers du client pour justifier le professionnalisme de l'agence, je me suis attelé à une étude benchmark des plus complètes. Vous découvrirez prochainement mes réflexions face a ces quelques heures de recherche intense et de "lecture" plus ou moins passionnée.

Mais revenons au nouveau site réalisé par La Boite A Truc.
Laure Dary  est une enfant de la danse tombée dans la mode quand elle était petite....très petite.
Aujourd'hui grande et danseuse professionnelle accomplie, elle a décidé de compléter son activité professionnelle par sa deuxième passion : la mode.
C'est donc naturellement qu'elle a décidé de se lancer dans cet univers incroyable qu'est le blog de mode. C'est même devenu un métier : blogueuse de mode. Métier pouvant devenir très lucratif.
C'est tout le mal que l'on souhaite à Laure et son blog Signature Mode

Le blog a bien sur été réalisé sur la base de notre CMS préféré Wmaker.
Une version mobile adaptive a été réalisé pour une meilleure lecture sur smartphone.
Ultra connecté avec les reseaux sociaux, le site est aujourd'hui totalement administré par Laure pour la vie de son contenu, photos et autres petites choses fashion.

Enfin, un grand merci à Valérie sans qui ce contact et cette rencontre n'aurait jamais existé. Oui je bosse sur ton site ;-)

A découvrir donc : Le blog mode de Laure Dary : Signature mode