Niconoe.eu - Developpement Web

Hello à tous,

Je viens de mettre en test mon futur site web pro. Je suis plus orienté développement que design, et l'idée ici est de faire quelque chose de minimaliste. A noter que je prévois de repasser sur le code pour paufiner ça au maximum une fois que le design sera vraiment stabilisé.

Merci d'avance pour toutes vos critiques,

Ca se passe à : http://niconoe.eu

Nicolas Noé

moi y a un premier truc qui m'étonne, il n'y a pas de structuration dans ton code html
tu attaques direct avec de paragraphes <p>, il n'y a a aucune balise h1 ou h2, et ça google aime bien voir la structure d'un site.

tu as un <div id="contact">, qui ne fait que contenir un autre div, peut être qu'un seul div aurait fait l'affaire, au point de vue sémantique...

<div id="contact">
	<div id="contact_inner">
        <!-- ici le contenu de ton div  -->					
	</div>
</div>

après... ton site est un peu vide, on peut pas trop juger.... pour l'instant.

As tu vraiment intérêt à faire des liens vers les sites des outils de développement?
c'est un peu comme si tu mettais aussi un lien vers la ville de namur...
Modifié par lionel_css3 (21 Nov 2011 - 16:51)

Merci pour ta réponse !

Tu as entièrement raison concernant le manque de structure... A force de me battre avec le design, j'en ai oublié des choses élémentaires. J'affine ça de suite.

Pour le div contact, en effet, il n'apporte rien au niveau sémantique, il est là purement pour la mise en place de CSS. Je vais regarder si je peux m'en débarasser sans trop compliquer les choses...

Sinon, le site est effectivement très vide, mais c'est plus ou moins voulu: disons que je ne cherche pas à chasser le client actuellement, mais il me fallait une présence web rapidement. Et comme je ne pourrai pas y investir trop de temps actuellement, je me suis dit que j'allais faire un truc minimal...

Les liens vers les outils de développement n'apportent pas grand chose... Mais sont ils gênants ? Quid du référencement ? Je t'avoue que j'avais hésité à les intégrer...

Merci encore !

niconoe a écrit :

Les liens vers les outils de développement n'apportent pas grand chose... Mais sont ils gênants ? Quid du référencement ? Je t'avoue que j'avais hésité à les intégrer...

il parait que google n'aime pas quand il y a trop de liens sur un site nouveau.. je comprends pas pourquoi mais enfin je l'ai déjà lu
Modifié par lionel_css3 (21 Nov 2011 - 17:25)

niconoe a écrit :

J'ai déjà ajouté des titres au lieu des paragraphes la ou c'était complètement évident.
Par contre j'ai un doute à d'autres endroits... P
Merci merci !

oui c'est mieux mais rappelle toi que google tient compte en priorité de ce qui se trouve au début de ta page pour l'indexation donc si j'étais toi, ton div contact, je le mettrais plutôt après (dans le flux) le reste. Et tu t'arranges avec le css pour le positionner là où tu veux.

<p><span class="gr bold"><a href="mailto: nicolas@niconoe.eu">nicolas@niconoe.eu</a></span></p>
	<p>+32 (0)472/92.92.08<br/><span class="label">Skype</span>: niconoe</p>

	<p><span class="label">Company id</span>: BE 0833.268.404</p>

pourquoi mets tu des <span> partout?
ton <p><span class="gr bold"> peut être remplacé par <p class="gr bold"> étant donné qu'il n'y a rien d'autre dans le paragraphe à part ton span

le <span class="label"> lui se justifie mieux, par comparaison
Modifié par lionel_css3 (21 Nov 2011 - 17:46)

lionel_css3 a écrit :
pourquoi mets tu des &lt;span&gt; partout?
ton &lt;p&gt;&lt;span class=&quot;gr bold&quot;&gt; peut être remplacé par &lt;p class=&quot;gr bold&quot;&gt; étant donné qu'il n'y a rien d'autre dans le paragraphe à part ton span

le &lt;span class=&quot;label&quot;&gt; lui se justifie mieux, par comparaison

Voilà, ce point précis est fixé. Mais je dois repasser sur tout, je sais qu'il doit rester d'autres incohérences du genre. Je vais maintenant mettre le div "contact" plus bas comme tu me l'avais suggéré pour le référencement.
Modifié par Laurie-Anne (24 Nov 2011 - 11:39)

lionel_css3 a écrit :


oui c'est mieux mais rappelle toi que google tient compte en priorité de ce qui se trouve au début de ta page pour l'indexation donc si j'étais toi, ton div contact, je le mettrais plutôt après (dans le flux) le reste. Et tu t'arranges avec le css pour le positionner là où tu veux.

Merci, ce point m'avais échappé. C'est corrigé !

J'ai adapté le background (motif "presque noir" à la place du noir).

Y'en a d'autres qui ont des avis ?

ton background est mieux que le noir cru d'avant, mais fait gaffe au motif que tu emploies.... là, le décor floral, ça fait pas trop développeur web !!!
t'as pas trouvé un motif un peu plus technique?
Le symbolisme, c'est important .. là on pourrait croire que c'est le site d'un décorateur ou architecte d'intérieur...

dans ta structure, il y a deux h1 et je crois que normalement (mais ça a l'air de changer avec html5) il ne devrait y avoir qu'un seul h1 par page, celui ci représentant le titre de cette page.
ensuite, si tu mets qu'un seul h2, à quoi ça sert??? pourquoi subdiviser pour rien?

tu pourrais remplacer ton h2#subtitle par un paragraphe et faire une structure du genre:

<h1 id="logo">Niconoe.eu</h1>
<p>Pragmatic web development & training</p>
<h2>Présentation</h2>
blaa blaa blaa
<h2>Tools</h2>
blaa blaa blaa
<h2>Adress</h2>
blaa blaa blaa

à mon avis, sémantiquement ça serait plus cohérent

lionel_css3 a écrit :
tu pourrais remplacer ton h2#subtitle par un paragraphe et faire une structure du genre:

&lt;h1 id=&quot;logo&quot;&gt;Niconoe.eu&lt;/h1&gt;
&lt;p&gt;Pragmatic web development &amp; training&lt;/p&gt;
&lt;h2&gt;Présentation&lt;/h2&gt;
blaa blaa blaa
&lt;h2&gt;Tools&lt;/h2&gt;
blaa blaa blaa
&lt;h2&gt;Adress&lt;/h2&gt;
blaa blaa blaa

à mon avis, sémantiquement ça serait plus cohérent

Tu as parfaitement raison, j'ai adapté suivant cette structure !

lionel_css3 a écrit :
ton background est mieux que le noir cru d'avant, mais fait gaffe au motif que tu emploies.... là, le décor floral, ça fait pas trop développeur web !!!
t'as pas trouvé un motif un peu plus technique?
Le symbolisme, c'est important .. là on pourrait croire que c'est le site d'un décorateur ou architecte d'intérieur...

Ben, en fait je cherchais volontairement à sortir un peu de la logique "technique = je mets un truc technique"... Perso je trouvais ça plutôt positif. Mais si tout le monde me dit que je me plante, je peux aviser

Il y en a d'autres qui ont des avis, niveau design notamment ?

niconoe a écrit :


Tu as parfaitement raison, j'ai adapté suivant cette structure !

ah oui, ça présente mieux au niveau sémantique.

après, l'histoire du motif de fond, c'est toi qui voit, si tu veux sortir du technique, mets peut être un motif un peu plus fantaisiste alors, car là, ton motif il fait un peu 19e siècle, lol, il est trop en contraste avec l'informatique

Bonjour,

lionel_css3 a écrit :
dans ta structure, il y a deux h1 et je crois que normalement (mais ça a l'air de changer avec html5) il ne devrait y avoir qu'un seul h1 par page, celui ci représentant le titre de cette page.
ensuite, si tu mets qu'un seul h2, à quoi ça sert??? pourquoi subdiviser pour rien?

Hé non en fait c'est une légende urbaine il peut effectivement avoir plusieurs h1 sur une page ^^

En ce qui concerne le site personnellement j'aime bien le design ça change de ce qu'on voit habituellement. Vraiment original. Je trouve juste que la texture de fond n'est pas cohérente avec le reste du design, il y a que des aplats de couleur et là tu viens avec une texture avec un motif qui n'a pas de rapport avec le reste. Tu devrais aller à fond dans le style avec lequel tu as commencer ton site pour ton background.

Enfin c'est juste un avis personnel ^^

Par contre un truc problématique c'est ta façon de gérer les liens, dans ta partie de gauche « Nicolas Noé » est vert et pas cliquable en dessous dans la même structure visuelle tu as ton adresse email qui elle est cliquable. Bref ils ont le même visuel pourtant il y en a un qui est un lien et l'autre pas.

Tu devrais uniformiser ce qui est cliquable pour pas qu'on doivent chercher par nous même.

Gili a écrit :

Par contre un truc problématique c'est ta façon de gérer les liens, dans ta partie de gauche « Nicolas Noé » est vert et pas cliquable en dessous dans la même structure visuelle tu as ton adresse email qui elle est cliquable. Bref ils ont le même visuel pourtant il y en a un qui est un lien et l'autre pas.

Tu devrais uniformiser ce qui est cliquable pour pas qu'on doivent chercher par nous même.

Tu as parfaitement raison, je vais modifier ça !

Grand merci encore,

Nico

niconoe a écrit :
Par contre j'ai un doute à d'autres endroits... Pour les paragraphes de présentation (au milieu) et la liste des outils de dev (en bas). D'un point de vue structure, il me semble tout à fait souhaitable de placer un titre. Par contre visuellement, je trouve ça bien. Je pourrais bien sûr les cacher avec un &quot;display: none;&quot;, mais la pratique me semble douteuse, nan ?

Ce n'est effectivement pas un bonne idée.

lionel_css3 a écrit :
oui c'est mieux mais rappelle toi que google tient compte en priorité de ce qui se trouve au début de ta page pour l'indexation donc si j'étais toi, ton div contact, je le mettrais plutôt après (dans le flux) le reste. Et tu t'arranges avec le css pour le positionner là où tu veux.

Euh... non, c'est idiot et complètement faux. Google est tout à fait capable de retrouver le contenu important où qu'il soit dans la page. D'un point de vue accessibilité et logique du code, il est préférable de conserver le même ordre dans le code et visuellement.

lionel_css3 a écrit :
ton background est mieux que le noir cru d'avant, mais fait gaffe au motif que tu emploies.... là, le décor floral, ça fait pas trop développeur web !!!

Déjà, c'est pas floral, mais baroque ; ensuite, il va falloir développer en quoi c'est incompatible avec la profession de développeur web ?

lionel_css3 a écrit :
Le symbolisme, c'est important .. là on pourrait croire que c'est le site d'un décorateur ou architecte d'intérieur...

Vu qu'il y a écrit développeur web, je pense qu'il n'y a pas trop de risque.

lionel_css3 a écrit :
dans ta structure, il y a deux h1 et je crois que normalement (mais ça a l'air de changer avec html5) il ne devrait y avoir qu'un seul h1 par page, celui ci représentant le titre de cette page.

C'est totalement faux et l'a toujours été quelque soit la version d'HTML. Il n'y a aucun problème a utiliser plusieurs h1...

Quand on fait une critique sur un ton aussi impérieux, il est préférable de ne pas dire de bêtises...


Passons à la critique.

Pour le design, c'est sobre et clair. Très bien. Par contre, j'ai un peu de mal à comprendre à quoi sert le site. Est-ce un portfolio (si oui, où sont les réalisations), est-ce une carte de visite (si oui, pourquoi n'est-ce pas clairement indiqué) ?

Le site mériterait à être plus explicatif quand à son but. Présenter tes réalisations serait également un plus si le but est de trouver du prestations.

Pour le code :
* La déclaration XML est totalement inutile (puisque tu n'utiliser pas d'XML) et ne servira qu'à faire basculer IE6 en mode quirks.

* Le doctype XHTML 1.1, c'est super cool, sauf que tu fais de l'HTML... Un doctype HTML 4.1 ou 5 serait plus logique.

* Ta déclaration de langue n'est pas correcte : attribut lang sur html + meta. L'attribut xml:lang n'est pas super utile.

* Tes H2 masqués, comme déjà dit, c'est une très mauvaise idée. Tu balises un contenu qui n'existe visuellement pas. Je n'en voie pas l'intérêt.

* Les alt de tes images ne sont pas bien rempli. Le texte alternatif d'une image sert à retranscrire le contenu porté par l'image. Tes "visual ornament" n'ont aucun contenu, ce sont des images purement décoratives. Pour ce type d'image il faut laisser le alt vide (ou les inclure en CSS) pour ne pas ajouter de bruit à la page.

* Attention au mailto en clair, c'est le meilleurs moyen de récupérer du spam. Il serait préférable de prévoir un formulaire de contact.


Bonne continuation.


Ps. : vous serait-il possible d'éviter de faire plusieurs messages successifs. La fonction "éditer" c'est magique.

Salut,

Moi ce que je comprend pas c'est l'intérêt de mettre :
<span class="wh"><a href="--">Ruby</a></span>
alors que
<a class="wh"> suffit...

En mettant en utf-8 tu n'aurais pas besoin de mettre les &bull;ou &amp; par exemple...

Pareil pour :

<div id="contact">
<div id="contact_inner">

Ca sert à rien... un seul suffit puisqu'ils font la même taille...

Je trouve ça un peu bête de pas avoir mis de "CV"... on sait pas l'expérience et les compétences c'est dommage.

Laurie-Anne a écrit :

Euh... non, c'est idiot et complètement faux. Google est tout à fait capable de retrouver le contenu important où qu'il soit dans la page. D'un point de vue accessibilité et logique du code, il est préférable de conserver le même ordre dans le code et visuellement.
Quand on fait une critique sur un ton aussi impérieux, il est préférable de ne pas dire de bêtises...

Décidément cela semble une habitude chez toi de traiter les gens d'idiots...mais à ce moment là tu devrais aussi traiter d'idiot David Sawyer McFarland, l'auteur de l'un des meilleurs livre sur CSS......

extrait page 316 - CSS Missing Manual 2d edition (O'Reilly)

The order of the <div> tags in the HTML may not seem like a big deal until you
try to browse the web page without CSS, which is the case for many alternative
browsers, including screen readers that read a page’s content aloud to visually
impaired visitors. Without CSS, all the sidebar material (which often includes navigational
elements, ads, or other information that’s not relevant to the main topic
of the page) appears before the content the visitor came to read in the first place.
The inconvenience of having to scroll past the same sidebar content on each page
will turn off some visitors. Furthermore, your page is less accessible to visionimpaired
visitors, who have to listen to their screen readers read off a long list of
links and ads before coming to any real information.
And if that doesn’t sway you, you’ve got the search engines to worry about. Most
search engines limit the amount of HTML they read when searching a site. On a
particularly long web page, they simply stop at a certain point—possibly missing
important content that should be indexed by the search engine. Also, most search
engines give greater value to the HTML near the beginning of the file.

fin de l'extrait


je traduis (en gros) pour les non bilingue la partie en rouge:
"et pour vous convaincre encore plus, vous devez vous soucier du comportement des moteurs de recherche. La plupart des moteurs de recherche limitent la quantité de HTML qu'ils lisent lorsqu'ils scrutent une page. Sur une page web particulièrement longue, ils s’arrêteront à un certain moment (de lire la page) en provoquant probablement la non prise en compte d'un contenu important qui aurait pu être indexé par le moteur de recherche. Ainsi, la plupart des moteurs de recherche donnent plus de poids au contenu HTML situé au début du fichier.....

La page citée était inclue dans le chapitre sur les stratégies de mise en page avec des Float grâce auxquelles on peut faire apparaître par exemple un menu en 1er dans la page, même si le code le composant est plus bas dans le flux HTML, donc avec un ordre complétement différent que l'ordre visuel.

mais bon, ce bouquin sera probablement complétement idiot, selon Laurie-Anne...

Laurie-Anne a écrit :

C'est totalement faux et l'a toujours été quelque soit la version d'HTML. Il n'y a aucun problème a utiliser plusieurs h1...

je te signale que j'ai mis "il ne devrait y avoir ..." au conditionnel... c'était une suggestion admise par certains, et pas que des idiots....

Laurie-Anne a écrit :

Ps. : vous serait-il possible d'éviter de faire plusieurs messages successifs. La fonction "éditer" c'est magique.

Y a le pour et le contre.. quand le message est un peu ancien, ceux qui suivent le fil de le reliront probablement pas
Modifié par lionel_css3 (24 Nov 2011 - 14:02)