3247 sujets
Critiques de vos sites: code et design
@olivier C: perso, le validateur w3c me permet débuguer. Très pratique pour tout ce qui est fermeture de div oubliée, etc. Il faut relativiser les erreurs, y a des faux positifs et de vraies cochonneries. Tout cela ce ne sont que des outils, ça remplace pas encore l'homme et le savoir-faire.
Donc évidemment pas au pied de la lettre, avec recul, blabla. L'idée ça reste quand même de produire des contenus.
Pour ton site, j'aime bien le design et les textures et les polices mais pas les radius qui sont trop élevés, pas fan non plus de la dispo en block empilés pour être déjà prêts pour le responsive.
Attention au duplicate content entre la page d'accueil et les pages de catégories | archives.
Donc évidemment pas au pied de la lettre, avec recul, blabla. L'idée ça reste quand même de produire des contenus.
Pour ton site, j'aime bien le design et les textures et les polices mais pas les radius qui sont trop élevés, pas fan non plus de la dispo en block empilés pour être déjà prêts pour le responsive.
Attention au duplicate content entre la page d'accueil et les pages de catégories | archives.
jmlapam a écrit :
@olivier C: perso, le validateur w3c me permet débuguer. Très pratique pour tout ce qui est fermeture de div oubliée, etc.
Idem pour moi. Il n'y a pas longtemps, grâce au validateur, j'ai corrigé un bug sur des balises figcaption mal insérées dans une boucle php, je n'avais pas vu le bug dans mon code source...
jmlapam a écrit :
Pour ton site, j'aime bien le design et les textures et les polices mais pas les radius qui sont trop élevés...
Et oui : les radius... Maintenant que les navigateurs sont presque tous à jour sur cette fonction la mode passe au design carré (vive Windows8 !)...
Mais, j'ai essayé sous l'inspecteur avec des radius à seulement 3px et ... c'est convaincant ! Je changerai tout ça en rentrant chez moi.
jmlapam a écrit :
... pas fan non plus de la dispo en block empilés pour être déjà prêts pour le responsive.
Intéressant... Tu penserais à quoi à la place ?
jmlapam a écrit :
Attention au duplicate content entre la page d'accueil et les pages de catégories | archives.
D'une manière générale, l'affichage d'extraits de contenus sur des pages différentes ne posent pas de problème avec les moteurs de recherche comme Google. Je ne sais plus où j'ai lu cela mais j'ai pu valider cette info par l'expérience : les thèmes WordPress (qui implémentent pratiquement tous cette possibilité) ne retournent pas de problèmes sur ce point, et l'outils pour les webmasters ne me signale aucun problème de duplicate content sur ces pages, qui sont toujours aussi bien référencées (essai sur plusieurs mois maintenant).
Remarquons en outre que ma page d'accueil n'affiche que l'extrait des six derniers articles publiés, ce qui est relatif par rapport au contenu des pages de catégories et de celles des mots clefs.
Modifié par Olivier C (27 Dec 2012 - 05:31)
Olivier C a écrit :
Intéressant... Tu penserais à quoi à la place ?
Bah c'est pas vraiment du RWD puisque tu contrains à max ton design pour qu'il s'adapte au redimensionnement de fenêtre. Du coup je trouve que cela a tendance à étriquer l'ensemble. Ça manque d'espace et en général si c'est centré totalement le reste du background est peaufiné, regarde le site de Raphaël Goetter.
Bientôt on aura flexbox pour gérer le tout comme on veut sans se prendre la tête mais tu peux disposer des boîtes un peu partout. Après ce n'est qu'un avis.
Olivier C a écrit :
D'une manière générale, l'affichage d'extraits de contenus sur des pages différentes ne posent pas de problème avec les moteurs de recherche comme Google.
C'est une faille utilisée fréquemment par les spammeurs mais tant mieux si chez toi aucun souci
rodolpheb a écrit :
Concernant la navigation clavier, j'ai failli dire qu'il n'y avait pas de focus, car je distinguais à peine le survol des liens.
L'air de rien, cette petite remarque m'a bien fait bosser. Car s'il est vrai que ma feuille prévoyait bien un survol au clavier par défaut, celui-ci n'était pas toujours optimisé. Pire, j'avais disposé des clics sur des spans, mais les <a> se révèlent effectivement bien mieux accessibles.
jmlapam a écrit :
Bah c'est pas vraiment du RWD puisque tu contrains à max ton design pour qu'il s'adapte au redimensionnement de fenêtre. Du coup je trouve que cela a tendance à étriquer l'ensemble. Ça manque d'espace et en général si c'est centré totalement le reste du background est peaufiné, regarde le site de Raphaël Goetter.
Tu veux dire, ce site, où il contraint son design pour qu'il s'adapte au redimensionnement de fenêtre... (et aussi ici :Alsacreations.fr) ? Plus sérieusement je pense que tu veux parler de son laboratoire. Je ne trouve pas qu'il soit besoin de remettre en cause ce choix pour autant, mais cependant je prends en compte la remarque et modifie deux/trois trucs.
[édit du 11/01/2013 : J'ai supprimé mon petit commentaire en réaction à l'incisif "Bah c'est pas vraiment du RWD" : n'apporte rien au dialogue...]
jmlapam a écrit :
C'est une faille utilisée fréquemment par les spammeurs mais tant mieux si chez toi aucun souci
Encore faut-il le voir comme une faille. Heureusement qu'un site a encore le droit d'avoir une logique interne de structure sans être obligé de se sentir soumis à la censure...
Modifié par Olivier C (11 Jan 2013 - 01:01)
Salut 
J'aime vraiment bien. C'est très claire, l'information est visuellement très bien hiérarchisée. Je n'ai pas regardé le code, juste un peu naviguer (et lu deux trois articles).
J'aime beaucoup les typos utilisées. Par contre deux trois petites remarques/suggestions :
- Quand je lis un article j'ai deux icônes à la fin de celui-ci, une pour l'imprimer avec un picto bien claire qui nous aide à saisir de suite le message, et si on ne le comprend pas on est assisté par un title pertinent. Par contre ce n'est pas du tout le cas de l'icône à côté. Quand je regarde le picto je ne sais pas à quoi m'attendre, j'ai placé mon curseur afin de voire apparaitre une infobulle pertinente qui me mettrait la puce à l'oreille, mais rien. Quand je clique je vois que c'est pour t'envoyer un mail. Outre le manque d'affordance je ne comprend pas trop l'utilité du lien.
- Sur ta page d'accueil, tes .box.mag.module3 on une gestion typographique un peu désordonnée par rapport au reste du site. La lineheight sur le titre est immense et casse le rythme de la page. Avec un titre long (comme pour « Pourquoi « Église catholique » et non « Église universelle » ») le texte du dessous est coupé et j'ai le lien « lire la suite » qui vient par dessus le contenu.
Bon boulot en tout cas et bonne continuation !
PS: c'est une critique hien, je ne fais pas le donneur de leçon, inutile d'aller voire mon site, je ne m'en occupe plus depuis presque deux ans (et toi même tu sais, en deux ans, on en apprend des choses !
).
J'aime vraiment bien. C'est très claire, l'information est visuellement très bien hiérarchisée. Je n'ai pas regardé le code, juste un peu naviguer (et lu deux trois articles).
J'aime beaucoup les typos utilisées. Par contre deux trois petites remarques/suggestions :
- Quand je lis un article j'ai deux icônes à la fin de celui-ci, une pour l'imprimer avec un picto bien claire qui nous aide à saisir de suite le message, et si on ne le comprend pas on est assisté par un title pertinent. Par contre ce n'est pas du tout le cas de l'icône à côté. Quand je regarde le picto je ne sais pas à quoi m'attendre, j'ai placé mon curseur afin de voire apparaitre une infobulle pertinente qui me mettrait la puce à l'oreille, mais rien. Quand je clique je vois que c'est pour t'envoyer un mail. Outre le manque d'affordance je ne comprend pas trop l'utilité du lien.
- Sur ta page d'accueil, tes .box.mag.module3 on une gestion typographique un peu désordonnée par rapport au reste du site. La lineheight sur le titre est immense et casse le rythme de la page. Avec un titre long (comme pour « Pourquoi « Église catholique » et non « Église universelle » ») le texte du dessous est coupé et j'ai le lien « lire la suite » qui vient par dessus le contenu.
Bon boulot en tout cas et bonne continuation !
PS: c'est une critique hien, je ne fais pas le donneur de leçon, inutile d'aller voire mon site, je ne m'en occupe plus depuis presque deux ans (et toi même tu sais, en deux ans, on en apprend des choses !
).Bonjour Gilli,
Je repère toujours un ou deux profils un peu caustique sur les forums que je fréquente. Je me tiens à carreau, et puis vient le jour où l'on ne peut éviter un petit clash... Hormis ces profils, pas de souci.
Ça, c'est sûr...
... et qui reste au top tout de même. Je connais ton portfolio (et aussi ton blog). Une référence je trouve.
À propos : en mode resise pour mobil tu cache ton h1 en display:none, je fais pareille et Goetter aussi, mais je me demande si cela n'impacte pas le référencement Google pour mobil... (?)
Hormis ton resise au top, j'aime bien ton contrôle instantané des champs de formulaire par javascript. Il faudra que je m'y colle un jour (il y a un tuto sur Alsa, de mémoire), pour l'instant je ne fais mes contrôles qu'en php, mais de manière très fine pour donner un retour d'erreur adéquat (pas vraiment l'utilité mais pour le fun), auparavant j'utilisait les patterns d'html5, mais on ne pouvait pas personnaliser la nature de l'erreur avec cette dernière méthode. Je l'utilise tout de même, mais très partiellement (éviter les champs vides).
C'est pour faire partager l'article à un ami (je n'ai pas complété le champ d'envoi)... Pour l'icône, j'avais repéré que pas mal de sites l'utilisent pour indiquer le panel de leurs réseaux sociaux, mais j'avoue que ce n'est pas très clair, je la remplace donc par une arrobase pour l'instant (avec un title !). À terme je supprimerais sans doute cette option au profit de quelque chose de plus pérenne.
En mode connecté j'ai aussi ajouté une icône "petit crayon" qui me permet d'arriver directement sur le panel de l'article...
Exact, et là, et il y a déjà un moment que je l'ai vu... mais là, l'air de rien, ça va me demander du boulot pour reprendre cette affaire :
Comme tu peux le voir, mes box sont avec un padding interne de 20 px, mais mes images prennent 100% de la largeur d'une box. Pour compenser le padding de la box l'image se retrouve avec un margin-left de -20px et colle donc bien sur la bordure de la box. Aucun problème si le design était fixe, le problème vient du resize, et là les correctifs deviennent un cauchemard. Je vais donc reprendre tous mes gabarits pour ajouter une div englobante pour mes textes, mais ignorant les images en header d'article. Ce gabarit réglerait le problème des dépassements non souhaités.
Mais j'ai un certain nombre de gabarits à réviser, alors j'ai fait traîner l'affaire jusqu'à aujourd'hui. [Flemmard!]
Merci pour ta critique
Modifié par Olivier C (13 Jan 2013 - 22:25)
Gili a écrit :
c'est une critique hien, je ne fais pas le donneur de leçon, inutile d'aller voire mon site, je ne m'en occupe plus depuis presque deux ans
Je repère toujours un ou deux profils un peu caustique sur les forums que je fréquente. Je me tiens à carreau, et puis vient le jour où l'on ne peut éviter un petit clash... Hormis ces profils, pas de souci.
Gili a écrit :
et toi même tu sais, en deux ans, on en apprend des choses !
Ça, c'est sûr...
Gili a écrit :
... inutile d'aller voire mon site, je ne m'en occupe plus depuis presque deux ans (et toi même tu sais, en deux ans, on en apprend des choses !
... et qui reste au top tout de même. Je connais ton portfolio (et aussi ton blog). Une référence je trouve.
À propos : en mode resise pour mobil tu cache ton h1 en display:none, je fais pareille et Goetter aussi, mais je me demande si cela n'impacte pas le référencement Google pour mobil... (?)
Hormis ton resise au top, j'aime bien ton contrôle instantané des champs de formulaire par javascript. Il faudra que je m'y colle un jour (il y a un tuto sur Alsa, de mémoire), pour l'instant je ne fais mes contrôles qu'en php, mais de manière très fine pour donner un retour d'erreur adéquat (pas vraiment l'utilité mais pour le fun), auparavant j'utilisait les patterns d'html5, mais on ne pouvait pas personnaliser la nature de l'erreur avec cette dernière méthode. Je l'utilise tout de même, mais très partiellement (éviter les champs vides).
Gili a écrit :
Quand je regarde le picto je ne sais pas à quoi m'attendre, j'ai placé mon curseur afin de voire apparaitre une infobulle pertinente qui me mettrait la puce à l'oreille, mais rien. Quand je clique je vois que c'est pour t'envoyer un mail. Outre le manque d'affordance je ne comprend pas trop l'utilité du lien.
C'est pour faire partager l'article à un ami (je n'ai pas complété le champ d'envoi)... Pour l'icône, j'avais repéré que pas mal de sites l'utilisent pour indiquer le panel de leurs réseaux sociaux, mais j'avoue que ce n'est pas très clair, je la remplace donc par une arrobase pour l'instant (avec un title !). À terme je supprimerais sans doute cette option au profit de quelque chose de plus pérenne.
En mode connecté j'ai aussi ajouté une icône "petit crayon" qui me permet d'arriver directement sur le panel de l'article...
Gili a écrit :
Sur ta page d'accueil, tes .box.mag.module3 on une gestion typographique un peu désordonnée par rapport au reste du site. La lineheight sur le titre est immense et casse le rythme de la page. Avec un titre long (comme pour « Pourquoi « Église catholique » et non « Église universelle » ») le texte du dessous est coupé et j'ai le lien « lire la suite » qui vient par dessus le contenu.
Exact, et là, et il y a déjà un moment que je l'ai vu... mais là, l'air de rien, ça va me demander du boulot pour reprendre cette affaire :
Comme tu peux le voir, mes box sont avec un padding interne de 20 px, mais mes images prennent 100% de la largeur d'une box. Pour compenser le padding de la box l'image se retrouve avec un margin-left de -20px et colle donc bien sur la bordure de la box. Aucun problème si le design était fixe, le problème vient du resize, et là les correctifs deviennent un cauchemard. Je vais donc reprendre tous mes gabarits pour ajouter une div englobante pour mes textes, mais ignorant les images en header d'article. Ce gabarit réglerait le problème des dépassements non souhaités.
Mais j'ai un certain nombre de gabarits à réviser, alors j'ai fait traîner l'affaire jusqu'à aujourd'hui. [Flemmard!]
Merci pour ta critique
Modifié par Olivier C (13 Jan 2013 - 22:25)
Bonjour,
Votre site sur IE9, je n'ai pas testé sur les autres navigateurs:
http://img15.hostingpics.net/pics/243201capture.png
Votre site sur IE9, je n'ai pas testé sur les autres navigateurs:
http://img15.hostingpics.net/pics/243201capture.png
tsoko a écrit :
Votre site sur IE9...
Pour ne pas laisser ce message sans réponse : Troko utilisait un user agent différent de IE9, en l'occurrence une déclaration IE7 ou inférieure, ce qui ne lui permettait pas de lire correctement les implémentations display type "table-cell" ou "inline-block".
Venons-en maintenant à l'objet de mon post actuel : alors que je suis un aficionado des designs sombres je vais sans doute opter pour un design plus clair, car finalement plus agréable il me semble, et surtout plus confortable pour la lecture...
J'ai bien galèré pour trouver un système d'ombre convexe sous les blocs : il y a des tutos sur le net, mais je voulais un code css qui s'adapte à n'importe quelles tailles de bloc... et ça n'a pas été gagné d'avance! Mais maintenant c'est ok (sauf pour IE8 et inf' pour lequel il m'a fallut passer par une dégradation gracieuse)...
Je laisse le site avec ses nouvelles skins jusqu'à au moins ce soir. Si vous voulez donner votre avis sur le nouveau thème vous êtes le bienvenu.
Modifié par Olivier C (20 Mar 2013 - 08:41)
Bonjour OlivierC,
Le contenu est effectivement plus clair.
Je reste nostalgique du précédent design (les coins arrondis se prêtaient bien à la structure).
Le menu et le footer contrastent finalement un peu trop avec le contenu.
Ils sont moins lisibles. Peut-être faudrait-il passer les couleurs des liens en blanc plutôt que #ddd.
Le footer est (j'aurai pu le dire avant!) un peu chargé en icônes.
Sur Ipad il y a un problème avec la barre de menu qui a un margin-top de sorte que le contenu défile au-dessus de ce dernier.
Sur ce support j'élargirais un peu le site.
Sinon l'ensemble est très réussi, bravo.
edit: tu peux remettre un lien vers ton site dans ton dernier post.
Modifié par rodolpheb (20 Mar 2013 - 10:44)
Le contenu est effectivement plus clair.
Je reste nostalgique du précédent design (les coins arrondis se prêtaient bien à la structure).
Le menu et le footer contrastent finalement un peu trop avec le contenu.
Ils sont moins lisibles. Peut-être faudrait-il passer les couleurs des liens en blanc plutôt que #ddd.
Le footer est (j'aurai pu le dire avant!) un peu chargé en icônes.
Sur Ipad il y a un problème avec la barre de menu qui a un margin-top de sorte que le contenu défile au-dessus de ce dernier.
Sur ce support j'élargirais un peu le site.
Sinon l'ensemble est très réussi, bravo.
edit: tu peux remettre un lien vers ton site dans ton dernier post.
Modifié par rodolpheb (20 Mar 2013 - 10:44)
Bonjour Rodolphe, merci pour ton retour.
Oui c'est vrai. Après test je reviens en border-radius 5px... (j'étais descendu à 3px).
Je ne suis pas vraiment satisfait de mon footer, je pense le retravailler un de ces jours...
Là c'est plus inquiétant, j'avais remarqué ce bug sur le simulateur iOS mais je pensais qu'il s'agissait d'un problème du simulateur. Je ne sais pas encore quelle propriété pose problème...
rodolpheb a écrit :
Je reste nostalgique du précédent design (les coins arrondis se prêtaient bien à la structure).
Oui c'est vrai. Après test je reviens en border-radius 5px... (j'étais descendu à 3px).
rodolpheb a écrit :
Le menu et le footer contrastent finalement un peu trop avec le contenu.
Ils sont moins lisibles. Peut-être faudrait-il passer les couleurs des liens en blanc plutôt que #ddd... Le footer est (j'aurai pu le dire avant!) un peu chargé en icônes.
Je ne suis pas vraiment satisfait de mon footer, je pense le retravailler un de ces jours...
rodolpheb a écrit :
Sur Ipad il y a un problème avec la barre de menu qui a un margin-top de sorte que le contenu défile au-dessus de ce dernier.
Là c'est plus inquiétant, j'avais remarqué ce bug sur le simulateur iOS mais je pensais qu'il s'agissait d'un problème du simulateur. Je ne sais pas encore quelle propriété pose problème...
EDIT du 30/03/2013 : changement de nom de domaine pour le site, et aussi changemement d'hébergement : je reviens chez OVH après une infidélité de un an chez 1&1 (prestations pas terrible). De toute façon il me fallait agrandir ma capacité d'hébergement car les 100 Mo de limite pour une bdd sur une offre de base c'est du flanc : On peut effectivement grossir une base, mais après, pour recharger une sauvegarde de plus de 14 Mo (gzipé ou non) vous repasserez...
@rodolpheb : Je prévoie des règles en fonction des résolutions d'écrans (4 résolutions prévues), voilà pour l'instant. Je ne cherche pas encore à détecter les navigations spécifiques (tacticle ou pas, etc) mais ça viendra peut-être un jour...
"rodolpheb" a écrit :
As-tu prévu une règle pour les tablettes?
@rodolpheb : Je prévoie des règles en fonction des résolutions d'écrans (4 résolutions prévues), voilà pour l'instant. Je ne cherche pas encore à détecter les navigations spécifiques (tacticle ou pas, etc) mais ça viendra peut-être un jour...
Je remonte le topic de mon thème pour vous faire évaluer un menu sur liste simple (ul > li) à cette adresse :
lien sur page test pour le menu
Ma demande porte sur la qualité du code et sur vos remarques éventuelles quand à l'accessibilité. Merci.
lien sur page test pour le menu
Ma demande porte sur la qualité du code et sur vos remarques éventuelles quand à l'accessibilité. Merci.
Si ta remarque porte sur le menu comportant, dans chaque li, un span où les icônes sont gérées en CSS via le pseudo-élément ::before, pour ma part, j'ai une remarque en matière d'accessibilité : si JavaScript est désactivé, le menu ne peut s'afficher si la largeur de l'écran est réduite (tous les navigateurs mobiles n'ont pas la faculté de charger correctement et complètement le JavaScript, et encore moins si les conditions de connexion ne sont pas optimales, penses-y ). En revanche, rien à dire sur la gestion des icônes en CSS du point de vue de l'accessibilité, puisque l'intitulé textuel demeure bien visible.
Quant au code, pourquoi créer un deuxième élément ul pour gérer l'affichage du menu sur petit écran ? Pour ma part, je me contenterais d'un seul ul (le second dans ton code) et générerais le code HTML permettant d'afficher / masquer le menu en JavaScript. En outre, je créerais une image pour ce symbole d'affichage / masquage, avec un attribut alt (éventuellement doublé d'un attribut title de même valeur) explicitant l'action effectuée, le tout dans un élément button : je ne suis pas sûr, en effet, que la restitution d'un caractère formé de trois traits horizontaux par les lecteurs d'écran soit comprise des utilisateurs.
Enfin, plutôt que de passer par un attribut HTML 5 data-* pour gérer les caractères des icônes et un span vide, je supprimerais ce span vide et gérerais la génération des icônes avec la pseudo-classe ::before directement sur l'élément a ou li, en écrivant le code hexadécimal de chaque icône comme valeur de content et en jouant avec les sélecteurs CSS 3 pour changer cette valeur (ou en ajoutant des id ou jouant avec le sélecteur + pour la compatibilité IE 8), un peu comme suit :
). En revanche, rien à dire sur la gestion des icônes en CSS du point de vue de l'accessibilité, puisque l'intitulé textuel demeure bien visible.Quant au code, pourquoi créer un deuxième élément ul pour gérer l'affichage du menu sur petit écran ? Pour ma part, je me contenterais d'un seul ul (le second dans ton code) et générerais le code HTML permettant d'afficher / masquer le menu en JavaScript. En outre, je créerais une image pour ce symbole d'affichage / masquage, avec un attribut alt (éventuellement doublé d'un attribut title de même valeur) explicitant l'action effectuée, le tout dans un élément button : je ne suis pas sûr, en effet, que la restitution d'un caractère formé de trois traits horizontaux par les lecteurs d'écran soit comprise des utilisateurs.
Enfin, plutôt que de passer par un attribut HTML 5 data-* pour gérer les caractères des icônes et un span vide, je supprimerais ce span vide et gérerais la génération des icônes avec la pseudo-classe ::before directement sur l'élément a ou li, en écrivant le code hexadécimal de chaque icône comme valeur de content et en jouant avec les sélecteurs CSS 3 pour changer cette valeur (ou en ajoutant des id ou jouant avec le sélecteur + pour la compatibilité IE 8), un peu comme suit :
<ul class="module12">
<li><a href="http://christus.fr/">Accueil</a></li>
<li><a href="http://christus.fr/sommaire/">Sommaire</a></li>
<li><a href="http://christus.fr/a-propos/">À propos</a></li>
<li><a href="http://christus.fr/contact/">Contact</a></li>
</ul>
.nav-menu li:last-child a::before {
content: "\00e1b2"; /* Code hexadécimal de l'icône enveloppe */
}
/* Dans une feuille de styles conditionnelle ciblant IE 8 */
.nav-menu li:first-child + li + li + li a:before {
content: "\00e1b2"; /* Code hexadécimal de l'icône enveloppe */
}
/* Ou bien en cas d'ajout d'identifiants */
#nav-menu-contact a:before {
content: "\00e1b2"; /* Code hexadécimal de l'icône enveloppe */
}
@Victor : Bonjour à toi!
En fait je parlais du menu en rouge, mais tes remarques sont aussi valables pour le menu de navigation tout en haut du site...
Oui je pense optimiser un jour la bibliothèque jQuery en prod. Je croyais cela impossible et réservé aux bibliothèques telles que MooTools, mais certains, comme Stéphanie W, en parlent sur leur site (Jquip).
Le menu de navigation donc. Cette partie du code est à revoir. Je pense m'inspirer un de ces 4 des astuces de Stéphanie W (encore elle...).
Oui c'est une solution, mais j'ai codé mon CSS comme un framework composé de modules. Et la gestion des icônes du thème fait partie de l'un de ces modules (CSS improprement appelé : "orienté objet"), ce code se veut donc le plus indépendant possible de celui du menu.
Modifié par Olivier C (13 Jul 2013 - 03:05)
En fait je parlais du menu en rouge, mais tes remarques sont aussi valables pour le menu de navigation tout en haut du site...
Victor BRITO a écrit :
Si ta remarque porte sur le menu comportant, dans chaque li, un span où les icônes sont gérées en CSS via le pseudo-élément ::before, pour ma part, j'ai une remarque en matière d'accessibilité : si JavaScript est désactivé, le menu ne peut s'afficher si la largeur de l'écran est réduite (tous les navigateurs mobiles n'ont pas la faculté de charger correctement et complètement le JavaScript, et encore moins si les conditions de connexion ne sont pas optimales, penses-y
Oui je pense optimiser un jour la bibliothèque jQuery en prod. Je croyais cela impossible et réservé aux bibliothèques telles que MooTools, mais certains, comme Stéphanie W, en parlent sur leur site (Jquip).
Victor BRITO a écrit :
Quant au code, pourquoi créer un deuxième élément ul pour gérer l'affichage du menu sur petit écran ? Pour ma part, je me contenterais d'un seul ul (le second dans ton code) et générerais le code HTML permettant d'afficher / masquer le menu en JavaScript. En outre, je créerais une image pour ce symbole d'affichage / masquage, avec un attribut alt (éventuellement doublé d'un attribut title de même valeur) explicitant l'action effectuée, le tout dans un élément button : je ne suis pas sûr, en effet, que la restitution d'un caractère formé de trois traits horizontaux par les lecteurs d'écran soit comprise des utilisateurs.
Le menu de navigation donc. Cette partie du code est à revoir. Je pense m'inspirer un de ces 4 des astuces de Stéphanie W (encore elle...).
Victor BRITO a écrit :
Enfin, plutôt que de passer par un attribut HTML 5 data-* pour gérer les caractères des icônes et un span vide, je supprimerais ce span vide et gérerais la génération des icônes avec la pseudo-classe ::before directement sur l'élément a ou li
Oui c'est une solution, mais j'ai codé mon CSS comme un framework composé de modules. Et la gestion des icônes du thème fait partie de l'un de ces modules (CSS improprement appelé : "orienté objet"), ce code se veut donc le plus indépendant possible de celui du menu.
Modifié par Olivier C (13 Jul 2013 - 03:05)
11/11/2013 : nouveau design pour mon site...
J'ai codé le css/html de manière modulaire, dans le but d'être réutilisable à la manière d'un framework, que je peux réutiliser en fonction de mes besoins. L'api est ici : [édit : lien Périmé].
Parmi les nouveautés les plus importantes :
- respect d'une mise en page verticale,
- stylage par défaut de tous les éléments html possibles (mais pour certaines balises, comme audio et video, ce n'est pas encore effectif),
- ajout d'onglets js et de graphs full css (mais je pense que je vais remplacer ces derniers par du SVG).
Je veux bien un retour sur le code et sur le design (celui que vous voyez est celui par défaut).
PS : J'ai laissé tomber le support IE8, au moins pour l'instant (édit : désormais IE8 ready)
Edit du 02.12.2015 : création du framework Scriptura
Modifié par Olivier C (02 Dec 2015 - 22:00)
J'ai codé le css/html de manière modulaire, dans le but d'être réutilisable à la manière d'un framework, que je peux réutiliser en fonction de mes besoins. L'api est ici : [édit : lien Périmé].
Parmi les nouveautés les plus importantes :
- respect d'une mise en page verticale,
- stylage par défaut de tous les éléments html possibles (mais pour certaines balises, comme audio et video, ce n'est pas encore effectif),
- ajout d'onglets js et de graphs full css (mais je pense que je vais remplacer ces derniers par du SVG).
Je veux bien un retour sur le code et sur le design (celui que vous voyez est celui par défaut).
PS : J'ai laissé tomber le support IE8, au moins pour l'instant (édit : désormais IE8 ready)
Edit du 02.12.2015 : création du framework Scriptura
Modifié par Olivier C (02 Dec 2015 - 22:00)