Pages :
(reprise du message précédent)

Smiley eek je vais voir merci de m'avoir prévenu.

edit: hxxp://portfolio.jmperso.eu ? j'ai pas d'erreur, moi Smiley hum
Modifié par jmlapam (06 Sep 2011 - 20:37)
oui, je vais dessus pour voir l'évolution en fait, mais pour apporter une critique quelconque. Smiley biggrin

donc ton site j'y accède bien sûr, mais je ne tape pas le http...juste portfolio etc.
Pour ma part j'ai un bug d'affichage au niveau de ton menu sous firefox6.

Le "Réalisations" est placé sous la barre de menu, juste en dessous de "Accueil" et donc semble invisible...
Ok, je vois cela;

Normalement j'ai corrigé le bug pour iE8. Je pense que cela venait du fait qu'IE8 ne connaît pas les balises HTML5, du coup j'ai mis un display en block dans ma css.


EDIT: sous FF6 j'ai pas ce bug. La solution passe-t-elle par des media queries?
c'est peut-être que mon site ne s'adapte pas à toutes les tailles d'écrans, qu'as-tu comme écran Julieunset ?
Modifié par jmlapam (06 Sep 2011 - 22:59)
même bug que juliesunset. c'est dû à ton css qui aurait besoin d'un peu de nettoyage: les éléments de liste ne devraient pas être en inline, et devraient avoir des marges à 0 (si tu veux mettre des marges, mets les sur les liens dans les les éléments de liste).
ok merci, je corrige Smiley smile


EDIT: bon le site s'est enrichi de "roles" mais ne fonctionne toujours pas sur IE8, probablement pour les raisons que tu as indiquées. Smiley langue

ce que je ne comprends pas c'est qu'il ne m'affiche pas mes arrondis alors que j'utilise sciemment des images via le CSS au lieu du CSS3 largement plus rapide à mettre en place.


EDIT2: role + microformats, j'ai fait des efforts de sémantiques, dommage qu'il y est ce blocage avec IE8.



EDIT3: probleme avec IE8 corrigé Smiley winner youpi :!

encore qq bugs à enlever et le site prendra forme
Modifié par jmlapam (08 Sep 2011 - 14:42)
au départ je voulais pas faire un truc graphique, mais je me rends compte que j'ai trop peu de contenus, ça va GIMPer !! Smiley lol


EDIT : @oziris: j'ai pas mal bossé, j'arrive petit à petit vers ce que j'avais dans la tête !
Smiley biggrin
Modifié par jmlapam (09 Sep 2011 - 22:30)
Smiley up

petit up pour progresser, j'ai du mal avec mon menu et j'ai l'impression qu'il fait largement cheap...
Je ne suis pas très satisfait et c'est pour cela que je poste.

Pour le lien voir mon www comme cela cela évite de retourner en arrière sur ce topic.
Les avis sur le reste du site sont les bienvenus mais j'aimerais vraiment que vous commenciez par le menu et peut-être les couleurs, j'ai des doutes sur ma palette.

En bref Smiley help
Yep, je note !

A là base je voulais pas produire cette bouse, je voulais mettre des icônes à côté des items et faire un petit fichier javascript pour un effet fade, peut-être que je vais m'orienter plus vers cela,

sinon les couleurs? Moi-même je ne suis pas convaincu, Smiley crash
Salut jmlapam,

Pour commencer, j'ai personnellement trouvé que ton attitude de départ sur ce topic – supprimer chacun de tes posts – était franchement déplorable. La règle de cette partie du forum est justement d'assumer ses sujets de discussion, et les réponses que tu as pu faire aux remarques qui t'ont été faites en font partie. C'est dommage, pour toi comme pour ceux qui arriveront sur ce sujet par après Smiley decu
Mais bref,
jmlapam a écrit :
petit up pour progresser, j'ai du mal avec mon menu et j'ai l'impression qu'il fait largement cheap...

Concernant ton menu, quelques remarques :
- il faudrait "pseudo-centrer" verticalement (avec des marges, tout simplement) les éléments textuels du menu ;
- je ne suis pas convaincu par l'utilisation des petites marges dépassant de chaque côtés de ce menu, d'autant qu'elles ne sont pas égales à droite et à gauche. Meux vaudrait à mon avis les supprimer, ainsi que les filets qui encadrent la zone de contenu. A tester AMHA…

Autre chose, puisque l'on parle de la zone d'entête de ton site : ce serait plus ergonomique de proposer un lien cliquable sur toute la bannière plutôt qu'uniquement sur le texte «Le site de Julien Maury» (Fitts inside).
Modifié par audrasjb (05 Jan 2012 - 08:17)
Je reviens sur un autre aspect : tu devrais repartir sur une grille car il y a plein d'incohérences qui auraient dû être corrigées en amont.
Pour te citer, «Faire simple, faire bien, et seulement après faire mieux», c'est bien beau, mais si tu ne part pas sur une base propre c'est difficile ensuite de réparer les pots cassés… Je me demande si tu ne devrais pas repasser par une phase de conception plutôt que de faire des modifications au compte-goutte…

Quelques exemples d'éléments positionnés à la Rache :
- aucun des éléments du menu tout en haut n'est à la même distance de son icône et quasiment aucune icône ne fait la même taille ;
- "English version", "Deutschsprachige Jmperso.eu" et "Version fr"… pourquoi utiliser un texte qui n'a rien à voir suivant les langues proposées ?
- le titre du site est positionné n'importe où dans la bannière, sans aucune cohérence par rapport à une grille prédéfinie
- pareil pour les éléments textuels du menu principal, je l'ai déjà dit et c'est pour ça qu'il te paraît "cheap", mais il faudrait aussi l'aligner horizontalement par rapport au reste des éléments de ta page
- la présence de trois colonnes de contenu n'est pas vraiment justifiée quand on regarde le texte qu'elles contiennent (notamment «ma devise» qui est quasi-vide), et leur largeur respective ne me paraît pas harmonieuse…
- je ne crois pas que la couleur du pied de page soit très assortie avec le turquoise que tu utilises en têtière…
- les éléments du pied de page final sont mal positionnés, ils sont collés à leur conteneur…

Sinon quelques remarques sur le code HTML :
- tu est en HTML5, donc tu n'as aucun besoin des attributs xmlns et xml:lang dans ta balise HTML
- le texte alternatif de ton logo n'est pas pertinent puisqu'il ne correspond pas à l'image
- dans le contenu (colonne de droite), plutôt que des retours chariot, il faudrait utiliser des paragraphes différents
- d'ailleurs, tu pourrais utiliser les éléments <section> et <aside> pour le contenu tant qu'à faire d'être en HTML5 Smiley cligne
Sinon, rien d'autre à redire sur le code Smiley cligne
Modifié par audrasjb (05 Jan 2012 - 08:56)
Salut Julien,

J'ai plus de temps alors je m'y colle :
- pourquoi mettre un intitulé différent pour le changement de langue pour chaque langue ?

- les drapeaux sont différents (ils ne viennent pas du même set, on voit que celui français a une petite shadow et les autres pas), tu devrais aller par exemple sur iconfinder.com et prendre un truc cohérent.

- j'aime pas le lien "aller au contenu", il sert à rien.

- le lien contact fait doublon avec celui du menu, ça sert pas à grand chose.

- je suis pas vraiment d'accord avec ta devise Smiley langue

- les quotes de la devise sont pas très beaux (regarde ceux utilisés sur A List Apart dans les articles par exemple), et la police est bizarre

- en fait, de manière générale, la police est pas géniale : tu devrais plutôt opter pour du Droid Serif par exemple, servi par Google Webfonts

- le header est pas génial, tant au niveau de l'illustration qu'au niveau du slogan : "le site de julien maury" -> on voit bien que c'est un site, pas besoin de le préciser. Mets plutôt ton nom uniquement, mais de manière plus stylisée.

- pour le logo avec tes initiales, profite du fait que le J et le M s'assemblent bien (pas comme le S et le L ...) pour faire un truc du genre : un M, et la dernière patte du M se termine comme un J.

- j'aime pas certains choix, comme le fait de mettre un gros bloc noir en haut, ce qui est assez bizarre.

- le deuxième wrapper est plus large que le premier (ça se voit au niveau du menu notamment), et je trouve pas ça très beau ...

- la petite étoile pour marquer les <li> dans la partie de droite du div de contenu sur la page d'accueil est moche.

- le bonhomme de ton footer est un peu mieux, c'est bien.

- les icônes, c'est toujours pas ça ... tu les a prises sur iconfinder.com comme je t'avais dit de le faire ? si oui, c'est que t'as dû les resizer en mode bourrin parce qu'elles devraient pas être pixellisées comme ça ...

- tu devrais laisser une marge pour le tout dernier footer, là c'est trop serré entre les deux.

- le design de la page de contact est à revoir, je détaillerai ça dimanche.

- le design de la page des tips est assez moyen ...

- idem pour les "méthodes", en fait tu n'exploites pas bien la place disponible, ta colonne de droite est utilisée mais les autres à peine, et elle est étroite ce qui facilite pas la lecture et oblige à scroller beaucoup ...

Voili voilou, je repasserai de temps en temps Smiley biggrin
salut,

totalement hors sujet, moi j'aime bien le "Head or Aside"
pas mal ...
audrasjb a écrit :
Salut jmlapam,

Pour commencer, j'ai personnellement trouvé que ton attitude de départ sur ce topic – supprimer chacun de tes posts Smiley decu

Smiley grrr
Ouais je sais, inacceptable mais c'était il y a quelques temps quand même, depuis je me suis un peu conformé à la communauté.

Sinon tes remarques sont pertinentes, le pire est que je conseille le zoning dans mes petits articles, je le fais tout le temps mais c'est vrai que j'ai toujours gardé la même base pour ce site, tu as raison c'est pas top. A reprendre comme il faut tes indications vont m'aider Smiley merci

@Stephanelam: très juste, oui les icônes sont prises du site que tu m'a indiqué merci au fait.
Elle sont resize par un max-width et max-height Smiley confused
La lecture ouais c'est vrai que cela scroll c'est pour cela que j'ai mis un "retour haut" mais c'est vrai que ce n'et pas top.


@o06: merci à toi Smiley cligne


De manière générale c'est vrai que je perds mon temps à faire des petites modifs au coup par coup alors que je sais faire, je crois que je vais m'amuser à remodeler tout cela.
Je pense utiliser mieux la largeur et effectivement

Au travail Smiley pelle


PS: oubliez pas qu'il y a 3 mois je ne savais pas faire de site, j'ai 4 projets en cours et c'est vrai que j'ai eu la flemme de travailler celui-là mais finalement je perds plus de temps. Smiley crash
Modifié par jmlapam (05 Jan 2012 - 15:46)
jmlapam a écrit :
Ouais je sais, inacceptable mais c'était il y a quelques temps quand même, depuis je me suis un peu conformé à la communauté.

Je sais bien, en fait je ne me souvenais plus du sujet initial alors j'ai tout relu…

Sinon, je pense que tu as mal appliqué la devise que tu affiches sur ton site (comme Stephanelam, je ne l'approuve pas vraiment d'ailleurs). A force de petits rajouts par-ci par-là comme tu l'as fait, on se retrouve vite avec un formidable patchwork incohérent Smiley cligne

Effectivement, tu apprends vite et c'est normal de se servir de son site perso comme terrain de jeu dans un premier temps. Maintenant, je pense que le mieux serait de tout refaire à zéro en prenant le temps de bien poser les bases en amont (quels contenus, comment les présenter, quelle marge de manœuvre tu te laisses pour plus tard, etc.). A mon avis, la différence devrait apparaître assez nettement.
Tu veux qu'on critique quelle site?
-http://portfolio.jmperso.eu/index
ou
-http://jmperso.eu/

Sur le 1er:
-J'ai dû prendre un moment avant de localiser le menu. Je trouve qu'il se perd dans le design.
-Ton formulaire de contact n'est pas très lisible. Rouge foncé sur fond noir, on a du mal à lire.

Sur le 2e:
Pourquoi utiliser des drapeaux pour indiquer les langues?
Un drapeau fait plus référence à une nationalité qu'a une langue, non?
De plus, les couleurs des drapeau se marie rarement à un design de site...
Modifié par juliesunset (05 Jan 2012 - 16:23)
Salut,

Cool depuis le temps, j'en rêvais Smiley langue

Mais avant, Stephanelam dans la plupart de tes critiques tu dis que tu n'aimes pas, c'est pas très objectif.

Par exemple :

a écrit :
- j'aime pas le lien "aller au contenu", il sert à rien.


Si il sert, ça s'appel un lien d'évitement.

Pour le site ;
Audrasjb m'a coupé l'herbe sous le pied a parlant de grille qui règlerai pas mal d'incohérences graphiques pour le coup.

Je sais pas si c'est sous mac, ou si c'est voulu de ta part (ça dois être ça au vu du code) mais les li de ton menu on un padding uniquement sur le côté et en bas. Le résultat : ils ne respirent pas du tout sur le haut, les majuscule sont limite collé à la bordure du conteneur. Ça participe au fouillis globale.

Pourquoi ton div main est plus large que le contenu du haut ? c'est un choix graphique ? C'est assez disgracieux. D'ailleurs la largeur de ton conteneur est 778px sur quelle base as-tu obtenu cette valeur ? Ça semble irréfléchi comme choix.

Je pense que tu as pas mal de soucis au niveau du positionnement, par exemple quand tu inspectes ton div d'id left tu vois que ta boite touche le contenu du haut. Ce problème revient périodiquement.

Au niveau de ta palette de couleurs tu es un peu parti dans tout les sens. Tout semble cohérent jusqu'au footer. Pourquoi avoir utilisé cette couleur qui ne reviens nul part ? et pourquoi y avoir rajouté du rose (une autre couleur qu'on ne retrouve nul part d'autre). Juste pour ton footer tu as rajoutés deux couleurs qui n'était pas nécessaires. Si tu avais utilisé les couleurs déjà existante ça aurait renforcé la cohérence graphique. De plus les couleurs que tu réutilises ne sont pas spécialement accordés avec le reste.

Un truc bien immonde c'est les illustrations de ton footer, tes icônes aligné par rapport à rien, et l'illustration du centre détouré à l'arrache (surtout le bonnet en fait). Dans le bandeau noir en dessous tu as le même problème qu'avec tes li, ça ne respire pas au dessus et son positionnement est plus que douteux, regarde avec firebug (class=copyright).

Une chose plus que perturbante surtout pour toi qui arpente le forum en long et en large c'est que tes labels sont erronés, en effet ils ne servent à rien ici vu que tu ne les a pas lié aux inputs !

Dans l'onglet méthode pourquoi continué sur trois colonnes ? tu perds un espace fou et au niveau macro-typographique c'est pas très joli. En parlant de typographie, dans la partie «quoi de neuf» tu as opté pour un texte aligné au centre. Graphiquement parlant c'est plutôt bof, mais alors niveau lisibilité c'est la déchéance, notre œil doit toujours chercher la ligne suivante, ce qui n'est pas le cas quand le texte est aligné à gauche par exemple.

Au niveau de ta bannière, l'illustration n'est pas mal je trouve mais pourquoi ce fond noir qui vient coupé le visuel ? pourquoi ne pas mettre plutôt le noir pour le choix des langues et le vert pour toute la bannière. De plus ici tu as utilisé une image alors que ce n'est pas justifié tu aurais bien pu le faire en css. Maintenant tu es limité dans les modifications. Enfin c'est sur que tu peux toujours éditer ton images, mais en css ça aurait été tellement plus vite.

Sémantiquement parlant tu as créer un div juste pour mettre une image (le petit perso), tu aurais pu éviter il y a pleins de solution plus propre pour mettre une image décorative. Pour tes icônes le alt à la même valeur que le title du lien, l'information est donc redondante tu peux carrément enlevé le title des liens.

Ce qui aurait été bien c'est d'uniformiser les boutons, par exemple dans la page méthode on à un bouton (aller à) qui n'a aucun équivalent dans le reste du site, ça en fait une incohérence graphique (le pauvre ^^).

Toujours sur la page méthode tu as des paragraphes qui réagissent au survol, pourquoi inciter a l’interaction si elle n'est pas possible ? c'est contre affordant dirait-on ^^

D'ailleurs dans cette page la phrase «Article publié sous license creative common» est cliquable, quand on survol cette phrase elle se désintègre ! bon j'exagère il y a juste un mot qui disparait, mais bon pourquoi ?

En espérant t'avoir fourni quelques pistes, bien qu'il y aie encore beaucoup à dire, mais le mot grille résume le tout. Et aussi ton positionnement, à revoir.

A bientôt Smiley smile
Pages :