[Portfolio] Avis sur Pleine Lune | Le Portfolio d'Audesou

Chu !


Nouveau venu sur ce forum, je me permets tout d'abord de vous dire bonsoir à tous !

Pour faire bref, je suis actuellement étudiant en IUT SRC et souhaiterais devenir développeur multimédia spécialisé dans les standards et l'accessibilité. Durant le mois d'Août, j'ai réalisé la première version de mon portfolio : Pleine Lune.

Je considère Pleine Lune comme aujourd'hui quasiment terminé, mais comme rien n'est jamais parfait, je souhaiterais recevoir des avis extérieurs au mien et constructifs pour améliorer cette version ou les versions suivantes !

J'aimerais recevoir avant tout des avis sur la sémantique et l'accessibilité des codes (même si j'ai sûrement encore du boulot à faire sur ce deuxième point).

Je me suis efforcé de rendre le site compatible FF 2, IE 6 & 7, Opera 9 et Konqueror, jusqu'aux faibles résolutions, mais je n'ai pas encore pu le tester sur un Mac donc si certains rencontrent des problèmes de navigation sous Safari, n'hésitez pas à m'en faire part !

Je tiens à préciser que je na suis pas graphiste, même si j'ai essayé de faire de mon mieux pour réaliser une Charte Graphique claire et cohérente pour Pleine Lune.

J'espère que Pleine Lune vous plaira avec une petite boule dans le ventre !

Si ce n'est pas le cas, et bien... au travail !


Bonne soirée !

Bonjour et bienvenue
pour commencer ton image principale est trop importante en therme de surface et par conséquent aussi de poid (116ko ça dépasse le poids maximum conseillé pour une page d'accueil : 100 ko)

Ton lien "aller au menu" est ici inutile puisqu'on le menu est placé très haut dans le code.
La cible du lien "aller au contenu" n'est pas bonne. Lire ce tutoriel

Ton image (pleine lune le portefolio d'Audesou) devrait être insérée directement dans le code avec un alt "pleine lune le portefolio d'Audesou" et non via a background CSS : en cas d'image non chargée ou d'absence de couche CSS, il y a perte d'information.

Désactives CSS et tu t'appercevras que dans ton menu, tes libéllés de rub sont incohérents > penser éventuellement à ajouter un ":" masqué par CSS entre la rub et sa description.

Il est appréciable d'avoir pour une consultation de ton site via lecteur d'écran (entre autres) un titre de section pour ton menu (navigation, rubriques...) masqué par une règle CSS (éviter le display:none)
Modifié par Hermann (07 Sep 2007 - 21:26)

Moi je trouve ça sobre et assez réussit, mis à part la remarque d'Hermann avec laquelle je suis d'accord, car ton image engendre des scrolls à chaque changement de page.

Sinon, j'ai fait SRC à Blois moi aussi Première promo ! Passe le bonjour à M. Kuhnel pour moi ! Et demande lui de tester mon portfolio (voir le sujet josfolio), ça me ferait bien plaisir d'avoir son avis !!!

Tout d'abord, merci à tous les deux pour ces commentaires, il est vrai que je n'avais pas pensé à certaines choses !

Hermann a écrit :

pour commencer ton image principale est trop importante en therme de surface et par conséquent aussi de poid (116ko ça dépasse le poids maximum conseillé pour une page d'accueil : 100 ko)

Honnêtement, pour ce qui est de la surface de l'image, je ne compte pas y revenir. J'ai fais le choix - peut-être atypique - d'accorder une grande importance à cette bannière. La réduire ou la modifier impliquerait de repenser totalement la Charte Graphique de mon Portfolio.

J'ai donc fait ce choix de manière totalement consciente et ne compte pas revenir dessus, pour cette version en tout cas.

Cependant, je suis tout à fait d'accord, cette image est grande, et donc lourde. De plus, je ne l'avais sûrement pas assez optimisée.

Je l'ai donc modifiée pour la réduire à 40 ko, valeur à laquelle je pense obtenir le meilleur rapport qualité/compression. La page d'accueil tombe donc à 100 ko pile ! (sans ironie )
Qu'en pensez-vous ?

Hermann a écrit :

Ton image (pleine lune le portefolio d'Audesou) devrait être insérée directement dans le code avec un alt "pleine lune le portefolio d'Audesou" et non via a background CSS : en cas d'image non chargée ou d'absence de couche CSS, il y a perte d'information.

Effectivement, il y a perte d'information, mais dans ce cas, la balise de titre ne suffit-elle pas ?

Cependant, après réflexion, cette image, bien que décorative, apporte de l'information. Je vais donc modifier mon code en l'insérant via HTML.

johanna33 a écrit :
Moi je trouve ça sobre et assez réussit, mis à part la remarque d'Hermann avec laquelle je suis d'accord, car ton image engendre des scrolls à chaque changement de page.

Merci bien !

Pour ce qui est des scrolls, j'ai choisi de placer une ancre menant directement au contenu sur chaque lien autre que celui de la page d'accueil, pour ne pas avoir à parcourir l'image à chaque fois. Qu'en pensez-vous ?

Hermann a écrit :

Ton lien "aller au menu" est ici inutile puisqu'on le menu est placé très haut dans le code.
La cible du lien "aller au contenu" n'est pas bonne. Lire ce tutoriel

L'utilité du lien "Aller au menu" est certes discutable, cependant, j'ai choisi de la conserver pour garder un certain équilibre graphique au niveau de la bannière.

Pour le lien "Aller au contenu", si j'ai bien compris l'article, il serait préférable de le faire pointer vers un autre lien plutôt que sur un div ?

Etonnant car je m'étais justement inspiré des codes d'Alsacréations, qui utilisent visiblement la même méthode que mon Portfolio. Qu'en est-il réellement ?

Hermann a écrit :

Désactives CSS et tu t'appercevras que dans ton menu, tes libéllés de rub sont incohérents > penser éventuellement à ajouter un ":" masqué par CSS entre la rub et sa description.

Merci beaucoup pour cette remarque, j'avoue que je n'avais absolument pas fait attention à la cohérence des liens du menu lorsque CSS était désactivé ! Je me coucherai moins bête ce soir !

Cela à été corrigé.

Hermann a écrit :

Il est appréciable d'avoir pour une consultation de ton site via lecteur d'écran (entre autres) un titre de section pour ton menu (navigation, rubriques...) masqué par une règle CSS (éviter le display:none)

Excusez-moi, mais je n'ai pas compris ce que vous avez voulu me dire dans cette phrase !

johanna33 a écrit :

Sinon, j'ai fait SRC à Blois moi aussi smile Première promo ! Passe le bonjour à M. Kuhnel pour moi ! Et demande lui de tester mon portfolio (voir le sujet josfolio), ça me ferait bien plaisir d'avoir son avis !!!

Comme le monde est petit !
C'est comme si c'était fait !

Encore merci à vous deux !

PS : Petit rappel du lien : Pleine Lune

Salut,

J'aime beaucoup l'image en bannière, qui est très sympa niveau lumière, mais comme il a été dit plus haut, elle est très grande. Je ne suis pas gêné car je surfe en 1600x1200, mais je pense que tu devrais pouvoir la recadrer au moins un peu pour éviter que les visiteurs en résolutions faibles n'aient à scroller à chaque page, ça risque de perturber leur visite.

J'ai un gros bug sur ton site, sur IE(6) comme sur FF(2). Quand j'arrive sur la page d'accueil, le haut du site est en haut de la fenêtre du navigateur, jusque là pas de problème. Si je clique sur le lien "services", la page s'affiche, mais le haut du site est au dessus de la fenêtre du navigateur, comme si j'avais déjà scrollé dans la page. Sur la page "créations", je me retrouve encore plus bas dans la page, ne voyant qu'une partie du nom "Pleine Lune". Pire dans la page "A propos", ou le premier élément affiché en haut de la fenêtre du navigateur est le menu.

Je trouve tes puces en forme de flèches beaucoup trop grosses. Quand il y en a peu ça peut passer, mais sur la page "A propos", on finit par ne voir qu'elles.

Ta page création, je la trouve peu claire. Les titres et les images étant décalés, on a l'impression qu'il y a une seule réalisation pour chaque, alors qu'en fait on entre dans une galerie. Il faudrait que le titre et l'image soient plus liés pour que cela soit compréhensible.

Au niveau de tes réalisations, je trouve inutile de mettre le lien du site sur lequel on est en train de surfer, vu qu'on est déjà en train de le visiter. (bien sûr ça enrichit le site d'une réalisation, mais bon...)

Il n'est averti nulle part que certains lien des réalisations débouchent sur des fichiers pdf, en terme d'accessibilité c'est un peu dommage.

Le bienvenue sur la page d'accueil est inutile, car si le visiteur se sent à l'aise, il se sentira par lui même bienvenu. C'est un résidu des sites des débuts d'internet qui finira par s'enterrer dans la mémoire collective !

Les liens devraient être non cliquables lorsque la page est active.

Audesou a écrit :

Pour ce qui est des scrolls, j'ai choisi de placer une ancre menant directement au contenu sur chaque lien autre que celui de la page d'accueil, pour ne pas avoir à parcourir l'image à chaque fois. Qu'en pensez-vous ?

Ca doit çà qui pose le problème que je t'ai énoncé précédemment alors. Je pense qu'il vaudrait mieux le virer (après vérification bien sûr).

Audesou a écrit :

Je l'ai donc modifiée pour la réduire à 40 ko, valeur à laquelle je pense obtenir le meilleur rapport qualité/compression. La page d'accueil tombe donc à 100 ko pile ! (sans ironie )
Qu'en pensez-vous ?

Beaucoup mieux, le jpeg progressif est un bon choix dans ton cas.

Audesou a écrit :

Effectivement, il y a perte d'information, mais dans ce cas, la balise de titre ne suffit-elle pas ?

Pas vraiment puisque les title ne sont pas systématiquement lu.

Audesou a écrit :

Etonnant car je m'étais justement inspiré des codes d'Alsacréations, qui utilisent visiblement la même méthode que mon Portfolio. Qu'en est-il réellement ?

Le code d'Alsacreations commence à dater un peu, et je crois que la partie accessibilité ne fut pas une priorité comme bien d'autres sites de l'époque. La prochaine version d'Alsacréations en triendra compte

Audesou a écrit :

Excusez-moi, mais je n'ai pas compris ce que vous avez voulu me dire dans cette phrase !

Tu peux me tutoyer ça ira
En effet je crois que je n'ai pas été très clair en préjugeant un peu vite de tes connaissances. Brièvement, un lecteur d'écran est un logiciel de synthèse vocale qui permet de lire aux malvoyants ce qui s'affiche à l'écran de manière linéaire.
Dans ce contexte là ou en cas d'absence de couche de présentation (CSS), le menu devrait être identifié par un titre de section (Hn masqué en CSS) que l'on nomme par exemple "navigation" ou "rubriques" voire "menu principal".
Si tu désactives CSS ton menu n'est pas assez clairement identifiable comme tel, de même en cas d'utilisation via lecteur d'écran.


Autre remarque:

<meta name="Robots" content="Index,Follow"/> 
	<style type="text/css">
	<!--
		@import url(defaut.css);
	-->
	</style>

Le meta robot est ici inutile puisque la valeur par default est "all" soit "index+follow".
A chaque inclusion de CSS (via un <style>, <link> ou directivce @import), le média devrait être indiqué, le plus souvent media="screen" mais celle-ci ne s'appliquera pas en cas d'impression (media="print") > choisir alors
média="all" (valeur par default).
La syntaxe du @import (avec url) ne masquera pas la CSS à IE4, je te conseil donc de l'écrire comme ceci:

	<style type="text/css" media="screen">
	<!--
		@import 'defaut.css';
	-->
	</style>

Ou oublier plus simplement ces très vieilles versions que ne sont pratiquement plus utilisées.
Modifié par Hermann (08 Sep 2007 - 20:55)

Mikachu a écrit :

Je trouve tes puces en forme de flèches beaucoup trop grosses. Quand il y en a peu ça peut passer, mais sur la page "A propos", on finit par ne voir qu'elles.

Je les ai remplacé par des puces plus petites, maintenant que tu le dis, c'est vrai qu'elles étaient un peu étouffantes !

Mikachu a écrit :

Ta page création, je la trouve peu claire. Les titres et les images étant décalés, on a l'impression qu'il y a une seule réalisation pour chaque, alors qu'en fait on entre dans une galerie. Il faudrait que le titre et l'image soient plus liés pour que cela soit compréhensible.

Je prends note. Je verrai ce que je peux faire pour améliorer ça !

Mikachu a écrit :

Au niveau de tes réalisations, je trouve inutile de mettre le lien du site sur lequel on est en train de surfer, vu qu'on est déjà en train de le visiter. (bien sûr ça enrichit le site d'une réalisation, mais bon...)

Plus que le fait d'enrichir cette section, j'ai décidé de faire une place à mon Portfolio dans cette section car c'est le seul endroit où je peux m'exprimer à son sujet.

Mikachu a écrit :

Il n'est averti nulle part que certains lien des réalisations débouchent sur des fichiers pdf, en terme d'accessibilité c'est un peu dommage.

Corrigé !

Mikachu a écrit :

Le bienvenue sur la page d'accueil est inutile, car si le visiteur se sent à l'aise, il se sentira par lui même bienvenu. C'est un résidu des sites des débuts d'internet qui finira par s'enterrer dans la mémoire collective !

Je comprends que ce genre de pratique puisse faire un peu vieillot, voire débutant. L'intérêt de ce titre est surtout esthétique (juxtaposition des deux principales couleurs de la Charte Graphique).

Je le modifierai si j'ai d'autres remarques à ce propos.

Mikachu a écrit :

Les liens devraient être non cliquables lorsque la page est active.

Personnellement le fait que les liens soient encore cliquables même lorsque l'on est sur la page ne me choque pas. D'autant que - par choix - le lien "Créations" du menu est le seul lien permettant de revenir à cette page une fois dans les sous-sections de cette rubrique.

Après, encore une fois, je prends note de ton avis, et je le modifierai peut-être dans le futur.

Mikachu a écrit :

Ca doit çà qui pose le problème que je t'ai énoncé précédemment alors. Je pense qu'il vaudrait mieux le virer (après vérification bien sûr). cligne

C'est sûr que ce système d'ancres est plus adapté aux 800*600, voire 1024*768 plutôt qu'aux chanceux qui tournent sur des 20" !

Ca pose un dilemme, car je comprends tout à fait que tu n'aies justement pas compris pourquoi le site semblait s'affaisser au changement de page, mais j'ai très moyennement envie de modifier ma bannière !

Je vais essayer de plancher sur ça, peut-être en faisant un système similaire à celui de Pompage !

Merci pour ton avis !

Hermann a écrit :

Le code d'Alsacreations commence à dater un peu, et je crois que la partie accessibilité ne fut pas une priorité comme bien d'autres sites de l'époque. La prochaine version d'Alsacréations en triendra compte

Ok.

Hermann a écrit :

Tu peux me tutoyer ça ira cligne
En effet je crois que je n'ai pas ététrès clair en préjugeant un peu vite de tes connaissances. Brièvement, un lecteur d'écran est un logiciel de synthèse vocale qui permet de lire aux malvoyants ce qui s'affiche à l'écran de manière linéaire.
Dans ce contexte là ou en cas d'absence de couche de présentation (CSS), le menu devrait être identifié par un titre de section (Hn maqué en CSS) que l'on nomme par exemple "navigation" ou "rubriques" voire "menu principal".
Si tu désactives CSS to menu n'est pas assez clairement identifiable comme tel, de même en cas d'utilisation via lecteur d'écran.

Très bien, j'ai corrigé ça !

Pour ce qui est des autres remarques, j'ai enlevé la meta inutile.

Pour le lien avec ma feuille de style, j'avais tenté pour la première fois d'utiliser la syntaxe suivante lors de ma première ébauche :

<style type="text/css">
	<!--
		@import url(defaut.css) screen;
        -->	
</style>

Cependant, je crois me souvenir qu'IE 6 n'interprétais pas la CSS. Je vais donc rajouter l'attribut media dans la balise link.

Pour ce qui est d'IE 4, je pense qu'on peut décemment ne plus coder pour ce dinosaure aujourd'hui !

Bonne soirée !

Audesou a écrit :

Pour ce qui est d'IE 4, je pense qu'on peut décemment ne plus coder pour ce dinosaure aujourd'hui !

Alors Nestscape 4 et infèrieur encore moins! Cet manière d'insérer ta css (via @import) est alors inutile, autant passer par un link classique.
Modifié par Hermann (09 Sep 2007 - 13:47)

Hermann a écrit :

Alors Nestscape 4 et infèrieur encore moins! Cet manière d'insérer ta css (via @import) est alors inutile, autant passer par un link classique.

Je comprends que le principal intérêt d'utiliser la règle @import soit de masquer la CSS aux anciens navigateurs du type Nestcape 4, etc.

Tu as dû te demander pourquoi est-ce que j'utilisais cette technique pour prendre en compte Netscape 4 si je soufflais IE 4 ?

En réalité, j'ai utilisé cette règle dans les premières ébauches de mon portfolio pour en apprendre les différentes syntaxes (voir à ce sujet ce que je disais à propos d'IE 6) - au passage, je voulais tester aussi les importations dynamiques de CSS que semblaient permettre cette syntaxe, mais je ne m'en suis pas donné l'occasion -, puis voyant que cela passait impec' sous IE 6 & 7, FF, etc, je n'ai pas jugé utile d'en changer.

Toutefois, en y repensant, pour plus de cohérence dans mes propos, j'ai plutôt intérêt à repasser à notre bonne vieille balise link !

Pour revenir à une critique de Mikachu...

Mikachu a écrit :

Ta page création, je la trouve peu claire. Les titres et les images étant décalés, on a l'impression qu'il y a une seule réalisation pour chaque, alors qu'en fait on entre dans une galerie. Il faudrait que le titre et l'image soient plus liés pour que cela soit compréhensible.

J'ai refondu légèrement la page Créations en utilisant les effets de survol des sous-sections de la rubrique. Les effets sont peut-être un peu lourds, mais le rendu me plait. Qu'en penses-tu ?
Modifié par Audesou (09 Sep 2007 - 14:38)

Ok.
Un dernier détail: une fois les images désactivées, le alt de ton image
est superposé au menu des liens d'accés rapide donc inaccessible.
Je sais que ce genre de problème n'est pas toujours évident à corriger mais il
faut essayer de le résoudre si tu en as la possibilité.

Je m'en suis aussi rendu compte...

Une solution pourrait être de passer les vignettes en background CSS. Je plancherai dessus dans les jours qui viennent !

Je suis en train de me dire que pour un Portfolio censé être terminé, j'avais encore du travail à faire...

Mais comme on dit : c'est en forgeant qu'on devient forgeron !