[Amateur] http://www.doctypestrict.net/960ProShinyLayout/

Bonjour cher camarades,

Je suis en train de créer un "Layout" sous le framework CSS 960.gs afin de l'ajouter à mon Portfolio amateur. Il est toujours en développement et j'aimerais avoir vos idées et suggestions d'élémemts que je pourrais ajouter & ou améliorer au niveau du design et de l'interface. Tout le design est fait avec Inkscape.

Le layout devrait en théorie représenter la première page d'accueil d'un site proposant divers services. J'ai essayé de le concevoir le plus épuré possible de façon à ce que l'utilisateur navigue aisément à travers les différents services "fictifs". Bien entendu, je m'attend égallement à ce que certaines personnes critique le code et la structure. J'ai utilisé 960.gs parceque qu'il est relativement facile de reprendre le layout et de le modifier à sa guise sans trop de complications. À cet effet, j'aimerais avoir vos avis divergeants sur l'utilisation des frameworks CSS, je crois qu'il y a matière à débattre longement.

Finallement, je n'ai pas encore intégré la navigation au clavier "accesskey" et "tabindex". J'ai encore un bout de chemin à faire dans l'apprentissage de l'accessibilité.

Merci d'avance de vos suggestions et critiques constructives.

http://www.doctypestrict.net/960ProShinyLayout/
Modifié par simon.bdard (05 Aug 2010 - 22:46)

Pourquoi est-ce que personne ne me répond ?
Sniff, sniff
Modifié par simon.bdard (05 Aug 2010 - 22:46)

Bonjour,

simon.bdard a écrit :
Pourquoi est-ce que personne ne me répond ?
Sniff, sniff

Parceque les gens travaillent / révisent / sont en vacances... L'analyse d'un site ne se fait pas en 5 minutes, il faut être un peu patient.

Avant toute chose :

simon.bdard a écrit :
Finallement, je n'ai pas encore intégré la navigation au clavier "accesskey" et "tabindex". J'ai encore un bout de chemin à faire dans l'apprentissage de l'accessibilité.

Ne te fatigue pas avec les accesskey (qui n'apportent pas vraiment grand chose, mais peuvent créer des problèmes), et pas trop avec les tabindex (ils sont rarement nécessaires).

Graphiquement, ton site est plutôt sympa, mais passe mal sous IE6. Les png semi-transparent ne sont pas vraiment nécessaires (le fond du site est uni) et tes blocs manquent un peu de place (un commentaire conditionnel devrait corriger cela rapidement)

En ce qui concerne le code :
* Tu ne déclares la langue du document ni dans html ni via la meta Content-Language (cette dernière n'est pas nécessaire si ton serveur envoie lui même cette information, mais ce n'est pas une configuration par défaut).

* Tu as un problème avec les caractères accentués qui sont manquant dans le code.

* Ta meta description ne contient pas une description, il faudra la revoir si tu publie le site.

* Les meta keyword et author ne servent à rien et peuvent donc être supprimées.

* Ta feuille de style corrective pour IE est appelée 2 fois et la première a une mauvaise URL.

* 4 feuilles de style générales, en production, c'est beaucoup trop ; même si c'est plus confortable pour toi de développer en séparant les styles, quand tu mets ton site en production (i.e. : sur ton serveur) il est préférable de regrouper les fichiers en un seul (cela diminue le nombre d'appel au serveur et diminue donc le temps de chargement de la page).

* Il est préférable de placer les scripts en fin de document (sauf s’ils ont un chargement asynchrone), ainsi ils laissent le contenu de la page se charger avant son comportement.

* Title sur les liens sert à apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. Si le title apporte la même information que l'intitulé du lien il est totalement inutile (voir même dérangeant) et il vaut mieux le supprimer. La plupart du temps title n'est pas utile sur les liens (et c'est le cas pour les liens de ton site).

* Alt est un attribut obligatoire sur les images, oui. Mais il peut être laissé vide ; il doit même être laissé vide pour les images purement décoratives. Un alt contenant "Image" ou "box shadow" (...) doit être vidé.

* Ta hiérarchie des titres est incorrecte : elle passe de h1 à h3 sans h2 entre les deux.

Sur l'ensemble ton code est trop propre, c'est une bonne chose, tu as encore quelques petites choses à améliorer, mais c'est déjà du très bon travail.

a écrit :
Tu as un problème avec les caractères accentués qui sont manquant dans le code.

Probablement causé par mon éditeur texte, j'ai changer l'encodage en UTF-8.

a écrit :
Les meta keyword et author ne servent à rien et peuvent donc être supprimées.

J'ai retiré les Metas spperflus puisque la nouvelle génération de moteurs de recherche fait abstraction de ceux-ci.

a écrit :

Ta feuille de style corrective pour IE est appelée 2 fois et la première a une mauvaise URL

Une erreur d'inattention, j'ai l'habitude de toujours reprendre la même entête de document, c'est la cause de mon erreur.

a écrit :

4 feuilles de style générales, en production, c'est beaucoup trop ; même si c'est plus confortable pour toi de développer en séparant les styles, quand tu mets ton site en production (i.e. : sur ton serveur) il est préférable de regrouper les fichiers en un seul (cela diminue le nombre d'appel au serveur et diminue donc le temps de chargement de la page).

Oui, s'est vrai que pour améliorer la vitesse de chargement sur un site en production, l'idéal est de ne créer qu'un seul fichier CSS. Dans l'éventualité où je metterais le site en Production je "compresserais" égallement le fichier CSS. http://www.cssdrive.com/index.php/main/csscompressor/

a écrit :

Title sur les liens sert à apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. Si le title apporte la même information que l'intitulé du lien il est totalement inutile (voir même dérangeant) et il vaut mieux le supprimer. La plupart du temps title n'est pas utile sur les liens (et c'est le cas pour les liens de ton site).

Je croyais que "title" était obligatoire comme argument, merci pour cette précision. Il s'agit d'un site fictif donc j'ai essayé de décrire les différentes sections dans le Title.
Concernant alt="" j'ai vidé la valeur de l'argument sur les images relatives au Design et à l'esthétique.

a écrit :

Il est préférable de placer les scripts en fin de document (sauf s’ils ont un chargement asynchrone), ainsi ils laissent le contenu de la page se charger avant son comportement.

C'est noté

a écrit :

Ta hiérarchie des titres est incorrecte : elle passe de h1 à h3 sans h2 entre les deux.

C'était en prévision de placer un sous-titre(la description du site), je vais rajouter mon H2 tout de suite.

Laurie-Anne, j'apprécie beaucoup le temps que tu as pris pour écrire ces commentaires . Avoir l'avis des autres ca aide à mettre les choses en perspective pour progesser.
Modifié par simon.bdard (06 Aug 2010 - 17:10)

Bonjour et bienvenue sur Alsacreations!

Ça fait plaisir de voir un autre Québécois ici, et près de chez-moi en plus!

Quelques coquilles encore avec les accents. Le alt du logo est présentement : "Simon Bdard, Intgrateur web". Vérifier l'intégralité du code pour repérer les autres coquilles du même genre.

Il y a aussi une faute sur le mot Accessibilité.

Sinon c'est normal les barres de défilement sur l'image de l'entête?
Modifié par Tony Monast (07 Aug 2010 - 17:46)

Salut Simon

Laissant aux autres l'aspect technique voici mon impression.

» D'abord félicitation pour la présentation. N'ayant pas beaucoup de documentation tu as su utiliser le Lorem ipsum pour définir la dimension et les zones à développer dans un futur.

» Le seul point que j'aimerais te parler ici porte sur les onglets. Je part donc sur le principe qu'en visite nous nous placons sur la page d'accueil. Seulement l'onglet (accueil) semble derrière le reste des onglets. Sélectionner par sa couleur mais pas par sa position (z-index).

» Il est possible que ta barre ne sois encore prête mais placer l'onglet actif au devant est presque un standard.

» Le plaçant en avant pourra te permettre de mieux saisir les possibilités design. Surtout en ce qui concerne la page en tant que façade. Et toutes les autres pages devront répondre au même principe.

Évidemment ce n'est qu'une suggestion. Maintenant allons en bas de page.

» Ici tu as utiliser des informations importantes. Ayant accès à des éléments provenant d'autres sources je crois que cette zone devra être utile. À toi de trouver une façon originale de présenter cette zone.

Pour ce qui est du footer j'espère tout simplement qu'il sera présent à ta prochaine visite. Le footer joue un rôle de fermeture du document. Il est un guide visuel qui nous permet de mieux saisir la dimension de la page. En fait le footer devrait être présent dès le début du développement.

zardoz
Modifié par zardoz (07 Aug 2010 - 21:46)

Tony Monast:

a écrit :
Sinon c'est normal les barres de défilement sur l'image de l'entête?

La partie du slideshow est en javascript avec dégradation gracieuse. Lors de mon derniers upload j'ai eu un problème avec les permissions sur mon ficher javascript. Le tout devrait être réglé maintenant.

Pour les coquilles sur les accents je crois que c'est corrigé.

a écrit :
Ça fait plaisir de voir un autre Québécois ici, et près de chez-moi en plus!

Je suis un fan de Radium Multimédia, vous faites du très bon boulot, tout le plaisir est pour moi, je suis heureux de voir que tu prends le temps de me répondre.
Merci beaucoup.

Zardoz:

a écrit :
Il est possible que ta barre ne sois encore prête mais placer l'onglet actif au devant est presque un standard

C'est vrai que ca fais plus sens. Je l'ai modifié.

a écrit :
Le footer joue un rôle de fermeture du document. Il est un guide visuel qui nous permet de mieux saisir la dimension de la page.

Je n'ai pas encore pris le temps de réfléchir à cela, je compte bien "stylisé" le footer de façon a faire une démarquation avec le reste du contenu.
Je ne sais pas présentement qu'elles informations se retrouverons dans le footer. Probablement qu'il va accueillir les coordonnés, les réseaux sociaux et un lien vers le plan du site. C'est vrai que c'est un élément essentiel non négligeable

Merci beaucoup tes remarques, cela est très appréciées.
Modifié par simon.bdard (08 Aug 2010 - 02:47)

Bonjour,

simon.bdard a écrit :

Je suis un fan de Radium Multimédia, vous faites du très bon boulot, tout le plaisir est pour moi, je suis heureux de voir que tu prends le temps de me répondre.
Merci beaucoup.

Merci du compliment, ça fait toujours plaisir à entendre.

Voici une petite analyse rapide de ton site fictif :

- Les images décoratives utilisées pour les services devraient plutôt se trouver en background. Ce serait peut-être aussi plus joli si elles étaient centrées verticalement avec le titre.

- Sur mon ordinateur, Optimisation du référencement est sur deux lignes. Ce serait plus esthétique s'il était sur une seule ligne comme les autres titres.

- Concernant les alt des images, tu dois te demander si cette information est pertinente. Par exemple, les icônes ont un alt Icon. Dans ce cas-ci, tel qu'indiqué plus haut, il serait préférable de mettre ces icônes via CSS ou au moins, mettre un alt vide. Je t'invite à lire Bien utiliser le texte alternatif

- Il manque toujours quelques accents ici et là.

Dans l'ensemble, c'est très bien. Je pense tout de même qu'il serait plus avantageux d'investir du temps dans ton site personnel en le rendant plus complet. Un site fictif, c'est formateur, mais ça donne moins envie de s'y investir qu'un vrai site accessible au public. Un vrai site donne aussi une meilleure idée de tes capacités en développement web (référencement, ergonomie, rédaction, fonctionnalités, graphisme, créativité, etc...).

Pour te construire un portfolio, il y a beaucoup d'organismes ou de PME qui seraient heureuses d'avoir un nouveau site Web.
Modifié par Tony Monast (15 Aug 2010 - 15:07)