revoir l'esthétique du site (2)

xabilon · Le 22/02/2010, à 03:31

C'est marrant, l'engueulade la plus absurde que j'ai modérée sur ce forum concernait le thème graphique d'une version d'Ubuntu.
Ça c'est soldé par deux exclusions, comme quoi c'est bien plus sensible que les débats sur les religions

Xarkam · Le 22/02/2010, à 08:56

sam7 a écrit :

En effet, vous avez le droit d'avoir vos propres avis... & il faut rester polis...
c'est dommage d'avoir "vexé" McPeter qui est un contributeur de la refonte du site,
j'espère qu'il repassera par ici tout de même...

Je m'emporte facilement sur certaines choses.
Surtout quant on le dit "j'ai un grand écran et je veux pas perdre de place à droite et à gauche" ou encore "je développe pour des écrans" ou bien "développer en relatif ca rend plus accessible".

1er point. Si comme moi tu à un grand écran, il faut savoir faire avec. Pour ma part j'ai un grand écran pour coder, ca offre un confort sans égal. Je ne râle pas à tout bout de champ par ce que la quasi totalité des sites ne sont pas en relatif. Perso, je m'en fout, j'ai fait un choix, je l'assume.

2eme point. Comment, à notre époque peut-on dire qu'on développe pour des tailles d'écran ? Regardons de plus prêt le marché des écrans. En grandes surfaces nous ne trouvons plus que des écrans 16:9 et sur les sites de ventes il n'y à pratiquement plus d'écrans 4:3 .
Même constat pour les portables qui sont depuis 1-2ans avec des écrans 16:9.

Donc, que je li ca, je me dit: ou est l'anticipation. Le design actuelle date de mathusalem j'en déduit donc que le future design est fait pour 5-6 ans. Dans cette période, combien vont changer de portable et donc avoir du 16:9 ou encore changer leur machine et en profiter pour prendre un écran récent pour profiter de la taille ?

Maintenant, pour la page d'accueil est-ce qu'un développement en relatif est un besoin ou une nécessite ? Clairement non en l'état actuelle de ce qu'elle contient(la vrai page, pas celle en dev).
La vrai question est: comment faire un passage en douceur entre une page d'accueil en dimension fixe et le reste du site en relatif.
Certains on mis un élément commun à tout le site, d'autres on fait le choix du tout fixe.

@xabilon: je respecte tjr mes intervenant quant ceux-ci font preuve de bon sens. Ce qui m'a mis hors de moi, c'est l'argumentation sur les écrans de grande taille. Au passage, je devrais être exclu, et serais-ce même à vie que cela ne m'empêcherais pas de dormir. Les sujets qui tiennent à cœur sont toujours sensible

tshirtman · Le 22/02/2010, à 09:35

Xarkam a écrit :

McPeter a écrit :
Faire un site en dimmemsion relative permet l'accessibilité .. de base le site est développé sur des écrans 19" en 1900/1200 ... avec une base (côte minimum) sur du 1024 en largeur.
Si un site en relatif était tellement accessible je pense que les plus gros site dans le monde le seraient.
Parcours un peut le web avec des grands écran et tu te rendra vite compte que la casi totalité est en fixe.
Mais voici donc quelques exemples:
clubic.com
pcinpact.com
framasoft.net
lemonde.fr
ubuntu.com
liberation.fr
nordeclair.fr
dhnet.be
rtlinfo.be
sport24.com
pmu.fr
microsoft.com
mandriva.com
opensuse.org
odebi.org
La liste peut encore être trèèèèèèèèèèèèèèèèèèès longue.
Alors les argument type "je pense pas donc suis-je" ? me font trop marrer. On veux pas perdre de l'espace à droite et à gauche, mais on accepte d'avoir des trous noir entre les éléments par ce que les site est "en relatif" et qu'on est content comme ca par ce qu'on réfléchi pas des masses.
Mettre un site en relatif ca se fait selon le type de contenu.
Pour un forum, un wiki le relatif vas très bien, pour une page de présentation, foutre du relatif c'est d'une débilité assommante et ca fait peur.
A quant des flyers format A3 par ce que je les fait en format A3 sur pc ?
Vive le nivellement intellectuelle par le bas.

super... l'accessibilité c'est de faire pour ton 26"

j'ai beaucoup fréquenté le site sur mon eeepc701 (7,5") et je continue et continuerais avec mon 901 (9,5") tous les sites que tu cites sont une horreur à naviguer avec ça, un design relatif est la meilleure solution pour que tout le monde ait un truc acceptable, pas seulement les kikalaplugrosse dans ton genre... si t'es pas content tu peux te faire ta css perso hein... Après c'est surement améliorable, mais je t'assure que tes screenshot sont tout à fait acceptable par rapport à quelqu'un qui doit naviguer sport24 ou pcinpact sur un netbook!

Le mieux est de faire du relatif, mais avec des tailles minimales/maximales pour certains éléments. Ça se fait.

Dernière modification par tshirtman (Le 22/02/2010, à 09:36)

Xarkam · Le 22/02/2010, à 10:27

Vivi t'a rien compris toi.
Alors, vu que je surf avec mon pda, moi je veux en rendu correcte sur mon mini écran.

NON du relatif c'est pas avoir un truc acceptable par tous.
J'ai dit que du relatif ca se décide selon le contenu pas juste par ce qu'on veux une certaine gueule au bousin.

Du relatif pour ce qui est prévu de mettre sur la page d'accueil ca ne servira qu'a foutre un rendu de merde sur des résolutions plus grande que du 19".

Enfin moi je m'en tape royale, je fait passer l'info comme quoi le rendu pose soucis au dessus des résolutions des 19".

Trouve toi un grand écran, affiche des sites de ma liste et met une feuille A4 devants tu devrais comprendre de quoi je parle.

Et ce n'ai pas par ce que tu met en conteneur à taille fixe qu'à l'intérieur c'est pas du relatif.

tshirtman · Le 22/02/2010, à 11:03

J'ai un wide chez moi hein... si le conteneur est fixe ça change pas grand chose de faire du relatif dedans, tout sera calé sur la largeur du conteneur... (sauf quand on zoom, mais c'est pas ton cas apparemment).

Quand à avoir une présentation différente pour le wiki, les pages statiques, et le forum ce serait quand même dommage.

Dernière modification par tshirtman (Le 22/02/2010, à 11:03)

xabilon · Le 22/02/2010, à 11:19

Don, Xarkam, tu trouves que le contenu et l'organisation de la page d'accueil ne sont pas adaptés, en positionnement relatif, à des écrans très larges ?

Xarkam · Le 22/02/2010, à 13:05

Oui, je dit qu'il faut délimiter une taille en largeur afin de garder un contenu cohérent.
L'actuelle mise en page ne pose pas ce soucis. Une colonne avec les menus et une autre avec le reste, les infos.

Ce n'est plus le cas avec la future mise en page mono colonne puisque le menu de navigation en en bas de page.
La vu que je garde mon fils malade, je suis avec mon portable en 1600x900 et l'espacement est déjà conséquent entre les éléments de navigation en bas de page.

Bcp pense que je parle d'une taille fixe quelque soit la résolution. Non je parle d'une largeur donnée maximum et non minimum.

Avant, nous n'avions pas ce soucis de mise en page car les grands écrans c'était du 19" ou 21". Actuellement ce soucis se pose puisqu'on ne fait pratiquement plus d'écran 4:9 mais que du 16:9 (dans de grandes largeurs)

Quant je regarde en magasins ou sur le net, la taille mini c'est du 17" 16:90 (portable) ou du 22" 16:9 (desktop)

Vous avez fait le choix sur une présentation mono colonne avec des éléments qui sont petit dans le bas de page. Ce qui est normal pour des menus.
Du coup ca oblige à fixer une limite en largeur pour ne pas perdre en cohérence sur un contenu qui se disséminé sur les écrans actuelles. (la je ne parle pas pour mon 26")
Si vous voulez vous en fixer au mokup réalisés, vous êtes dans l'obligation de définir un conteneur général avec une propriété css width qui correspond à ce que vous vouliez comme largeur de rendu sur le mokup.

Alors on aura toujours les mécontents car ca remplis par leur écrans. Mais on y peut rien, on nous impose des écrans larges.

ps: Je me suis mal exprimé en parlant de taille fixe, j'aurais du parler d'une largeur maximum dans mes précédant post. Mais c'est une déformation de codeur

tshirtman · Le 22/02/2010, à 14:18

ah oui, une taille maximum, ok, ça gène pas les petits écrans, merci de la précision...

Xarkam · Le 22/02/2010, à 14:39

tshirtman a écrit :

ah oui, une taille maximum, ok, ça gène pas les petits écrans, merci de la précision...

Oui, déformation, quant je parle taille fixe avec d'autres dev on comprend taille maximum

Une taille fixe non réductible c'est demande à se faire fouetter

Dernière modification par Xarkam (Le 22/02/2010, à 14:40)

tshirtman · Le 22/02/2010, à 15:06

c'est un peu pour ça que t'en prenais plein là tête, peut être

xabilon · Le 22/02/2010, à 15:06

Xarkam a écrit :

Oui, je dit qu'il faut délimiter une taille en largeur afin de garder un contenu cohérent.

Bon, tu vois bien qu'on peut dire les choses sans se traiter de débile mental ou autres joyeusetés

Donc on pourrait avoir un cadre blanc avec des coins arrondis occupant toute la largeur (pour garder la cohérence avec le reste du site), mais un div centré à l'intérieur de celui-ci, avec un max-width et contenant les éléments de la page d'accueil, à l'intérieur duquel le positionnement serait relatif.

Cependant, le max-width devrait être en em et pas en px, toujours pour des raisons d'accessibilité.
Ainsi les personnes ayant des problèmes de vue, et utilisant des grands écrans avec des polices de grande taille, pourraient tout de même profiter d'une largeur plus importante.

Xarkam · Le 22/02/2010, à 15:30

Tu a ton cadre esthétique qui remplis la page en relatif. Dans ce cadre un div de largeur maximum ou sont placé les éléments en relatif. Ton raisonnement suis le mien.

Du coup, tu respecte le mockup.
Faut faire un coup avec pour voir si le rendu est bien.

ps: c'est con, mais c'est que maintenant qu'on parle de ce soucis. Même moi je ne pense pas y avoir pensé dans le premier topic. (j'étais pas encore en 26" à cette époque)

Dernière modification par Xarkam (Le 22/02/2010, à 15:32)

sam7 · Le 22/02/2010, à 16:28

en effet ... et je crois bien que vous avez obtenu un "concensus" calmement ...
reste donc plus qu'à McPeter (j'espère) ... de coder afin que l'on voyent le résultat
qui voudra bien lui expliquer ce soir lors de la réunion IRC (s'il est présent) ?
... sinon, qui s'y colle ?

NB : par contre, j'aurais un petit soucis technique pour actualiser le premier post ...
... dès que le problème sera résolu, je mettrais à jour

Dernière modification par sam7 (Le 22/02/2010, à 16:31)

xabilon · Le 22/02/2010, à 16:34

C'est pas compliqué à mettre en place, même sur un CSS existant

sam7 · Le 22/02/2010, à 21:01

La réunion IRC de ce soir commence ... canal #ubuntu-fr-devweb
sont présents : McPeter / xabilon / julientroploin / vincent59 / kinouchou / Ner0lph / YoBoY / sam7 & huats ...

***********
Compte rendu de la réunion IRC du 22/02/2010
***********

1- Point sur le codage en cours + débugage éventuel

McPeter a écrit :

1 - après un premier jet finalisé
a - débuggage éffectué pendant la semaine :
- rétablissement des titres du menu du bas (couleur orange)
- retrait des popups et mises à jour des textes des dit menus
- ajoute d'un liend e type "double" pour "Partenaires" et "Revendeurs"
- rectification de l'input "Connexion" par rapport au lien "inscription"
- rectification du "mouvement" engendré par l'apparition du "breadcrumb" (fil d'ariane) lors de la navigation
- Modification de la taille des fonts sur les titres (H2 et menu principal du haut ainsi que les menus du bas) font réduite
- après ces modifications le site passe autant sur des écrans en def 1600 que 1024
- le débuggage a fait apparaître un gros bug de conséquence
---> type de font (choix de début de code : arial)
--> la font par défaut "serif" entraine un bug d'affichage dans une def en 1024
--> choix d'un nouvel ordre de font : Helvetica, arial , sans-serif
--> helvetica se rapproche en fait le plus de la font des mockups
--> arial pour ceux n'ayant pas helvetica garde l'âme des mockups
--> sans-serif devient la "direction" de debbuggage
1.a : entraine conclusion :
2 - refonte intégrale de tout le CSS commencé hier soir à 2h du mat
- avancement très rapide
3 - se décider une bonne fois pour toute sur ces ****** (désolé hein ..) de définition d'écran
(...)

OBJECTIF : se baser sur "l'accessibilité" : ça permet de contenter une majorité de personnes
(...) exemple en 1600 px : http://www.ubuntu-fr.homelinux.org/dev/CAPTURES/Capture-Redisign%20Ubuntu%20-%20Mozilla%20Firefox.png
en conclusion :
(...) la solution avancée sur le forum est-elle ou non la bonne ? débat en cours...
(...) débat également sur la largeur de la colonne de droite ... & la taille des polices

3- Questions / réponses sur la faisabilité technique des mockups en cours
RAPPEL : sur la page d'accueil, les 3 colonnes ont la même largeur !
... il y avait donc des erreurs dans les mockups...

lien vers les autres pages de dev :
http://www.ubuntu-fr.homelinux.org/dev/SITE/HTML/asso_new.html
http://www.ubuntu-fr.homelinux.org/dev/SITE/HTML/debutant_new.html
& 2 images : http://pix.toile-libre.org/?img=1266870676.jpg
& le squelette : http://www.ubuntu-fr.homelinux.org/dev/SITE/HTML/squelette.html
& les bases : http://www.ubuntu-fr.homelinux.org/dev/SITE/HTML/

2- Récapitulation des éléments nécessaires aux codeurs
McPeter & vincent59 font le point css/drupal ... il y a encore des "bugs" à résoudre...

3- Questions / réponses sur la faisabilité technique des mockups en cours
a) obtenir l'avis des "codeurs" sur les propositions d'Atok (cf. #1194 1195 1196)
=> vincent59 y travaille... cool

vincent59 a écrit :

Pour la 1194, il y a plusieurs trucs : ombre autour de la page, c'est McPeter qui peut nous faire ça proprement. Maintenant, c'est plus facile à faire en largeur fixe qu'en fluide.
Pour le logo, ça ne doit pas poser de problème technique, c'est surtout un problème de licence / droit d'utilisation à mon avis

McPeter a trouvé une technique pour le #1194... qu'il nous proposera en ligne lundi prochain

McPeter a écrit :

en ajoutant un div global supplémentaire (autour du div id=page) je peux m'approcher de cet effet d'ombrage

b) voir avec les codeurs pour résoudre le soucis pour les thèmes dont la police d'écriture est claire (cf. #1202)
=> McPeter a la solution ...

McPeter a écrit :

forcer les couleurs :
input, textarea, select, option{ color:#000; background-color:#FFF; }
dans mon init.css

A l'ordre du jour la semaine prochaine ?

1) avancement du codage de la page d'accueil du site
3-a) test « en live » sur les propositions d'Atok (cf. #1194 1195 1196)
3-b) test « en live » pour résoudre le soucis pour les thèmes dont la police d'écriture est claire (cf. #1202)
5) avancer sur le Planet (si Poupoul2 est présent) … ou sur les autres mockups restant à réaliser (avec Julientroploin & co...)

Dernière modification par tshirtman (Le 01/03/2010, à 12:16)

xabilon · Le 23/02/2010, à 03:18

Bon, petit test des couleurs des autres variantes des CSS.
Kubuntu-fr
Xubuntu-fr
Edubuntu-fr

C'est juste pour voir si les remplacements de couleurs sont lisibles et correspondent bien aux mockups.
Ces couleurs seront utilisées sur les autres sections du site (wiki, planet, forum ...)

Dernière modification par xabilon (Le 23/02/2010, à 23:27)

sam7 · Le 23/02/2010, à 10:31

au niveau des couleurs, ça me semble pas mal
par contre, il faudrait recentrer le "téléchargement" au dessus de "publication"
afin d'élargir la colonne de droite à 33% comme discuté hier soir

xabilon · Le 23/02/2010, à 13:33

Là c'est que pour les couleurs.
Par exemple, pour les tailles de polices > 15, le bas du menu Kubuntu présente une couleur bleue trop claire.
J'ai pas le temps là, mais je corrigerai ça en fin d'après-midi

kinouchou · Le 23/02/2010, à 16:06

ça rend bien dans les 2 couleurs

Julientroploin · Le 23/02/2010, à 19:38

ça rend plutôt bien!
Reste le soucis des lignes qui séparent le menu et l'étiquette, qu'il faut retravailler.

Dernière modification par Julientroploin (Le 23/02/2010, à 19:46)

sam7 · Le 23/02/2010, à 22:58

et voilà, j'ai actualisé & réorganisé le premier post ici : http://forum.ubuntu-fr.org/viewtopic.php?pid=3220778#p3220778
dites-moi ce que vous en pensez

& quand on parle de réorganisation & actualisation ... voici mes observations concernant la page du projet http://doc.ubuntu-fr.org/projets/design2009 qui est justement en cours :

- dans avancement, il serait souhaitable de mettre la petite phrase suivante :
"Nous espérons être prêt avant la sortie de Lucid Lynx."

- dans mokups en cours ... concernant le planet : mettre poupoul2 & non poupoul

- dans fichiers sources, il serait judicieux d'ajouter les sources données par McPeter hier soir lors de la réunion

- dans compte rendu des meetings IRC : ajouter les liens que j'ai placés dans le #1 http://forum.ubuntu-fr.org/viewtopic.php?pid=3220778#p3220778

- dans l'équipe du projet : rajouter les nouveaux contributeurs ... il en manque quelques uns (qui se reconnaitrons ...) et éventuellement préparer une page "personnelle" pour ceux qui n'en ont pas...

au fait, qui y travaille actuellement sur cette page ? poupoul2 je crois ?

xabilon · Le 23/02/2010, à 23:28

J'ai rajouté Edubuntu (voir post 116)

sam7 · Le 24/02/2010, à 12:11

c'est pas mal ... ... avec les mêmes observations que post #117

YannUbuntu · Le 25/02/2010, à 09:13

Bonjour à toute l'équipe
FullCircle Magazine est d'accord pour que l'on utilise leur logo.

kinouchou · Le 25/02/2010, à 10:13

pour edubuntu ça permet d'avoir une page pas "trop" rouge ce qui est assez reposant
ça rend vraiment chouette

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#101 Le 22/02/2010, à 03:31

Re : revoir l'esthétique du site (2)

#102 Le 22/02/2010, à 08:56

Re : revoir l'esthétique du site (2)

#103 Le 22/02/2010, à 09:35

Re : revoir l'esthétique du site (2)

#104 Le 22/02/2010, à 10:27

Re : revoir l'esthétique du site (2)

#105 Le 22/02/2010, à 11:03

Re : revoir l'esthétique du site (2)

#106 Le 22/02/2010, à 11:19

Re : revoir l'esthétique du site (2)

#107 Le 22/02/2010, à 13:05

Re : revoir l'esthétique du site (2)

#108 Le 22/02/2010, à 14:18

Re : revoir l'esthétique du site (2)

#109 Le 22/02/2010, à 14:39

Re : revoir l'esthétique du site (2)

#110 Le 22/02/2010, à 15:06

Re : revoir l'esthétique du site (2)

#111 Le 22/02/2010, à 15:06

Re : revoir l'esthétique du site (2)

#112 Le 22/02/2010, à 15:30

Re : revoir l'esthétique du site (2)

#113 Le 22/02/2010, à 16:28

Re : revoir l'esthétique du site (2)

#114 Le 22/02/2010, à 16:34

Re : revoir l'esthétique du site (2)

#115 Le 22/02/2010, à 21:01

Re : revoir l'esthétique du site (2)

#116 Le 23/02/2010, à 03:18

Re : revoir l'esthétique du site (2)

#117 Le 23/02/2010, à 10:31

Re : revoir l'esthétique du site (2)

#118 Le 23/02/2010, à 13:33

Re : revoir l'esthétique du site (2)

#119 Le 23/02/2010, à 16:06

Re : revoir l'esthétique du site (2)

#120 Le 23/02/2010, à 19:38

Re : revoir l'esthétique du site (2)

#121 Le 23/02/2010, à 22:58

Re : revoir l'esthétique du site (2)

#122 Le 23/02/2010, à 23:28

Re : revoir l'esthétique du site (2)

#123 Le 24/02/2010, à 12:11

Re : revoir l'esthétique du site (2)

#124 Le 25/02/2010, à 09:13

Re : revoir l'esthétique du site (2)

#125 Le 25/02/2010, à 10:13

Re : revoir l'esthétique du site (2)

Pied de page des forums