taille des images / taille de l'écran

Prince Adam · 1 Octobre 2005

Bonjour

Je viens de changer d'ordianteur et je suis passé d'un écran 15" à un 19". Quelle ne fut pas ma stupeur en découvrant mon site sur un écran aussi grand. Je me suis rendu compte que certaines images "grandissaient" avec l'écran (si on peut dire) mais que d'autres se révèlaient trop petites (notamment des bannières qui sont trop "courtes" à droite.

Y a-t-il un moyen de régler ce problème ?

Par ailleurs, de façon plus générale, y a-t-il un moyen de savoir à quoi ressemble son site sur un écran 17", un 15"... en n'ayant qu'un écran 19" ?

Merci de votre attention

juliofromlille · 1 Octobre 2005

Tout est question de la résolution et non de la taille de l'écran. Change ta résolution et tu verras le résultat.

Prince Adam · 1 Octobre 2005

Mais alors construire un site devient un vrai casse-tête puisque chaque internaute aura une résolution différente ! ?

(oui, je débarque :roll: )

Darracq · 1 Octobre 2005

Prince Adam a dit:
Mais alors construire un site devient un vrai casse-tête puisque chaque internaute aura une résolution différente ! ?

--- ben oui.

Moniteurs de tailles différentes
PC ou Mac
Polices différentes
Navigateurs web différents
... etc...

C'est comme si les chaines de TV devaient coder leurs émissions de plusieurs manières afin que des telespectateurs tous équipés différemment voient la même chose (celle qu'elles désirent)...

C'est très frustrant, oui.

Prince Adam · 1 Octobre 2005

C'est aussi pour ça que certains sites me semblaient être écrits en vraiment très petit sur mon écran 15"...

Et il y a un semblant de solution ? de parade ? un avertissement à indiquer ?

Boris33 · 1 Octobre 2005

Quand on prépare un site, il faut obligatoirement faire le choix d'une résolution adaptée.
Les standards en matière d'écran sont maintenant de 17'' voire plus, je préconise personnellement d'optimiser son site pour du 1024*768.

tanguy · 1 Octobre 2005

Salut,

Va voir ce lien :

http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions

tonino · 1 Octobre 2005

Ce qu'il ne faut pas faire: "optimiser" son site pour une résolution 1024*768 ou supérieure. Il y a encore beaucoup trop de gens qui utilisent une résolution 800*600.

Dans l'idéal il convient d'adopter un design fluide, qui va s'adapter à la taille de la fenêtre (voir le lien indiqué par tanguy).
La solution de facilité, largement répandue, consiste à créer un site optimisé pour une résolution basse (800*600), afin d'obtenir un résultat "correct" avec une résolution supérieure.
Le choix entre ces deux méthodes dépendra de la cible du site (type de design) et surtout de l'expérience du concepteur (s'est-il mis ou non aux standards).

Prince Adam · 1 Octobre 2005

Je sais que le design fluide serait l'idéal mais il me sera plus simple d'adopter un design "fixe". Dans la page que vous m'avez conseillée, on donne comme exemple de page "fixe", une largeur de 720 px. Est-ce un maximum ? Y a-t-il un maximum ? Idéalement, la largeur serait de 1000 px pour mon site, est-ce que ça fonctionnerait pour tous les internautes ?
Merci.

Prince Adam · 1 Octobre 2005

Ah ben non, question idiote. Je suppose que les internautes qui ont une résolution 600x800 vont se retrouver avec un "ascenseur horizontal" en bas de leur page... Je me trompe ou je comprends enfin ?

tonino · 1 Octobre 2005

C'est exact! Les visiteurs utilisant une résolution 800*600 auraient le désagrément de devoir "scroller" horizontalement.

bzctoons · 2 Octobre 2005

globalement en fontion du secteuir d'activités du site il y a 10 à 30% d'utilisateurs en 800x600. D'ailleurs c'est proportionnel au % d'utilisateurs utilisant firefox.

Sur un site à vocation technique il y a grosso-modo 10% d'users en 800x600 et 20-25% de personnes avec Firefox

Sur un site grand public, les 800x600 sont à 30% et les firefox à 5%

Ceci dit, c'est sur la base de mon expérience et des stats des sites que je gère. D'ailleurs dites moi si vous confirmez ou pas ces pourcentages.

tonino · 2 Octobre 2005

Ces proportions me semblent tout à fait pertinentes, sur la base de ma propre expérience. Surtout, elles correspondent à des études que j'ai pu lire.

Le choix de la méthode pour gérer la résolution dépendra donc en partie de la cible du site, même si dans 99% des cas on n'a pas intérêt à sacrifier les utilisateurs 800*600.

Prince Adam · 3 Octobre 2005

Mais existe-til un moyen de voir à quoi ressemble mon site pour qqun qui a une résolution 800x600 ? Moi quand je régle sur cette résolution j'ai une espèce de super zoom qui me donne un agrandissement du coin supérieur gauche de mon site (mais du genre 1/20e).

tonino · 3 Octobre 2005

Bien sûr que l'on peut voir à quoi ressemble le site sous une autre résolution. Il suffit de modifier sa résolution d'écran, sous windows c'est "modes d'affichage" > "couleurs vraies (par ex)" > 800*600...

Cela risque de vous paraître cauchemardesque, mais il faut en plus vérifier que les couleurs passent bien. Les différences peuvent être énormes entre plusieurs écrans si on n'utilise pas les couleurs sécurisées.

gratonet · 3 Octobre 2005

taille de l'écran

Lorsqu'on fait un site web on le construit en premier de manière fluide avec le minimum de code pourqu'il s'affiche chez tout le monde.
ensuite on utilise les feuilles de style et javascript pour l'adapter à tel ou tel écran. C'est ma technique et je travaille sur le net depuis plus de 12 ans maintenant.

Donc :
1. Fais un site avec des tableaux entrelacés sans utiliser les nouvelles propriétés.
2. utilise javascript pour insérer une feuille de style selon la taille de l'écran et du navigateur.
a/ n'utilise pas comme font bcp les anciennes techniques de document.all , document.layers ou appversion dans l'entete HEAD mais un script intelligent pour detecter les navigateurs immédiatement après la balise BODY. En effet par exemple document.all renvera true pour ie, firefox, netscape > 5, opera, etc.
voici un petit script intelligent qui ne se trompe jamais à installer après la balise body :

/**** script protégé par http://www.azwin.com
this script is protected from http://www.azwin.com
Infos Editor : infos@azwin.com

Copyright AZWIN.COM BY CHERIF YAHIAOUI
**/
var gnavigator = 0;
var bodynav = eval("document.body")?true:false;
var allnav = eval("document.all")?true:false;
var nav4event = eval("window.captureEvents")?true:false;
var nav6later = eval("document.addEventListener")?true:false;
var supportgetid = eval("document.getElementById")?true:false;
var supportStyle = (bodynav)? (eval("document.body.style")?true:false):false;
var supportimage = eval("Image")?true:false;
var supportcreateelement = eval("document.createElement")?true:false;
var supportwrite = eval("document.write")?true:false;
var supportcookie = eval("document.cookie='mekookie'")?true:false;
if (supportcookie){document.cookie="";}
var nav45 = (eval("document.layers") && nav4event && supportwrite && nav4event && supportcookie && supportimage)?true:false;
var w3cnav6 = (supportgetid && supportStyle && supportimage && supportcreateelement && supportwrite && supportcookie && nav6later)?true:false;
var ie = (bodynav)? ((eval("document.body.insertAdjacentHTML") && allnav && supportwrite && supportcookie && supportStyle && supportimage)?true:false):false;
if (nav45){gnavigator = 1;}else if(w3cnav6){gnavigator = 2;}else if(ie){gnavigator = 3;}

voila :
gnavigator te renvoi 1 si netscape 45, 2 si firefox, netscape7, etc., 3 pour ie.

en focntion de ses valeurs vous pouvez redimensionner vos éléments ou insérer vos feuilles de styles. A savoir que pour netscape 4 < 6 la police minimale doit être de 10 pixels, pas d'indication des bordures pour les boutons et les champs, etc.

if (gnavigator == 1){
document.write (ma feuille de style pour netscape 4)
-----
blabla
}else{
ma feuille pour ceux que je n'ai pas reconnu. }
<noscript>
ma feuille pour ceux qui acceptent pas le js
</noscript>

Function pour redimensionner la fenêtre (tjrs dans body)

iouter = eval("window.outerWidth");
ibody = eval("document.body");
icw = false;
if (ibody){ icw = eval("document.body.clientWidth"); }
var iw = 450;
var ih = 500;
if(iouter){
self.moveTo (0, 0); self.outerWidth = iw; self.outerHeight = ih;}
if (ibody && icw && !iouter){
self.moveTo (0, 0);
self.resizeTo(iw, ih);}

Pour ceux qui utilisent mes scripts, merci de laisser juste mes coordonnées plus haut.

HawkEye · 3 Octobre 2005

Tu peux aussi construire ton site en pourcentages et non en pixels...

bzctoons · 9 Octobre 2005

Personnellement j'utilise une méthode certes critiquable mais qui est simple et fonctionne pas mal.

<link rel="stylesheet" href="style.css" type="text/css" />


Pour l'expliquation :
- on charge une css de base
- si on est sous IE (c'est le seul qui supporte la syntaxe "<!--[if IE]>...") il va charger une autre CSS. Dans la deuxième on peut redefinir certaines propriétés afin d'ajuster les différences d'affichage.

Cette astuce ne fait la difference que entre IE et le reste, toutefois on peut activer une CSS pour diverses versions d'IE (5.0, 5.5, 6.0).
Pour ma part Firefox/Mozilla et IE couvrent ~ 98% des internautes.
J'avoue faire l'impasse sur Opéra mais il était payant jusqu'a présent.