3246 sujets
Critiques de vos sites: code et design
En fait ça dépend du type de site et / ou de ce que tu veux faire. Avec les médias queries tu ne touches qu'aux CSS ce qui est déjà pas mal mais reste quand même limité.
Sur un site institutionnel l'exemple qui me vient en tête c'est le bon gros slideshow sur l'accueil. Tu peux le masquer sur la version mobile mais l'internaute va quand même recevoir les images et la bande passante sur mobile est souvent assez limitée ou faible.
Sur d'autres types de sites tu pourrais avoir des modules que tu ne voudrais absolument pas envoyer aux utilisateurs de mobiles parce qu'ils ne seraient pas utilisables sur ce support (exemple un tchat intégré au site comme on en voit de plus en plus). Là aussi tu préférera qu'il ne soit pas chargé du tout car en plus de consommer de la bande passante chez l'internaute ça consomme aussi beaucoup de ressources sur ton serveur pour rien (ce qui se passe si tu ne fais que le masquer), et ce n'est pas le seul problème mais je simplifie l'exemple.
Bref y'a pas de méthode miracle, c'est au cas par cas.
Modifié par jb_gfx (28 Nov 2011 - 20:27)
Sur un site institutionnel l'exemple qui me vient en tête c'est le bon gros slideshow sur l'accueil. Tu peux le masquer sur la version mobile mais l'internaute va quand même recevoir les images et la bande passante sur mobile est souvent assez limitée ou faible.
Sur d'autres types de sites tu pourrais avoir des modules que tu ne voudrais absolument pas envoyer aux utilisateurs de mobiles parce qu'ils ne seraient pas utilisables sur ce support (exemple un tchat intégré au site comme on en voit de plus en plus). Là aussi tu préférera qu'il ne soit pas chargé du tout car en plus de consommer de la bande passante chez l'internaute ça consomme aussi beaucoup de ressources sur ton serveur pour rien (ce qui se passe si tu ne fais que le masquer), et ce n'est pas le seul problème mais je simplifie l'exemple.
Bref y'a pas de méthode miracle, c'est au cas par cas.
Modifié par jb_gfx (28 Nov 2011 - 20:27)
Ben tu ne pourras jamais vraiment tout avoir. Certains browser ne donnent que "mobile" quand ça peut aussi bien être un truc en 1280 * 700 qu'un mini truc en 320* 240.
Btw, oui il y a des gens qui sont sur ordi avec une résolution inférieure à 950. Mais le site a pas mal de trucs designés en 950 px de large ; donc ça pète trop de choses. (oui, grosse paresse à la conception
)
Bah, en js, tu peux toujours faire un .remove() en fonction de la définition de l'écran. C'est ce qu'on faisait avant les media queries. Et du coup, c'est du js qui adapte en fonction de l'écran mais pas en fonction du navigateur.
Modifié par fabien_ (28 Nov 2011 - 22:27)
Btw, oui il y a des gens qui sont sur ordi avec une résolution inférieure à 950. Mais le site a pas mal de trucs designés en 950 px de large ; donc ça pète trop de choses. (oui, grosse paresse à la conception
)jb_gfx a écrit :
Sur un site institutionnel l'exemple qui me vient en tête c'est le bon gros slideshow sur l'accueil. Tu peux le masquer sur la version mobile mais l'internaute va quand même recevoir les images et la bande passante sur mobile est souvent assez limitée ou faible.
Bah, en js, tu peux toujours faire un .remove() en fonction de la définition de l'écran. C'est ce qu'on faisait avant les media queries. Et du coup, c'est du js qui adapte en fonction de l'écran mais pas en fonction du navigateur.
Modifié par fabien_ (28 Nov 2011 - 22:27)
concernant la vidéo (que je n'ai pas, étant sous FF), j'ai fait une comparaison de ton code avec celui donné ici : http://ishimaru-blog.servhome.org/archives/299
Or, tu as mi ".ogg" alors que normalement, c'est ".ogv" pour les vidéos au format OGG.
Mais avec mon ordi qui est loin d'être une bête de course (Pentium 4 tournant Ubuntu 10.04 et FF8) et qui part à ramer quand je suis sur une page très lourde, je crains que ça fasse ramer mon FF si la vidéo était fonctionnelle.
Ensuite, je remarque six scripts externes qui auraient pu être regroupées pour économiser des requêtes HTTP ! Il vaut mieux charger un gros fichier plutôt que plusieurs petits.
Ensuite pour ne pas entraver le chargement des pages, il est recommandé d'appeler les scripts en fin de document, avant </body>, pour laisser le contenu se charger avant son comportement.
Concernant le support des anciennes versions d'IE (principalement IE8), il existe un script pour pallier au non-support des balises HTML5 : http://www.siteduzero.com/tutoriel-3-561847-structurer-sa-page.html#ss_part_3
Dommage que tu n'utilises pas davantage les titres de section… Les <div class="titreJaune">, <div class="titreBulle">, <div class="titre2job"> et tout autre bloc ayant "titre" ou "title" dans le nom de classe, auraient pu être remplacées par les balises appropriées (h2, h3, h4) pour avoir une vraie hiérarchie des titres. Car pour le moment, je ne vois qu'un h1 et c'est tout)
Un peu de lecture : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
Dans le formulaire de contact, ça manque de <label> pour y attacher les champs.
Un peu de lecture : http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html
Voilà, je n'ai fait que les principaux points qui ont attiré mon attention.
Or, tu as mi ".ogg" alors que normalement, c'est ".ogv" pour les vidéos au format OGG.
Mais avec mon ordi qui est loin d'être une bête de course (Pentium 4 tournant Ubuntu 10.04 et FF8) et qui part à ramer quand je suis sur une page très lourde, je crains que ça fasse ramer mon FF si la vidéo était fonctionnelle.
Ensuite, je remarque six scripts externes qui auraient pu être regroupées pour économiser des requêtes HTTP ! Il vaut mieux charger un gros fichier plutôt que plusieurs petits.
Ensuite pour ne pas entraver le chargement des pages, il est recommandé d'appeler les scripts en fin de document, avant </body>, pour laisser le contenu se charger avant son comportement.
Concernant le support des anciennes versions d'IE (principalement IE8), il existe un script pour pallier au non-support des balises HTML5 : http://www.siteduzero.com/tutoriel-3-561847-structurer-sa-page.html#ss_part_3
Dommage que tu n'utilises pas davantage les titres de section… Les <div class="titreJaune">, <div class="titreBulle">, <div class="titre2job"> et tout autre bloc ayant "titre" ou "title" dans le nom de classe, auraient pu être remplacées par les balises appropriées (h2, h3, h4) pour avoir une vraie hiérarchie des titres. Car pour le moment, je ne vois qu'un h1 et c'est tout)
Un peu de lecture : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
Dans le formulaire de contact, ça manque de <label> pour y attacher les champs.
Un peu de lecture : http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html
Voilà, je n'ai fait que les principaux points qui ont attiré mon attention.
fabien_ a écrit :
Bah, en js, tu peux toujours faire un .remove() en fonction de la définition de l'écran. C'est ce qu'on faisait avant les media queries. Et du coup, c'est du js qui adapte en fonction de l'écran mais pas en fonction du navigateur.
.remove() c'est pas JavaScript, c'est une méthode de jQuery, à part ça je pense que t'as loupé un (très gros) épisode.
PS : sur mon post précédent de répondais à Paolo, y'a eu un mélange entre les questions et les réponses je pense.
Modifié par jb_gfx (29 Nov 2011 - 03:10)
Salut,
La qualité des graphismes est assez impressionnante, on sent une vraie identité et techniquement c'est très au point.
En revanche, un petit coup d'yslow donne un grade D en performance, preuve qu'il y a des améliorations possibles de ce côté notamment les scripts qui pourraient être mis en bas de page.
Il est vrai que le chargement de pages est parfois long alors si en plus on n'est en wifi par exemple et que l'on capte un peu moins bien le signal...
D'autre part, je ne sais pas du tout si c'est dans vos priorités (par rapport à la cible) mais sur un notebook en tout cas, tout se chevauche, c'est dommage pour le web mobile.
Dans la même lignée pourquoi:
??
Un choix? C'est une grosse partie du web quand même.
Sinon on peut vous trouver sur Dribbble ou site du genre pour suivre vos travaux?
Modifié par jmlapam (29 Nov 2011 - 10:24)
La qualité des graphismes est assez impressionnante, on sent une vraie identité et techniquement c'est très au point.
En revanche, un petit coup d'yslow donne un grade D en performance, preuve qu'il y a des améliorations possibles de ce côté notamment les scripts qui pourraient être mis en bas de page.
Il est vrai que le chargement de pages est parfois long alors si en plus on n'est en wifi par exemple et que l'on capte un peu moins bien le signal...
D'autre part, je ne sais pas du tout si c'est dans vos priorités (par rapport à la cible) mais sur un notebook en tout cas, tout se chevauche, c'est dommage pour le web mobile.
Dans la même lignée pourquoi:
fabien_ a écrit :
Pour ie8, vous n'êtes pas sensés voir le site
??
Un choix? C'est une grosse partie du web quand même.
Sinon on peut vous trouver sur Dribbble ou site du genre pour suivre vos travaux?
Modifié par jmlapam (29 Nov 2011 - 10:24)
jb_gfx a écrit :
En fait ça dépend du type de site et / ou de ce que tu veux faire. Avec les médias queries tu ne touches qu'aux CSS ce qui est déjà pas mal mais reste quand même limité.
Sur un site institutionnel l'exemple qui me vient en tête c'est le bon gros slideshow sur l'accueil. Tu peux le masquer sur la version mobile mais l'internaute va quand même recevoir les images et la bande passante sur mobile est souvent assez limitée ou faible.
Sur d'autres types de sites tu pourrais avoir des modules que tu ne voudrais absolument pas envoyer aux utilisateurs de mobiles parce qu'ils ne seraient pas utilisables sur ce support (exemple un tchat intégré au site comme on en voit de plus en plus). Là aussi tu préférera qu'il ne soit pas chargé du tout car en plus de consommer de la bande passante chez l'internaute ça consomme aussi beaucoup de ressources sur ton serveur pour rien (ce qui se passe si tu ne fais que le masquer), et ce n'est pas le seul problème mais je simplifie l'exemple.
Bref y'a pas de méthode miracle, c'est au cas par cas.
Je suis d'accord qu'un site dédié mobile est parfois préférable mais le sniffing, c'est la merde à maintenir. Mieux vaut vaut afficher une invite à passer à la version mobile et retenir le réglage avec cookie.
Hello.
Sinon pour revenir au sujet initial, je n'aurais que deux petites remarques pour fabien_ :
- Dommage de ne pas avoir d'abord conçu le site classiquement, puis rajouter le JS en surcouche (ça a déjà été dit, mais je suis particulièrement sensible sur ce point, vu que je tourne à 90% au NoScript)
- Concernant les perfs pour tes animations, tu pourrais déporter pas mal d'effet bling-bling dans ta CSS via transitions et animations. La compatibilité est moindre, mais le résultat souvent meilleur que du jQuery.
jb_gfx a écrit :Les exemples que tu cites sont des widgets fortement dépendant du JS. Je ne vois pas l'intêret de faire du sniffing, autant détecter les dimensions viewport et les génerer via JS si les dimensions s'y prêtent.
Sur un site institutionnel l'exemple qui me vient en tête c'est le bon gros slideshow sur l'accueil. (...) (exemple un tchat intégré au site comme on en voit de plus en plus).
Sinon pour revenir au sujet initial, je n'aurais que deux petites remarques pour fabien_ :
- Dommage de ne pas avoir d'abord conçu le site classiquement, puis rajouter le JS en surcouche (ça a déjà été dit, mais je suis particulièrement sensible sur ce point, vu que je tourne à 90% au NoScript)
- Concernant les perfs pour tes animations, tu pourrais déporter pas mal d'effet bling-bling dans ta CSS via transitions et animations. La compatibilité est moindre, mais le résultat souvent meilleur que du jQuery.
IshimaruChiaki a écrit :
concernant la vidéo (que je n'ai pas, étant sous FF), j'ai fait une comparaison de ton code avec celui donné ici : http://ishimaru-blog.servhome.org/archives/299
Or, tu as mi ".ogg" alors que normalement, c'est ".ogv" pour les vidéos au format OGG.
Ahhh ok ! Merci.
IshimaruChiaki a écrit :
Dommage que tu n'utilises pas davantage les titres de section… Les <div class="titreJaune">, <div class="titreBulle">, <div class="titre2job"> et tout autre bloc ayant "titre" ou "title" dans le nom de classe, auraient pu être remplacées par les balises appropriées (h2, h3, h4) pour avoir une vraie hiérarchie des titres. Car pour le moment, je ne vois qu'un h1 et c'est tout)
Un peu de lecture : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
Ouaip, je vais passer un peu de h2 et autres, tu as raison.
jmlapam a écrit :
D'autre part, je ne sais pas du tout si c'est dans vos priorités (par rapport à la cible) mais sur un notebook en tout cas, tout se chevauche, c'est dommage pour le web mobile.
Dans la même lignée pourquoi:
"Pour ie8, vous n'êtes pas sensés voir le site"
??
Un choix? C'est une grosse partie du web quand même.
Je n'avais regardé que la largeur. C'est vrai qu'il y a aussi un problème de hauteur. Je vais essayer de corriger ça.
Pour ie8, ce n'est pas qu'il n'y pas visible, c'est qu'il est remplacé par la version flash du site (enfin normalement puisque visiblement là, ça ne fonctionne pas)
Florian_R a écrit :
- Concernant les perfs pour tes animations, tu pourrais déporter pas mal d'effet bling-bling dans ta CSS via transitions et animations. La compatibilité est moindre, mais le résultat souvent meilleur que du jQuery.
Je ne sais pas du tout comment ça fonctionne ça. Je testerai.
Merci beaucoup pour tous ces retours. Je prend note et je ferai tout ça le we prochain.
Modifié par fabien_ (29 Nov 2011 - 12:19)
C'est bien moi ça… poster le mauvais lien en pensant poster le bon… et je ne m'en suis pas rendue compte tout de suite que j'ai posté le lien vers un article de mon blog au lieu de celui que je voulais poster…
Voici le lien que je voulais poster concernant la balise vidéo : http://www.siteduzero.com/tutoriel-3-561857-la-video-et-l-audio.html#ss_part_3
Voici le lien que je voulais poster concernant la balise vidéo : http://www.siteduzero.com/tutoriel-3-561857-la-video-et-l-audio.html#ss_part_3
IshimaruChiaki a écrit :
C'est bien moi ça… poster le mauvais lien en pensant poster le bon… et je ne m'en suis pas rendue compte tout de suite que j'ai posté le lien vers un article de mon blog au lieu de celui que je voulais poster…
Voici le lien que je voulais poster concernant la balise vidéo : http://www.siteduzero.com/tutoriel-3-561857-la-video-et-l-audio.html#ss_part_3
Woké, en fait le problème était encore un poil différent. Il fallait juste ajouter l'association ogv/ogg dans le htaccess. C'est quand même pas super bien foutu du coup.