18073 sujets

Questions générales et questions de débutants

A propos de la résolution d'écran

Bonjour. Etant nouveau sur ce forum, je vais commencer par saluer tout le monde.

J'ai trouvé tres interressant les articles et discution traitant de compatibilité en fonction des navigateurs. Mais personellement il y a une chose qui me turlupine et pose problème c'est de faire un site "agréable" quelque soit la résolution d'écran de la personne qui surf...

J'aimerai avoir vos sentiments, vos techniques, de professionel sur ce sujet.

Personellement j'avais tendance a faire plusieurs feuilles de style et rediriger via javascript sur un index correspondant à la résolution (mais quel boulot sweatdrop ) où alors de dimension fixe adaptée au reso 800x600 (mais c tout petit sur des écrans 1280x1024 ou supérieur)

J'ai effectué une recherche sur le forum et trouvé cet article ayant un petit rapport avec mon questionnement et comme il avait le statut "résolu" je n'ai pas voulu continuer la discution...

D'avance merci pour vos commentaires et conseils
Il y a la solution qui consiste a avoir un design fluide, cest à dire qui puisse setirer sur x quelque soit la resolution. En placant des elements lateraux en float:left ou right on sassure de "coller" sur les cotés,et ça ne nuit en rien a la beauté sur site. Ajouter à des tailles de polices relatives (%, em), et cest particulierement portable. Une preuve ? Ce forum non ? Smiley cligne
Ce qu'il faut savoir, c'est que dès qu'un site utilise beaucoup d'images de mise en forme, ça devient compliqué. Les images ne sont pas extensibles. Au mieux, elles peuvent se répéter verticalement et/ou horizontalement, ou encore se positionner plus ou moins précisément comme image de fond d'un bloc. On pourra donc travailler avec des textures et motifs "répétables", mais on n'aura pas d'images extensibles. Ça n'empêche pas d'utiliser des images positionnées, alignées en général sur un bord haut, bas, gauche ou droite.

Bref, c'est un peu compliqué à décrire Smiley cligne

Un petit exemple quand même, pour la route :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
Le principe de fluidité de la largeur est très performant pour l'adaptation d'un site aux petites résolutions ou aux modifications de la taille de la fenêtre (ouverture de la barre latérale par exemple)

Le point qui chagrine parfois c'est que si la largeur est donnée en pourcentage alors cela peut faire beaucoup dans le cas de grandes/très grandes résolutions.

Mais bon ce point est peut être plus une histoire entre l'utilisateur et son matériel qu'une affaire de développement.

En plus ça reste gérable avec la propriété max-width appliquée à un conteneur global par exemple.

Au fait saviez vous que cette propriété était facilement émulable pour IE en javascript. J'ai trouvé ça dans ce site : http://www.svendtofte.com/code/max_width_in_ie/
Et finalement je l'ai appliqué ici : http://fabiennecouture.free.fr (largeur du conteneur global figée à partir de 1000px). C'est très pratique et, en l'occurence, pas obstructif pour un sou.
C'est justement dans le cas de site avec un graphisme un peu recherché, utilisant beaucoup d'images que je m'arrache les cheveux...
C'est bien compliqué tout ça,

a priori les css n'ont pas d'existence autonome, elles ne s'appliquent qu'une fois qu'un document html existe avec sa logique d'organisation et de structuration propre.

tu dis que tu as beaucoup d'éléments graphiques et cela implique une certaine complexité. cette complexité il peut être difficile de lui donner (imaginer) un support ex nihilo au niveau du code html. Et tu pourrais facilement avoir le sentiment d'être perdu.

Sauf que in concreto un document html déjà formé va lui même avoir pas mal de complexité et donc pas mal d'éléments qui seront exploitables également d'un point de vue css alors même qu'ils ne sont pas là pour ça.

Tout ça pour dire que ce document html de référence il faut que tu le créé. même s'il est complètement factice :
1. titre principal (h1) bidon

2. sous titres (h2,h3,h4) bidon

3. contenu réparti dans des <p>

4. liste(s) pour un (des) menu(s) avec à chaque fois autant d'items que tu juges nécessaires.

Le tout agencé de manière que cela te paraisse convenable et à peu près cohérent.

A partir de cela tu disposeras d'un matériel pour l'application des css qui peut faire des miracles.

Et je me permet un conseil supplémentaire. dans un premier temps, doit-il être extrêmement court, ne mets aucune <div>. C'est très pratique pour mieux réfléchir après.
Modifié par clb56 (07 Mar 2006 - 19:17)
Oulala... J'ai du mal m'exprimer. Le probleme n'est pas la mise en page, je commence à me débrouiller.
Ce qui me pose probleme c'est d'adapter le design du site (la dimension des images, la taille du texte) en fonction de la résolution des écrans.
Une image paraitra grande avec une reso de 800x600 et minuscule si tu as une reso 1024 ou supérieure. Mon questionnement étais plutot sur ce point là. Du genre, est-il possible de créer des feuilles de style alternatives adaptées à 2 ou 3 résolutions différentes et de les faire choisir via un javascript dans la page html ?
Ou, est ce que vous utilisez des commandes en php pour afficher telle ou telle image fonction de la résolution ?
JRTprod a écrit :
Du genre, est-il possible de créer des feuilles de style alternatives adaptées à 2 ou 3 résolutions différentes et de les faire choisir via un javascript dans la page html ?


Oui c'est possible mais cela n'a pas grand intérêt. Si ton site est bien pensé et bien conçu (au niveau de l'architecture de ta page et de tes images), il sera parfait quelque soit la résolution (dans des limites raisonnables quand meme Smiley cligne )

D'autant plus que tu peux pas t'amuser à faire des jeux d'images pour chaque résolution...entre les PC de bureaux et les PC portables (qui ont parfois des résolutions un peu exotiques) t'as pas fini de jouer avec Photoshop...

JRTprod a écrit :

Ou, est ce que vous utilisez des commandes en php pour afficher telle ou telle image fonction de la résolution ?

PHP c'est coté serveur...pas client.
OK, mais je pensais que l'on pouvait demander au serveur d'afficher telle ou telle image dans un cadre (ou en arriere plan) en fonction de la résolution de l'utilisateur...
C'est vraiment idiot ce que je viens d'ecrire... c'est une commande javasript qui peux réaliser cette opération.
Bonsoir,

Précisons tout de même que l'idée de distribuer plusieurs CSS selon la résolution est tout à fait valable (et même vital pour certains agents utilisateurs types pda-mobiles), mais encore en cours d'implémentation.

CSS3 comporte un module media queries permettant de préciser notament des conditions du type @media screen and (min-width: 400px) and (max-width: 700px) { ... }

Ce mécanisme est actuellement implémenté par Opera.
Modifié par Laurent Denis (09 Mar 2006 - 19:52)
Sujet clos
Aller à