[Amateur] Jojaba en HTML5 !

(reprise du message précédent)

Laurie-Anne a écrit :
Essaye de désactiver les images en laissant les css actifs. Tu seras ainsi dans un cas typique de serveur qui déconne et ne fournit pas le contenu "moins important" ou d'une connexion qui rame.

Je comprends à présent mieux ta remarque sur les images dans le code HTML ! Au moins on a l'attribut "alt" qui s'affiche dans le cas où les images ne sont pas chargées, alors qu'avec la solution des boutons avec image de fond, on n'a pas de texte alternatif.

a écrit :

L'accessibilité, ce n'est pas que pour les aveugles.

Merci de me rappeler ça, mais il est parfois difficile de se rendre compte des exactes difficultées rencontrées par les personnes souffrant d'handicaps de tous genres. Il faut que je me documente davantage sur ce sujet...

kustolovic a écrit :

2) Texte trop serré, l'espace interligne se confond avec l'espace intermot.
3) Gestion des espace mal gérée. Beaucoup de textes et d'éléments sont trop collés à un autre. Cela gène la lecture mais aussi la compréhension de la hiérarchie.

Je dois bien avouer que je ne sais pas trop comment régler ce problème. Des ressources à ce sujet, des conseils ?

Pour les ressources, comme tout ce qui concerne le graphisme sur le web, ça se situe entre nul, pauvre et inexistant.
Je suis en train de rédiger des articles à ce propos, mais ce n'est pas encore sorti

En attendant, même si c'est un raccourci pas satisfaisant, un interligne de ~120% de la taille de texte est un défaut qui fonctionne souvent bien. Pour ce faire

* {
  line-height: 1.2em;
}

(les styles par défaut utilisent en général line-height: normal, normal étant une obscure valeur gérée par le navigateur de manière interne et pouvant osciller entre 1 et 1.2em selon les navigateur/os/taille de police etc.)

Pour la gestion des espaces (l'interligne en fait partie). Il y a tout d'abord des gros problèmes. Sur ta page d'accueil, il y a une petite image flottant à droite sur tes résumés d'articles. Cette image touche directement le texte, il n'y a rien de plus inconfortable (un bon vieux margin en css). Pour le reste, ajouter un peu d'espace, éviter les textes trop collés dans des boîtes, etc.
Voici des petits exemples passés à la moulinette firebug:

kustolovic a écrit :

* {
  line-height: 1.2em;
}

(en fait éviter les unités dans le line-height c'est bien aussi : line-height: 1.2 fait le job)

Oups, merci de l'info, comme on peut avoir loupé des choses… En fait sans unité on peut du coup faire simplement

body {
  line-height: 1.2;
}

Le seul problème c'est à la lecture. C'est horrible, à croire qu'un auteur de ligne est un ratio de chose indéterminée comma dans ms-word…

Bon voilà, j'ai un peu progressé et mis les modifications en ligne. C'est fou comme un line-height donne déjà plus de lisibilité. Dis-moi quand tu auras écris ton article, je suis impatient d'en apprendre davantage à ce sujet. J'ai modifié la catégorie listant mes sites favoris (4e onglet), j'ai "allégé" la boîte d'info à droite, j'ai modifié un peu les boutons de navigation,...
J'aime bien le résultat. D'autres commentaires à faire.
Je me lancerai dans la confection d'une css pour écran dont la largeur est inférieure à 1024px plus tard.
Modifié par jojaba (23 May 2012 - 16:44)

Bonjour à tous,

Du nouveau sur mon site. J'ai ajouté une petite fonctionnalité javascript permettant de réduire la boîte d'information à droite et ainsi de profiter de la plaine largeur pour le contenu. Ça fonctionne apparemment pour ie 7, 8, 9 et les autres navigateurs.
Je suis en trian de finaliser l'élaboration d'une feuille de style pour largeur d'écran inférieure à 1024px et comme media queries n'est pas compris par ie7 et 8, je trouvais que cette petite fonctionnalité pouvait être utile (si j'ai bien compris, les windows phone fonctionnent sous ie 7).
En ce qui concerne la feuille de style pour petite largeur d'écran, j'ai ouvert une nouvelle discussion : http://forum.alsacreations.com/topic-18-62064-1-Amateur-Jojaba-pour-petite-largeur-decran.html
Modifié par jojaba (29 May 2012 - 06:27)