revoir l'esthétique du site

Julientroploin · Le 30/09/2009, à 21:37

L'anti-aliasing, je maitrise pas trop... je sais qu'on peu ajouter du flou, mais je suis pas sûr du résultat sur du texte... j'essayerais.

sam7 · Le 30/09/2009, à 21:54

très bon travail ! bravo

en partant de ce qui a été codé ici : http://ubuntu-fr.evoconcept.net/AccueilV5/
pour arriver à http://pix.toile-libre.org/?img=1254323487.png (ou presque)
ça demandera encore du boulot, mais vous allez y arriver...

à vous lire, & à voir les mockups, je pense que :
- le koala doit rester dans sa case ... et si possible ses oreilles ne doivent pas empiéter au dessus des onglets (là, c'est limite)
- "soutien aux utilisateurs" qui remplaçait "support" doit devenir "soutien" pour faire le distingo avec le "support" de canonical...
- c'est vrai que le sympatique effet de vague peut poser des soucis, à la fois visuellement & techniquement en particulier lors du "surlignage" par le trait rouge (couleur du "-fr") indiquant l'onglet actif...
- pour l'entourage des lettres en blanc, c'est vrai que visuellement ça n'est pas top... faudrait probablement changer les couleurs... dans l'absolu, ça serait probablement bien d'avoir les 3 couleurs des "-fr" d'ubuntu, de kubuntu & d'edubuntu ou de xubuntu ... à voir
- pour le calendrier, c'est pas mal... manque des infobulles au passage de la souris au dessus d'une date où il se passe quelque chose...

voilà mes observations pour ce soir... merci à Julientroploin & à fabien961

Julientroploin · Le 30/09/2009, à 22:14

cool, j'avais pas vu que fabien avait avancé depuis la semaine dernière.

Justes quelques remarques :
- si les onglets gardent cette forme, il faudrait que ceux de "En ce moment" et "Sur le Site" soient bien plus larges qu'actuellement
- faire attention à bien respecter le texte des onglets en haut :
A propos du site => A propos de l'association
Soutien => support
- voir les derniers changement listés dans un de mes posts précédent
- un onglet téléchargement à été rajouté... je ne me souviens pas ce qu'il est censé contenir. Une idée?
- il y a un problème avec le texte qui apparait quand on survol "forum" et "documentation"

Aller, moi je vais me coucher...

YannUbuntu · Le 01/10/2009, à 08:33

- J'aime bien les vagues, mais avec le koala ca fait trop surchargé.
- le blanc autour des titres des rubriques ca ne va pas du tout, il est preferable de changer la couleur du titre qui pose probleme ("support"), par exemple en jaune.

concernant le contenu:
- support/soutien: si j'ai bien compris, l'onglet du haut renvoie au paragraphe parlant de "support payant" (Canonical et entreprises locales), que l'on pourrait aussi nommer "support professionnel" ou "support d'entreprise", et la rubrique du bas (doc, forum ,IRC) devrait etre le "support communautaire" ou "support gratuit". Le terme "support" peut etre remplacé par "assistance" ou "soutien" ou "aide" si vous preferez.
En tout cas, AMHA on ne peut pas laisser uniquement "support" (ni "soutien") dans l'onglet du haut sans préciser "pro" ou "payant", car cela prete a confusion.
- je verrais bien le "support pro" dans la rubrique "support" en bas, afin d'eviter les confusions. Et pour eviter d'avoir 5 liens au lieu des 4 requis, on pourrait remonter "par ou commencer" dans les onglets. Double avantage car "par ou commencer" risque fortement d'etre aussi dans le nouvel accueil de la Doc, donc autant eviter d'avoir ces 2 liens cote-a-cote dans l'accueil principal.
- pas besoin d'un onglet Telechargement car on a deja le cadre Telechargement

Voici 1 mockup pour illustrer :

(pour fabien: pour l'icone des chemises, voir le portail entreprise de la doc.)

qu'en pensez-vous?

fabien961 · Le 01/10/2009, à 13:35

Salut !
Alors, j'ai essayé de faire une petite synthèse à ma sauce de tous les posts précédents pour améliorer l'affaire.
Voilà les changements :
* onglets du haut et de côté (contenu et taille)
* calendrier remplace l'étoile
* koala en filigrane (éclairci à fond, je peux pas plus)
* majuscules pour les titres de colonne en bas + éclaircissement de la couleur rouge
* contenu de la colonne SOUTIEN
* couleur des commentaires en bas
Qu'en pensez-vous ?

Sinon, je trouve que l'effet "vague" pour les onglets n'est pas indispensable. En plus c'est pas facile à faire en CSS. De même pour le contenu de la boite "Sur le Site", les demi cadres similaires aux onglets, ça fait un peu lourd.

Bon, je pense qu'on a quelque chose de correct là. Je suis d'avis d'aller de l'avant, de figer réellement le mockup (je rappelle qu'il était censé être déjà figé depuis le 17 mars), et de passer à la partie Drupal, puis à la déclinaison Kubuntu, Xubuntu, ... et aussi faire les autres pages. Y'a du boulot !

Merci à tous pour les bonnes idées !

fabien961 · Le 01/10/2009, à 13:47

Sinon, pour la boutique, est-ce qu'on lance le mockup HTML/CSS à partir de ce qui a été fait la semaine dernière ?
Il me semble qu'il a été confirmé qu'on part bien du thème zen, j'ai bon ?

Julientroploin · Le 01/10/2009, à 19:11

je ne sais pas qui s'en est occupé, mais le codage est déjà bien avancé (treminé?) pour la boutique : http://enventelibre.org/

toutes les modif' que tu as faites à la page vont selon moi dans le bon sens. J'ai 3 éléments à suggérer :
- aligner l'onglet "en ce moment avec ceux de gauche, là il est un chouilla trop bas;
- j'aime bien le koala, mais certains le trouverons peut être encore trop visible. en l'éclaircissant / l'enregistrant et le ré-éclaircissant, on peut pas pousser encore? (si t'as pas le temps, j'essayerais ce WE);
- il n'y aurait pas moyen de diminuer les espaces vides verticalement pour limiter l'ascenseur vertical?

Sinon, je trouve que l'effet "vague" pour les onglets n'est pas indispensable. En plus c'est pas facile à faire en CSS. De même pour le contenu de la boite "Sur le Site", les demi cadres similaires aux onglets, ça fait un peu lourd.

est-ce qu'on peut au moins mettre un effet lumière sur l'onglet ou l'on place le curseur? Dans ton codage, il faut aussi que tu prévoie que ce soit l'onglet en cours qui soit en gras.

Bon, je pense qu'on a quelque chose de correct là. Je suis d'avis d'aller de l'avant, de figer réellement le mockup (je rappelle qu'il était censé être déjà figé depuis le 17 mars), et de passer à la partie Drupal, puis à la déclinaison Kubuntu, Xubuntu, ... et aussi faire les autres pages. Y'a du boulot !

Il y a encore quelques détails à régler comme cette histoire de microblogging qui à l'air de tenir à coeur à certains et le codage des 2autres onglets.

Dernière chose, j'ai peut-être un candidat supplémentaire pour le koala filligrane :
https://wiki.ubuntu.com/Artwork/Incomin … ture1*.png
il a une bouille super sympa! On pourrait peut être demander à Zgegball (l'auteur de ce thème) si il est intéressé?

luK · Le 01/10/2009, à 19:45

Bonsoir,
Je trouve que le design de la page d'accueil s'est bien alourdi.
Le système pour décrire les différents liens du menu
( Documentation, Forum, Soutien interactif,... ) me parait peu utile et donc y consacrer une zone dédié semble inapproprié.
Je privilégierai des info-bulles système telle que http://ubuntu-fr.evoconcept.net/AccueilV3/ ou par la librairie jQuery ( http://jquery.com/ )
si on veut quelques chose de plus joli.

Ensuite, si je prend ce travail http://ubuntu-fr.evoconcept.net/AccueilV6/# comme référence, j'ajouterai que les proportions des mockups
ne sont pas respectées. Par exemple, la section Téléchargement est bien vide. Pour cela, on peut réduire la largeur globale du site,
afin d'avoir une section Présentation/texte et Téléchargement moins étendues.

Par ailleurs, le menu me parait bien grand aussi. On peut réduire la hauteur des titres des colonnes ( Support, Publications,.. ).
Un détail aussi: les bords du menu doivent être à une distance fixée des bords du fond blanc ( ici, le bas du menu est plus proche que ses côtés )
Un autre: je décalerai "Contact | Ressources | ..." et les images Drupal, Naris de cette même distance vers le centre de la page
( comme ici: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.png )
Aussi: "Présentation | A propos de l'asso | ..." doivent être à cette même distance du bord.
Et enfin: la taille des polices me parait un peu petite.

Pour la section Screenshot, je trouve que les flèches verticales sont moins harmonieuses qu'horizontales.

Pour la section Téléchargement, j'agrandirai l'image de la boîte de CD.

Pour le koala, je trouve ça joli mais puisque que Canonical a arrêté de faire des fonds d'écran en concordance avec l'animal de la version,
il devient difficile de faire ça à chaque version. Je me demande donc si c'est à continuer, m'enfin puisque le koala est fait autant le garder .

Pour la section évènementielle, les vagues me paraissent mieux que l'image utilisée pour les onglets.
Par contre, le calendrier, je suis contre surtout que les administrateurs d'ubuntu-fr s'arrange toujours pour mettre
une belle image en rapport avec l'évènement. Ce qui est bien plus parlant qu'un calendrier.

Enfin, certaines images ne sont pas comme sur le mockup ( exemple les onglets ), est-ce volontaire ou?
Si des images vous manque, faites m'en part, je les publierai.
Au passage, j'ai publié 2 découpes:
- le fond pour le login et mdp de connexion: http://lukdesigner.free.fr/Ubuntu/v4/Decoupes/Accueil/connexionFond.png
- l'effet rouge lors d'un survol d'onglet: http://lukdesigner.free.fr/Ubuntu/v4/Decoupes/Accueil/effetRouge.png

Aussi, un brève retouche pour simplifier les tableaux sur la doc:
http://lukdesigner.free.fr/Ubuntu/v4/docV4_Array.png

Sur ce bonne soirée

sam7 · Le 01/10/2009, à 21:29

bien ! ça avance dites-moi... bravo à tous

dans tout ce que vous avez écrit, il y a plein de choses sympa...
j'aime bien les versions suivantes...

http://imagik.fr/view-rl/133492
&
http://ubuntu-fr.evoconcept.net/AccueilV6/#site

... mais il y a encore des petites retouches en fonction d'observations que vous avez postées.

selon moi, il faut :
- garder le koala & le changer tous les 6 mois, ça serait trop cool
- agrandir la "boite" de téléchargement et la recentrer en mettant la même largeur à la case téléchargement & à la case publications
- mettre en gras le titre de l'onglet qui est sélectionné... & écrire les titres en caractères plus gros
- garder le système pour décrire les menus, il est plus sympa que des infobulles
- mettre les flêches en horizontal pour le screenshoot
- laisser dans leurs "coins" respectifs : Contact | Ressources | Licences & Drupal | Noris Network ... où alors les centrer dans leurs colonnes...
- supprimer les vagues qui ne sont pas indispensables ... mais présenter de la même manière les 3 zones "téléchargement" / "sur le site" / "en ce moment" (avec ou sans faux onglets ... s'il y a des onglets ils doivent être alignés et de même dimensions)

& si le calendrier ne convient pas, on peut toujours remettre l'image correspondante à l'évênement, comme cela avait été figé...

...qu'en dites-vous (de ma proposition) ?

c'est vrais que le mockup avait été figé, mais il y a des raisons valables pour l'avoir modifié légèrement... et c'est tant mieux.
c'est vrais maintenant qu'il faudrait rapidement figer le mockup html pour lancer les déclinaisons...

pouvez-vous mettre ma suggestion en image (html) ?
(je suis curieux de voir celà... & pourquoi pas la voire figée ?)
d'avance, merci

***
Edit : il faudra également le moment venu tenir compte de ce fil :
http://forum.ubuntu-fr.org/viewtopic.php?pid=2953790#p2953790
lorsque l'on attaquera le mockup html de la page d'accueil du forum...
(&il en sera de même pour la documentation qui est également en cours de refonte...
... j'ai "perdu" le lien vers la doc ou le topic correspondant, mais yannubuntu doit l'avoir...)

Dernière modification par sam7 (Le 01/10/2009, à 23:37)

sam7 · Le 02/10/2009, à 00:03

réponse à la petite question posée à ZgegBall
ici : http://forum.ubuntu-fr.org/viewtopic.php?pid=2958467#p2958467

ZgegBall a écrit :

Salut sam7!
Ce koala n'a pas été dessiné par mes soins mais par RMKD. Il est disponible au format vectoriel (svg) sous cette licence: Creative Commons Attribution-Share Alike 3.0 License. Donc a priori il n'y a pas de problème pour que vous l'utilisiez.
https://wiki.ubuntu.com/Artwork/Incomin … vector.svg
Je trouve le projet de refonte du site très bien, félicitations!

donc, c'est jouable... ça fera dons 3 ou 4 variantes de koala à départager... (avec le système de vote* de poupoul2 ?)
...lequel sera en première page ? nul ne le sais à ce jour...

http://www.doodle.com/dvpanuvtskktd2cv
* d'ailleurs, à ce que je vois, au final le mardi n'a pas trop de succès... le lundi alors ?

Dernière modification par sam7 (Le 02/10/2009, à 00:09)

YannUbuntu · Le 02/10/2009, à 05:19

fabien961 a écrit :

http://ubuntu-fr.evoconcept.net/AccueilV6/

merci Fabien pour ton excellent boulot, et désolé si on te submerge de propositions d'amélioration

Pour info concernant les proportions, ca rend bien sur mini-ecran (Opera pour telephone portable). Par contre sur du 1280x800 ca donne
Pour la section Screenshot, je relance l'idée d'un petit diaporama de type http://www.ubuntu.com/products/whatisubuntu/904features/ . Voir dans le code html de la page: ce n'est pas du flash, juste un petit javascript faisant tourner quelques JPG.

Julientroploin a écrit :

- aligner l'onglet "en ce moment avec ceux de gauche, là il est un chouilla trop bas;
- j'aime bien le koala, mais certains le trouverons peut être encore trop visible. en l'éclaircissant / l'enregistrant et le ré-éclaircissant, on peut pas pousser encore? (si t'as pas le temps, j'essayerais ce WE);
- il n'y aurait pas moyen de diminuer les espaces vides verticalement pour limiter l'ascenseur vertical?
(..) mettre un effet lumière sur l'onglet ou l'on place le curseur?

+1

luK a écrit :

on peut réduire la largeur globale du site, afin d'avoir une section Présentation/texte et Téléchargement moins étendues.
Par ailleurs, le menu me parait bien grand aussi. On peut réduire la hauteur des titres des colonnes ( Support, Publications,.. ).
(...) Pour la section Screenshot, je trouve que les flèches verticales sont moins harmonieuses qu'horizontales.
(...) Pour la section évènementielle, les vagues me paraissent mieux que l'image utilisée pour les onglets.

+1

sam7 a écrit :

j'ai "perdu" le lien vers la doc ou le topic correspondant, mais yannubuntu doit l'avoir...

http://doc.ubuntu-fr.org/utilisateurs/yannubuntu/discussion_portail_accueil_2009

fabien961 · Le 02/10/2009, à 14:00

Super !
J'adore les remarques constructives et bien précises qui font avancer le schmilblick .
Voilà la version modifiée selon les conseils de tout le monde.

Julientroploin a écrit :

- aligner l'onglet "en ce moment avec ceux de gauche, là il est un chouilla trop bas;
- j'aime bien le koala, mais certains le trouverons peut être encore trop visible. en l'éclaircissant
- mettre un effet lumière sur l'onglet ou l'on place le curseur?

OK

Julientroploin a écrit :

- Dans ton codage, il faut aussi que tu prévoie que ce soit l'onglet en cours qui soit en gras.

Chez moi, l'onglet en cours est en gras et avec la lueur. L'onglet sur lequel passe la souris prend la lueur mais n'est pas en gras. C'est pas ça qu'il faut ? Moi j'aime bien comme ça.

Julientroploin a écrit :

- Il y a encore quelques détails à régler comme cette histoire de microblogging qui à l'air de tenir à coeur à certains et le codage des 2autres onglets

.
C'est quoi ça le truc de microblogging ? De quels onglets tu parles ?

luK a écrit :

Pour cela, on peut réduire la largeur globale du site,
afin d'avoir une section Présentation/texte et Téléchargement moins étendues.
Par ailleurs, le menu me parait bien grand aussi. On peut réduire la hauteur des titres des colonnes ( Support, Publications,.. ).
Un détail aussi: les bords du menu doivent être à une distance fixée des bords du fond blanc ( ici, le bas du menu est plus proche que ses côtés )
Un autre: je décalerai "Contact | Ressources | ..." et les images Drupal, Naris de cette même distance vers le centre de la page
( comme ici: http://lukdesigner.free.fr/Ubuntu/v4/accueilV4.png )
Aussi: "Présentation | A propos de l'asso | ..." doivent être à cette même distance du bord.
Et enfin: la taille des polices me parait un peu petite.
Pour la section Screenshot, je trouve que les flèches verticales sont moins harmonieuses qu'horizontales.

OK

luK a écrit :

Pour la section Téléchargement, j'agrandirai l'image de la boîte de CD.

Si je fais ça, soit l'image overlap le titre téléchargements, soit j'agrandis la case et alors le layout ne passe plus en 800x600.

luk a écrit :

Enfin, certaines images ne sont pas comme sur le mockup ( exemple les onglets ), est-ce volontaire ou?
Si des images vous manque, faites m'en part, je les publierai.

Effectivement, les images manquantes je ne les ai pas. Merci pour celles que tu m'a donné. Il me faudrait l'étoile dans une meilleure qualité, là je l'ai découpée dans le mockup. Je veux bien aussi les onglets en vague, même si je trouve que c'est chouette comme c'est actuellement.

luK a écrit :

Par contre, le calendrier, je suis contre surtout que les administrateurs d'ubuntu-fr s'arrange toujours pour mettre
une belle image en rapport avec l'évènement. Ce qui est bien plus parlant qu'un calendrier.

Bien d'accord !

sam7 a écrit :

- mettre en gras le titre de l'onglet qui est sélectionné... & écrire les titres en caractères plus gros

Il est pas en gras mon titre ?

sam7 a écrit :

- mettre les flêches en horizontal pour le screenshoot

Fait, on peut même faire défiler les images !

sam7 a écrit :

présenter de la même manière les 3 zones "téléchargement" / "sur le site" / "en ce moment" (avec ou sans faux onglets ... s'il y a des onglets ils doivent être alignés et de même dimensions)

OK

Julientroploin a écrit :

Dernière chose, j'ai peut-être un candidat supplémentaire pour le koala filligrane :
https://wiki.ubuntu.com/Artwork/Incomin … ture1*.png
il a une bouille super sympa! On pourrait peut être demander à Zgegball (l'auteur de ce thème) si il est intéressé?

J'ai éclairci le koala initial, et j'ai fait un autre essai avec celui de Zgegball.
Perso, je préfère le premier.

On y est presque ....
Dites-moi ce qui va, ce qui reste à modifier et si j'ai oublié quelque chose.

Dernière modification par fabien961 (Le 02/10/2009, à 14:12)

lykhead · Le 02/10/2009, à 14:14

salut
je trouve le travail fait sur l'acceuil parfait a un detail pres
c con mais tout les 6 mois on a une nouvelle version qui sort

on a un compteur pour savoir le nombre de jour qu'il reste avant la sorti

ma question
ou compter vous mettre le compte a rebours????

desoler
bonne continuation

Julientroploin · Le 02/10/2009, à 14:33

Pas eu le temps de regarder toutes tes modifs pour l'instant, mais :

fabien961 a écrit :

Julientroploin a écrit :
- Dans ton codage, il faut aussi que tu prévoie que ce soit l'onglet en cours qui soit en gras.
Chez moi, l'onglet en cours est en gras et avec la lueur. L'onglet sur lequel passe la souris prend la lueur mais n'est pas en gras. C'est pas ça qu'il faut ? Moi j'aime bien comme ça.

Oui, c'est comme ça qu'il faut qye ce soit, je voulais juste dire que dans ton code il fallait prévoir que les "gras" change de place quand on change d'onglet. Vu ta réponse, j'en déduit que c'est bon

fabien961 a écrit :

C'est quoi ça le truc de microblogging ? De quels onglets tu parles ?

le microbloginning, c'est là : http://suivi.ubuntu-fr.org/ Quelqu'un sur l'IRC proposait de l'inclure dans "en ce moment" en plus du calendrier et l'idée avait l'air d'avoir du succès, mais quand j'ai fais mon mockup, je me suis rendu compte que ça ne tiendrait jamais.
Les 2 autres onglets : je parlais de ce qui se passe quand on clique sur "À propos de l'asso", "Par où commencer ?" mais je pense que c'est vite fait une fois que le 1er est codé, c'est une histoire de copier coller à peu de choses près (non?)

luK a écrit :
Par contre, le calendrier, je suis contre surtout que les administrateurs d'ubuntu-fr s'arrange toujours pour mettre
une belle image en rapport avec l'évènement. Ce qui est bien plus parlant qu'un calendrier.
Bien d'accord !

je ne sais pas comment les choses étaient envisagées, mais moi je penssais que si on cliquait sur la date, on arrivait à la page d'annonce de l'évenement (sur laquelle serait la belle image)

Dites-moi ce qui va, ce qui reste à modifier et si j'ai oublié quelque chose.

je vais attendre d'avoir regardé un peu mieux...

sam7 · Le 03/10/2009, à 08:38

quel bon boulot vous avez fait, ça prends vraiement tournure... c'est presque parfait

quelques observations toutefois :
- personnellement, je trouve que le koala a été trop éclairci, on ne le voit plus trop, c'est peut-être un peu dommage
- le compte à rebours de la nouvelle version d'ubuntu devra être inséré à la place de l'image (ici l'étoile) dans "en ce moment", ça me parrait évident (en commençant à J-7 par exemple ? pour ne pas trop "effacer" les autres actualités trop longtemps...
ou alors autre possibilité, et là ça peut durer beaucoup plus longtemps : entre "ubuntu-fr" & la zone "recherche & identifiant" e haut de page...
- l'idée des screenshoot défilant automatiquement comme ici est très bonne : http://www.ubuntu.com/products/whatisubuntu/904features/
- je constate encore que les largeurs des colonnes ne sont pas bien callées... c'est pas grand chose, mais ça serait mieux...

voilà...

NB : j'ai posté un mot sur le topic de la Nouvelle page d'accueil de la Documentation
ici http://forum.ubuntu-fr.org/viewtopic.php?pid=2960584#p2960584 ... il faudra en tenir compte lorsque l'on passera à cette page ... merci

Dernière modification par sam7 (Le 03/10/2009, à 08:39)

kao_chen · Le 03/10/2009, à 17:23

Salut tout le monde,
Je me suis permis de consulter la version 7 du mockup et notamment son css.
La largeur du cadre semble être fixé à 950 de large, et je dois avouer que sur mon grand écran (1680*1050) la page semble un peu petite.
J'aimerai donc militer pour une page un peu plus large, même si je me doute que tout le monde ne dispose d'autant de confort.

J'ai trouvé quelques stats ici sur la répartitions des résolutions d'écrans:
http://www.w3schools.com/browsers/browsers_display.asp
Il semble que les résolution d'écran supérieure à 1024*768 ai pris le pas.

Il semble aussi d'après cet article: http://www.alsacreations.com/tuto/lire/ … tions.html que le CSS2 permettent la mise en place de balise DIV avec un minimum et un maximum comme ceci:

div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}

Si ce n'est pas trop compliqué à mettre en place cela pourrais être un bon compromis.

En tout cas c'est déjà un excellent boulot. a+

sam7 · Le 04/10/2009, à 10:04

personnellement, je suis en dualscreen 2* 1440 * 900 ...

effectivement, cette résolution est peut-être un peu faible...mais il faudrait faire en sorte que le site passe ême sur les notebook correctement, sans trop de soucis... et comme la page d'accueil est scindée en 3 colonnes (pour ne parler que d'elle puisqu'on est dessus en ce moment), il serait souhaitable de se baser sur une largeur facilement divisible par 3...

Je pensais à 900 ou à 1200 pour la largeur minimale ... et soit à 750 soit à 900 pour la hauteur minimale par défaut... mais comme il faut un rectangle 4/3 minimum, voir même 16/9...
je pense à la réflexion que 1200*750 serait un compromis intéressant)
& avec mon idée de cases (comme un puzzle, pour les faibles résolutions, par le jeu du déplacement et de la réorganisation de celles-ci, on pourrait descendre à 800, voire même à 600 en largeur ou moins... puisque tu parles d'un % de réduction (enfin, si je comprends bien))

Autre sujet déjà évoqué plus ou moins précédemment : la coordination des 3 projets en cours pour la "mise en ligne" simultanée et pour que chacun des projets tiennent compte des autres...
1) notre présent projet de refonte du site
2) le projet de réorganisation des sections du forum
ici : http://forum.ubuntu-fr.org/viewtopic.php?pid=2962871#p2962871
3) le projet de la nouvelle page d'accueil de la documentation
ici : http://forum.ubuntu-fr.org/viewtopic.php?pid=2962889#p2962889
4) ??? tant qu'on y est : est-il prévu quelque chose pour le Planet ???
qui coordonnera le tout ?
il faudrait que ça soit des administrateurs si possible (enfin je pense)

d'avance, merci

Dernière modification par sam7 (Le 04/10/2009, à 10:10)

Julientroploin · Le 04/10/2009, à 10:50

kao_chen a écrit :

J'aimerai donc militer pour une page un peu plus large, même si je me doute que tout le monde ne dispose d'autant de confort.
J'ai trouvé quelques stats ici sur la répartitions des résolutions d'écrans:
http://www.w3schools.com/browsers/browsers_display.asp
Il semble que les résolution d'écran supérieure à 1024*768 ai pris le pas.

Le truc, c'est que la page doit permettre d'accèder au forum et à la doc facilement pour ceux qui ont un problème d'affichage (pour qu'il puissent le résoudre), or, quand il y a des problèmes de driver on se retrouve souvent avec du 800x600, même si le matos est capable de mieux.

sam7 · Le 04/10/2009, à 14:50

c'est pourquoi le code doit être adapté comme je l'ai exposé plus haut afin de pouvoir découper en cadres/zones ces pages de manière à toujours avoir l'intégralité des éléments non "cassés", même s'ils ne sont plus tout à fait dans le même ordre*cf post #856 & suivants page 35... en particulier #860

cette méthode de découpage semblait pourtant convenir...

& je croyais que lorsque kao_chen parlais de %, l'on pouvait faire varier en gros l'échelle d'affichage...
et par exemple conserver les proportions/ratios & diminuer tout (taille des images, des polices, etc...) : j'ai dû me tromper alors ? qui peut m'expliquer... merci

YannUbuntu · Le 04/10/2009, à 14:53

http://ubuntu-fr.evoconcept.net/AccueilV7/

pour info sur du 1280x800 c'est maintenant beaucoup mieux:

sam7 · Le 04/10/2009, à 22:01

ça n'est pas encore complètement top... en réduisant la fenêtre, c'est un peu en vrac encore...
pour moi, dans la largeur il faut impérativement une dimension qui se divise facilement par 3 (vu qu'il y a 3 colonnes...) :
car *: 750 / 900 / 1200 / 1500
(*/3 = 250 / 300 / 400 / 500)
ces largeurs me semblent raisonnables, plus petit ou plus grand ne conviendrait pas...

après, la hauteur, c'est autre chose...
il faut que ça passe aussi sur des petites résolutions (mais l'assenceur vertical n'est pas insurmontable) et que sur un écran standard, qu'il soi 4/3 ... 16/9è ou 16/10è que la page apparaisse sans ascenceurs verticaux ni horizontaux... dans la mesure du possible,

il faudrait donc qu'il y ait respect du ratio de la taille d'écran... entre 1.333 & 1.777 en passant par 1.6 ... la moyenne ferait 1.555 avec la bordure marron autour qui serait variable donc selon la résolution de chacun...
ça pourrait donner par exemple (avec ce ratio moyen de 1.555) :
- une hauteur de 482 pour une largeur de 750 => ridiculement petit... donc à écarter
- une hauteur de 579 pour une largeur de 900 => à voir, mais j'ai des doutes...
- une hauteur de 771 pour une largeur de 1200 => ça commence à devenir jouable
- une hauteur de 965 pour une largeur de 1500 =>

au final, je préfèrerais tout de même une résolution de 1200 * 750 car la mode à venir est le 16/10è ... ça ne fait donc pas grand chose à changer...

et il faut absolument aligner les colones... ça n'est pas encore la cas... merci

Edit :
à demain soir sur IRC : le mardi posant des soucis à beaucoup,
à l'issue du vote (mis en ligne par Poupoul2), la nouvelle date a été
fixée désormais au lundi soir vers 21h... venez nombreux, merci.

Maintenant, je devrais être à l'heure ...

Dernière modification par sam7 (Le 04/10/2009, à 22:07)

fabien961 · Le 04/10/2009, à 22:02

Bon, il faut qu'on règle cette histoire de mise en page/largeur d'affichage.
D'abord, chez moi les trois colonnes du bas ont exactement la même largeur (résolution 1024x768). La différence n'est qu'apparente, c'est une illusion d'optique due au fait que le titre du milieu prend plus de place que les autres. La preuve en image : chaque colonne fait 285 pixels de large.
[size=9]imagik.fr[/size]
Sam7, chez toi les colonnes ont vraiment une largeur différente ?

Ensuite, il est impératif que le design de la page passe bien pour toutes les résolutions d'écran, en partant de 800x600. Pour cela, et pour éviter que certaines cases s'étalent trop en largeur pour les grandes résolutions (comme l'a fait remarquer luK ci-dessus) il est nécessaire de limiter la largeur de la case principale (celle qui a un fond gris/blanc). Et comme le dit YannUbuntu, en 1280x800, ça passe bien. Quant au fait d'avoir un rectangle de 4/3 voire 16/9, je ne pense pas que ce soit faisable. J'ai essayé de réduire la hauteur globale du site mais si on réduit plus, ça va faire tassé. La marge de manœuvre restante est de réduire la taille de la police pour les liens du menu du bas, comme dans la version 8. Qu'en pensez-vous ?

Sam7, je crois que tu ne prend pas le problème dans le bon sens. L'affichage d'un site ne doit pas se penser comme étant "figé" comme une image dont seules les proportions changent en fonction de la résolution de l'écran. Il faut que le design s'adapte aux habitudes de chaque utilisateur, comme la taille de police plus grande ou plus petite. Une personne avec un bas débit pourra par exemple bloquer le téléchargement d'images, une autre qui a une mauvaise vue voudra une police plus grande, etc... On ne peut pas non plus penser le design d'une page uniquement du côté graphique. Pour donner du sens à une page, notamment pour un robot de moteur de recherche, il est préférable de la structurer en fonction du contenu et non du design. Pour te donner une idée, voilà comment google voit la page d'accueil actuelle. En plus, là ce ne sont que des essais approximatifs. Le contenu (je veux parler du texte) final ne sera pas exactement celui-là. Si on fait quelque chose au pixel près, on va devoir tout revoir à chaque changement du contenu.

sam7 a écrit :

je croyais que lorsque kao_chen parlais de %, l'on pouvait faire varier en gros l'échelle d'affichage...
et par exemple conserver les proportions/ratios & diminuer tout (taille des images, des polices, etc...) : j'ai dû me tromper alors ? qui peut m'expliquer... merci

div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}

Ce code signifie que la largeur d'affichage sera égale à 80% de la largeur disponible (1024x80/100=819 pour une résolution de 1024x768) mais avec une limite max à 1000 et min à 700. C'est à dire qu'un écran de résolution 800x600 n'affichera pas la page avec une largeur de 640px mais de 700px et qu'un écran de résolution 1440x900 n'affichera pas en 1152px mais en 1000px de large.
J'ai appliqué cette suggestion dans la version 8 avec une largeur de 90%, qu'en pensez-vous ? Pouvez-vous tester avec différentes résolutions ?

Sinon, j'ai adapté le défilement des screenshots. Maintenant le passage de l'un à l'autre se fait en fondu-enchainé comme ici. J'ai aussi ajouté un timer pour faire défiler les images toutes les 6 secondes, mais perso je préfère qu'on utilise seulement les flèches : je n'aime pas quand un truc bouge continuellement dans la page, ça fait un peu publicité gif.

J'ai remis le koala un peu plus foncé. Mais que pensez-vous de l'essai avec le koala de Zgegball ?

Quelqu'un peut-il aussi tester avec IE7 et 8, Opéra, Safari, Konqueror et autres navigateurs ?

Merci à tous pour votre aide.

fabien961 · Le 04/10/2009, à 22:06

sam7 a écrit :

pour moi, dans la largeur il faut impérativement une dimension qui se divise facilement par 3 (vu qu'il y a 3 colonnes...) :
car *: 750 / 900 / 1200 / 1500
(*/3 = 250 / 300 / 400 / 500)

Tu as peur que ton navigateur soit nul en calcul mental ? Explique-moi d'où vient la contrainte d'une dimension qui se divise par trois, quand c'est un ordi qui fait le calcul ?
33,333% x n'importe quelle largeur, ça foit toujours un tiers !

sam7 · Le 04/10/2009, à 22:10

ç'est simplement pour que les codeurs qui font le contenu des cases puisse avoir des "cotes rondes" (précises et simples, sans virgules...)
pour se dire : là j'ai un cadre de temlle dimension pour y faire rentrer celà... et aussi parce que j'aime les chiffres ronds sans virgules...

Edit :

pour la largeur différente : je parlais de l'allignement du trait vertical entre les screenshoot et le téléchargement qui n'est pas alligné avec le trait entre les colonnes soutien et publications...
ça ne fait pas beau tel que c'est actuellement...
il faut donc également faire en sorte que la dimension entre ce trait et le faux onglet téléchargement
soit la même qu'entre l'aligment du trait entre publications et réseau et le faux onglet sur le site qui lui même est aligné sur le faux onglet en ce moment...

ici tu as 285 de largeur, personnellement je pensais à 400...
car il faut que ces 3 colonnes remontent également jusqu'en haut de la page :
pour le moment les zones blanche à gauche et à droite du bandeau inférieur sont trop importante
ç'est visible car le premier onglet présentation est décallé plus à gauche... & le logo ubuntu estb lui même encore un peu plus à gauche...

il faudrait bien caller l'alignement vertical, tout comme les choses ont été parfaitement callées pour l'horizontral...
c'est à dire que ça n'est pas génant qu'il y ait un bandeau blanc cassé autours, en plus du tour marron, mais celà entre en dehors de la plage des 1200 de large (3*400).

dans la première colonne : le bord gauche du logo ubuntu doit être aligné avec le bord gauche du premier onglet qui doit être aligné avec le texte qui doit être aligné avec la pointe de la flèche de gauche du screenshoot qui doit être aligné avec le bord gauche du bandeau inférieur souten...

dans la seconde colonne : le ord droit du logo ubuntu-fr et de son texte doit être aligné sur le trait séparant le screenshoot et le téléchagement qui doit être aligné avec le trait séparant les rubriques soutien et publication du bandeau inférieur

dans la troisième colonne : le bord gauche de la zone de recherche ainsi que de l'identifiant doit être aligné sur le trait séparant les rubriques publications et réseau du bandeau inférieur

plus rien ne doit dépasser à droite en remontant du bord droit de la rubrique réseau...

... ainsi nous aurons des "cases" au contenu bien identifié, et chacune d'elle devra se décaller proprement en réduisant la largeur de l'écran...

nous avons donc 3 colonnes (A / B / C) et 4 lignes (1 / 2 / 3 / 4) :
- en A1, nous avons le logo Ubuntu-fr
- en B1, RIEN
- en C1, la zone de recherche rapide & la zone d'identifiant & connexion
- en AB2 (case double) nous avons les 3 onglets et leur textes associés
- en C2, "En ce moment"
- en A3, les screenshoots
- en B3, "Téléchargement"
- en C3, "Sur le site"
- en A4, "Soutien"
- en B4, "Publications"
- en C4, "Réseau"

désolé de n'avoir pas été plus clair dans mes précédentes explications...
(je croyais que mon shéma #856 était clair...)

***
merci pour tes explications...
... mais je pense qu'avec "ma" méthode, google verra la page de la même manière,
et que ça fera plus propre visuellement...

petit test sur la version 8 :
cool, c'est beaucoup moins le boxon dans les cases...
(mais j'ai sensimlement le même problème que Julientroploin)
& la petite police est plus sympa également
il y a un net progrès, bravo...
à comparer, je préfère "notre" koala...

Dernière modification par sam7 (Le 04/10/2009, à 22:50)

Julientroploin · Le 04/10/2009, à 22:33

J'aime bien ta version 8 avec les polices plus petites pour le menu du bas (ça fait moins playmobil je trouve).

Un délai de 6sec. me semble suffisant pour qu'on ai pas l'impression que ça bouge tout le temps.

Par contre chez moi, sur un écran 4/3 à 1024x768, il y a un problème avec les évenements à coté de l'étoile : il se retrouvent en dessous et décalent "sur le site" vers le bas (alors qu'il semble y avoir la place à coté de l'étoile.

Hormis ce problème, le site passe bien sur Firefox 3.5, midori et epiphany chez moi.
Problème mineur sous midori : les pointes inférieures du cadre du menu du bas apparaissent sous forme de pointes noir au lieu d'arrondis...

Pour les Koala, moi j'aime bien celui de Zgegball, mais on s'en moque un peu : il faut qu'on fasse abstraction de l'image pour nos choix puisqu'elle changera tous les 6mois en théorie.

Dernière modification par Julientroploin (Le 04/10/2009, à 22:34)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#901 Le 30/09/2009, à 21:37

Re : revoir l'esthétique du site

#902 Le 30/09/2009, à 21:54

Re : revoir l'esthétique du site

#903 Le 30/09/2009, à 22:14

Re : revoir l'esthétique du site

#904 Le 01/10/2009, à 08:33

Re : revoir l'esthétique du site

#905 Le 01/10/2009, à 13:35

Re : revoir l'esthétique du site

#906 Le 01/10/2009, à 13:47

Re : revoir l'esthétique du site

#907 Le 01/10/2009, à 19:11

Re : revoir l'esthétique du site

#908 Le 01/10/2009, à 19:45

Re : revoir l'esthétique du site

#909 Le 01/10/2009, à 21:29

Re : revoir l'esthétique du site

#910 Le 02/10/2009, à 00:03

Re : revoir l'esthétique du site

#911 Le 02/10/2009, à 05:19

Re : revoir l'esthétique du site

#912 Le 02/10/2009, à 14:00

Re : revoir l'esthétique du site

#913 Le 02/10/2009, à 14:14

Re : revoir l'esthétique du site

#914 Le 02/10/2009, à 14:33

Re : revoir l'esthétique du site

#915 Le 03/10/2009, à 08:38

Re : revoir l'esthétique du site

#916 Le 03/10/2009, à 17:23

Re : revoir l'esthétique du site

#917 Le 04/10/2009, à 10:04

Re : revoir l'esthétique du site

#918 Le 04/10/2009, à 10:50

Re : revoir l'esthétique du site

#919 Le 04/10/2009, à 14:50

Re : revoir l'esthétique du site

#920 Le 04/10/2009, à 14:53

Re : revoir l'esthétique du site

#921 Le 04/10/2009, à 22:01

Re : revoir l'esthétique du site

#922 Le 04/10/2009, à 22:02

Re : revoir l'esthétique du site

#923 Le 04/10/2009, à 22:06

Re : revoir l'esthétique du site

#924 Le 04/10/2009, à 22:10

Re : revoir l'esthétique du site

#925 Le 04/10/2009, à 22:33

Re : revoir l'esthétique du site

Pied de page des forums