Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1686 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Design extensible

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Design extensible

n°1820028
Raito33
Posté le 01-12-2008 à 17:03:38  profilanswer
 

Salut,
 
En fait, je suis actuellement en train de revoir mon site pour qu'il s'adapte à la résolution des utilisateurs.
Pour ça, j'envisage donc un CSS à pourcentage. (Pour le moment, j'ai un choix automatique d'un CSS qui se fait en fonction de la résolution de l'utilisateur)
 
Seulement, j'ai quelques problèmes de "théorie" pour commencer avec les CSS %. :/
 
En fait, d'après ce qui se dit partout (Ouais, j'ai fouiné sur le net quand même avant... sans toutefois trouver de réel tutos) il faut remplacer les width:Xpx par width;Y%
 
Ok mais... Comment le CSS sait quelle réso est à 100% ? Comment il redimensionne pour les autres ?
 
En fait, si j'ai bien compris, il faut que je crée mes images (header, bords du site, footer) pour la résolution maximale et elle s'adapte ensuite pour les plus petites résolutions (sans pixelliser déguelasse puisque ça rétrécit).
 
Bon ok, mais si je veux que ça soit baser sur du 1680*1050 par exembre, que ça corresponde à 100%, ça donnera quoi sur du 1920 ? La même image que sur du 1680 ? Ou ça l'augmentera (la rendant accessoirement immonde) ?
 
Voilà, j'ai quelques petits soucis de compréhension... Si vous voulez bien m'éclairer là dessus, c'est sympa, m'aider ensuite, c'est encore plus carrément cool ziva trop d'la balle ! :D
 
Bonne journée. :jap:

mood
Publicité
Posté le 01-12-2008 à 17:03:38  profilanswer
 

n°1820695
Raito33
Posté le 02-12-2008 à 15:06:25  profilanswer
 

Nobody ?

n°1820698
FlorentG
Unité de Masse
Posté le 02-12-2008 à 15:15:11  profilanswer
 

Nan ça n'augmente pas la taille des images automatiquement. C'est là où c'est la zone.
 
Aussi, les trucs trop libres en % font chier sur écrans larges, tu te retrouves avec des paragraphes d'une ligne [:sadnoir]
 
Le mieux est un design "élastique", donc avec largeur minimum et maximum, mais ça peut être relou à faire suivant le graphisme choisi, vaut mieux le prévoir tout de suite.
 
Moi je ne m'embête plus trop, je fais tout en 960px de large, et pis voilà :/

n°1820700
Raito33
Posté le 02-12-2008 à 15:24:16  profilanswer
 

FlorentG a écrit :

Nan ça n'augmente pas la taille des images automatiquement. C'est là où c'est la zone.


 
La zone ? Tu pourrais être plus précis ?
Par contre, j'aurais plutôt vu une diminution et non une augmentation, car dans ce dernier cas, les images pixelliserait méchant non ?
 

FlorentG a écrit :

Aussi, les trucs trop libres en % font chier sur écrans larges, tu te retrouves avec des paragraphes d'une ligne [:sadnoir]


 
Ouaip, c'est particulièrement ce qui m'embête un peu aussi. On meublera. :D
Le truc, c'est que le choix automatique de CSS, c'est un peu du codage crade apparemment, donc j'essaie de me tourner vers autre chose en local pour voir ce que ça donne, et si ça rend bien, remplacer l'ancien. ;)
 

FlorentG a écrit :

Le mieux est un design "élastique", donc avec largeur minimum et maximum, mais ça peut être relou à faire suivant le graphisme choisi, vaut mieux le prévoir tout de suite.


 
Ca ça me plait ! Ca consiste en quoi ? :$
Enfin, comment ça se fait ?
 

FlorentG a écrit :

Moi je ne m'embête plus trop, je fais tout en 960px de large, et pis voilà :/


 
Le truc, c'est que 960px de large, ça fait petit sur 22".
Si j'avais un 17 ou un 19, je crois que je ferais pareil mais là, mon côté égoïste prend le dessus. :D
 
__
 
Merci pour ta réponse. :jap:

n°1820703
FlorentG
Unité de Masse
Posté le 02-12-2008 à 15:29:46  profilanswer
 

Raito33 a écrit :

La zone ? Tu pourrais être plus précis ?


Zone dans le sens "merde" :D
 

Raito33 a écrit :

Par contre, j'aurais plutôt vu une diminution et non une augmentation, car dans ce dernier cas, les images pixelliserait méchant non ?


Dans les deux cas c'est moche, tant que les navigateurs utilisent un nearest neighbour comme algo de resize....
 

Raito33 a écrit :

Ca ça me plait ! Ca consiste en quoi ? :$
Enfin, comment ça se fait ?


Avec des min/max-width et un peu de JS pour IE6
 
 

Raito33 a écrit :

Le truc, c'est que 960px de large, ça fait petit sur 22".


Mais la longueur des paragraphes est optimale en général (texte en taille 12-14, colonne principale genre 500-600px, ça donne 12 mots par lignes en moyenne, ce qui est parfait).
 
Et si c'est trop petit, y'a le zoom :D Tous les derniers navigateurs en implémentent-un, donc ça s'arrange...

n°1820710
Raito33
Posté le 02-12-2008 à 15:34:12  profilanswer
 

FlorentG a écrit :


Zone dans le sens "merde" :D


 
C'est pas plus précis ! ^^
 

FlorentG a écrit :


Dans les deux cas c'est moche, tant que les navigateurs utilisent un nearest neighbour comme algo de resize....


 
*Va chercher les termes sur Google*. Pourtant, quand tu rétrécis l'image, elle doit pas être moche.  :sweat:  
 

FlorentG a écrit :


Avec des min/max-width et un peu de JS pour IE6


 
En soit, c'est compliqué à faire ? Tu aurais des exemples de site qui l'utilisent ?
 

FlorentG a écrit :


Mais la longueur des paragraphes est optimale en général (texte en taille 12-14, colonne principale genre 500-600px, ça donne 12 mots par lignes en moyenne, ce qui est parfait).
 
Et si c'est trop petit, y'a le zoom :D Tous les derniers navigateurs en implémentent-un, donc ça s'arrange...


 
Pas fan. ^^

n°1820712
FlorentG
Unité de Masse
Posté le 02-12-2008 à 15:37:32  profilanswer
 

Raito33 a écrit :

*Va chercher les termes sur Google*. Pourtant, quand tu rétrécis l'image, elle doit pas être moche.  :sweat:


Elle peut l'être comme dit suivant l'algo choisi, ça peut faire de l'aliasing méchant [:sadnoir]
 

Raito33 a écrit :

En soit, c'est compliqué à faire ? Tu aurais des exemples de site qui l'utilisent ?


Exemple avec Jello Mold Piefecta, qui est une implémentation de ça. C'est tout moche, mais c'est juste pour montrer. La largeur totale a une valeur min et max.
 
Là où c'est chiant, c'est pour gérer les images justement...
 

n°1820717
Raito33
Posté le 02-12-2008 à 15:42:56  profilanswer
 

Effectivement c'est pas très beau...
 
En fait, mon site a cette tête là : ici (C'est la version de test celle là mais on s'en fout, c'est pareil)
 
Tu crois que quelle méthode serait la meilleure pour moi ? :jap:

n°1820718
FlorentG
Unité de Masse
Posté le 02-12-2008 à 15:46:24  profilanswer
 

Hmm vu le design, ça va être trèèèèèès chiant à faire :D Je te dirais même de laisser tomber tout idée élastique et fluide pour garder comme ça :D
 
Démerde-toi pour que ça fasse bien en 960 de large, au pire essai de rajouter un fond pour atténuer les rayures :) En 1680*1050 c'est pas tellement pire que ça, d'ailleurs est-ce que tout le monde surf avec la fenêtre maximisée ? Moi je la garde à environ 1100px de large et pis voilà...

n°1820729
Raito33
Posté le 02-12-2008 à 15:52:37  profilanswer
 

Non, mais là, en 1680, ça me va encore. Ca fait pas trop petit, ni trop gros. ;)
 
J'ai également une version qui fait 950 de large, qui se charge quand l'écran a une largeur inférieure à 1024. :jap:
 
En fait, je pensais que pour le rendre extensible (au moins tester pour voir ce que ça donnait) il suffisant de refaire le header, les bords, et le footer en dimensions maximale (disons 1536 pour du 1920, soit 4/5 de rapport) et de mettre des % pour que ça se diminue tout seul ensuite. Faire les images, ça n'est pas ce qui m'embête le plus, ça m'amuse, mais c'est la manière d'adapter en extensible ensuite que je ne sais pas faire. Ca serait compliqué ? :/

mood
Publicité
Posté le 02-12-2008 à 15:52:37  profilanswer
 

n°1820733
FlorentG
Unité de Masse
Posté le 02-12-2008 à 15:54:22  profilanswer
 

Raito33 a écrit :

J'ai également une version qui fait 950 de large, qui se charge quand l'écran a une largeur inférieure à 1024. :jap:


Ah dans ce cas ça bug, parce que si la fenêtre est inférieure à 1024, il charge quand-même la maxi-version
 

Raito33 a écrit :

En fait, je pensais que pour le rendre extensible (au moins tester pour voir ce que ça donnait) il suffisant de refaire le header, les bords, et le footer en dimensions maximale (disons 1536 pour du 1920, soit 4/5 de rapport) et de mettre des % pour que ça se diminue tout seul ensuite.


Pas pour les images de fond malheureusement [:sadnoir] C'est là où c'est justement craignos.

n°1820737
Raito33
Posté le 02-12-2008 à 15:56:53  profilanswer
 

Oui, on m'a déjà fait la remarque, c'est l'écran qui est considéré, pas la fenêtre. :S
 
Pour l'image de fond, j'ai juste un truc miniscule qui se répète en fait. C'est quoi que tu appelles images de fond ? ;)
 
Merci!

n°1820741
FlorentG
Unité de Masse
Posté le 02-12-2008 à 16:00:57  profilanswer
 

En rajouter une comme décor, je cherche un exemple 2 sec

n°1820742
FlorentG
Unité de Masse
Posté le 02-12-2008 à 16:02:33  profilanswer
 

Genre ça : http://www.cajovnajantar.cz/
 
Si t'as une grosse résolution, le fond ne fait pas trop vide, y'a les gros éléments de décor

n°1820743
Raito33
Posté le 02-12-2008 à 16:04:10  profilanswer
 

Oui mais comme je n'ai pas une image à proprement parler comme image de fond, juste un petit bout qui se répète pour faire un fond uniforme, ça ne pose pas de problème de ce côté là, si ?

n°1820745
FlorentG
Unité de Masse
Posté le 02-12-2008 à 16:05:10  profilanswer
 

Nan ça ne pose pas de problèmes, c'est juste que ça peut faire vide si fenêtre maximisée à donf.

n°1820752
Raito33
Posté le 02-12-2008 à 16:08:55  profilanswer
 

Dans tous les cas, ça fera a priori pas plus vide qu'actuellement. ;)
 
Vu que en ce moment, les images font 1175 de large pour du sup à 1280.
 
Donc yora 350px en moins de vide pour du 1920, 150 en 1680, et il y en aura un peu plus pour du 1280 par contre.
 
J'ai quand même envie de tenter le coup en local, ne serait ce que pour voir comment ça donne, et pas s'embêter avec x scripts et y CSS différents. :/


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Design extensible

 

Sujets relatifs
Design fluide : Petit souci[Design][Telethon] Recherche
from c function func(double (*g(char*))) to cpp cool object designMenu extensible qui ne l'est pas
design patern et livres c++implementation design pattern Observer/Observable
Heritage: virtual / static probleme de designQuestion de design : WebServices et rétrocompatibilité
Problème espace design iframe[css]largeur variable (pour design extensible)
Plus de sujets relatifs à : Design extensible


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR