Essai de modèle atypique

Coucou
Je suis en train d'essayé un modèle "desktop-inspired" pour le design de sites web, et j'aimerais discuter de mes idées avec la communauté car j'ai du mal à en tirer des conclusions. J'ai créé un design pour mon site perso à base de "box" :

http://img9.imageshack.us/img9/8894/fullscreenr.png

Mais ca pose quelques problèmes de scalabilité, puisque sur des plus petits écrans ou petites résolutions, une scrollbar apparait par box, ce qui n'est clairement pas la facon la plus pratique de naviguer dans un site (d'autant plus que beaucoup d'espace est gaché) :

http://img843.imageshack.us/img843/6924/smallscreen.png

Je pensais donc à ajouter éventuellement du javascript pour agrandir une box quand on la survole à la souris. Mais cette fois ci le problème serait que si quelqu'un veut viser un lien par exemple, il va peut être bouger pendant le redimensionnement.
En plus, ce serait surement un simple agrandissement d'une box par dessus l'autre, parce que réduire l'autre en conséquence comme si on la poussait est beaucoup plus compliqué (à ma connaissance).
Finalement, l'animation de resize est super belle sous chrome mais a du mal à passer sous d'autres navigateurs (j'expérimente le CSS 3).

Donc voila qu'est ce que vous en pensez ? Je suis complètement fou d'essayer un truc comme ca ?

PS : je suis bien conscient que les couleurs sont controversées, je vais surement bientot les changer pour du vert, ce n'est pas ce dont je veux discuter ici ^^
Modifié par yo252yo (15 Apr 2011 - 07:55)

Salut,

En jouant sur les propriétés height et overflow de tes box, tu dois pouvoir faire en sorte que la taille s'adapte au contenu quelque soit la résolution ou la taille de l'écran. Pas besoin de javascript ou autre pour gérer ça. Fais voir ton code si tu veux.

Bonjour,

Je ne vois pas ce qu'il y a d'atypique dans ton design...

Pour ce qui est des blocs, il suffit de ne pas donner de height (préférer max-height) pour ne pas avoir de double-ascenseurs.

Bon après, sans le code, difficile de dire ce qui pose réellement problème.

Tout d'abord merci pour vos réponses
Bah je sais pas c'est pas banal un site web design comme un os, généralement on me regarde avec des gros yeux quand j'en parle ^^
Vous avez raison, j'ai upload le code à l'adresse : http://www.g33kt3st.com/YoannBourse/. C'est assez experimental donc c'est peut-être un petit peu fouillis par rapport à mes standards mais bon je suis un maniaque du code d'habitude ^^

@hctot : c'est possible mais j'ai du mal à imaginer ce que tu as en tête comme adaptation.

@Laurie-Anne: je n'ai pas de double ascenceur mais un ascenceur par "box", ce qui signifie que l'utilisateur doit donner le focus à la "box" qu'il veut faire défiler en déplaçant sa souris et ce n'est pas forcément convivial.

Je rejoins un peu Laurie-Anne, je ne vois pas ce qu'il y a d'atypique ni d’expérimental là dedans... Personnellement c'est plutôt en voyant ton code que je fais les gros yeux ! Pourquoi compliquer tout ça avec des div inutiles et des position absolute qui n'ont rien à faire dans une mise en page aussi simple ? Il te faut des balises h2 pour tes titres, un div pour chacune de tes box et basta !

Bonjour,

à l'instar de Laurie-Anne, je ne vois pas le coté atypique de ton design.

1. Tu as des portions de texte qui ne sont pas balisés ex : design, langue etc ...
2. Tu as une feuille externe de style, pourtant tu style dans l'html chaque box
3. Le design "violet" ne se charge pas on reste sur le cyan.
4. L'ensemble est plutôt mal balisé.
5. Tes ascenseurs apparaissent parce que justement tu fixes la propriété height de tes box.
6. Certains de tes div ne servent à rien, exemple ton menu, tu pourrais styler directement ton UL.
7. Tu devrais faire l’animation de ton menu sur tes liens et non pas tes <li>, là on ne voit pas de différence entre un lien et un composant non-lien de ton menu. (c'est peu-être pour des tests ?)

Bon courage pour la suite.

ps: Où est le parallèle avec un "Opérating system" ?

EDIT : 900 ko le background, c'est monstrueux
Modifié par fufu (15 Apr 2011 - 12:38)

[quote=yo252yo]@Laurie-Anne: je n'ai pas de double ascenceur mais un ascenceur par &quot;box&quot;, quote]Et c'est là le seul problème.

Sur petite résolution, ton site est juste impossible à consulter.

D'ailleurs sous IE8, même en grande résolution, c'est la pagaille...

Si le but de ton site est d'être un labo, aucun problème, si c'est de présenter ton CV... il va falloir tout revoir (surtout les bases de la conception web).

Merci à tous pour vos conseils

@hchtot : la complexité nait assez vite quand on veut par exemple un fond un peu transparent mais un texte opaque, un titre décalé un peu à gauche, etc... J'avoue que pour juste deux petits cadres j'aurai très bien pu les positionner de façon "par défaut" sans prise de tête, mais l'idée c'est de faire quelque chose d'un peu plus général où on peut placer les box où on veut et l'utilisateur pourrait au final les déplacer.

@fufu : beaucoup de tes critiques viennent du fait que je ne fais que bidouiller et j'avais pas vraiment l'intention de publier le code ^^ le changement de style est pas implémanté par exemple. L'html dans chaque box est nécessaire puisqu'elles ont pas toutes la meme position. Le parallèle avec un OS c'est qu'on te met face à un ensemble de box (comme les fenetres de l'OS), devant un wallpaper, qui seront eventuellement à terme draggable et minimisables.

@laurie-anne : mon public visé n'utilise pas IE8, je préfère me concentrer pour faire un truc sympa pour ceux qui utilisent des produits décents. Cela dit j'avoue que le problème que tu soulève est réel, mais pour l'instant je ne vois pas comment faire autrement

yo252yo a écrit :
@fufu : beaucoup de tes critiques viennent du fait que je ne fais que bidouiller et j'avais pas vraiment l'intention de publier le code ^^

OK, c'était pas prévu, mais tu l'as fait, une petite lecture du post-it aurait été appréciable.

yo252yo a écrit :
le changement de style est pas implémanté par exemple.

Ok.

yo252yo a écrit :
L'html dans chaque box est nécessaire puisqu'elles ont pas toutes la meme position.

Et avec 2 ID différent ?

yo252yo a écrit :
devant un wallpaper, qui seront eventuellement à terme draggable et minimisables.

Dans la mesure où ton site propose une interaction avec son public particulière qui demande ce genre de manipulation, pourquoi pas, mais si ça reste de la lecture d'informations, je n'en vois pas l'intérêt.
Modifié par fufu (15 Apr 2011 - 21:45)

fufu a écrit :
Et avec 2 ID différent ?

C'est un peu embettant parce que du coup il faudrait un CSS pour chaque page du site, tandis que la il me suffit de spécifier les paramètres de taille à chaque génération de box

fufu a écrit :
Dans la mesure où ton site propose une interaction avec son public particulière qui demande ce genre de manipulation, pourquoi pas, mais si ça reste de la lecture d'informations, je n'en vois pas l'intérêt.

C'est pour essayer d'avoir quelque chose d'original, mais j'avoue que c'est plutot une sorte d'expérimentation pour des projets futurs où ce genre d'interaction serait plus important.

yo252yo a écrit :

C'est un peu embettant parce que du coup il faudrait un CSS pour chaque page du site, tandis que la il me suffit de spécifier les paramètres de taille à chaque génération de box.

Je ne comprends pas.

Même feuille de style :

#box_1 {
width : XXpx;
height; XXpx;
}

#box_2 {
width : YYpx;
height; YYpx;
}

De toute façon, tu écris les différences en dur dans l'html, autant tout regrouper dans la feuille de style.
Modifié par fufu (15 Apr 2011 - 23:28)

bah tout est généré en php derrière et c'est quand meme beaucoup plus simple dans mon php de faire
new box('20px','30px',...)
et de tout imprimer d'un coup que de devoir remodifier le css a chaque fois que j'ajoute un objet

J'ai la forte impression que tu ne connais pas le medium "web"...

Pour mon précédent message, il y avait deux problème, le second uniquement concernait les utilisateurs d'IE.

Laurie-Anne a écrit :
J'ai la forte impression que tu ne connais pas le medium &quot;web&quot;...

Je ne l'ai jamais nié, mais tes critiques peu constructives ne m'aident pas vraiment à m'améliorer..

yo252yo a écrit :
J'ai créé un design pour mon site perso à base de box [...]
Mais ca pose quelques problèmes de scalabilité, puisque sur des plus petits écrans ou petites résolutions, une scrollbar apparait par box, ce qui n'est clairement pas la facon la plus pratique de naviguer dans un site (d'autant plus que beaucoup d'espace est gaché)

Prévoir alors une résolution minimum, mais laisser le 100% pour tous les écrans.

yo252yo a écrit :
Finalement, l'animation de resize est super belle sous chrome, mais a du mal à passer sous d'autres navigateurs (j'expérimente le CSS 3).

Il faudrait tester avec les mises à jour qui ont eu lieu depuis.

yo252yo a écrit :
PS : je suis bien conscient que les couleurs sont controversées, je vais surement bientot les changer pour du vert, ce n'est pas ce dont je veux discuter ici ^^

Pour les couleurs les avis dépendent des personnes, donc inutile d'en parler.