Valentin N. - Finalisation de mon site perso...

Visuellement :

* Des pubs sur un CV, c'est plus que moyen... Le but c'est de te présenter, pas de te faire de l'argent

* La ligne "Testé avec..." risque d'être particulièrement mal vue. Elle est innutile, sauf à montrer que tu as fait un travail de test et de développement incomplet ; tout particulièrement pour un "webmaster".

* D'ailleurs sous IE6 c'est la pagaille.

* Sur l'accueil de ton site, j'ai l'impression qu'à part le menu, il n'y a pas de charte graphique, la partie contenu est un fouilli pas possible sans direction pour l'oeil, sans repères...

* Le "logo" valentin-n.net" en image est illisible tellement le contraste est faible avec le fond. Idem pour MyExpo et pour les lien de "bas de page" qui sortent de leur conteneur.

* Tu as utilisé des unités statiques pour les tailles de tes polices (px) plutôt que des relatives (em / %) du coup, impossible de redimenssioner les textes sous IE6 et 7. L'accessibilité en prend un sacré coup.

* La lecture de bas en haut n'est vraiment pas pratique, surtout avec des textes en image aussi petits...

* L'ouverture dans une nouvelle fenêtre des galeries est une erreur. Primo, pour l'accessibilité des utilisateurs de lecteurs d'écran c'est perturbant ; secondant pour tout utilisateur normal à rien habitué du web c'est énervant.

* Pourquoi les galeries photoshop et les galeries photos n'ont pas le même comportement (light box / pop-up) ?


Le code :

* Le titre de ta page est trop vague. On aura compris que ton prénom est Valentin, mais on ne connait pas ton nom (et sur un CV c'est primordial) ni ce que tu fais (ce qui sur un CV est tout aussi primordial). D'ailleurs ce titre devrait être différent pour toutes les "pages" (celles perçues par l'utilisateur à chaque clic à défaut de page de code différents).

* Tu n'as pas de meta description sur ta page, c'est domage. Même si elle n'est pas utilisée par les moteurs pour le référencement de ton site ; c'est elle qui est affichée dans les pages de résultats, à la place des x premiers caractères de la page, sous le titre d'une page. Elles attirent bien plus le clic que la description par défaut quand elles sont "sexy".

* Ton site n'as strictement aucune hiérarchie. En terme d'accessibilité c'est la loose, pour les utilisateurs de lecteur d'écran qui utilisent les titres hn pour naviguer dans les pages d'un site et accéder à l'information qui les intéresse au plus vite. C'est également la loose en terme de référencement puisque google & co se utilisent les hn de haut niveau dans leurs algorythmes.

* Quel est l'intérêt de faire une liste à un seul élément ?

<ul>
  <li><a href="index.php"><img alt="HOME" src="image.php" /></a></li>
</ul>

Il serait bien plus efficace puor ton menu d'imbriquer les liste (la liste principale regroupant les sections du site et les sous-listes leurs sous-sections). Pour l'accessibilité une seule liste pour menu, avec des sous listes pour les sections, est plus facile à naviguer que quatres listes dont les sous-sections ne sont pas signalées.

* Attention au balisage des changement de langue. Lorsque la langue d'une contenu est différente ce celle spécifiée pour l'ensemble du document, il est important, principalement pour les synthèses vocales qui peuvent ainsi utiliser le bon accent, de les signaler avec lang="CodeLangue" sur la balise qui entoure la partie de texte ou sur un span ajouter pour l'occasion.

* Pour un site dont la largeur est fixe, n'aurait-il pas été plus simple de faire une seule image, plutôt que 3 imbriquées avec 3 div ?

<div id="header">
  <div id="header-img">
    <div id="valentin-n">webmaster :: webdesign :: graphisme</div>
  </div>
</div>

* Grace au code, je comprend mieux le contenu "visuel" de ton site :

<img border="0" alt="Valentin N. MY EXPO :: webmaster :: webdesign :: graphisme :: photoshop :: css xhtml html w3c" src="myexpo.gif" />

Le alt de l'image donne plus d'information que l'image elle-même (qui est particulièrement vague), c'est rare... mais pas des plus efficace.

* Ton utilisation de JavaScript pour faire des alert de ton main et de ton ID facebook est des plus innaccessible.

<li><a href="javascript:alert('picaval008[at]yahoo[dot]fr');" class="mini">mail <img alt="" src="ico_lien_externe.gif" border="0" /></a></li>
<li><a href="javascript:alert('759962404');" class="mini">facebook <img alt="" src="ico_lien_externe.gif" border="0" /></a></li>

Il est impossible de copier/coller le contenu des alerte, n'espère pas que quelqu'un retienne ton mail ou ton ID facebook par coeur... Autant je comprend que tu veuille protéger ton email du spam, mais ta page facebook ??? Pour ton email, met plutôt en place un formulaire.



En conclusion, niveau accessibilité, il y a des points à revoir : le menu, l'interropérabilité, les unités de tailles de polices, la hiérarchie du contenu... Niveau bonne pratiques de développement et design également.

Finalement j'en ai décidé autrement, j'abandonne les soucis de compatibilité avec IE6, j'ai ajouté quelques instructions qui permettent à IE6 d'afficher un rendu pas trop mauvais - j'ai mis {display:inline;} aux <li> pour supprimer l'espacement béant. En revanche les autres problèmes sont insolvables à moins de faire une feuille css spécialement dédiée à IE6 - solution pas envisageable.

J'inscrirai une petite mention en bas invitant ceux qui le désirent, à passer à IE7 ou 8, comme beaucoup de sites populaires le font, faute de pouvoir trouver un compromis CSS/(x)html (SOURCE).
Un site de qualité se veut aussi léger, critère que nous perdons de vue parfois (enfin c'est mon opinion)

Pour le reste, j'y travaillerai...

darkstar2023 a écrit :
En revanche, pour les polices, j'ai utilisé une taille fixe pour body, puis j'ai mis des tailles relatives (X.Xem) pour le reste. Mais comment faire pour permettre aux visiteurs de faire varier la taille ? Tout en définissant une taille fixe par défaut - 15px pour la taille normale par exemple, redimensionnable ensuite selon les besoins des visiteurs.

Malheureusement, c'est cette premier définition qui bloque tout. Tous les éléments de body (donc de la page) héritant de body, les tailles que tu défini après sont calculée par rapport au 15px et donc non agrandissables sous IE6/7. Il faut donner une taille de police en unité relative pour tous les éléments

darkstar2023 a écrit :
Est-il possible d'installer simultanément IE<=7 et IE8 en même temps ? C'est vrai que sans avoir plusieurs versions je ne prévois pas les rendus...

Oui, si tu es sous XP tu peux installer MultipleIEs sous Vista il faudra installer des version "stand alone" (en faisant une recherche "IE6 (ou 7) stand alone" tu devrais pouvoir trouver facilement).

darkstar2023 a écrit :
Pour les listes, cela veut-il dire qu'on ne met qu'un seul <ul> (1 liste) puis <li>(sous-liste) (pour les sous-listes on utilise <p> ?)

Il est possible d'imbriquer les listes :

<ul>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

darkstar2023 a écrit :
Pour les <hn>, je ne comprends pas trop étant donné que ceci est adapté pour les sites à contenu textuel étoffé.

Oui et non, l'utilisation de Hn est faite pour hiérarchiser le contenu d'une page, ils sont similaires au titres que l'on peut utiliser dans word et doivent être utilisé de la même façon. Mettre un h1 sur le titre de ton site et un h2 sur ce que tu es serait une bonne utilisation des hn même s'il y a peu de contenu sur ton site.

darkstar2023 a écrit :
Finalement j'en ai décidé autrement, j'abandonne les soucis de compatibilité avec IE6, j'ai ajouté quelques instructions qui permettent à IE6 d'afficher un rendu pas trop mauvais - j'ai mis {display:inline;} aux <li> pour supprimer l'espacement béant. En revanche les autres problèmes sont insolvables à moins de faire une feuille css spécialement dédiée à IE6 - solution pas envisageable.

C'est domage, avec l'utilisation de commentaries conditionnel, inclure une feuille de style spécialement pour IE6 et inférieurs est particulièrement facile et efficace.

darkstar2023 a écrit :
J'inscrirai une petite mention en bas invitant ceux qui le désirent, à passer à IE7 ou 8, comme beaucoup de sites populaires le font, faute de pouvoir trouver un compromis CSS/(x)html.

C'est une TRES mauvaise idée. Principalement parce que ça ne servira à RIEN, mais vraiment rien du tout. La raison ? La plus grande partie (si pas en entièreté) des utilisateurs d'IE6 sont des gens qui n'ont pas le contrôle de l'installation de logiciels sur l'ordinateur qu'ils utilisent. Il ne peuvent tout simplement pas mettre à jour leur logiciel, et vouloir les "informer" au sujet des autres navigateurs existant sur le marché est la meilleurs façon de les insulter, ces gens le savent très bien qu'il y a d'autres navigateurs.
Ces gens, ce sont des employés, qui utilisent Internet sur leur lieu de travail.
Je tiens à te faire remarqué que ton site est une vitrine que, j'espère, tu souhaite présenter à de potentiel recruteur, crois-tu qu'en leur annonçant que leur navigateur, celui choisi par leur admin system et validé par la politique de l'entreprise, est une daube est la meilleure façon d'entrer en contact avec eux ?

Et je suis au regret de t'annoncer que cette campagne d'abandon d'IE6 est des plus risible, surtout dans les raisons évoqués par les principaux meneurs de celle ci.

darkstar2023 a écrit :
Un site de qualité se veut aussi léger, critère que nous perdons de vue parfois (enfin c'est mon opinion)

Un site de qualité se veut surtout propre et intérropérable.

Laurie-Anne a écrit :
Oui, si tu es sous XP tu peux installer MultipleIEs sous Vista il faudra installer des version "stand alone" (en faisant une recherche "IE6 (ou 7) stand alone" tu devrais pouvoir trouver facilement).

Sous Vista, on peut utiliser IETester. Mais, l'idéal reste toujours d'utiliser des machines virtuelles (à défaut de disposer de plusieurs postes), une par version d'IE : contrairement à MultipleIE ou à IETester, on a la garantie d'avoir une vraie version d'IE qui se comporte comme un IE installé chez l'utilisateur final.

De ce que j'avais testé IETester n'était pas génial sous Vista.

Bonjour,
attention au texte minuscule orienté à 90° c'est très peu lisible, il faut éviter ça (comme il faut l'éviter sur les panneaux de signalétique, les kakémonos, etc)
Ok pour les grand titres de section en lettres capitale comme portfolio mais déconseillé pour le reste.

N'utilisez pas la redirection pour le moment (je rectifierai plus tard), tapez l'adresse complète, vous n'aurez pas de frameset.