[spip-dev] Re : Si la dist était moins moche...

Bonjour,

Si vous avez des sites qui tournent avec la nouvelle dist SPIP 3 et de vrais
contenus, je suis preneuse de retours critiques.

On peut tout simplement utiliser gmrbl.eu pour regarder cette nouvelle dist...

Je viens juste de jeter un œil et un premier problème me saute aux
yeux : cette nouvelle dist ne tient pas dans un écran de 800px de
large :frowning: (1000px mini¹... habitude de webdesigner que je trouve
contraignante à l'heure où les appareils avec des résolutions de 800px
se multiplient... sans parler de ceux qui, comme moi, souhaitent
utiliser plusieurs fenêtres juxtaposées).

Pour le reste, je ferais un examen plus minutieux ce WE.

Merci en tout cas pour les efforts !

¹ En fait c'est 1017px mini chez moi (FF 5.0.1 sous Linux/KDE)

On peut tout simplement utiliser grml.eu pour regarder cette nouvelle dist...

salut,

je viens de mettre à jour http://grml.eu
Romy est en train de bosser dessus, si vous avez des remarques c'est le moment .
Vous pouvez aussi passer lui faire un petit coucou et/ou faire cos
remarques en direct sur irc ( http://spip.net/irc )

Quelques remarques suite à coup d'oeuil sur la page
http://grml.eu/spip.php?article1#forum10

Etant un peu néophyte en web 3.00, je ne perçois pas bien la démarche
alors excusez l'impertinence probable et l'inadéquation possible de mes remarques.

Le formulaire en bas de page pour déposer un forum est joli et estompé très doux,
et il a un joli bouton tout doux et un peu arrondi aussi.
"On" aimerait bien que les boites de forums soient aussi jolies et aussi douces
(mais le bleu des titres de forums est un peu délavé sali, pas très beau)
et notamment les "Répondre à ce message"
(qui là sont taillés à la serpe et au plus prés sans padding !)

Le rouge sang du hover des titres de forum rend leur texte illisible voir douloureux
le temps du hover.

Le haut de page est pas très compréhensible, enfin précisément la 2ème ligne,
qui commence en répétant ce qu'il y a écrit juste au dessus
(le titre du site mais en petit et sur fond grisé)
et qui poursuit par du vide après une séparation verticale,
tout cela apparaissant fort mystérieux.

JLuc

Ce n'est pas mystérieux, si tu mets ta souris dessus, tu t'aperçois que c'est le nom de la rubrique 1, donc c'est le menu principal en haut.

salut,
je sais pas si c’est encore le temps de la discussion… mais je m’exprime
perso je trouve très bien comme ça, sans les rayures du fond (pour la page connexion ça va ;o), l’ombre pourquoi pas, c’est pour qu’il y ait quelque chose, tout ça reste sobre et très joli, les tailles de typo sont très ordonnées ce qui structure l’information d’une manière sobre et efficace
les couleurs des liens inversées au survol ça fonctionne, juste pour “.forum-chapo .forum-titre a” on reste en gris #333 sur le fond rouge : je trouve pas très lisible
le fond coloré sans padding ne me choc pas du tout, c’est ça la sobriété
pour moi le pied de page est un peu gros, mais juste un peu

le soucis : il me semble qu’il faudrait une solution pour si jamais le menu est plus large avec plus de rubrique ou des titres plus longs, là c’est pas très heureux
Capture.png
avec les sous-rubriques dans le menu vertical à droite c’est bien
j’ai “téléversé” des logos, j’avais jamais fais ça avant… ;o)
les logos ont vraiment la taille de logo (petit)
par contre les vignettes des images du portfolio sont recadrées, ça me dérange un peu dans la dist, il me semble que par défaut on devrait voir toute l’image, on choisi ensuite si certains sites on besoin de recadrage…
ensuite les forums, j’aime assez quand les éléments du formulaire sont regroupés dans un fond gris léger ou quelque chose d’autre, mais regroupés visuellement

voilà mes impressions, bravo pour cette belle maquette, l’exercice est très délicat, et là c’est réussi
;o)

tout cela apparaissant fort mystérieux.

Ce n'est pas mystérieux, si tu mets ta souris dessus, tu t'aperçois que c'est le nom de la rubrique 1, donc c'est le menu principal en haut.

Oui mais quand même... JLuc a raison : s'il faut consulter l'URL pointée pour y comprendre quelque chose, ça ne va pas !

En fait, il faudrait ne pas afficher la barre de nav lorsqu'il n'y a qu'une rubrique à la racine du site (ce qui est le cas des blogs, comme par exemple SpipClear si je ne me trompe pas ?). Je ne vois pas encore comment faire ça (intelligemment et proprement) en boucle SPIP : je rêve d'un critère {total>1}, ou un truc du même genre, qui ne jouerait la boucle que si son nombre de résultat est supérieur à un... Ça serait utile en d'autres endroits, par exemple dans le portfolio. Par contre j'ai prévu le CSS pour que ça s'affiche joli tant avec que sans cette barre de nav.

Une idée ?

Voilà, j'ai fait un grand tour-refonte de la dist dernièrement : elle a beaucoup changé, visuellement du moins. SPIP offre un traitement très respectueux des règles typographiques, ce qui est très appréciable et assez rare pour mérité d'être loué. J'ai voulu que ça se voit, que la dist reflète cela en s'affichant très « typo », soignée, respectant notamment une grille horizontale (interlignage), nativement.

Ça commence à se stabiliser, c'est donc le moment de l'essayer, sur des vrais sites, avec plein de vrais contenus dans tous les sens, et de faire vos retours pour corriger ce qui merdoie.

J'ai travaillé à l'aveugle, sans tester dans tous les navigateurs => merci de signaler tout bug d'affichage.

Il reste aussi des chaînes de langues à corriger, parfois cachées dans des titles, les vicieuses !

Merci pour vos retours :slight_smile:

-- Romy

* romy@rezo.net tapuscrivait, le 07/09/2011 17:21:

entre parenthèses, un message ne passe pas sur la liste, j’y ai mis deux images c’est à cause de ça ?
elles sont pourtant très légères, il y a une limite de ce type ?

entre parenthèses, un message ne passe pas sur la liste, j'y ai mis deux
images c'est à cause de ça ?
elles sont pourtant très légères, il y a une limite de ce type ?

Oui, tu as 4 messages bloqués pour dépassement de cette limite, qui est de 40 Ko

2 mails à 160 Ko, 2 mails à 100 Ko

le mieux est de mettre les images quelques part sur un site et coller
les liens dans le corps de tes mails.

a+

Au risque de fausser le contexte... je préfère éviter.
J'ai finalement opté pour une solution de surface, en CSS :
http://zone.spip.org/trac/spip-zone/changeset/51544/core/plugins/dist

-- Romy

Yo,

La refonte de la dist est finie ou quasiment (enfin, si ça vous plaît comme ça, bien sûr). Puisque la question se posait, et comme je ne vais plus avoir le temps pendant les semaines à venir, j'ai noté ici pour mémo ce qu'il reste à faire sur la dist avant la sortie de SPIP3 :
http://www.spip-contrib.net/3922?var_mode=preview

Et aussi, pour mémo, les sites qui ont plus ou moins inspiré cette nouvelle dist :
http://www.spip-contrib.net/3929?var_mode=preview

-- romy

Bonjour,

A propos de fonctionnalités...
  y aura-t-il un raccourci dans la boite d'édition pour écrire le texte qui suit *en dessous* de toutes images précédemment mises en |right ou

left (donc en float:right ou float: left) ?

Un raccourci qui ferait un
<hr style='clear: both; visibility: hidden'>

?

Merci

bonjour,

Bonsoir,

J'ai créé un filtre qui remplace des chaines particulières par le code
adhoc.

J'ai choisi :
§<-- pour clear:left
§--> pour clear:right
§<--> pour clear:both

le symbole § faisant bien penser au paragraphe.
Mais ce symbole n'est peut-être pas international...

Puis-je suggérer (respectivement :

  §<
  >§
  §

Ce qui sera plus léger, si les raccourcis n'étaient pas interprétés.
On pourrait ainsi, par exemple, n'utiliser que le dernier, et en
l'absence du script, ça serait joli quand même :slight_smile:

On devrait mettre ce genre de petits trucs dans un plugin dédié aux
améliorations typo/raccourcis, non ?

-- romy

Je vote POUR !

La prévisualisation des commentaires est génante pour beaucoup de mes utilisateurs… c’est toujours délicat, et meme sur la v3, cette notion de bloc orange pointillé est toujours presente, rien de plus soft, plus aérien et mieux intégré ?

Une fois les commentaires validés, la différence entre le texte principale et les commentaires ne semble pas assez marquée.

Sinon par ce qu’il y a du bon et du très bon :
On commence a voir du tres jolie, simple et agreable.

Bon boulot.

aRT

03/10/2011, Stéphane:

>> J'ai choisi :
>> §<-- pour clear:left
>> §--> pour clear:right
>> §<--> pour clear:both
>>
>> le symbole § faisant bien penser au paragraphe.
>> Mais ce symbole n'est peut-être pas international...
>
Puis-je suggérer (respectivement :

  §<
  >§
  §

J'ai rien compris à vos histoires de §< etc, mais au cas où je voudrais
souligner que presque aucun pays (déjà aucun des pays que je connais, à
part la France) n'a pas le caractère § sur le clavier.

Bonjour,

03/10/2011, Stéphane:

J'ai choisi :
§<-- pour clear:left
§--> pour clear:right
§<--> pour clear:both

le symbole § faisant bien penser au paragraphe.
Mais ce symbole n'est peut-être pas international...

Puis-je suggérer (respectivement :

   §<
   >§
   §

J'ai rien compris à vos histoires de §< etc, mais au cas où je voudrais

Ça ça m'inquiète... :slight_smile:
Car il y a un besoin identifié...

souligner que presque aucun pays (déjà aucun des pays que je connais, à
part la France) n'a pas le caractère § sur le clavier.

Je m'en doutais...

Donc

!<--
!-->
!<->

Oups,

Bonjour,
j'ai un peu regardé la dist de spip3 beta et fais quelques tests sur :

- Formulaire recherche :
- remplacement du bouton type=submit par un type=image
- label retiré et placé dans le texte du champ (en terme
d'accessibilité, si le champ est pré-rempli, le label n'est pas
obligatoire car il sert à lier le champ et le texte qui informe sur sa
fonction)
- du coup, pour "faciliter" l'utilisation du champ, ajout d’un JS pour
effacer "Rechercher" au focus

- Positionnement titre / slogan / formulaire recherche
- .header #logo à width=70% (suppression du padding-right de .header)
pour garder le slogan sur une ligne qui passe sous le formulaire de
recherche (c'est plus joli je trouve)

tout ça est visible là :
http://dev.webdesigneuse.com/spip/Tests-en-tete-Dist-spip3beta

si cela vous va, je peux envoyer tout ça sur la zone : modifications des
CSS layout et style et formulaires/recherche.html, ajout de l'image
submit dans css/img/

Question :
un Js est inclus dans formulaires/recherche.html que je ne sais pas où
placer...