3246 sujets

Critiques de vos sites: code et design

Www.synrj.fr - Tout nouveau, tout beau (enfin, espèrons)

Bonjour à toutes et à tous,
www.synrj.fr
Je viens de terminer la réalisation de mon premier site, un site un peu fourre-tout, mi CV mi album de photo (ou comment rassembler boulot et thalasso en un seul site Smiley rolleyes ).

Le site n'a pas (encore) été testé sous IE6, car je n'y ai pas accès pour le moment. Ça va faire bientôt deux mois que je suis en mode sans échec, alors j'ai laissé tomber la machine virtuelle.
Sous IE8 il y a un léger problème de décalage vers la droite et sous Firefox/Chrome (pas encore essayé Safari, ni Opéra), tout semble nickel.

Je suis très peu fier de l'utilisation d'un tableau (partie Travels), mais j'avoue ne pas avoir réussi autrement. -- corrigé \o/
De même dans la partie About j'ai du bricoler un poil pour rendre les divs déroulantes navigables au clavier (tout en évitant de trop pénaliser la navigation à la souris).
Autrement il faudrait que j'étoffe un peu la partie Gallery, trop vide à mon goût), mais j'ai pas énormément de temps pour moi en ce moment.

J'ai conscience de l'absence de hiérarchisation, mais je n'en vois pas la nécessité sur un site tel que celui-ci. J'ai lu que c'était très utile pour la navigation à l'aide de lecteurs d'écran, mais pour un petit site de ce genre (peu de contenu, pas de listes d'articles sur une même page par exemple) est-ce vraiment pénalisant pour les visiteurs ?

Je crois que c'est à peu près tout, allez y, je suis prêt ! Smiley murf

Edit : En fait je viens de remarquer que j'ai pas encore mis en ligne mes modifs d'hier soir (donc le bricolage navigation souris/clavier n'y est pas encore, ce qui fait qu'il faut cliquer pile sur le texte pour dérouler la div correspondante). Smiley sweatdrop
Modifié par SynRJ (26 Nov 2009 - 19:30)
Bonjour,

Alors graphiquement, c'est noir... avec des textes blancs... donc du coup, je vais éviter de lire les textes qui piquent les yeux. Un contraste fort c'est bien, un contraste trop fort c'est fatiguant pour les yeux. Utilise plutôt un gris très clair pour les textes.

Les effets de survol sur ton menu sont à revoir le texte qui devient noir sur fond nois, c'est pas des plus pratique.

Il est quasi impossible de cliquer sur les "colorfull letters"... Principalement parce que que un lien on s'attend à ce que le curseur change, ce qui n'est pas le cas ici, ni dans tes galeries. Curseur normal = pas de lien. Personne ne va s'amuser à cliquer sur tous les éléments de la page pour voir si y a un lien ou pas...

Pour IE6, ça pourrait être pire, mais ça pourrait également être mieux s'il n'y avant rien avant le doctype.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Je pensais que c'était fini cette mode de mettre la définition xml... Accessoirement ton site étant du HTML, un doctype HTML 4.01 servit en html vaut mieux qu'un doctype XHTML tout autant servi en html...

Faire un site en anglais, ça peut être sympa, mais ton anglais n'est pas vraiment anglais... Fait également attention à la traduction de tes diplômes, une license professionnelle ce n'est pas un Bachelor c'est un diplôme universitaire (éventuellement technologique) en 1 an de niveau bac +3. Le bachelor c'est niveau Bac+4 (même si une des année est facultative dans de nombreuses formations).

Pour le code :

* Ceci : 
<div id="header" class="container"></div>
Est une abhération. 1. un élément vide, de base ça sert à rien ; 2. une image porteuse de contenu (et un contenu juste à peine important...) DOIT se trouver dans le code HTML et non le CSS. Si les images sont désactivée, actuellement, ton site n'as plus de titre...

* Une balise meta description avec une description sexy serait un plus pour attirer le chaland des moteurs de recherche.

* Quel est l'intérêt d'utiliser des span pour délimiter tes paragraphes ? Il existe une balise fantastique <p> qui est spécialement prévue pour cela.

* Pour ce qui est de la hiérarchie, même si elle ne te semble pas importante, elle est toujours utile et bienvenue.

* Tu est définitivement atteint de spanite aiguë... Il y a d'autres balises très bien en HTML.

En bref, la construction du site est à revoir... Beaucoup...
Hello !

J'avoue avoir pas mal hésité pour le contraste, j'ai opté pour celui-ci (plus fort, tu meurs) parce que ça ne me gênait pas spécialement (même tard le soir, pourtant j'ai pas des yeux du feu de dieu non plus).
Laurie-Anne a écrit :
Les effets de survol sur ton menu sont à revoir le texte qui devient noir sur fond nois, c'est pas des plus pratique.
Seul le menu actif possède ce problème : noir sur fond gris foncé. Les autres c'est du noir sur fond gris moyen (mais je peux l'éclaircir si vraiment c'est illisible à ce point).

Laurie-Anne a écrit :
Il est quasi impossible de cliquer sur les "colorfull letters"... Principalement parce que que un lien on s'attend à ce que le curseur change, ce qui n'est pas le cas ici, ni dans tes galeries. Curseur normal = pas de lien. Personne ne va s'amuser à cliquer sur tous les éléments de la page pour voir si y a un lien ou pas...
Le curseur change chez moi.

Laurie-Anne a écrit :
Pour IE6, ça pourrait être pire, mais ça pourrait également être mieux s'il n'y avant rien avant le doctype.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Je pensais que c'était fini cette mode de mettre la définition xml... Accessoirement ton site étant du HTML, un doctype HTML 4.01 servit en html vaut mieux qu'un doctype XHTML tout autant servi en html...
Les affres du copier/coller.

Laurie-Anne a écrit :
Faire un site en anglais, ça peut être sympa, mais ton anglais n'est pas vraiment anglais...
A vrai dire j'ai remplacé les "Loreum blabla" récemment, d'où la première page assez... soft.

Laurie-Anne a écrit :
Fait également attention à la traduction de tes diplômes, une license professionnelle ce n'est pas un Bachelor c'est un diplôme universitaire (éventuellement technologique) en 1 an de niveau bac +3. Le bachelor c'est niveau Bac+4 (même si une des année est facultative dans de nombreuses formations).
J'avoue avoir quelques problèmes pour trouver des correspondances entre les diplômes. Pourtant j'ai cherché, mais parfois il n'y a tout simplement pas d'équivalent. Du coup il vaudrait peut-être mieux que je me contente des intitulés français ?

Pour le code :

Laurie-Anne a écrit :
* Ceci : 
<div id="header" class="container"></div>
Est une abhération. 1. un élément vide, de base ça sert à rien ; 2. une image porteuse de contenu (et un contenu juste à peine important...) DOIT se trouver dans le code HTML et non le CSS. Si les images sont désactivée, actuellement, ton site n'as plus de titre...
Entendu, je ne catégorisais pas ma bannière comme étant "porteuse de contenu", ce sera fait.

Laurie-Anne a écrit :
* Une balise meta description avec une description sexy serait un plus pour attirer le chaland des moteurs de recherche.
Sur toutes les pages ? Ou juste sur la première. Pour ce qui est du sexy, ça...

Laurie-Anne a écrit :
* Quel est l'intérêt d'utiliser des span pour délimiter tes paragraphes ? Il existe une balise fantastique <p> qui est spécialement prévue pour cela.
Vu, je vais me pencher sur la reconversion de quelques span.

Laurie-Anne a écrit :
* Pour ce qui est de la hiérarchie, même si elle ne te semble pas importante, elle est toujours utile et bienvenue.
En fait c'est pas vraiment une question d'importance, c'est juste que je ne vois pas où les mettre. Du genre sur la page d'accueil, ou pourrais-je mettre un h1 (et quel intérêt d'un h1 seul s'il n'y a pas de h2, ou d'autres h1, derrière, tant qu'à faire) ?

Merki !
Modifié par SynRJ (24 Nov 2009 - 15:44)
Bonjour!
SynRJ a écrit :

J'avoue avoir pas mal hésité pour le contraste, j'ai opté pour celui-ci (plus fort, tu meurs) parce que ça ne me gênait pas spécialement (même tard le soir, pourtant j'ai pas des yeux du feu de dieu non plus).

Pour toi c'est peut-être correct, mais faut pensé qu'on fait un site pour les autres aussi. Pour ma part l'écriture blanche sur fond noir fini par me fatiguer à la longue, dû au trop grand contraste. L'oeil doit toujours s'ajuster, ce qui cause la fatigue.

SynRJ a écrit :
Entendu, je ne catégorisais pas ma bannière comme étant "porteuse de contenu", ce sera fait.

Pourquoi ils disent tous ça?
Il faut premièrement que tu te pose une question. Que contient ta bannière?
Réponse: un effect graphique avec écrit dedant "Synrj - Beyond imagination"
Juste ça c'est du contenu, c'est le titre de ton site.

SynRJ a écrit :
Sur toutes les pages ? Ou juste sur la première. Pour ce qui est du sexy, ça...

L'idéal est que chaque page ais sa propre description.

Niveau design, l'idée est là. Pour ma part je trouve que les contrastes sont trop important, il faudrait atténué un peu mettre d'avantage de nuance de gris. Peut-être que l'ajout d'une 3ième couleurs pourrait rendre le tout un peu plus attirant et dynamique.
juliesunset a écrit :
Pourquoi ils disent tous ça?
Il faut premièrement que tu te pose une question. Que contient ta bannière?
Réponse: un effect graphique avec écrit dedant "Synrj - Beyond imagination"
Juste ça c'est du contenu, c'est le titre de ton site.
Parce que c'est pas forcément évident Smiley langue
Mais je pense avoir saisi maintenant !

juliesunset a écrit :
Niveau design, l'idée est là. Pour ma part je trouve que les contrastes sont trop important, il faudrait atténué un peu mettre d'avantage de nuance de gris. Peut-être que l'ajout d'une 3ième couleurs pourrait rendre le tout un peu plus attirant et dynamique.
Je vais donc essayer de mettre un gris très clair, comme conseillé. Pour la troisième couleur j'y réfléchirai aussi, même si l'idée ne m'attire pas spécialement.
Pour la troisième couleur c'est vraiment juste un suggestion, ça peut être quelque chose de très discret. C'est surtout pour atténuer la trop grand présence du blanc, mais tu pourrais très bien y arrivé en ajoutant des nuance de gris.

De toute façon, c'est ton site, c'est toi qui décide.
Concernant le contenu en lui-même, en particulier le cas des diplômes, je n'ai pas encore touché, je verrai ça quand j'aurai le temps de chercher (d'ailleurs si quelqu'un connait des correspondances sympa, je prends !).

J'ai adoucit un peu le contraste (je suis passé d'un vif #fff à un #ddd) et j'ai aussi éclairci les menus au survol. C'est mieux ?

J'ai transformé beaucoup de spanblock (huhu...) en p et mis ma bannière directement dans le code HTML, j'ai aussi retiré la déclaration xml du début de page.

Au niveau de la hiérarchisation, je ne vois toujours pas comment la mettre en place. Smiley sweatdrop

Autrement, d'autres personnes voient apparaître un curseur standard à la place du curseur lien dans les galeries et sur le "SynRJ" du bas de page ?
SynRJ a écrit :
J'avoue avoir pas mal hésité pour le contraste, j'ai opté pour celui-ci (plus fort, tu meurs) parce que ça ne me gênait pas spécialement (même tard le soir, pourtant j'ai pas des yeux du feu de dieu non plus).
C'est cool pour toi, mais c'est pas le cas de tout le monde.

SynRJ a écrit :
Le curseur change chez moi.
Pas chez moi... En même temps la zone cliquable étant tellement réduite...

SynRJ a écrit :
A vrai dire j'ai remplacé les "Loreum blabla" récemment, d'où la première page assez... soft.
Euh... Je ne parlais pas de contenu soft, mais d'anglais bancal ^^;

SynRJ a écrit :
J'avoue avoir quelques problèmes pour trouver des correspondances entre les diplômes. Pourtant j'ai cherché, mais parfois il n'y a tout simplement pas d'équivalent. Du coup il vaudrait peut-être mieux que je me contente des intitulés français ?

Concernant le contenu en lui-même, en particulier le cas des diplômes, je n'ai pas encore touché, je verrai ça quand j'aurai le temps de chercher (d'ailleurs si quelqu'un connait des correspondances sympa, je prends !).
En fait le mieux pour les diplômes, c'est de ne pas traduire l'intitulé mais d'ajouter une ligne explicative. D'ailleurs si tu tiens à faire un CV en anglais, il faut le faire à la mode anglaise pour laquelle on ajoute les modules étudiés et éventuellements les notes obtenues.

SynRJ a écrit :
Entendu, je ne catégorisais pas ma bannière comme étant "porteuse de contenu", ce sera fait.
Bah pour faire simple : Le texte c'est du contenu, s'il y a du texte, il y a du contenu (ceci est une explication des plus simplistes, mais en se basant dessus on évite déjà les plus grosses bourdes).

SynRJ a écrit :
En fait c'est pas vraiment une question d'importance, c'est juste que je ne vois pas où les mettre. Du genre sur la page d'accueil, ou pourrais-je mettre un h1 (et quel intérêt d'un h1 seul s'il n'y a pas de h2, ou d'autres h1, derrière, tant qu'à faire) ?
Pour faire simple encore une fois. Le titre de la page peut être mis en h1 et le titre de la section en h2. L'intérêt, là il est surtout au niveau du référencement.
a écrit :
Pour faire simple encore une fois. Le titre de la page peut être mis en h1 et le titre de la section en h2. L'intérêt, là il est surtout au niveau du référencement.
Le fait est que je n'ai pour le moment pas de titre de page, et encore moins de sections (et vu le contenu actuel, je vois pas trop où en faire Smiley langue ). Autrement quelqu'un m'a proposé d'enlever le texte de la bannière et de mettre ce texte directement dans le code (et donc passer la bannière dans le CSS) dans un H1. Libre à moi de mettre ensuite le titre de la page de la même façon, dans un H2 cette fois-ci.
Entre temps j'ai viré le tableau de la rubrique travels. \o/

Autrement, je me permets de demander si d'autres ont le problème du curseur qui ne change pas sur certains liens (galeries et SynRJ coloré), parce que j'ai beau essayer et faire essayer, personne ne semble avoir ce soucis.
Pour l'anglais bancal, je ne vois pas trop, c'est pas du shakespeare c'est sur mais... bancal ?

Des retours sur le nouveau contraste ?

D'autres retours tout court ? Smiley lol
SynRJ a écrit :
Le fait est que je n'ai pour le moment pas de titre de page, et encore moins de sections (et vu le contenu actuel, je vois pas trop où en faire Smiley langue ). Autrement quelqu'un m'a proposé d'enlever le texte de la bannière et de mettre ce texte directement dans le code (et donc passer la bannière dans le CSS) dans un H1. Libre à moi de mettre ensuite le titre de la page de la même façon, dans un H2 cette fois-ci.
Entre temps j'ai viré le tableau de la rubrique travels. \o/

Même pas, tu peux très bien mettre ton image dans une balise h1 à ma connaissance.
Et par titre de page je crois que Lauri-Anne faisait référence à la balise Title situé dans le head de ton html, si je ne me trompe pas. Mais je suis peut-être complètement dans l'champs!

SynRJ a écrit :
Des retours sur le nouveau contraste ?

Ça me semble mieux, oui! Mais je vais laisser les autre en juger.
juliesunset a écrit :
Et par titre de page je crois que Lauri-Anne faisait référence à la balise Title situé dans le head de ton html, si je ne me trompe pas. Mais je suis peut-être complètement dans l'champs!
Euh... Oué et il est loin le champs... Je parlais de l'image qui porte du texte qui fait étonament penser à... un titre de page. Vu que c'est la première chose que le visiteur, voyant du moins (les autres n'ayant même pas droit à un alt...), verra et donc retiendra. Une image peut se trouver dans un h1 à condition que le alt qu'elle porte ait le même contenu.
Ca tombe bien alors puisque le alt de ma bannière comporte bien le même contenu que la bannière en elle-même.
Laurie-Anne a écrit :
Euh... Oué et il est loin le champs... Je parlais de l'image qui porte du texte qui fait étonament penser à... un titre de page. Vu que c'est la première chose que le visiteur, voyant du moins (les autres n'ayant même pas droit à un alt...), verra et donc retiendra. Une image peut se trouver dans un h1 à condition que le alt qu'elle porte ait le même contenu.

Smiley langue Ouais ben je me suis enmèler les pinceaux! cela dit j'avais conseillé la même chose dans la phrase juste avant! Smiley lol
B'jour,

Un ami m'a parlé des balises <em> pour remplacer mon combo de <p> stylés en italique. Si j'ai bien compris, la balise <em> est faite pour mettre un élément en exergue, pour le faire ressortir. Serait-il judicieux de transformer ces <p> en balises <em>, ou l'utilisation actuelle est-elle sémantiquement correcte ?

Je ne veux pas spécialement faire ressortir les éléments en italique, c'est juste pour identifier plus facilement ce qu'ils contiennent et pour leur donner un style différent (italique avec une alinéa).
Modérateur
Bonjour,

En fait, l'idée ne serait pas de remplacer le <p> par <em>, mais plutôt de l'utiliser à l'intérieur :


<p>Lorem ipsum <em>Paris Hilton</em> lorem ipsum.</p>


Ici, l'emphase est mise sur le nom Paris Hilton. Par défaut, les navigateurs mettent le contenu de la balise en italique, mais le style peut évidemment être changé par CSS.

Dans ton cas, si tu veux mettre l'emphase sur un mot ou une phrase, tu peux utiliser <em>. Par contre, si c'est juste pour mettre en italique, laisse tomber le <em>.
Modifié par Tony Monast (02 Dec 2009 - 15:04)
Yop,
Le rendu du site est pas mal surtout pour un premier site.
Après c'est noir et peut-être un peu trop. Essaye de changer la couleur du fond de page peut-être ? Avec un noir moins noir genre un gris foncé voir même clair... Ou éventuellement un bleu (enfin pas un bleu pétant !).
Je parle bien du fond de la page et non de ton tableau contenant le site. Ça ne changerais donc presque rien à ton site et le rendrait moins sombre.

Par contre certains détails me choque. Ton nom de domaine est en .fr mais le contenu du site est exclusivement en anglais, même pas de version française ? Surtout que vue le peu de texte. Rien t'empêche de mettre un drapeau anglais et français et faire une version française. Ça te prendrais très peu de temps.

a écrit :
<div id="header" class="container">

L'intérêt de la class ?
Sachant que tu peux déjà balancer ton CSS dans #header
D'ailleurs la classe "container" n'est pas utilisé dans ton CSS.
Modifié par PIGs_DarkSith (03 Dec 2009 - 06:15)
Le class="container" doit être un vieux vestige d'un temps aujourd'hui révolu. Je vais nettoyer un peu tout ça, merci Smiley smile
Sujet clos
Aller à