Responsive design et display:none

Discussion dans 'Référencement Google' créé par BoboAsh, 19 Mars 2014.

  1. BoboAsh
    BoboAsh WRInaute discret
    Inscrit:
    8 Juillet 2011
    Messages:
    178
    J'aime reçus:
    0
    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 ?
     
  2. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 906
    J'aime reçus:
    14
    Bonjour

    est-ce que cette partie dupliquée représente une grosse portion de la page en terme de contenu?
     
  3. BoboAsh
    BoboAsh WRInaute discret
    Inscrit:
    8 Juillet 2011
    Messages:
    178
    J'aime reçus:
    0
    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.
     
  4. Doubrovski
    Doubrovski WRInaute occasionnel
    Inscrit:
    9 Avril 2011
    Messages:
    443
    J'aime reçus:
    0
    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.
     
  5. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 816
    J'aime reçus:
    154
    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 !
     
  6. BoboAsh
    BoboAsh WRInaute discret
    Inscrit:
    8 Juillet 2011
    Messages:
    178
    J'aime reçus:
    0
    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...
     
  7. Doubrovski
    Doubrovski WRInaute occasionnel
    Inscrit:
    9 Avril 2011
    Messages:
    443
    J'aime reçus:
    0
    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.
     
  8. BoboAsh
    BoboAsh WRInaute discret
    Inscrit:
    8 Juillet 2011
    Messages:
    178
    J'aime reçus:
    0
    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 ?
     
  9. Doubrovski
    Doubrovski WRInaute occasionnel
    Inscrit:
    9 Avril 2011
    Messages:
    443
    J'aime reçus:
    0
    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.
     
  10. BoboAsh
    BoboAsh WRInaute discret
    Inscrit:
    8 Juillet 2011
    Messages:
    178
    J'aime reçus:
    0
    je comprends bien. C'est simplement une question de mise en page et d'utilisation pour une meilleur expérience utilisateur...
     
  11. BoboAsh
    BoboAsh WRInaute discret
    Inscrit:
    8 Juillet 2011
    Messages:
    178
    J'aime reçus:
    0
  12. Doubrovski
    Doubrovski WRInaute occasionnel
    Inscrit:
    9 Avril 2011
    Messages:
    443
    J'aime reçus:
    0
    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).
     
  13. BoboAsh
    BoboAsh WRInaute discret
    Inscrit:
    8 Juillet 2011
    Messages:
    178
    J'aime reçus:
    0
    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.
     
  14. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    euh, non, juste du css peut aussi bien marcher, avec un :hover, par exemple
     
  15. Doubrovski
    Doubrovski WRInaute occasionnel
    Inscrit:
    9 Avril 2011
    Messages:
    443
    J'aime reçus:
    0
    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.

    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.
     
  16. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    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 ?
     
Chargement...
Similar Threads - Responsive design display Forum Date
AMP / Responsive design Crawl et indexation Google, sitemaps 19 Septembre 2018
Google veut imposer le responsive design aux sites mobiles Référencement Google 14 Octobre 2016
Mise en ligne d'un design responsive et évolution du trafic ? Problèmes de référencement spécifiques à vos sites 11 Juin 2016
Images responsive design et optimisation du chargement Référencement Google 21 Janvier 2016
C'est quoi le script responsive design de wri? Développement d'un site Web ou d'une appli mobile 16 Décembre 2015
Création d'un site responsive design Demandes d'avis et de conseils sur vos sites 8 Octobre 2015
GIF animés er responsive design ? Développement d'un site Web ou d'une appli mobile 20 Mai 2015
Passage en responsive design et (re)montée immédiate dans les SERP Tests et études de cas 24 Mars 2015
SEO & Responsive Design : Question Débuter en référencement 21 Février 2015
Adapter le footer en responsive design Développement d'un site Web ou d'une appli mobile 7 Février 2015