Design extensible

Design extensible - HTML/CSS - Programmation

Marsh Posté le 01-12-2008 à 17:03:38    

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:

Reply

Marsh Posté le 01-12-2008 à 17:03:38   

Reply

Marsh Posté le 02-12-2008 à 15:06:25    

Nobody ?

Reply

Marsh Posté le 02-12-2008 à 15:15:11    

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à :/

Reply

Marsh Posté le 02-12-2008 à 15:24:16    

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:

Reply

Marsh Posté le 02-12-2008 à 15:29:46    

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...

Reply

Marsh Posté le 02-12-2008 à 15:34:12    

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. ^^

Reply

Marsh Posté le 02-12-2008 à 15:37:32    

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...
 

Reply

Marsh Posté le 02-12-2008 à 15:42:56    

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:

Reply

Marsh Posté le 02-12-2008 à 15:46:24    

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à...

Reply

Marsh Posté le 02-12-2008 à 15:52:37    

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é ? :/

Reply

Marsh Posté le 02-12-2008 à 15:52:37   

Reply

Marsh Posté le 02-12-2008 à 15:54:22    

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.

Reply

Marsh Posté le 02-12-2008 à 15:56:53    

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!

Reply

Marsh Posté le 02-12-2008 à 16:00:57    

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

Reply

Marsh Posté le 02-12-2008 à 16:02:33    

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

Reply

Marsh Posté le 02-12-2008 à 16:04:10    

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 ?

Reply

Marsh Posté le 02-12-2008 à 16:05:10    

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

Reply

Marsh Posté le 02-12-2008 à 16:08:55    

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. :/

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed