Précédent   MicroClick-Québec.ca > PAGE WEB - AUDIO/VIDÉO/TV-HD - PHOTO - TÉLÉPHONIE MOBILE - INFOGRAPHIE - TABLETTES - LISEUSES > Page Web

Notices

Page Web Langage HTML - Javascript - PhpBB etc

Réponse
 
Outils de la discussion Modes d'affichage
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
Vieux 17/12/2018, 17h39   #2
Mondo
Visiteur
 
Messages: n/a
Par défaut Re : Site web 'adaptatif'

Citation:
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)
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).
Code:
<title></title>
<head>
</head>

<body>
<table width="1920" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>CONTENU</td>
  </tr>
</table>
</body>
</html>
  Réponse avec citation
Réponse


Utilisateurs regardant la discussion actuelle : 1 (0 membre(s) et 1 invité(s))
 
Outils de la discussion
Modes d'affichage

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non

Navigation rapide


Fuseau horaire GMT -5. Il est actuellement 01h53.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Version française #23 par l'association vBulletin francophone