Pages :
(reprise du message précédent)

Bonjour,

@Philippe : pas de soucis Smiley cligne

@Julie : Merci de ton commentaire ! Je vais voir ce que je peux faire au niveau de l'interlignage. ça m'avait paru bien, je vais attendre d'autres avis !

Concernant la bande bleue, je n'y avais pas pensé, je vais voir ce que ça donne !

Merci encore.

Johan Smiley ravi
Salut Johan,

Je trouve l'avis de juliesunset intéressant. Peut être en mettant un gris pour le footer ? À tester aussi en bleu ?

Concernant la page 2, je dirais que tes blocs textes sont un peu "lourds" (bold + interlignage…). En augmentant l'interlignage, en utilisant une typo standard (non bold) et en réduisant un poil la taille du texte, tu obtiendras quelque chose de plus léger et agréable à lire.
N'hésites pas à faire des retours à la ligne, d'en sauter et de bien marquer les paragraphes, un texte aéré est plus agréable à lire q'un gros bloc compact.

Pour le sommaire, le petit cadre sur le côté me pose problème. Déjà placé à droite, c'est bizarre. Je ne pense pas que ça serait mieux à gauche, trop imprimerie et pas assez web. De plus ça pose problème avec le paragraphe qui se glisse dessous. Les deux lignes entre le sommaire et la photo, c'est pas beau et ça casse le paragraphe. Il faut éviter les remplissages avec des lignes ou des mots qui ont l'air isolés.

N'hésites pas à placer ton sommaire sur toute la largeur du bloc, même si tu as du blanc sur le côté. Vire le cadre gris. Pour marquer ton sommaire, tu peux utiliser une typo bold de couleur (bleu foncé, vert RATP, couleur de la ligne métro ?) avec des ancres qui amènent à la rubrique cliquée.

Plutôt que de faire des petits cadres, tu peux écrire sur toute la largeur de la colonne (en gardant les marges latérales) et ne structurer ton texte qu'en jouant sur la taille de la typo, sa couleur et sa graisse (bold…).

Il faut aérer en hauteur et décoller les textes des photos.

Il est aussi d'usage dans la mise en page presse magazine, dans les journaux (et aussi le web) d'utiliser des chapeaux. Un chapeau est un texte très court d'introduction (court résumé, intro…) entre 3 et 5 lignes, qui invite le lecteur à lire la suite. Le chapeau (souvent écrit chapô) est généralement écrit après le titre, dans une typo plus grande et plus grasse que celle du/des paragraphe(s) qui suit(vent), mais moins grande que le titre.
Tu peux donc avoir tes titres en grand/bold/couleur, tes chapeaux en un peu plus grand que le paragraphe/bold/couleur ou noir, et enfin le paragraphe en petit, noir, regular (pas bold).

Tu peux aussi jouer sur les capitales, par exemple pour le titre principal. À tester ?

On peut aussi trouver dans les longs textes entre deux paragraphes une courte phrase sur moins d'une ligne qui invite le lecteur à entrer dans le texte et donne une idée du contenu qui suit. Ces quelques mots sont en général plus gros et bold, à l'image du chapeau.

Quelques exemples trouvés en 2 secondes sur le web :

Pour le chapeau :
Titre principal (FILES) - Titre (DACTYLO…) - Chapeau (Au tour de Dactylo d'ambiancer…) - Paragraphe (Dactylo rend tes nuits plus belles…)
http://wadmag.com/words/files/dactylo-mix-4/

Pour la taille du texte, sa graisse et son interlignage (exemple à titre indicatif, choisir vue par jour dans la bande grise, second picto) :
http://www.macbidouille.com
(Ici il n'y a pas de chapeau puisqu'il s'agit d'une mise en page par brèves. Mais on peu noter la hiérarchisation du texte uniquement par la taille, la couleur et la graisse. le texte courre sur toute la largeur. Et est bien aéré.

Autre exemple pour la taille des typos : la page d'accueil d'alsacréations ? À toi de trouver le juste équilibre. Smiley cligne



Sur la page 1, je trouve que tes blocs gris clais sont trop collés, il doit rester de la marge entre les ronds de stations de métro et les blocs du dessus. Les noms sont écrit trop gros et placer un article avant (Le) prête à confusion. Le titre du bloc gris foncé au dessus (La ligne 2) est écrit plus petit, ce qui est largement assez gros. J'ai l'impression qu'il y a une typographie de trop. Dans le bloc gris foncé les chiffres restent sur la même ligne (1900). Dans les blocs gris clair, il y a des décalages verticaux (MP89, ME77…) c'est pas très joli et pas RATP.

Le bloc gris foncé est à désaturer et peut être éclaircir.


Je trouve le texte du footer un peu gros. Les pictos Twitter et Facebook devraient être en harmonie avec tes pictos du haut. Ce qui n'est pas encore le cas.


Les pictos en haut sont encore perfectibles. Aide toi de ceux que j'avais dessiné dans le schéma que je t'avais posté il y a quelques semaines. Ton enveloppe n'est pas jolie, ta loupe trop petite et le M dedans est trop rikiki. Tes pictos ne vont pas ensembles. L'idéal serait de dessiner tes pictos sur un logiciel vectoriel de type Illustrator. Dans Pixelmator il me semble qu'il y a des outils vectoriels qui permettent de dessiner des pictos.

Le fond brique est flou et très dégradé, c'est pas très joli. As tu testé avec le fond que je t'ai joint précédemment ? Si tu veux le rendre plus neutre au niveau du jaune il ne faut pas éclaircir, mais désaturer.

Voilà en gros pour le moment. En attendant la version intégrée ? Smiley cligne

Bon courage à toi. Smiley smile
Modifié par spongebrain (07 Jul 2013 - 07:27)
Bonjour Philippe !

Merci de ta réponse. En gros les derniers réglages sont plutôt niveau police de caractères et espacement. Je suis en train d'intégrer, et pour l'instant je m'intéresse à la graisse des polices. ayant prévu de ré-écrire +/- la moitié des articles, j'ai commencé par celui sur la ligne 1.

Dans la maquette, la police était trop épaisse, malgré le fait que ce soit Aller Regular et non Aller Bold. J'ai donc essayé avec la déclinaison Aller Light. C'est beau et sur Mac ça s'affiche très bien :
http://gilawhost.com/images/u3w6eyxt.png
En plus grand : http://gilawhost.com/images/u3w6eyxt.png

Mais sur PC par contre, les T haut de casse sont rognés et se transforment en I haut de casse, les E haut de casse se transforment en L haut de casse...
http://gilawhost.com/images/6aipvshq.png
En plus grand : http://gilawhost.com/images/6aipvshq.png

Savez vous à quoi c'est dû ? Cela vient-il de Windows, de Chrome... ? Smiley confus

Merci d'avance pour votre aide !

EDIT : Ps : Le fond est dégradé sur la dernière maquette à cause de l'hébergeur Smiley cligne
Modifié par Johan_Clbrt (14 Jul 2013 - 16:11)
Salut Johan,

En effet, c'est embêtant sur écran windows. Surtout que sur mac c'est très joli. As tu mis un fond blanc à ton texte ? Cela vient peut être du format de la typo ? As tu testé sur différents navigateurs ? Si quelqu'un a une idée ?

Il s'agit de cette typo ?
http://www.fontsquirrel.com/fonts/Aller

Tu peux aussi choisir une typo standard pour le texte courant, le temps de trouver une solution ou une typo alternative (tu es allé voir sur google fonts ?). Au moins tu es sûr que ça passe bien partout et qu'elle se déclinera bien en "regular", "bold"…
Là le texte rend bien sur mac, mais sur windows les caractères sont en effet rognés, en petit la typo est méconnaissable en "bold", en "light" elle a l'air "ultra light" et peu lisible. On peut se poser la question de l'intérêt de garder cette typo pour le texte courant.
Bonsoir,

oui, c'est bien cette typo. Pénible quand même cette différence d'affichage... Est-il possible de charger un @font-face que si l'OS est Mac OS X. Comme ça si la font n'est pas chargée sur Windows l'ordinateur affiche la font en 2e position, par exemple Trebuchet MS...

On voit bien que la font est absolument pixelisée sur Windows. Elle ne ressemble à rien en bold, celle dans le cadre jaune est plus fine que sur Mac, ça saute aux yeux sur les miniatures :
http://gilawhost.com/images/kq8hwy20.png

Je n'ai la light qu'en True Type, je vais essayer de trouver un outil pour convertir en OTF, EOT et SVG...

Je vous tiens au courant Smiley cligne
Salut ! Smiley cligne

Oui je viens de voir ce plan détourné, c'est vachement sympa. Je trouve que l'on trouve pas mal de choses sympas concernant le métro sur le net. Des #Revues (métropolitaines) du web ? Smiley lol

Bon sinon j'ai mis ma font light en eot, svg, woff et bien sûr ttf, je viens de tester sur ma MV, il a un léger mieux, mais bon, on a des espèces de contours verts autour des lettres Smiley confus

Ça doit venir de Windows. Merci cro$oft, déjà qu'avec IE on a pas mal de soucis... Smiley confused

http://gilawhost.com/images/jx7w2q0p.png
Taille réelle...

Ça commence déjà à m'énerver, d'ici à ce que je mette du Trebuchet MS sur tous les appareils Windows y'a plus qu'un pas (le code pour y parvenir Smiley lol )

Je pense que c'est généralisé, suffit de comparer le rendu Mac/Pc de Source Sans Pro, par ex sur le site du zéro... Smiley decu

Enfin bref, des avis ?

Johan
À ton avis, pourquoi…
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif
… a-t-il autant de succès pour le texte courant ? Smiley lol

Y compris sur le site ratp.fr ? Smiley cligne
Bonsoir,

j'ai pas beaucoup avancé, je complète le menu des lignes mais c'est looong... Plus que 11 lignes à mettre... Cool... Smiley lol

http://beta-blogdumetroparisien.blogspot.fr/

J'ai essayé (pas adopté ! Smiley murf ) un header avec un logo en police "Light". J'aime assez, plus que ce qu'il y avait avant en tous cas ! Smiley biggrin

Manque la baseline, je fais mes essais sur Pixelmator... Smiley cligne

J'ai mis un ruban bêta, aussi, au cas où des visiteurs arrivent sur le site dev... Smiley biggrin

Me reste à :

• Terminer de remplir le menu lignes (plus que deux tiers ! Smiley lol )
• Faire le menu Matériel roulant
• Faire le menu Divers
• Ré-écrire +/- 3/4 des articles et ajouter dans les autres le header asymétrique et coloré
• Corriger le problème de typo abîmée sur Windows (et linux ?)
• Et en bonus, remplacer les icones du menu "lignes" en du HTML5/CSS3 pour charger + rapidement le site ! Smiley lol

À Noël 2014 ? Smiley sweatdrop Smiley rolleyes Smiley biggol

Au moins j'aurai du boulot cet hiver ! Smiley biggthumpup Smiley wingol

Johan Smiley cligne
Modifié par Johan_Clbrt (06 Aug 2013 - 01:11)
Bonjour !

Le menu lignes est presque finalisé ! Smiley lol Smiley lol

Je vais attaquer le menu lignes ! Smiley biggrin
Modifié par Johan_Clbrt (04 Aug 2013 - 02:20)
Salut !

Le menu a été testé sur :

• FF, Chrome, Safari, Maxthon sur Mac
• Chrome et FF sur PC
• Navigateur, Chrome et Maxthon sur Android
• Safari, Chrome sur iOS.

Pas testé sur IE (pas envie de me démoraliser ! Smiley lol ) ni WP...

J'ai aussi rajouté le bandeau "Cliquez sur un numéro de ligne pour afficher son menu".

Ça va dans l'ensemble, me reste à corriger quelques détails, genre la flèche pas bien justifiée...

Il faut que j'aère un peu les blocs, ils sont pas assez espacés.

Sinon j'ai commencé à réécrire un article, sur la Ligne 2.

Voilà voilà ! Smiley smile
Bonjour,

mauvaise nouvelle pour ce 100e post... Smiley bawling J'ai eu un problème de disque dur, j'ai donc fait "réparer le disque" dans l'Utilitaire, et savez vous comment ça répare le disque ? En effaçant TOUT ce qu'il y a dessus. Smiley eek

Bref, on est partis pour 24h de re-téléchargement de logiciels, fichiers, etc... Smiley fache



En plus je n'ai rien avec moi, pas de dd externe, pas de carte SD, clé USB, etc... Smiley sweatdrop
Salut,

juste pour vous dire que je continue de rédiger les nouveaux articles. Mais je ne laisse pas tomber le développement du nouveau blog non plus ! Smiley cligne

A+ Smiley smile
Pages :