Responsive design et display:none

[BoboAsh]

Bonjour,

J'ai une contrainte graphique qui m'impose de dupliquer dans ma page une partie html (pour l'ordinateur de bureau et pour le mobile). Je met par défaut celle du mobile en display:none. Et avec le CSS je gère la taille de l'écran pour afficher le bloque que je veux. Je sais que c'est pas très propre car sa alourdi ma page mais j'ai pas le choix.

Je me demande si google va pas mal interpréter cela ?
Car en général le responsive replace des éléments différemment, là j'ai volontairement dupliqué une partie dans la même page.

Qu'en pensez vous ?

 

[noren]

Bonjour

est-ce que cette partie dupliquée représente une grosse portion de la page en terme de contenu?

 

[BoboAsh]

J'ai 2 blocs, l'un contient 5 liens avec 5 images... très petit
et l'autre contient une iframe. C'est lui qui me met un doute. Car l'iframe est assez volumineuse.

 

[Doubrovski]

Le display:none peut être utilisé pour la navigation, mais pas pour cacher des annonces.
Après l'esprit du responsive design ou l'approche mobile first est plutôt de faire des menus adaptables, en évitant le display:none, surtout quand le contenu est lourd et chargé par le navigateur.
Si le but est d'alléger la page, autant gérer l'affichage côté serveur ou en js.

 

[passion]

Ce n'est pas le rôle du responsive.
Il est censé vous faciliter la vie en ayant une interaction avec la charte graphique de votre site pour être disponible sur tous les supports.
Même sans connaitre votre site, Il n'y aucun intérêt à faire une version dans une autre en incluant le contenu textuel !

 

[BoboAsh]

Ce n'est pas pour cacher l'iframe à la base car je l'affiche dans les 2 cas... c'est juste pour l'utilisateur qui à un mobile rien de plus. Le bloc étant à l'extrémité je ne peux pas le déplacer pour le remettre à un autre endroit dans la page...

 

[Doubrovski]

Si l'iframe est une annonce, c'est interdit par adsense.

Le responsive design est une manière de mettre en page différemment le même code, pas de cacher/montrer différents div, même si c'est parfois une solution pour des éléments très légers à charger.

 

[BoboAsh]

Ce n'est pas une annonce mais ça pourrai en effet. Alors qu'elle solution aborder ?? J'ai un bloc dans une colonne a droite que je veux mettre dans ma colonne du milieu (plus haut dans la page car tout en bas ça ne sert à rien) quand je suis sur mobile ?

 

[Doubrovski]

Je ne vois pas trop pourquoi un bloc devrait changer de place dans le code. Soit il est dans le contenu éditorial, soit il est en dehors.
Il y a des solutions PHP ou javascript mais le risque est qu'il n'y ait des cas où l'affichage du bloc ne concorde pas avec le design du site utilisant les medias queries CSS.
Par exemple une classe PHP qui ne se base pas sur le nombre de pixels de la fenêtre de navigation pour détecter un mobile, alors que les Media Queries le font. Il y a donc des cas où le design change mais pas le bloc.
Tout dépend de la méthode de détection des mobiles. De plus ces solutions PHP ou JS ne sont généralement pas appliquées en temps réel, mais au chargement de la page.

Si il s'agit d'une annonce adsense, je crois qu'il vaut mieux utiliser un bloc responsive google, qui ne change pas de place dans le code.

 

[BoboAsh]

je comprends bien. C'est simplement une question de mise en page et d'utilisation pour une meilleur expérience utilisateur...

 

[BoboAsh]

je suis tombé sur cet article http://www.abondance.com/actualites/20091109-8836-web-2-0-contenu-cach ... gle-2.html, et du coup je me dis que c'est pas totalement insensé. Je pense que ça serait un bon test.

 

[Doubrovski]

Bah, je suis d'accord avec l'article, qui ne conseille pas de charger deux fois un élément.
Le display:none est surtout utile avec du javascript, pour faire apparaître des choses après un clic, notamment au niveau de la navigation. Par contre c'est déconseillé de l'utiliser pour l'affichage conditionnel d'un bloc (c'est plutôt le boulot de PHP).
Pourquoi vouloir absolument dupliquer le bloc dans le code, et le changer de place en fonction des définitions ?

Pour moi c'est simple, si c'est une annonce c'est interdit, sinon le display:none doit être utilisé pour cacher des éléments en attendant que l'internaute les affiche via une action. Si cette action est déclenchée en javascript, google demande de veiller à ce que le contenu soit par défaut affiché (ce qui n'a pas de sens aujourd'hui).

 

[BoboAsh]

Pourquoi vouloir absolument dupliquer le bloc dans le code, et le changer de place en fonction des définitions ?

Tout simplement pour une meilleur mise en page, une meilleur expérience utilisateur, pour ne pas faire comme les autres car y'en a marre de voir toujours les même sites... j'ai en plein des raisons valable. Je ne souhaite pas non plus utiliser le javascript pour cela, juste le CSS.
Merci pour vos avis il m'ont bien fait comprendre les nuances.

 

[Leonick]

Le display:none est surtout utile avec du javascript, pour faire apparaître des choses après un clic,

euh, non, juste du css peut aussi bien marcher, avec un :hover, par exemple

 

[Doubrovski]

Oui, mais :hover sur un responsive c'est pas terrible, ça fonctionne pas sur mobile et tablette.
A moins que vous connaissiez une astuce ? Mais je crois que le :hover ne fonctionne pas du tout sur windows phone.

Tout simplement pour une meilleur mise en page

Je comprends mais dans ce cas autant présenter un site spécial pour mobile (ce que je trouve frustrant).
Si un bloc est placé dans le contenu éditorial sur mobile, ça me parait logique qu'il le soit aussi sur écran desktop. Dans les deux cas le code se déroule dans le même sens et on peut trouver des astuces pour la mise en page.

 

[Leonick]

Je comprends mais dans ce cas autant présenter un site spécial pour mobile (ce que je trouve frustrant).

pourquoi frustrant ? de toutes façons, l'ergonomie doit être intégralement repensé pour la version mobile.
dans le cas actuel, avoir du duplicate sur le html affiché car doublon desktop/mobile, autant avoir 2 templates différents.
est-ce intéressant d'afficher une image de 200 Ko, sous prétexte que l'on a un écran hq ? sur du 5", ne peut-on pas diminuer la qualité de l'image de sorte qu'elle ne fasse que 30 Ko ?