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

Re : Site web 'adaptatif'
 

Comment faire un container fixe en tableau HTML ? J'utilise le code suivant pour un container fixe de 1920 pixels de largeur (la résolution moyenne des écrans en 2018, la hauteur s'ajuste au contenu).