Les petits pixels...

...font les grands design !

a marqué ce sujet comme résolu.

J’ai oublié la phrase la plus importante :-° . En fait, quand on lis un sujet sans être connecté, ça donne l’impression que le sujet a été résolu.

Helmasaur

Chez moi, le bandeau « Vous devez être connecté » se situe bien en dessous du sujet.
J’ai l’impression que c’est le fond du bandeau de couleur vert qui prête à confusion ?

Par ailleurs, il y a un gros bouton « Connexion » à droite du bandeau, ce qui clarifie sa fonction.
Je préfère laisser le design actuel, à la limite en changeant la couleur de fond du bandeau d’en bas.

Je joue sur des détails, mais l’icône de permalien d’un titre (dans une section d’un tuto que je rédige) est collée au texte (une petite marge entre les deux serait pas mal), n’a pas de titre pour expliquer son rôle/utilité et n’est pas retina (le rendu est donc pixellisé/flou sur un écran haute résolution). :D

Aperçu de l'icône en question dans le contexte
Aperçu de l'icône en question dans le contexte

Bonjour !

J’étais sur cette page du tutoriel sur tkinter, puis pour commencer le tutoriel, le plus naturel me semblait de cliquer sur 1. Boucle événementielle. Petit hic, je suis redirigé vers un paragraphe d’explication plutôt que de tomber sur l’introduction.

C’est légèrement perturbant, puis, ça oblige à remonter plus haut pour lire l’intro, un effort "inutile".
Est-ce un bug spécifique à ce tuto ? Je ne l’ai pas vu autre part.

C’est normal, l’introduction dont tu parles correspond au chapitre « Programmation événementielle avec tkinter ». Tu tombes dessus en cliquant sur le titre du chapitre.

Mais j’admets que ce n’est pas forcément clair.

Salut à toutes et tous,

Voici la propriété font-family utilisée sur le site : Merriweather,"Liberation Serif",Times New Roman,Times,Georgia,FreeSerif,serif. Voici le rendu avec Merriweather du billet le plus récent :

le billet avec Merriweather, la police par défaut pour le corps
le billet avec Merriweather, la police par défaut pour le corps

Et maintenant avec les polices bloquées, mon navigateur utilisant Liberation Serif parce que je la possède localement :

le billet avec Liberation Serif, une police de repli
le billet avec Liberation Serif, une police de repli

Le rendu est modifié par la police qui, à taille égale (font-size), apparaît plus petite. J’ai essayé quelques autres polices serif communes et il semblerait que ça soit Merriweather qui sorte du lot en étant plus grande à taille égale1. J’aime bien la famille Liberation mais elle n’apparaît pas adapté comme police de repli après Merriweather. Il faudrait peut-être revoir cette liste de polices d’écritures ?


  1. confirmé par la description de la police sur Google Fonts

Merci de remonter ça. Il faudrait effectivement une première police de repli qui soit plus adaptée, ou mieux, utiliser la police avec empattements par défaut du système en secondaire (et idem pour celles sans empattements et à chasse fixe).


(Tout ce qui suit est hors casquettes et n’engage que moi.)

Plus j’y pense, plus je pense qu’on devrait utiliser les polices systèmes (tout court) pour l’interface, et une police peut-être plus adaptée pour le corps du texte (Charter ou similaire ?) et pour le code (JetBrains Mono ? mais sans ligatures activées).

Il y a toute une réflexion à faire sur les polices.

+1 -0

J’ai bien peur que ça ne soit pas si facile, étant donné que Merriweather est celle qui apparait plus grande que le reste (incluant les polices par défaut sur les systèmes que j’ai testé, debian standard & Firefox qui utilisent la famille Liberation et Windows & Firefox qui utilisent Times New Roman).

Il ne me semble pas y avoir la possibilité de définir une taille de police dépendante de la police utilisée (j’ai regardé du côté de @font-face et la propriété CSS font).

Il y a quelque chose que j’ai loupé ? Je ne vois pas de solution plus simple que remplacer Merriweather. Est-ce que le problème en vaut la peine ? Si c’est envisagé, je propose d’éviter de charger une police et plutôt utiliser les polices intégrées comme indiqué par le lien fourni par Amaury. Par la même occasion, le sujet de Google Fonts peut être abordé ? J’imagine qu’il y a déjà eu des discussions à ce sujet.


Édit après lecture de ton édit :

Je suis pour l’utilisation des polices systèmes. J’irai jusqu’à proposer de les utiliser pour tout le contenu mais ça demande des tests sur les configurations par défaut des principaux navigateurs, sous les principaux OS. Peut-être un peu trop extrémiste pour beaucoup.

La question du CDN à utiliser pour livrer les polices est réelle cependant, forcer à tous une connexion à Google n’est pas sein à mon avis. C’est plus une question d’éthique que technique cependant.


J’aime beaucoup Practical Typography mais ce site a vraiment un soucis avec la taille des polices. Du 22px pour le texte. :o Et un site de typographie qui définit sa taille de police en pixels…

La question du CDN à utiliser pour livrer les polices est réelle cependant, forcer à tous une connexion à Google n’est pas sein à mon avis. C’est plus une question d’éthique que technique cependant.

tleb

D’autant plus que les CDN ne présentent pas toujours un gros gain.

J’ai vu passer quelques articles récemment au sujet des fonts, certains recommandent justement de les héberger avec le reste (parce qu’il y a aussi des contraintes de connexions multiples, de résolutions DNS en plus, etc.).

Hello,

Ça a peut être déjà été discuté quelque part, mais pourquoi le code inline est en rouge plutôt que noir ? Ça le fait ressortir inutilement, et ce n’est pas très beau. Par exemple sur ce message, tous les petits bouts de code ressortent beaucoup alors qu’ils ne sont pas spécialement en emphase. C’est encore pire avec le fond vert. Le noir évite une emphase aussi forte, comme ce que fait github (j’ai pris le premier message sur le dépôt du site).

+4 -0

Sur mobile, toutes les listes de vignettes ne sont pas cohérentes au niveau des marges. C’est normal ? (@Amaury ?)

Sur la bibliothèque ou la page d’accueil, il y a une marge avec le bord de l’écran :

Dans la liste "mes tutoriels" (ou "mes articles"), il n’y a pas de marge avec le bord de l’écran :

Je préfère avec marge et je me dis que ça pourrait être pareil partout.

Il y a un bug d’affichage dans le menu mobile :

Problème d'alignement du texte dans le menu mobile
Problème d'alignement du texte dans le menu mobile

La cause est le vertical-align: middle sur .js .mobile-menu .mobile-menu-link span dans le media-query mobile. Les mêmes balises ont un vertical-align: inherit en mode bureau. Je pense que simplement supprimer la règle vertical-align: middle réglerait le problème mais je ne sais pas si ça pourrait avoir un impact ailleurs. J’aurai bien envoyé une PR mais je n’ai pas d’environnement de dev installé. Le CSS concerné se trouve dans assets/scss/components/_mobile-menu.scss

Très belle mise à jour graphique en passant, bravo à ceux concernés !

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte