[Amateur] CV online responsive - http://goo.gl/2AmeYf

Bonsoir,

Ces derniers temps j'ai pu réaliser mon CV en ligne et j'aimerais bien un/des avis extérieur(s) sur celui-ci.

En effet, je dois bientôt le soumettre devant un jury de pro, mais étant donné que je n'ai droit qu'à une seule soumission, j'aimerais d'abord passer par vous.

Voilà, intro terminée, passons au contenu :

Le site est un résumé de mes compétences, il se veut full-responsive (de la tv 4K à l'écran 320x480). Je me suis clairement inspirer de metro-ui pour le réaliser (je trouve cette interface très adaptée au responsive).

Pour ça j'ai dû utiliser pas mal de JS.

3 défauts :
- site pas très fonctionnel si le js est désactivé.
- doit attendre que le DOM soit complété (document.ready() avant d'exécuter les fonctions de resize)
- peut paraître lourd (je pense que c'est négligeable sur un site de ce volume)

L'avantage c'est bien sûr le fait que le redimensionnement est adapté à toutes les résolutions.

Au niveau de la compatibilité, je vise IE8+ (je regardais peut-être pour IE7 plus tard).

J'ai aussi utilsé un peu de JSON pour le fun au niveau de la sélection de mes hobbies. L'utilité n'est pas ultra intéressante mais ça m'est pratique pour ajouter/supprimer un hobby.

Malgré le fait qu'il soit très visuel, j'ai aussi voulu rendre le site le plus léger possible (- de 550ko).

Je vous laisse donc la parole :http://goo.gl/2AmeYf - version portrait && paysage disponible
Modifié par Fedonono (22 Nov 2013 - 01:03)

Bonjour,

Je trouve ton site visuellement intéressant bien que je ne sois pas un grand fan de Metro Je n'ai pas eu le temps de regarder dans le détail, mais il y a une petite chose qui me gêne au niveau du menu de gauche :

La zone de survol du menu est très large. Si sur la page des compétences je passe le curseur de la souris sur "HTML5; Javascript; Java; Unix; SQL.." le curseur se transforme en main et j'ai envie de cliquer dessus. Hors je vais cliquer sur un lien du menu alors que je pensais peut-être avoir le détail de tes compétences dans un langage précis. Tu vois ce que je veux dire ?

Javert67 a écrit :
La zone de survol du menu est très large. Si sur la page des compétences je passe le curseur de la souris sur "HTML5; Javascript; Java; Unix; SQL.." le curseur se transforme en main et j'ai envie de cliquer dessus. Hors je vais cliquer sur un lien du menu alors que je pensais peut-être avoir le détail de tes compétences dans un langage précis. Tu vois ce que je veux dire ?

Oui, en effet c'est bien vu.

J'ai fix cela et je vais ajouter les détails de compétences, c'est une bonne idée.

edit : j'ai ajouté les détails de compétences.
Modifié par Fedonono (03 Jan 2013 - 19:16)

Bonjour,

Ce site est un total mystery meat... Désolée mais j'accroche pas, ce n'est pas fonctionnel, même avec JS activé.

Sinon, pour l'anglais, ce serait pas mal de te faire relire (il y a beaucoup d'erreurs de "français").


Je ferais une review du code demain (car il y a des choses à améliorer).
Modifié par Laurie-Anne (03 Jan 2013 - 22:37)

Salut,
Chez moi (Safari 6 Mac), le site donne l'impression désagréable de ramer et d'être bugué. Au survol des menus de gauche par exemple, ou même simplement quand je bouge la souris sur la page, ils clignotent un peu.
Et quand je descends dans la page, ce n'est pas fluide, parfois le menu disparaît à moitié et revient,...
Je peux te faire une vidéo si tu veux.
Mais je suis curieux de voir le résultat une fois les bugs corrigés.

Puisque c'est un site responsif j'ai voulu tester sur mon mobile (iPhone 4S), mais c'est inutilisable...
Le chargement met vraiment très longtemps. J'ai une mauvais connexion mais je ne pense pas que ce soit la seule chose en cause. Ça donne l'impression qu'il y a une mauvaise boucle quelque part dans le JS...À confirmer par un autre utilisateur ?

Bonsoir,

J'émettrais une critique uniquement sur le design (vu l'heure).

J'aime assez l'idée générale et le menu est intéressant.

Sur Mac :
- Safari : mauvais rendu; le menu implose...
- Chrome: un peu mieux mais problème de menu...
- FF et Opéra correct mais avec des rendus différents.

Les couleurs sont un peu trop flashy, et arrivé en bas de page ça fait mal aux yeux.

Concernant l'anglais, @Laurie-Anne l'a souligné, il y a trop d'erreurs (syntaxe, grammaire). Exemple: "actually" ne signifie pas actuellement (mais "en fait") et les formules du type "I do stuff" vous causeront du tort.

Bon courage
Modifié par rodolpheb (03 Jan 2013 - 23:21)

Merci à tous pour vos avis.

Laurie-Anne a écrit :
Bonjour,

Ce site est un total mystery meat... Désolée mais j'accroche pas, ce n'est pas fonctionnel, même avec JS activé.

Sinon, pour l'anglais, ce serait pas mal de te faire relire (il y a beaucoup d'erreurs de "français").


Je ferais une review du code demain (car il y a des choses à améliorer).

Oui, pour l'anglais, je suis désolé, j'ai fais ça en express aujourd'hui. Je voulais surtout me concentrer sur le code mais je comptais le faire relire. Désolé pour ça.

J'attends votre review de code avec impatience en tout cas.

Par contre, je pensais le site fonctionnel. Je sais que les sites une page ne sont pas forcément ergonomique pour les utilisateurs ; mais vu qu'un menu est aussi présent, je ne pense pas perdre le visiteur. Vous avez sans doute plus d'expérience que moi dans le domaine mais je pense qu'un CV ne doit pas être non plus trop chargé, on s'attarde juste sur les points importants (compétences/travaux/hobbies/ce que je cherche comme stage/job et contact).

Schwarzer Stern a écrit :
Salut,
Chez moi (Safari 6 Mac), le site donne l'impression désagréable de ramer et d'être bugué. Au survol des menus de gauche par exemple, ou même simplement quand je bouge la souris sur la page, ils clignotent un peu.
Et quand je descends dans la page, ce n'est pas fluide, parfois le menu disparaît à moitié et revient,...
Je peux te faire une vidéo si tu veux.
Mais je suis curieux de voir le résultat une fois les bugs corrigés.

J'avais testé mon site à ses débuts sur safari via un vieil iPhone 3. J'ai oublié depuis de le recheck. Je me contenterai d'un safari 5.1.7, à priori la v6 n'est pas dispo sur windows.

edit : En effet il y a des bugs au niveau du menu mais les miens se situent au niveau des textes de celui-ci, alors qu'ils sont censés apparaître de gauche (margin:left -350%) à droite (margin-left: 0). Ils vont de droite à gauche (de 350 à 0 je pense). J'ai aussi un autre bug avec l'alignement du texte sous le logo.

Je vais retest tout ça sur tous les navigateurs.

Schwarzer Stern a écrit :
Puisque c'est un site responsif j'ai voulu tester sur mon mobile (iPhone 4S), mais c'est inutilisable...
Le chargement met vraiment très longtemps. J'ai une mauvais connexion mais je ne pense pas que ce soit la seule chose en cause. Ça donne l'impression qu'il y a une mauvaise boucle quelque part dans le JS...À confirmer par un autre utilisateur ?

Je viens de modifier le code pour que le redimensionnement via JS s'effectue étape/étape. Une partie se fait désormais directement et une autre une fois les images chargés, le site devrait paraître plus fluide. Ça serait cool si vous pouvez réessayer. (n'oublies pas de vider votre cache).

rodolpheb a écrit :
Bonsoir,

J'émettrais une critique uniquement sur le design (vu l'heure).

J'aime assez l'idée générale et le menu est intéressant.

Sur Mac :
- Safari : mauvais rendu; le menu implose...
- Chrome: un peu mieux mais problème de menu...
- FF et Opéra correct mais avec des rendus différents.

Les couleurs sont un peu trop flashy, et arrivé en bas de page ça fait mal aux yeux.

Concernant l'anglais, @Laurie-Anne l'a souligné, il y a trop d'erreurs (syntaxe, grammaire). Exemple: "actually" ne signifie pas actuellement (mais "en fait") et les formules du type "I do stuff" vous causeront du tort.

Bon courage

Safari, c'est le problème évoqué précédemment ?

a écrit :
edit : En effet il y a des bugs au niveau du menu mais les miens se situent au niveau des textes de celui-ci, alors qu'ils sont censés apparaître de gauche (margin:left -350%) à droite (margin-left: 0). Ils vont de droite à gauche (de 350 à 0 je pense). J'ai aussi un autre bug avec l'alignement du texte sous le logo.

.

Pour l'anglais, je suis désolé, je l'ai fais un peu en express, je fixerai ça après les autres bugs.

Chrome, je n'ai pas de problème, j'ai fais quelques modifs depuis, pouvez-vous faire un ctrl+F5 et me dire si vous avez toujours des problèmes ?

Opera certaines propriétés css3 ne sont pas reconnus alors qu'avec webkit ou gecko ça marche, comme pour le filter. Je ne trouve pas ça gênant pour l'expérience final mais c'est vrai que ça ne fait pas sérieux.

Au niveau des couleurs même si l'avis est subjectif, vous avez sans doute raison, je garderai sans doute les mêmes mais assombri.

Encore merci pour vos avis.

Edit : En principe j'ai fix les bugs de menu présents sur Safari, et le menu n'implose plus sur le navigateurs. N'oubliez de nettoyer votre cache si vous le retestez !
Modifié par Fedonono (04 Jan 2013 - 04:01)

Salut,
Sur Safari / Mac, plus de problème apparemment.
Sous iPhone chargement rapide et affichage OK. Quelques caractères restent cependant illisibles car trop petits notamment dans skills.
Bon travail !

Fedonono a écrit :
Par contre, je pensais le site fonctionnel. Je sais que les sites une page ne sont pas forcément ergonomique pour les utilisateurs

Aucun problème avec ça.

Fedonono a écrit :
mais vu qu'un menu est aussi présent, je ne pense pas perdre le visiteur.

Le problème, il est là. Ton menu est ce qu'on appelle un "mystery meat navigation". Un menu pain surprise... Les icones ne sont pas parlantes (ou alors juste à une portion de tes visiteurs) et il faut survoler l'élément pour découvrir de quoi il s'agit. Sur PC, le survol se fait au moment du clic ; par contre sur écran tactile, le survol ne se fait que si on laisse le doit sur l'élément de menu (ce qui n'est absolument pas un comportement "normal" sur tablette, smartphone et autres).

Test visiteurs sont donc face à une interface obscure qu'il leur faut apprendre... Ce qui est une énorme erreur d'ergonomie et d'accessibilité (ton interface va frustrer de nombreuses personnes).

Mais le gros problème (raison pour laquelle j'avais omis "navigation" quand j'ai abordé le mystery meat, c'est que tout ton site se base sur le survol... Ce n'est donc pas uniquement le menu qui est anti-ergonomique et non accessible, mais le site complet !

Fedonono a écrit :
Vous avez sans doute plus d'expérience que moi dans le domaine mais je pense qu'un CV ne doit pas être non plus trop chargé, on s'attarde juste sur les points importants (compétences/travaux/hobbies/ce que je cherche comme stage/job et contact).

Je suis d'accord qu'un CV ne doit pas être trop chargé ; mais là, je ne vois pas vraiment de CV (le seul truc qui pourrait être un vrai CV est un "lien" non cliquable). Un CV doit comporter ton expérience pro et ta formation... ça manque. Et les hobbies, en vrai on s'en fiche un peu (sauf certains jobs, mais bon en informatique que tu aime la musique, le cinéma, les jeux vidéos et les technologies, ça n'a strictement aucun intérêt à être indiqué)...



Pour le code :
* Tu ne déclare pas l'encodage de ta page, ça pourrait poser problème chez certains visiteurs.

* Tu ne déclare pas non plus la langue de la page, les synthèses vocale liront donc le contenu de ta page dans leur langue par défaut au lieu de l'anglais (l'anglais lu avec une voix française, c'est très drôle... mais incompréhensible).

* Ton site est atteint de divite, mais ça se soigne.

* Dommage d'utiliser des styles en ligne alors que tu as des CSS...

* Attention au mélange des langues, tout changement doit être balisé via l'attribut lang.

* Le tabindex, c'est juste complètement inutile. Surtout si tu respecte l'ordre du code...

* Attention à ne pas vouloir trop bien faire : pour ton menu, tu donnes aux images un attribut alt identique au texte suivant l'image. C'est inutile et, surtout, gênant puisque tu créé une répétition donc du bruit.

* Je ne suis pas convainque de l'efficacité du <img class="img"> à mon sens c'est de la surcharge non vitale, il y a moyen de faire plus léger.

* Ta hiérarchie des titres n'est pas correcte : elle commence à h3 (sur un élément qui n'est pas un titre et devrait être un <p>). La hiérarchie des titres doit toujours commencer par h1 et ne pas comporter de sauts (pas de h1 directement suivi de h3).

* Ton niveau de connaissance de chaque compétence n'apparait pas dans le code. C'est un problème d'accessibilité.

* C'est super perturbant d'avoir l'explication d'une compétence avant sont énoncé (titre). Il faut revoir cet ordre.

* Le manque de titre de sections sur ton site est gênant (surtout parce qu'il n'y a qu'une page).

* Dans tes réalisation : le triangle et le chat, sans lire le code, je ne pense pas qu'il y ait quelqu'un d'autre que toi (et ceux qui ne voient/chargent pas les images, puisque les alt sont très bien remplis) qui soit capable de comprendre à quoi ils correspondent...


Contenu (point de vue recruteur) :
* L'anglais, on a déjà signalé, mais j'insiste, si tu présente ça à tes profs, ils vont se marrer (ou alors, ils ne parlent pas anglais).

* Plus contenu que code, mais ça me fait peur de voir que tu ne maitrise que l'HTML5... Tu ne connais donc pas les versions précédentes ? Plus sérieusement : tu connais l'HTML et qui à suivi son évolution jusqu'à la version 5... Et le fait d'utiliser l'HTML pour de la sémantique, ça ne veux rien dire... HTML est une sémantique, ce que tu fais, c'est respecter cette sémantique.

* Euh CSS3 fonctionne avec IE8-, en partie, ce sont les nouveaux éléments d'HTML5 qui ne sont pas reconnus...

* "I think I have" formule à éviter : si tu n’es pas sûr de tes compétences, c'est qu'elles ne sont pas aussi bonnes que tu le crois.

* La double négation c'est déjà pas top en français, mais en anglais c'est vraiment à éviter : il faut être positif : "I haven't any web project which doesn't use this tech" -> "Most / All my projects have been involving this technology". Évite également les abréviations.

* Indiquer que malgré de nombreuses heures passée sur Photoshop tu en est toujours au niveau "je sais redimensionner une image", c'est pas la meilleure de stratégies pour attirer le recruteur... Si tu n'as pas au moins un niveau intermédiaire, n'indique pas cette compétence dans ton CV (ou contente toi d'un : "j'utilise également...").


Performance :
* Il est préférable de préciser les dimensions des images, cela permet de réserver de l'espace lors du chargement et d'éviter les sauts de design très désagréable. Cela permet également à certains navigateurs d'afficher le contenu des alt, si les images ne peuvent être chargées.

* Prévois des images de bonne dimensions : ne les redimensionne pas dans le HTML ou le CSS, cela oblige à charger beaucoup plus de données que nécessaire et en redimensionnant "chez toi" tu aura un meilleurs contrôle de celui-ci.

* D'après GT Metrix, 88% de tes CSS ne sont pas utilisées... Un petit ménage s'impose.


Divers :
* Ton site n'est pas imprimable. Personnellement, je trouve cela pénalisant pour un entretien d'embauche.

Schwarzer Stern a écrit :
Salut,
Sur Safari / Mac, plus de problème apparemment.
Sous iPhone chargement rapide et affichage OK. Quelques caractères restent cependant illisibles car trop petits notamment dans skills.
Bon travail !

Merci ! Je vais check les caractères.

Laurie-Anne a écrit :
Aucun problème avec ça.
Le problème, il est là. Ton menu est ce qu'on appelle un &quot;mystery meat navigation&quot;. Un menu pain surprise... Les icones ne sont pas parlantes (ou alors juste à une portion de tes visiteurs) et il faut survoler l'élément pour découvrir de quoi il s'agit. Sur PC, le survol se fait au moment du clic ; par contre sur écran tactile, le survol ne se fait que si on laisse le doit sur l'élément de menu (ce qui n'est absolument pas un comportement &quot;normal&quot; sur tablette, smartphone et autres).

Test visiteurs sont donc face à une interface obscure qu'il leur faut apprendre... Ce qui est une énorme erreur d'ergonomie et d'accessibilité (ton interface va frustrer de nombreuses personnes).

Oui, tu as tout à fait raison. Je vais y réfléchir, le problème c'est que je n'ai pas envie que le menu encombre trop la page. Sur tactile, en mode portrait, j'y avais pensé et je pense avoir mis en place une bonne solution => la page d'accueil décrit entièrement le menu et ensuite, une fois la page scroll, le menu se met en footer sans les descriptions.

Par contre en paysage, je pourrais rendre les textes de menu visible tant que l'utilisateur n'a pas cliqué dessus, ça vous semble correct ?

=> fix

Laurie-Anne a écrit :

Mais le gros problème (raison pour laquelle j'avais omis &quot;navigation&quot; quand j'ai abordé le mystery meat, c'est que tout ton site se base sur le survol... Ce n'est donc pas uniquement le menu qui est anti-ergonomique et non accessible, mais le site complet !

La description détaillé de mes compétences et le menu sont effectivement gênant.

Mais après les quelques autres effets présents sur le site se basant sur le hover, c'est juste du style. Pour la section works, le hover peut être gênant mais vu qu'il est un peu gérer comme un click sur tactile, ce n'est pas si grave non ?

Laurie-Anne a écrit :

Je suis d'accord qu'un CV ne doit pas être trop chargé ; mais là, je ne vois pas vraiment de CV (le seul truc qui pourrait être un vrai CV est un &quot;lien&quot; non cliquable). Un CV doit comporter ton expérience pro et ta formation... ça manque. Et les hobbies, en vrai on s'en fiche un peu (sauf certains jobs, mais bon en informatique que tu aime la musique, le cinéma, les jeux vidéos et les technologies, ça n'a strictement aucun intérêt à être indiqué)...

Oui, je suis désolé, je ne crois pas avoir préciser que mon CV type PDF n'est pas fini. Je le rajouterai, mais c'est prévu.

Laurie-Anne a écrit :

Pour le code :
* Tu ne déclare pas l'encodage de ta page, ça pourrait poser problème chez certains visiteurs.

En principe c'est fait dans le .htaccess.

Laurie-Anne a écrit :

* Tu ne déclare pas non plus la langue de la page, les synthèses vocale liront donc le contenu de ta page dans leur langue par défaut au lieu de l'anglais (l'anglais lu avec une voix française, c'est très drôle... mais incompréhensible).

* Attention au mélange des langues, tout changement doit être balisé via l'attribut lang.

Oui, bien vu, je vais le faire.

=> fix

Laurie-Anne a écrit :

* Ton site est atteint de divite, mais ça se soigne.

Erf, j'ai toujours lu partout que les balise "table" étaient has-been. Comme quoi, il fallait utilisé les div car les tableaux étaient mal utilisés, donc je me suis dit que dans mon cas c'était le cas.

Laurie-Anne a écrit :

* Dommage d'utiliser des styles en ligne alors que tu as des CSS...

Les styles lignes présent de bases sur le site, sont quasi tous amenés à disparaître via le JS, ça facilite la compréhension, mais c'est vrai que ça ne sert qu'à moi, je verrai pour changer.

Laurie-Anne a écrit :

* Attention à ne pas vouloir trop bien faire : pour ton menu, tu donnes aux images un attribut alt identique au texte suivant l'image. C'est inutile et, surtout, gênant puisque tu créé une répétition donc du bruit.

Oui, même si c'est évident, je n'y avais pas pensé.

=> fix

Laurie-Anne a écrit :

* Ton niveau de connaissance de chaque compétence n'apparait pas dans le code. C'est un problème d'accessibilité.

Oui, dans le code ? En texte sur le site vous voulez dire (exemple : Java - 25%) ?

Laurie-Anne a écrit :

* C'est super perturbant d'avoir l'explication d'une compétence avant sont énoncé (titre). Il faut revoir cet ordre.

Je n'ai pas bien compris. Au niveau du chargement vous voulez dire ? Même si la page n'est pas géré et que le titre de la compétence n'apparait pas de suite, on peut quand même lire le détail de compétence.

Ou vous vouliez dire, il faut juste que j'inverse la section works et la section skills ?

Laurie-Anne a écrit :

* Le manque de titre de sections sur ton site est gênant (surtout parce qu'il n'y a qu'une page).

Oui, le code couleur est censé rappelé à l'utilisateur sur quelle page il est. Donc actuellement, avec le menu comme ça c'est non ergonomique. Je pense avoir une idée pour modifier ça.

=> fix

Laurie-Anne a écrit :

* Dans tes réalisation : le triangle et le chat, sans lire le code, je ne pense pas qu'il y ait quelqu'un d'autre que toi (et ceux qui ne voient/chargent pas les images, puisque les alt sont très bien remplis) qui soit capable de comprendre à quoi ils correspondent...

Oui, je rajouterai un texte.

Laurie-Anne a écrit :

* Plus contenu que code, mais ça me fait peur de voir que tu ne maitrise que l'HTML5... Tu ne connais donc pas les versions précédentes ? Plus sérieusement : tu connais l'HTML et qui à suivi son évolution jusqu'à la version 5... Et le fait d'utiliser l'HTML pour de la sémantique, ça ne veux rien dire... HTML est une sémantique, ce que tu fais, c'est respecter cette sémantique.

Oép, c'était implicite les versions précédentes, mais c'est vrai que ça peut être mal interprété. En texte, je vais y réfléchir, en attendant je vais retirer ça.

=> fix

Laurie-Anne a écrit :

* Euh CSS3 fonctionne avec IE8-, en partie, ce sont les nouveaux éléments d'HTML5 qui ne sont pas reconnus...

Effectivement, c'est IE7-.

=> fix

Laurie-Anne a écrit :

* Le tabindex, c'est juste complètement inutile. Surtout si tu respecte l'ordre du code...
* Ta hiérarchie des titres n'est pas correcte : elle commence à h3 (sur un élément qui n'est pas un titre et devrait être un &lt;p&gt;). La hiérarchie des titres doit toujours commencer par h1 et ne pas comporter de sauts (pas de h1 directement suivi de h3).
* Je ne suis pas convainque de l'efficacité du &lt;img class=&quot;img&quot;&gt; à mon sens c'est de la surcharge non vitale, il y a moyen de faire plus léger.
Contenu (point de vue recruteur) :
* L'anglais, on a déjà signalé, mais j'insiste, si tu présente ça à tes profs, ils vont se marrer (ou alors, ils ne parlent pas anglais).
* &quot;I think I have&quot; formule à éviter : si tu n’es pas sûr de tes compétences, c'est qu'elles ne sont pas aussi bonnes que tu le crois.
* La double négation c'est déjà pas top en français, mais en anglais c'est vraiment à éviter : il faut être positif : &quot;I haven't any web project which doesn't use this tech&quot; -&gt; &quot;Most / All my projects have been involving this technology&quot;. Évite également les abréviations.

Je vais changer ça.

=> fix

Laurie-Anne a écrit :

* Indiquer que malgré de nombreuses heures passée sur Photoshop tu en est toujours au niveau &quot;je sais redimensionner une image&quot;, c'est pas la meilleure de stratégies pour attirer le recruteur... Si tu n'as pas au moins un niveau intermédiaire, n'indique pas cette compétence dans ton CV (ou contente toi d'un : &quot;j'utilise également...&quot;).

Oui débutant c'est subjectif. Intermédiaire aussi d'ailleurs, mais j'ai les bases. Je ne suis pas expert mais j'ai déjà créé des logos (en utilisant des masques vectoriels,...). Je vais sans doute changer le texte mais je garderai la compétence dans la liste, photoshop est quand même assez indispensable.

=> fix (j'ai suivi ta recommandation)

Laurie-Anne a écrit :

Performance :
* Il est préférable de préciser les dimensions des images, cela permet de réserver de l'espace lors du chargement et d'éviter les sauts de design très désagréable. Cela permet également à certains navigateurs d'afficher le contenu des alt, si les images ne peuvent être chargées.

* Prévois des images de bonne dimensions : ne les redimensionne pas dans le HTML ou le CSS, cela oblige à charger beaucoup plus de données que nécessaire et en redimensionnant &quot;chez toi&quot; tu aura un meilleurs contrôle de celui-ci.

Le problème c'est que les images se redimensionne en fonction des containers qui les contiennent, et ces containers se redimensionnent en fonction de la largeur/hauteur de l'écran via Javascript. Donc je ne peux pas indiquer la hauteur/largeur, l'avantage c'est que si tu regardes le site sur un écran de haute résolution (comme le dernier mac) à par pour les sprites de mes works et mon logo, tu vois le site de la même façon que sur un fHD. Pis ça m'évite de faire encore plus de media queries que j'en ai.

Laurie-Anne a écrit :

* D'après GT Metrix, 88% de tes CSS ne sont pas utilisées... Un petit ménage s'impose.

Oui mais il compte tout ce dont il ne sert pas dans les media queries comme inutile. Donc je vois pas vraiment comment le nettoyer, à par si je fais un fichier css/media queries et que via JS je lui dit de charger tel ou tel fichier CSS en fonction de son écran. Mais bon, c'est pas tip top.

Laurie-Anne a écrit :

Divers :
* Ton site n'est pas imprimable. Personnellement, je trouve cela pénalisant pour un entretien d'embauche.

Je n'y ai pas pensé. Une fois que mon CV- PDF sera fini, ça ne sera plus important par contre ?

Merci pour les commentaires en tout cas, je me met au boulot.
Modifié par Fedonono (04 Jan 2013 - 21:01)

Au 1er coup d'oeil, rapidement.

Trop de couleurs.
Pour avoir une bonne cohérence graphique, il est bon de limiter le nombre de couleurs.
Si on regarde Metro UI : https://www.google.fr/search?q=metro+ui
On voit que le nombre de couleurs est limité et cohérent.
Sur ta page "Works" entre le fond, le menu et le contenu, tu as 3 oranges différents.

Incohérence d'UI.
"Contact" et "Hobbies" utilisent une interface semblable (boutons autour, contenu dedans), et ça aurait été souhaitable de faire pareil pour "Works" and "Skills".

Au niveau du choix des couleurs, essaye de garder une luminosité à peu près constante dans ta palette, pour éviter d'avoir un jaune très éclatant, et un rouge foncé en comparaison.

Pour la finalité de ton site, à savoir trouver un job, je ne sais pas s'il est pertinent de mettre ton PDF dans la dernière page, en 2ème lien.
Vu l'ergonomie un peu déroutante, il est probable que ton recruteur se paume avant d'arriver à ta page contact (ou joue à tes jeux...) et oublie d'aller chercher ton CV PDF et de l'imprimer... si jamais il a la motivation d'aller chercher ton PDF.
Mon conseil : ajouter le téléchargement du PDF dans le menu, ou à un autre endroit fixe.

Bon courage

ofaurax a écrit :
Au 1er coup d'oeil, rapidement.

Trop de couleurs.
Pour avoir une bonne cohérence graphique, il est bon de limiter le nombre de couleurs.
Si on regarde Metro UI : https://www.google.fr/search?q=metro+ui
On voit que le nombre de couleurs est limité et cohérent.
Sur ta page &quot;Works&quot; entre le fond, le menu et le contenu, tu as 3 oranges différents.

Incohérence d'UI.
&quot;Contact&quot; et &quot;Hobbies&quot; utilisent une interface semblable (boutons autour, contenu dedans), et ça aurait été souhaitable de faire pareil pour &quot;Works&quot; and &quot;Skills&quot;.

Au niveau du choix des couleurs, essaye de garder une luminosité à peu près constante dans ta palette, pour éviter d'avoir un jaune très éclatant, et un rouge foncé en comparaison.

Pour la finalité de ton site, à savoir trouver un job, je ne sais pas s'il est pertinent de mettre ton PDF dans la dernière page, en 2ème lien.
Vu l'ergonomie un peu déroutante, il est probable que ton recruteur se paume avant d'arriver à ta page contact (ou joue à tes jeux...) et oublie d'aller chercher ton CV PDF et de l'imprimer... si jamais il a la motivation d'aller chercher ton PDF.
Mon conseil : ajouter le téléchargement du PDF dans le menu, ou à un autre endroit fixe.

Bon courage

Bonsoir, merci pour l'avis.

Pour les couleurs, oui, je prévois d'unifier celle-ci, par contre bien vu pour les oranges, ça ne m'a pas fait tilt.

Pour mon CV PDF, je pense l'ajouter en texte dès le départ, comme ça si un recruteur arrive, il verra directement :

- ce que je cherche
- un résumé de qui je suis (étudiant en info)
- lien vers mon CV.

Au niveau du code couleur, j'ai dû mal à me décider.

J'ai fais un essai ici :

https://kuler.adobe.com/#themeID/2210524
rendu : http://goo.gl/aat2LG (oui les images sont aussi à refaire et les couleurs d'hover et autres aussi mais je préfère être sûr du code couleur avant de tout refaire), un avis ? Perso j'obtiens des rendu différents sur mes != écrans, pas très pratique.

Autrement, j'ai corrigé pas mal de choses, j'ai édité le précédent post pour dire quoi.

A voir ici : http://goo.gl/2AmeYf

edit: Si vous avez un code couleur à proposer, n'hésitez pas.
Modifié par Fedonono (22 Nov 2013 - 01:03)

POur les couleurs essayez ça : lien

et ça...

Sympa comme explication par contre les schémas de couleurs proposés ne sont dispo que pour 4couleurs différentes .

J'en aimerais bien 5.

Si je combine : http://colorschemedesigner.com/#0a41Rw0w0w0w0 + un jaune pour le pont, vous pensez que ça ira? J'ai dû mal à avoir un avis objectif sur le choix de code couleur.
Modifié par Fedonono (04 Jan 2013 - 22:59)

Je trouve que ça passe plutôt bien.

rodolpheb a écrit :
Je trouve que ça passe plutôt bien.

J'ai remodifié les couleurs, par contre, j'ai dû atténuer les couleurs chaudes car ça faisait un trop gros contraste avec les froides, ça piquait un peu les yeux.

Avant : http://goo.gl/2AmeYf
Après : http://goo.gl/aat2LG

Maintenant la logique, c'est plus l'utilisateur avance, plus il va vers les couleurs chaudes. Pour qu'entre chaque page, le changement de couleur soit le moins choquant possible.

Je referai les couleurs des images demain !
Modifié par Fedonono (22 Nov 2013 - 01:04)