[Amateur] lightcode.fr

Bonjour,

je viens proposé mon site lightcode.fr afin de voir les points faibles à retravailler.

Pour information, il est en HTML5 et je serais curieux de savoir si je l'ai bien utilisé. De plus, je ne suis pas graphiste, dont le design est très simpliste.

Voilà, merci d'avance,
Cordialement.

Salutation lightcode

Eh bien je crois sincèrement que tu es sur un excellent départ.
J'ai un peu fouiller ton code sur la page d'accueil, et là aussi j'ai vu des qualités.

~ En deux colonnes j'aurais préférer »

Le texte sur toute la largeur du contenu c'est trop. Certaines statistiques prouvent les désavantages d'un texte dépassant width:650px, en lecture. Je crois que le texte est un élément important pour toi (tutoriels), donc je te suggère de t'informer sur le sujet de la largeur d'un texte, surtout que tu te lance en présentation de tutoriels. Moi aussi je me lance dans les tutoriels et les articles divers.

~ Tu dis que tu n'est pas graphiste ? »

Eh bien crois moi que ton site est bien graphiquement parlant. Tu as vraiment une bonne base en tout. La base est en place, ne reste plus qu'à parfaire avec le temps. Le développement (programmation) t'intéresse aussi, on le voit bien.

Félicitation ++

PS : D'autre vont répondre sur le plan technique : C'est un topic à suivre je crois.

Bonjour,


L'interface est propre, par contre, il y a un problème avec ton centrage (et j'ai la flemme de chercher comme tu le gère) : je travaille avec un écran 1600 mais ma fenêtre (IE) est en 1024, le site est bien centré au chargement, si je passe en plein écran, le site est toujours centré (mais petit lag), par contre quand je redimensionne la fenêtre manuellement, le site ne se redimensionne pas (margin:0 auto; c'est simple et ça marche toujours).

Il est également dommage d'avoir des lignes de texte aussi longue, qui vont nuire à la lecture. Il faudrait réduire de moitié la largeur des textes.

Pour le code :
* Attention acronym est obsolète en HTML5

* N'oublie pas de baliser les changements de langue (titre de page et tagline en anglais).

Le reste du code est très bon.

Sous GNU/Linux, je ne vois pas la fin du panneau "à quoi sert ce site".

Une chti'te capture d'écran par là :

http://img25.imageshack.us/img25/7839/capture00.th.png

Je suis sous Lucid Lynx/Firefox 3.6.9, sans nouvelles polices ajoutées au système.

Bonne continuation.

Bonjour, et merci pour vos retours !

Vu que certains thèmes reviennent, voici ma réponse :

Longueur de ligne : j'ai déjà lu ce commentaire à propos de la longueur des lignes, je suis d'accord. L'ennuie c'est que je ne peux pas mettre une barre juste pour faciliter la lecture, parce qu'en partant comme ça, le contenu ne sera pas fournit. En gros, je ne peux pas mettre une barre juste pour ça. Mes premiers designs étaient toujours sur le modèle "bi-colonne", mais elle me semblait de moins en moins utile. Je vais repenser à ça. Je m'étais orienté pour une présentation typé magazine (en regardant CanardPC Hardware notamment) et je pensais faire plusieurs colonne : j'ai utilisé la propriété CSS3, le rendu étant peu satisfaisant en l'état, je l'ai supprimée. Je verrai donc plus tard pour ça. Ha, je viens de me rendre compte qu'il y avait un deuxième commentaire sur ce point, je vais vraiment me pencher sur ce problème et trouver une solution miracle.

Design propre : content que ça puisse plaire. En effet, je souhaitais quelque chose de clair, et sougné. J'ai surtout pu créer ce rendu grâce au CSS, car, il n'y a qu'une seule image de fond.

Balise acronym : ha, j'ai aussi entendu ça. Alors, voilà, j'utilise le langage "Textile" pour tout ce qui est rédaction. C'est possible que ce soit à ces endroits que tu aies vu ça. Ou alors, j'ai fait une erreur, oublie quelque part. Serait-il possible d'avoir un lien (bien que je puisse chercher). Corrigé, c'était bien dans Textile.

Le centrage : j'utilise couramment IE8 (mon navigateur principal) et je n'ai pas remarqué un tel problème : même taille d'écran aussi. Avec quelle version as-tu ce problème ?

"A quoi sert ce site" : alors là, je sèche : j'avais résolu le problème (toujours sous linux), ça doit aussi venir de la résolution.

Changement de langue : corrigé pour le titre et la tagline. A ce propos, si j'écris dans mon article "load balancing", dois-je le signaler ? Parce que voilà, typographiquement parlant, il faut le mettre en italique, mais faut-il le signaler ? un <span lang="en">load-balancing</span> est bon ? je gère l'italique via CSS (le sélecteur :lang(en) ne doit pas être supporté par tout le monde en plus).


@Laurie-Anne : pour avoir sillonner les forums avant de poster, j'ai remarqué que vous regardez le rendu IE6, bon, je vois que vous n'avez pas vu ma gestion barbare et un gros problème dans la section "Article" (non résolu).


Encore merci pour vos compliments, surtout sur le code auquel j'attache beaucoup d'importance.

Je vais ajouté un détail : le site a été fait avec le framework CakePHP, le langage d'édition des pages (articles, posts, projets) est Textile : je les conseille. Le reste du site a été fait à la main. Je voulais rajouter aussi le lien "Sans HTML5" (que je juge inutile) qui permet de transmettre la divitte aigüe à l'ensemble du code, cela est fait automatiquement, mon CSS est aussi modifié en conséquence. De plus, il est minifié, et les préfixes propriétaires sont ajouté automatiquement (si besoin, j'ai configué les propriétés qui en avait besoin). Voilà, j'hésitait à donner ces détails, mais ça peut toujours être bon à prendre.
Modifié par lightcode (14 Sep 2010 - 19:23)

Bonjour,

Je vais sans doute dire un bétise mais, avec konqueror 3.5.10, le site ne s'affiche pas correctement. On dirait que la feuille de style n'est pas prise en compte. Du coup, les liens et les textes ne sont pas visibles en noir sur bleu.
Je sais que cela représente une infime proportion des visiteurs potentiels mais je préfère le signaler au cas où.

Salut lightcode

Je te donne un lien ici : peut être le connais tu déjà.

De Jean-Marc Hardy : Blog.60Questions.net

Prend le comme divertissement et n'hésite pas à cliquer sur ses liens à droite. Surtout sur les liens partenaires.

Je ne me souviens pas où j'ai lu les statistiques mais il y a de nombreux liens sur le blog de Jean-Marc Hardy. De plus il y a les liens sur Alsacréations du genre : openweb qui ont aussi des articles spécialisés sur la présentation des textes à l'écran.

++

@thelma : Je te conseille de tester en cliquant sur "Sans HTML5" (pas très explicite comme intitulé) qui permettra de mettre le CSS sur des nouvelles balises HTML que ton navigateur ne connais sans doute pas.

@zardoz : j'ai déjà vu le site sur Alsacréations (Un site web doit-il être beau ?). Je regarderai ton lien. Si vous avez d'autres conseils, je suis preneur. Je vais surement faire de mon côté un récapitulatif des liens que j'ai utilisé.
Modifié par lightcode (14 Sep 2010 - 19:43)

Je te conseille de tester en cliquant sur "Sans HTML5" (pas très explicite comme intitulé) qui permettra de mettre le CSS sur des nouvelles balises HTML que ton navigateur ne connais sans doute pas.

Oui, seulement le lien n'est pas forcément facile à trouver au premier coup d'oeil, sans la feuille de style. Si je n'avais pas visité le site avec un autre navigateur juste avant, je n'aurais sans doute pas pu trouver le lien "Sans html5".

thelma a écrit :
Oui, seulement le lien n'est pas forcément facile à trouver au premier coup d'oeil, sans la feuille de style. Si je n'avais pas visité le site avec un autre navigateur juste avant, je n'aurais sans doute pas pu trouver le lien "Sans html5".

OK, je vais essayer de trouver une astuce. Je ne pensais pas que cette fonction serait utilisée, car je l'avais faite pour ne pas mettre de côté les utilisateurs de IE6/7/8 qui naviguent sans JavaScript. Je regarderai pour ce navigateur prochainement alors.
Modifié par lightcode (14 Sep 2010 - 20:04)

Bonjour à tous,

j'aimerai vous proposer cette version : beta.lightcode.fr. J'ai corrigé quelques problèmes énoncés, j'ai aussi respécté les dimentions pour avoir un meilleur confort de lecture.
Modifié par lightcode (16 Sep 2010 - 22:10)

salut...

J'avoue que le graphisme est simple et très propre... je m'en veux presque de ne pas avoir eu d'idée aussi simple parfois

Pour le code j'ai pas vraiment regardé.. par contre avec firefox (que j'utilise tout le temps) il n'y a aucune différence entre avec ou sans html5... alors dans ce cas pourquoi utiliser soit l'un soit l'autre ?

Une autre remarque je n'ai pas la police chargée dans mon ordi pour ton titre... du coup ça donne un rendu plutôt dégueu... super aliasé... je pose donc la question pourquoi pas une image propre ???

pareil pour la police des derniers posts dans la version béta...

Ah et oui... franchement la deuxième est beaucoup beaucoup mieux visuellement

Je trouve également la seconde version nettement plus sympa que la première. Cela dit, un petit détail qui donnerait un bon coups d'aération à tout site serait d'augmenter les padding de #posts article latéraux genre :

#posts article {
  border-top:1px dotted #CCCCCC;
  margin-top:5px;
  padding:10px 20px; /*voir même 40px*/
}

En effet, je trouve le contenu assez proche des bords et cela étouffe un peu. Hormis cela, je trouve que ton template brille se part sa simplicité et sa cohérence.
Modifié par fxmichel (16 Sep 2010 - 23:28)

pchlj a écrit :

Pour le code j'ai pas vraiment regardé.. par contre avec firefox (que j'utilise tout le temps) il n'y a aucune différence entre avec ou sans html5... alors dans ce cas pourquoi utiliser soit l'un soit l'autre ?

C'est normal, ton navigateur supporte le HTML5, ce n'est pas le cas de tous (cf. quelques posts plus haut).

Pour la police, je pense écouter ton conseil. Par contre, celà m'étonne pour la police des posts. Moi, j'aime pas trop le rendu de mon IE9 par exemple. Si tu utilises Firefox 4, il doit avoir ce problème.

fxmichel a écrit :
Cela dit, un petit détail qui donnerait un bon coups d'aération à tout site serait d'augmenter les padding de #posts article latéraux genre : [...]

Bonne idée, je n'y avais pas vraiment pensé, même si j'avoue avoir voulu atteindre les 650px de cette façon, mais il va falloir que je règle quelques bugs et c'est au point.


Merci à vous deux pour vos réponses et vos compliments, je n'en espérais pas tant .

lightcode a écrit :
@Laurie-Anne : pour avoir sillonner les forums avant de poster, j'ai remarqué que vous regardez le rendu IE6, bon, je vois que vous n'avez pas vu ma gestion barbare et un gros problème dans la section "Article" (non résolu).

C'est normal, j'ai rarement le temps d'aller au delà de la première page.

Laurie-Anne a écrit :
C'est normal, j'ai rarement le temps d'aller au delà de la première page.

D'accord, je comprends. C'est dommage parce que votre avis est souvent très intéressant.

Je me demandais si cela valait vraiment la peine de prendre en charge IE6, ça me fait ajouter des class/ID inutiles pour IE7 (et supérieur), je parle du sélecteur CSS E > F que j'ai utilisé dans la nouvelle version. Je pense toutefois adopter cette dernière, on se revoit au concours alors, à part si vous avez d'autres remarques.

@lightcode : ton site est propre et sobre, bravo !

Pour quelqu'un qui se dit "amateur" et "non designer" je te tire mon chapeau.

Je te conseillerais d'utiliser une taille de caractère un peu plus élevé afin d'améliorer la lisibilité du texte.

N'hésite pas à illustrer tes écrit, cela permet de faire respirer la page.

Par contre l'objet du site est peu claire. On ne sait pas si on est sur un blog, sur un portfolio ou sur un autre type de site.

Si c'est un portfolio en général c'est au nom de la personne qui le tient, on y retrouve un CV et des contacts plus complet que le simple formulaire de contact.
Si c'est un blog alors l'usage veut que les commentaires soit possible.

Avec ton site je ne sait pas bien à quoi m'en tenir.

Voilà c'est mon avis tu en fait ce qu'il te plait,

Bonne continuation,
Pierre

@PierreA : tu soulèves une question assez grosse : quel est l'objet du site ? A vrai dire, je n'y ai jamais pensé.

Il a d'ailleurs fallu que j'aille voir sur Wikipédia la définition de portfolio :

a écrit :
Un portfolio, ou portfolio, est un dossier personnel dans lequel les acquis de formation et les acquis de l'expérience d'une personne sont définis et démontrés en vue d'une reconnaissance par un établissement d'enseignement ou un employeur.

"Un dossier personnel dans lequel contient les acquis de formation/expérience[...] et démontrés" ça je veux bien, mais "en vue d'une reconnaissance par un établissement d'enseignement ou un employeur" là je suis déjà moins d'accord, parce que je peux dire de grosses bêtises, que tout n'appartient pas à un domaine défini et surtout que je ne suis qu'au lycée donc je me vois mal faire un genre de CV pour le moment.


Pour "blog", ça reste à réfléchir, vu que :

a écrit :
Un blog ou blogue est un site Web constitué par la réunion de billets agglomérés au fil du temps et souvent classés par ordre antéchronologique...

alors que l'essentiel du contenu est au delà de la première page.

Taille et illustration : pour les illustrations, je suis au courant du problème, mais je trouve ça difficile d'illustrer judicieusement le site. J'ai fait quelques efforts pour les articles, et on notera que les derniers sont vides d'image. Pour la taille, je ne sais pas trop, c'est vrai que ça parait un peu petit, mais je me suis basé sur Blueprint, j'ai préféré garder la taille par défaut (qui me semble bonne) parce que je me suis dit que c'est ce qu'il y a de mieux. Après, je sais aussi qu'une police trop grosse ne fait pas sérieux (ou quelque chose comme ça). Bref, je ferais des tests pour augmenter un peu la police.

Merci pour ton avis et tes compliments.