taille des images / taille de l'écran

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Prince Adam, 1 Octobre 2005.

  1. Prince Adam
    Prince Adam Nouveau WRInaute
    Inscrit:
    8 Juin 2005
    Messages:
    38
    J'aime reçus:
    0
    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 :)
     
  2. juliofromlille
    juliofromlille WRInaute occasionnel
    Inscrit:
    15 Février 2004
    Messages:
    417
    J'aime reçus:
    0
    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.
     
  3. Prince Adam
    Prince Adam Nouveau WRInaute
    Inscrit:
    8 Juin 2005
    Messages:
    38
    J'aime reçus:
    0
    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: )
     
  4. Darracq
    Darracq WRInaute occasionnel
    Inscrit:
    28 Octobre 2003
    Messages:
    297
    J'aime reçus:
    0
    --- 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.
     
  5. Prince Adam
    Prince Adam Nouveau WRInaute
    Inscrit:
    8 Juin 2005
    Messages:
    38
    J'aime reçus:
    0
    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 ?
     
  6. Boris33
    Boris33 WRInaute discret
    Inscrit:
    8 Septembre 2005
    Messages:
    107
    J'aime reçus:
    0
    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.
     
  7. tanguy
    tanguy WRInaute discret
    Inscrit:
    12 Mai 2005
    Messages:
    168
    J'aime reçus:
    0
  8. tonino
    tonino WRInaute discret
    Inscrit:
    21 Janvier 2005
    Messages:
    55
    J'aime reçus:
    0
    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).
     
  9. Prince Adam
    Prince Adam Nouveau WRInaute
    Inscrit:
    8 Juin 2005
    Messages:
    38
    J'aime reçus:
    0
    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.
     
  10. Prince Adam
    Prince Adam Nouveau WRInaute
    Inscrit:
    8 Juin 2005
    Messages:
    38
    J'aime reçus:
    0
    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 ?
     
  11. tonino
    tonino WRInaute discret
    Inscrit:
    21 Janvier 2005
    Messages:
    55
    J'aime reçus:
    0
    C'est exact! Les visiteurs utilisant une résolution 800*600 auraient le désagrément de devoir "scroller" horizontalement.
     
  12. bzctoons
    bzctoons WRInaute discret
    Inscrit:
    22 Juin 2004
    Messages:
    56
    J'aime reçus:
    0
    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.
     
  13. tonino
    tonino WRInaute discret
    Inscrit:
    21 Janvier 2005
    Messages:
    55
    J'aime reçus:
    0
    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.
     
  14. Prince Adam
    Prince Adam Nouveau WRInaute
    Inscrit:
    8 Juin 2005
    Messages:
    38
    J'aime reçus:
    0
    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).
     
  15. tonino
    tonino WRInaute discret
    Inscrit:
    21 Janvier 2005
    Messages:
    55
    J'aime reçus:
    0
    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.
     
  16. gratonet
    gratonet Nouveau WRInaute
    Inscrit:
    3 Octobre 2005
    Messages:
    6
    J'aime reçus:
    0
    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.
     
  17. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    18 166
    J'aime reçus:
    0
    Tu peux aussi construire ton site en pourcentages et non en pixels...
     
  18. bzctoons
    bzctoons WRInaute discret
    Inscrit:
    22 Juin 2004
    Messages:
    56
    J'aime reçus:
    0
    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" />
    <!--[if IE]>
    <link rel="stylesheet" href="style_ie.css" type="text/css" />
    <![endif]-->


    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.