Google recommande le Responsive Design pour les sites mobiles

[JanoLapin]

D'après l'article suivant (en allemand) consacré aux conseils de Google pour le SEO des (versions de) sites pour mobiles, le Googler Pierre FAR aurait donné pour la première fois des instructions claires à ce sujet, à l'occasion des rencontres SMX Advanced qui se tiennent en ce moment.

Google préconise d'utiliser dans la mesure du possible le Responsive Design (adaptation dynamique à la taille de l'écran via la CSS), sous une seule url. En cas d'impossibilité, il faut alors appeler du code html spécifique à chaque appareil, en se basant sur le user-agent respectif du visiteur.

L'utilisation d'urls spécifiques pour les versions mobile et desktop ne seraient donc recommandées qu'au cas où les deux ne seraient pas implémentées ensemble (cf. rel=alternate)

When you use the different HTML approach but the same URL, Google wants you to use the HTTP Vary Header as a hint for GoogleBot-Smartphone to crawl the site.

Source originelle / complémentaire:
http://searchengineland.com/google-finally-takes-a-clear-stance-on-mob ... ces-123543

 

[-Romu-]

Hello,

Une question bête, en utilisant le responsive soit html5 visé...
L'intérêt est de masquer des bloc de son site Web pour un affichage Mobile.
Soit => display:none;

N'y aura-t-il pas un impact avec le référencement avec Google, Bing... ?

 

[fredfan]

On peut masquer quelques détails, mais en principe le contenu textuel reste en grand partie.
L'idée c'est surtout de déplacer les éléments entre eux pour qu'ils prennent des emplacements plus pratiques

 

[SpeedAirMan]

On peut faire un design "responsive" sans utiliser un seul "display:none;".

Comme d'habitude : si Google remarque des abus, il sanctionnera (exemple d'abus: contenu visible uniquement sur les appareils ayant une définition supérieure à 4000px).


Merci d'avoir relayé l'info JanoLapin !
L'info ne me surprend pas : le responsive design est actuellement la meilleure solution (amha) pour adapter les sites à diverses résolutions (et donc différents appareils).

 

[anemone-clown]

L'utilisation d'urls spécifiques pour les versions mobile et desktop ne seraient donc recommandées qu'au cas où les deux ne seraient pas implémentées ensemble (cf. rel=alternate)

Nous étions quelques-uns à une session de formation Google Adsense cette semaine à Paris, et l'aspect mobile a été fortement mis en avant : la consigne qui nous a été donné pour réaliser des versions strictement mobiles des sites est de mettre la version mobile dans le sous-domaine "m." au lieu de "www." comme m.webrankinfo.com si WRI avait un site purement mobile. Avec ce sous-domaine, il n'y aura pas de DC (duplicate content) chez Google (mais pas garanti avec Bing...). Evidemment, sur un site comme WRI avec des sous-domaines pour séparer les grandes parties du site (forum, dossiers, annuaire,etc.), ça peut vite coincer. Ceux qui ont utilisé des répertoires pour hiérarchiser normalement leur architecture seront avantagés sur ce point.

Au niveau adsense, ils recommandent d'avoir 2 versions totalement distinctes des sites... en allant à l'essentiel.

Bref : encore 2 sons de cloches différents en fonction des diverses sources "Googliennes".

A noter le lien Google sur les recommendations pour sites mobiles : http://googlewebmastercentral.blogspot.fr/2012/06/recommendations-for- ... phone.html

 

[JanoLapin]

Petite info connexe (qui date de plusieurs jours déjà), le W3C vient d'eccepter les media queries comme norme.

' sont qd même malins chez Google. A moins qu'ils n'aient eu l'info avant moi :mrgreen:

 

[SpeedAirMan]

J'ai vu ça aussi hier

Comme je disais plus haut, y'a rien d'étonnant à ça, actuellement c'est quand même une technique qui possède beaucoup d'avantages !

L'avenir ça sera qq chose comme le responsive design, mais avec des possibilités avancées plus accessibles qui permettront notamment de ne pas avoir à télécharger tous les éléments d'une page à chaque fois (ex: un site "responsive" visualisé sur un appareil mobile télécharge également les contenus qui ne sont accessibles qu'à la version "desktop"). C'est actuellement possible mais pas aussi simple à mettre en place(à base d'Ajax par exemple).

 

[zeb]

L'avenir ça sera qq chose comme le responsive design, ....

Ou tu attend deux trois ans que la techno des écran monte en puissance pour qu'on ai plus affaire à Des "timbre poste".

Il a pas fallu attendre longtemps pour passer des 640x480 et 800x600 sur les écran classiques à plus de 1024 de large bref ça devrait pas trainer et en ce cas on aura rien a changer (bon ok je suis en mode grosse flemme mais ça me saoule les éternelles adaptations pour une techno ou un autre).

 

[SpeedAirMan]

Je ne partage pas ton point de vue.

Les dernières années ont plutôt vu de plus en plus de résolutions différentes plutôt que de moins en moins, et à mon avis ça ne va pas changer tout de suite.
Certes, les résolutions augmentent (la "base" pour un ordinateur de bureau n'est plus 1024, ouf !), mais surtout elles se multiplient. Il faut penser aux tablettes low cost en 800x600 (ça existe... si si), voire 1024x600, et ça il en existera toujours ou aux téléphones smartphone low cost. Tant qu'il y'aura des résolutions différentes, le responsive design y apportera une solution.

pour qu'on ai plus affaire à Des "timbre poste"

Pour info, le 1280px (1170 ou 1140px de large pour le site) se démocratise.

/CSB : je développe un site "responsive" actuellement, dont la largeur par défaut(si on peut dire) est 1170px de large, et qui s'adaptera en 1024, 800 et 480. En bref, on peut déjà développer des sites "larges" pour profiter de la largeur des écrans de bureau, et je ne peux qu'encourager les développeurs et webdesigners à travailler en ce sens pour un meilleur confort des internautes.

 

[JanoLapin]

+1 speed airman

On peut même aller plus loin: inversement à la miniaturisation des appareils, il faut aussi compter avec ceux dont l'écran grandit de plus en plus, comme les écrans de PC, par ex., ou ceux qui sont de plus en plus connectés: les TV, l'affichage distant, (les frigidaires intelligents ?), toussa...

 

[XoSt]

+1 speed airman

On peut même aller plus loin: inversement à la miniaturisation des appareils, il faut aussi compter avec ceux dont l'écran grandit de plus en plus, comme les écrans de PC, par ex., ou ceux qui sont de plus en plus connectés: les TV, l'affichage distant, (les frigidaires intelligents ?), toussa...

Frigidaire font encore des réfrigérateurs ?

 

[Koxin-L.fr]

Bonjour,

Ou tu attend deux trois ans que la techno des écran monte en puissance pour qu'on ai plus affaire à Des "timbre poste".

Ca reste tout de même illusoire.
800px sur PC et sur mobile, c’est pas la même chose.
Le pitch va très vite diminué pour les mobile pour offrir des résolution énorme mais les écran ne ferons jamais 15''.
T'aura beau gérer la résolution, un site en 1280 sur PC est ... illisible sur une ecran 1280 de mobile.


Sinon, je relève des choses qui me font m'interroger.

Déjà, que le Responsive Design existe depuis la nuit des temps et qu'il n'est pas si utilisé que cela pour des raisons technique, mais aussi de confort. (Mon tout premier site en 1999 était comme cela... mon dieu quelle horreur...)

Alors, les puristes et accro du tout élastique me diront non, mais pour moi, un site (à part pour des sites avec mise en page ultra simpliste) se doit d'exister en 2 versions. Une pour les PC, une pour les mobiles.

Le coup du sous-domaine m, pourquoi pas. Mais y a pourtant le .mobi fait à l'origine pour cela.

Rod

 

[zeb]

je développe un site "responsive" actuellement, dont la largeur par défaut(si on peut dire) est 1170px de large, et qui s'adaptera en 1024, 800 et 480.

Je comprend pas bien. Pour moi une norme "passe partout" est encore (mais bon je peux débloquer ça m'arrive) de dev les site en environ 1000px de surface utile (mettre plus quand on lit que 300 / 500 mots est une norme en rédaction de contenu frise le suicide au passage :wink: )

Bref le "responsive" est il la pour adapter l'affichage au petits écrans ou pour offrir une visibilité XL au machines de bureau ? car si la norme tend vers les 1170px comme tu le souligne pourquoi s'affoler les méninges avec ça ?

Ensuite pour la téléphonie "low cost en 800x600" cela vaut il le coup de se prendre la tête pour des système surtout dédiés a faire de la téléphonie familiale "over méditerranéenne" (entre autre) sachant que la clientèle est surement pas composée de surfeurs (a quelques exception près lié a la thématique des sites par exemple).

Bref dubitatif ... mais ouvert a ton avis qui semble éclairé.

les puristes et accro du tout élastique me diront non, mais pour moi, un site (à part pour des sites avec mise en page ultra simpliste) se doit d'exister en 2 versions. Une pour les PC, une pour les mobiles.

Assez d'accord avec ça dans la mesure ou mes petites icônes en 16 16 dédiées a dérouler un contenu sur un 800 x 600 il faut le mode loupe pour les voir et le système en lui même n'est pas adapté donc une version élastique c'est bien pour les screen shoot mais pour la fonctionnalité nada ...

 

[YoyoS]

Je suis du même avis que Koxin-L. Il est illusoire de penser qu'on peut faire un même site pour toutes les plateformes. A moins que son site ne contienne même sur pc qu'un bloc de texte sans design, là c'est autre chose ...

Il suffit de regarder les sites mobiles très connus sur lesquels vous préférez surfer. Imitez-les, ils ne font pas de responsive design.

 

[anemone-clown]

Idem Koxin-L : il est obligatoire d'avoir 2 sites et ce n'est pas le Responsive Design qui va permettre d'obtenir des liens cliquables avec le pouce d'un bûcheron (la règle du lien cliquable sur un mobile : il doit être cliquable avec le pouce sans agrandissement!) sur un écran de téléphone, à moins qu'on revienne aux cabines téléphoniques portables qu'on avait avec Radiocom 2000...

J'ai eu mon premier IBM PC/XT en 1983 (ça valait pas loin de 60.000 francs français, soit près de 10.000 €, avec une imprimante matricielle 9 aiguilles - c'était grosso-modo le prix d'une BMW 320i de l'époque!) avec écran couleur et résolution 320x200 ! Le 1024 a du apparaître en 1998 je crois (peut-être même avant? j'étais en Afrique en 1999 et j'avais déjà des écrans 1024). Conclusion, ça fait près de 15 ans qu'on se base sur du 1024. Belle évolution... :mrgreen:

Pour les téléphones, la taille du pitch va baisser et donner de belles résolutions "potentielles" mais la taille du pouce d'un homme ne va pas rétrécir...

 

[fredfan]

Déjà, que le Responsive Design existe depuis la nuit des temps et qu'il n'est pas si utilisé que cela pour des raisons technique, mais aussi de confort. (Mon tout premier site en 1999 était comme cela... mon dieu quelle horreur...)

Je ne développais qu'en "élastique" à la base. J'ai arrêté parce qu'il y a trop d'éléments en pixels (vidéos, modules sociaux, etc..)
Le responsive design n'a rien à voir avec l'élastique. Tout est en valeurs fixes mais ces valeurs changent à la demande. Ca reste donc très contrôlé (voire un peu rigide)

 

[Koxin-L.fr]

OK, mais au final, c'est quoi la différence entre une div en 35% qui change à la demande en fonction de la taille de la fenêtre et une div en 200px qui change à la demande en fonction de la taille de l'écran ?

C'est juste une question de mot et de manière de concevoir un design. La finalité est la même, trop casse bonbon.

Rod

 

[JanoLapin]

inversement, je partage l'avis précédent, selon lequel un site est tout de même fait pour un type d'écran, et qu'il ne peut y avoir de site "universel", cad qui fasse sens pour toute définition possible. C'est le principe même du design, me semble-t-il.

 

[JanoLapin]

Petit complément d'info: Bing préconise lui aussi l'utilisation du responsive design

 

[zeb]

Tu connaitrait pas un "navigateur" qui s'installe sur PC et qui donne un rendu type Mobile par hasard ? (je constate un accroissement régulier des visites mobiles donc je me tâte a passer a une version mobile)

 

[spout]

@Zeb:
Avec la barre webdevelopper: Resize > View Responsive Layouts.
ou
Dans le débuggeur de Chrome (F12), dans les paramètres (roue dentée en bas à droite) => Overrides => User Agent (et le device metrics s'adaptera).

 

[JanoLapin]

tu peux aussi tenter:
http://dfcb.github.com/Responsivator/

 

[zeb]

Merci a vous deux.

 

[Leonick]

Tu connaitrait pas un "navigateur" qui s'installe sur PC et qui donne un rendu type Mobile par hasard ? (je constate un accroissement régulier des visites mobiles donc je me tâte a passer a une version mobile)

http://iphone-simulator.softonic.fr/

 

[viggo]

Merci spout pour avoir expliqué comment simulé un small device avec Chrome : l'option "Fit in window" donne un rendu réel (à priori, j'ai pas testé).

En tout cas avec cette option on à l'impression que les pixels sont divisés par 2 et donc tout rapetisse, ce qui devient illisible sans zoom - damned !

Sinon pour émuler il y a le très pratique http://emulateurmobile.com/

 

[viggo]

Euh d'ailleurs, en début de topic quelqu'un semblait dire que le display:none pouvait être nuisible au référencement.

J'imagine que Google peut assimiler cela à du cloaking, mais la gestion du display est très pratique en CSS pour faire plein de choses, faut-il s'en priver ?

Je sais qu'avec une gestion du max-height on peut simuler le display mais à ce compte là j'imagine que google l'interprète de la même manière.

Perso j'utilise beaucoup le display:none pour mes versions responsives, est-ce que cela peut nuire à mon ref ? :?:

 

[Leonick]

je l'utilise aussi pour tous mes sites ayant des menus déroulants css, sans aucun problème seo depuis des années

 

[viggo]

Cela me rassure, merci

 

[teleatlantic]

Bonjour
A titre d'info nous gerons un site qui fait la promotion d'artistes en video Nous avons été oblige de faire deux sites différents
pour le net http://www.tele-atlantic.com
pour les mobiles et tablettes http://www.tele-atlantic.com/teleatlantictab.htm
A savoir qu'il est vrai que maintenant presque le tiers des connexions sont realisees pour les mobiles et tablettes...

 

[teleatlantic]

juste oublie de vous dire qu'on avait teste l'affichage avec http://emulateurmobile.com/ ...nickel.....