Discussion: Site web 'adaptatif'
Afficher un message
Vieux 17/12/2018, 11h04   #1
Mondo
Visiteur
 
Messages: n/a
Thumbs up Site web 'adaptatif'

C'est quoi un site web 'adaptatif' (responsive en anglais) ? C'est un site qui sera vu correctement à toutes les résolutions et sur tous les moniteurs (cellulaire, tablette ... jusqu'aux nouveaux écrans 8K* en passant par les écrans 4K) ! C'est valable pour tout site web, peu importe son contenu (une simple page web, un blogue WordPress, un forum PHPBB, un forum vBulletin, etc.)

La nouvelle mode (sic) depuis plusieurs années est la mode aux 'feuilles de style HTML imbriquées'. Ces feuilles de style ont un gros avantage: elles ont la propriété de s'adapter à toutes les résolutions d'écran. Si vous utilisez la version 'cannée' d'une application entièrement en 'feuilles de style' comme WordPress, PHPBB, vBulletin... no problemo, votre application va s'adapter et sera belle à toutes les résolutions d'écran (du cellulaire jusqu'au 8K) ! Mais plus vous vous éloignez de la version 'cannée' en personnalisant votre application, plus vous risquez d'avoir des problèmes de résolution à moins d'être passé 'maître' dans l'utilisation des feuilles de style imbriquées'.

L'ancienne mode utilisent des 'tableaux HTML imbriqués'. Ces tableaux ont aussi un avantage: une précision des éléments plus facilement obtenue dans les sites compliqués mais aussi des inconvénients (leur difficulté de s'adapter à toutes les résolutions d'écran). Si le site n'est pas trop compliqué et si il utilise des tableaux 'à 100% en taille', ca passe assez bien. C'est le cas du forum Microclick-quebec, il utilise des tableaux à 100% et son design n'est pas trop compliqué. Mais plus vous vous éloignez de la version 'cannée' de tableaux à 100% en personnalisant votre application, plus vous aurez (et vous en aurez) des problèmes dans les basses résolutions (cellulaire, etc) et dans les hautes résolutions (grands espaces vides en 4K/8K par exemple).

Il y a pas de solution magique pour l'ancienne mode. Le mieux est d'utiliser des tableaux à 100% et de faire simple. Si vous êtes 'tête de pioche' et voulez faire compliqué, c'est à vos risque ! Deux solutions 'béquille':
  • Solution en basse résolution: faire un style simplifié appelé 'mobile' utilisant des tableaux à 100%.
  • Solution en haute résolution: faire du 100% à la base, le placer dans un 'container fixe' et mettre un 'arrière plan' derrière le container pour les très hautes résolutions (8K par exemple)
(Attention, je suis pas codeur, programmeur ou un expert en web design, juste un bidouilleur qui a beaucoup bidouillé avec les années )

* exemple de moniteur 8K: https://www.dell.com/en-ca/shop/dell...or-accessories
  Réponse avec citation