Hello !

Je viens de mettre en ligne la nouvelle version de mon portfolio.
Je suis Web Designer / Intégrateur et je me suis lancé le défi de le réaliser en full CSS sans Js ni CMS.

Que pensez vous de mon code et de mon design ?
jonathanlevaillant.fr

PS : j'ai bien galéré pour le slider dynamique responsive en full css Smiley langue

Merci d'avance Smiley smile
Jonathan
moi j'ai bien regarder ton site, tes projets (bien joué pour l'iphone sur codepen d'ailleurs !) mais tu es bien plus avancé que moi niveau CSS, alors je peux pas trop critiqué Smiley smile
Modifié par JENCAL (23 Oct 2015 - 15:24)
Merci pour ta réponse JENCAL,
Ne t'inquiètes pas pour la partie CSS ! J'ai aussi besoin d'avis sur la partie graphique Smiley smile
Hello Manumanu,

merci pour ta réponse Smiley smile
Oui pour les images floues c'est uniquement sur IE, normalement sur Opéra, Edge, Chrome et Firefox les images sont correctes. C'est la balise <picture> qui n'est pas reconnue par IE...

Pour le smooth scroll en effet ça me démangeais, mais mettre un script juste pour ça ... ça m'embête aussi un peu. Malheureusement impossible à faire en full CSS, snif.

Et concernant les optis, j'ai fais le maximum possible je pense, le reste concernant des optis sécurités.
psykhe a écrit :
Malheureusement impossible à faire en full CSS, snif.


sisi , ici enfin... c'est pas vraiment un smooth "scroll" mais plus un translate.
Modifié par JENCAL (28 Oct 2015 - 10:52)
Bonjour,

Ça fais une éternité que j'ai pas posté ici ^^

Je ne suis pas designer mais j'ai néanmoins quelques remarques par rapport à mon ressentis, des choses qui m'ont fait un peu tiquer.
- Le texte de "Mes réalisations" possède une longueur de ligne bien inconfortable pour la lecture. Généralement quand je vois un site d'un designer qui n'a pas eu de réflexion sur la longueur de ligne je pars en courant, c'est le b.a-ba. de la typographie (j'évoque mon ressentis hein ne le prend pas mal ^^)
- Le site est un peu trop commun. Si je dois faire appel à un webdesigner que je tape "webdesigner paris" j’obtiendrais une chier de résultat et ce n'est pas le tien qui ressortira du lot (encore une fois c'est mon ressentis)
- Le fait de ne pas utiliser Javascript n'est pas (selon moi) un gage de qualité, c'est étrange de te positionnement là dessus. Le message que moi j'en retiendrai en tant que personne qui cherche un webdesigner/intégrateur c'est que tu ne sais pas utiliser Javascript. De plus, du coup je trouve qu'il manque d'interactivité sur ton site. Ce qui renforce ce côté un peu plat.
- Côté code, vu que tu fais du statique ça serait pas mal d'enrichir ton HTML (vu que tu as totalement la main dessus) avec des microformats et des rôles ARIA.

Voilà, avec tout mon respect bien évidemment Smiley smile
Hello Gili,

merci pour tes commentaires !

- Pour le texte des réalisations oui je suis à 125 cpl, c'est un peu trop long je te l'accorde, personnellement ça ne me choquait pas trop mais je peux modifier ça.
- Je voulais un style assez simple sans mettre 150 animations css / effets parallaxes et j'en passe. De mon point de vue, un site qu'il soit fait par un dev ou un graphiste doit être avant tout lisible. L'information prime. Je ne suis pas très fan des sites qui balancent des anims à chaque scroll de souris. Mais je te rejoins sur le coté peut être "trop" simple / épuré.
- Coté JS, j'étais perplexe, j'aurais pu utiliser 2 ou 3 scripts pour l'effet smooth "scroll" ou autre. Niveau ergonomie c'est plus sympa pour l'utilisateur mais charger un script juste pour ça... bof
- Coté ARIA et microformats je suis preneur, j'ai regardé où je pouvais en mettre mais alors la je ne vois absolument pas... Le contenu ne s'y prête pas trop.

Merci en tout cas Smiley smile
Avec grand plaisir !
psykhe a écrit :
- Je voulais un style assez simple sans mettre 150 animations css / effets parallaxes et j'en passe. De mon point de vue, un site qu'il soit fait par un dev ou un graphiste doit être avant tout lisible. L'information prime. Je ne suis pas très fan des sites qui balancent des anims à chaque scroll de souris. Mais je te rejoins sur le coté peut être "trop" simple / épuré.
Je suis 100% d'accord avec toi. Mais on peut créer des petites animations qui suscitent l’interaction sans trop être intrusif. Par exemple je n'avais pas vu ton hover sur tes icones de réseaux sociaux. Le contrast est assez faible et sur un écran pourri on ne voit pas de différence (pas sur un beau rétina bien entendu). Le smooth scroll pourrait être mal aussi. J'ai déjà vu des utilisateurs qui étaient perdu sans smooth scroll (ils croient qu'ils ont changé de page mais en fait non ^^)

psykhe a écrit :
- Coté JS, j'étais perplexe, j'aurais pu utiliser 2 ou 3 scripts pour l'effet smooth "scroll" ou autre. Niveau ergonomie c'est plus sympa pour l'utilisateur mais charger un script juste pour ça... bof
J'avais exactement ce genre de réflexion avant. Et les 2 se valent je pense. Mais dans le contexte où tu dois marquer ton visiteurs, je pense que quelques ko contre un effet waw c'est un bon compromis (encore une fois ça n'engage que moi).

psykhe a écrit :
- Coté ARIA et microformats je suis preneur, j'ai regardé où je pouvais en mettre mais alors la je ne vois absolument pas... Le contenu ne s'y prête pas trop.
Tu peux déjà en utiliser pour tes réalisations (https://schema.org/CreativeWork) ou tes données de contact (https://schema.org/PostalAddress) etc… Pour les rôles ARIA tu peux utiliser les grands basiques (http://www.alsacreations.com/tuto/lire/1132-html5-aria-semantique-wordpress.html). Ca ne mange pas de pain (je pense du moins^^) et ça te différencie un peu des autres intégrateurs sur Paris qui n'utilisent pas ce genre de techno ^^.

Bonne continuation
Bonjour,

De prime abord, à l'accueil, le site me donne d'abord un ressenti favorable. Ça fait moderne, même si ce n'est pas le site le plus rock'n roll du mois. Mais ce n'est pas forcément ce que cherchent les recruteurs. Surtout qu'avec un profil à double casquette, la partie technique peut prendre plus d'importance. Là dessus, c'est à vous de vous positionner. Ça fait site de junior au portfolio pas très fournis, mais qui a de la ressource. Le fond jaune est pêchu les éléments biens positionnés et l'illustration plutôt réussie, avec le petit cœur qui bat ! Smiley smile

En revanche si j'élargie la fenêtre sur mon moniteur de bureau, je trouve que le sit s'étale un peu tro sur la largeur.Il gagnerait à moins s'étaler pour garder la main sur la construction de la maquette.

Le nom "Web Designer & intégrateur" me semble cohérent en 2015, même s'il serait judicieux de se positionner d'avantage pour l'une de ces fonctions. Il est bien de connaître différents domaines mais c'est encore mieux si on en maîtrise un en particulier. À chasser deux lièvres…

Ensuite, au scroll, j'ai une gouttière importante entre les deux colonnes (formation / compétences) qui apparaissent "collées" sur les bords, sauf à afficher le site sur 1600 pixels de large, ce qui est rare en réalité. Les internautes naviguent soit sur tablette, soit sur portable et sur moniteur beaucoup affichent 2 sites ou logiciels latéralement. Il faut le prendre en considération. Pour la partie mobile, je n'ai pas testé sur mon smartphone, mais en étroitisant la fenêtre, je trouve que ça se place plutôt bien. Voire même mieux que sur moniteur. Les masses sont plus équilibrées.

Je continue le scroll, et j'apprécie le changement de fond. Le passage du jaune au bleu, du bleu au blanc/gris se passe pas trop mal. Et un fond neutre aide à valoriser les éléments du portfolio.

Sur le portfolio j'ai un problème avec les templates "Prat!que". J'ai l'impression de voir 3 fois le même dans 3 couleurs différentes. N'aurait-il pas été possible de les regrouper, par exemple en glissant une navigation horizontale (flèches… ) pour passer d'une déclinaison à l'autre ? D'en afficher q'un en scroll vertical ? Là ça peut donner l'impression que faute de contenu, vous essayez de remplir en mettant des quasi doublons. Surtout qu'une fois qu'on a vu le premier template, les deux déclinaisons n'apportent pas grand chose concernant vos compétences. Inutile de surcharger. Il vaut mieux en mettre peu mais présenter des choses complémentaires. Le plus gênant est que ce "tunnel" de clones risque de décourager les visiteurs qui pourront quitter la page avant d'avoir vu le reste.

Du même avis que Gili concernant la longueur des lignes. Pour rester confortable et lisible, il vaut mieux ne pas dépasser 80 signes (espaces incluses). Dans les cas extrêmes, 100 signes si le texte est petit et le paragraphe très court. Là avec plus de 120 signes, c'est comme si vous aviez mis un panneau "ne me lisez pas". De plus ce n'est pas top pour mettre en valeur vos qualités de designer. Savoir composer le texte est en effet une des bases.

Le reste du portfolio comporte des travaux plutôt sympas. J'aime bien "Finger on the Pulse, que j'aurai mis en premier à la place du "trio".

Le footer avec le petit effet de localisation et le formulaire est graphique est sympa.

Je pense que vous renforceriez votre maquette en ne sélectionnant que 3 templates, sans doublons, pour éviter de se retrouver avec un scroll trop long.

En cliquant sur le menu du haut, le passage vers la zone concernée est brutal. Un smooth scroll aurait donné un résultat plus fluide. Sauf si on se tape un ascenseur de 8 étages…

Globalement, il y a trop de texte pour décrire vos réalisations. De toute façon personne ou presque ne les lit. Pour faire efficace, faites court, très court (pas comme mon commentaire Smiley lol ). En mettant le minimum syndical : client, ce que vous avez réalisé (maquette, illustration, intégration… ). Éventuellement pour un intégrateur les langages et outils utilisés. Il n'est pas nécessaire de faire des phrases.

Le texte du portfolio me semble un peu gros. Plus gros que dans les autres parties. Ce n'est peut être pas le cas mais à l'œil on a cette impression (la couleur du fond peut jouer).Peut être essayer plus petit, comme pour des légendes techniques. Dans le portfolio, c'est le visuel qui doit primer. Pas le bla bla.

Évitez les listes à puces. C'est aussi sexy qu'un bilan comptable.

Les petits effets graphiques ici ou là sont très agréables, la fiole avec les bulles… Franchement, on sent quelqu'un qui a un réel potentiel. Pas de faute de goût. Ça semble évident, mais c'est très courant, même chez les pros. C'est ce qu'il y a de plus difficile à corriger. Au contraire, malgré les maladresses soulignées par les autres alsanautes et moi même, il y a un cachet et une certaine élégance. Ce qui donne l'impression d'une personne qui fait du travail propre et soigné sur les détails.

Un dernier point sur le logo. Il est carré sur le site et rond dans le favicon. Un petit problème de cohérence ? Smiley cligne

Pour conclure, je reviendrais sur le personnage. C'est l'élément central du site. Je trouve dommage qu'on ne le retrouve pas au moins à un autre endroit. Par exemple pour marquer une rubrique ou le footer, même placé dans un rond en plan américain ou adoptant une posture, un geste cool. La partie portfolio est sobre, ce qui est plutôt bien mais elle fait limite terne comparé au reste du site. Peut être que de condenser le portfolio y remédiera en partie ?

Pour le code, je passe mon tour vu mon niveau à la ramasse. Smiley lol

Voilà pour moi,
En vous souhaitant bonne continuation et tout le succès que vous espérez ! Smiley smile
Modifié par spongebrain (29 Oct 2015 - 05:33)
Salut Spongebrain,

tout d'abord un grand merci, tu as du passer un temps fou à rédiger tout ça Smiley eek , tes remarques sont vraiment très constructives, ça fait plaisir !

Alors pour revenir sur quelques points (je ferai plus court ne t'inquiètes pas ^^)

1) Merci pour l'illustration, le petit cœur, les bulles, etc. Je me suis bien amusé Smiley smile , concernant le positionnement professionnel c'est délicat, je fais réellement 50% de code et 50% de design. Donc je suis obligé de communiquer sur les 2. Les doubles compétences c'est classique dans ce secteur, non ?

2) Concernant la largeur du site, j'ai fais ma propre grille, je me suis peut être enflammé sur les dimensions (1136px). Et en effet, bien joué ^^, j'étais confronté à un petit soucis sur la première gouttière entre "mes formations" et "mes compétences", elle est 2 fois plus large que ce qu'elle devrait être. Mais je ne savais pas comment caser la potion proprement afin d'éviter que les bulles cachent le texte au dessus.

3) Concernant les template "Prat!que" tu as entièrement raison, malheureusement ce sont mes 3 derniers gros projets et la contrainte principale de la société est justement d'harmoniser tous les sites du groupe (même bannière, même logo, même pub de *** xD). Et oui ce ne sont pas les sites les plus funs du monde. Mais vu que ce sont de très gros projets "From Scratch" durant à peu près 6 mois, je ne pouvais pas ne pas en parler ? Je vais voir comment éventuellement condenser ces 3 sites.

4) Pour les 120 lignes oui je vais essayer de trouver une solution.

5) Concernant le smooth scroll, ok je craque, je vais mettre ce .js Smiley smile

6) Pour le texte je voulais en mettre quand même pas mal pour une question de SEO (contrairement à mon ancien portfolio qui devait avoir à tout casser 3 keywords sur toute la page ^^).

7) Les listes à puce, oui c'est pas sexy Smiley lol . Tu me conseilles quoi à la place ? un picto ?

8) Et pour le logo, je vais être honnête je préfère 100 fois le favicon rond avec "JL", en fait au moment de le faire, je me suis dis "mince, il est carrément mieux que mon vrai logo, c'est facheux xD". Donc je vais certainement mettre un petit border-radius: 50%. Je le sens bien celui la !

Voila, j'ai a peu près répondu à tous les points, merci encore en tout cas pour l'effort d'analyse et de rédaction Smiley cligne
Salut psykhe,

Juste une petite remarque au niveau des liens. Le lien de l'école multimédia ne s'ouvre pas dans un autre onglet. C'est pas grand chose mais c'est dommage, une erreur de manip et ton site disparait au risque qu'on aille en chercher un autre.

Ce serait bien qu'idee2sorties.com soit un lien aussi je pense.

Sinon je suis d'accord avec des choses qui ont été dites: le texte "mes réalisations", trop large et ton petit bonhomme bien sympa (toi j'imagine=), on pourrait le revoir plus bas, en plus petit pt'être tourné de l'autre côté.
Pour le logo: deux logos c'est évidemment trop. Moi j'ai une préférence pour le rond, je trouve qu'il fait plus pro.

Bye,
Cy
Bonjour,

+1 pour le smooth scroll. MAis si finalement un smooth scroll a été installé avec à la clef un chargement complet de la lib jQuery... on ne peut plus vraiment dire désormais que le site est fait "sans JavaScript"...

Parce que - avant de lire les commentaires de ce forum et de comprendre - c'est la première chose qui m'a sauté aux yeux en allant voir le code.
Bonjour psykhe
J'ai votre site, je tien a vous dire votre site est professionnel et vous êtes un bonne designer, j'ai bien aimer les couleurs du site