Bonjour !

Je viens ici en tant que nouveau sur le forum mais en étant un lecteur assidu d'Alsacréation. Smiley smile
Il y a peu j'ai décidé de créer mon site personnel qui fait office de portfolio, de CV en ligne, d'espace perso, etc. Je tiens à préciser qu'il n'est pas tout à fait terminé!

Avec ce site je veux mettre en avant le fait que je suis quelqu'un de polyvalent tout en appuyant un peu plus sur le métier qui m'intéresse en priorité: intégrateur web.

J'aimerai avoir quelques retour sur le design du site, la parti code (optimisation, ajout pertinent) et sur le ressenti qu'on a en général quand on débarque là-dessus. Smiley lol

J'ai aussi besoin de votre aide pour m'aider à résoudre quelques bugs (ah les vilains!) qui pourrissent le design:
- page d'accueil => la pizza avec les débris qui bug au premier chargement de la page (plugin jquery jParallax). J'ai l'impression que le plugin ne comprend pas où se situe la zone qui défini l'effet du parallax, alors que l'ai bien défini.

- page créations => le plugin jquery Masonry déconne et me fait un empilement d'images au premier chargement de la page. Il me semble que c'est un bug connu mais je n'ai pas encore trouvé de solution pour régler ce problème...

Merci d'avance pour vos retours, et bonne journée!
Bonjour,

sur la partie design y'a de l'idée je trouve alors, si je ne vois pas comment t'aider avec ton jquery qui bug, j'ai partagé ton site sur mes RS et je te conseille d'en faire autant pour tes réalisations sur des communautés G+ genre webdesign ou d'autres RS, ça peut aider .

Bonne continuation
Merci d'avoir donné ton avis... et du partage! Smiley biggrin Oui il faut que je pense à partager mes créations... pour l'instant elles ne sont pas légions donc à voir.
Bonjour ami grenoblois et bienvenue sur Alsa Smiley smile

Je pense qu'il y a beaucoup à dire sur ce site au niveau de l'apparence visuelle, mais je vais laisser les spécialistes en parler (spongebrain, si tu nous lis… ^^).

Pour ma part –et comme tu te présente comme intégrateur , avec un tag [PRO]–, je vais parler intégration :

– le doctype doit être le premier élément apparaissant dans le code de chaque page, sinon on risque de basculer en mode quirks, etc.

– en texte Alternatif de ton logo, je ne mettrais pas "Le logo de Bastien Perreuil" mais plutôt "Bastien Perreuil, intégrateur web à Grenoble" ou un truc dans ce genre. Le tout devrait AMHA être placé dans un titre de niveau 1, d'une part pour structurer mieux tes pages et d'autre part pour optimiser tout cela un petit peu mieux côté SEO

– Tes textes sont illisibles : il faut commencer par utiliser un interlignage bien supérieur qu'actuellement pour les paragraphes, et espacer tes éléments (titres, paragraphes, etc.) avec des marges verticales

– ton menu est bugué (ou si c'est fait exprès, à l'air bugué). Je suis sur Chrome (mac OS) et chez moi , "A propos" se positionne en dessous de "Créations"

– tu as beaucoup d'images qui ne contiennent pas d'attribut "alt" (même vide), à corriger pour faire les choses dans les règles de l'art

– Enlève-nous immédiatement ces barres de notation de tes compétences ! Smiley fache Ce n'est pas très sérieux, on se focalise là dessus surtout pour savoir là ou tu est moins bon au lieu de regarder où tu l'est.

– Préférer "Compétences" a "Skills". Ou alors, il faut préciser à l'user-agent le changement de langue avec un attribut "lang" adéquat (car tu es intégrateur, n'oublions donc pas les règles de base de l'accessibilité). Mais utilise quand même plutôt "compétences" Smiley cligne

– Page A propos, le dernier paragraphe de texte de texte contient bien trop de caractères par ligne, ce qui pose un problème de lisibilité. En tant qu'intégrateur, tu dois apprendre les bases de l'ergo web afin d'éviter ce genre d'erreurs

– Page portfolio : tu as un gros souci de positionnement, mais je suppose que tu as déjà du t'en apercevoir Smiley cligne

– ARGH ! HÉRÉSIE ! Nous ne sommes pas alsacreation.com Smiley lol Smiley biggol
Et au passage, tu peux corriger ton "title" : alsacreationS.com n'est pas une "grande agence alsacienne" mais une communauté d'apprentissage et de promotion des standards du web. L'agence, c'est alsacreations.fr Smiley cligne
Pour en rajouter sur les contenus, je pense qu'il faut les revoir en partie : tu ne les focalise pas suffisamment sur ton métier.

Typiquement, dans la page A propos (il faudrait la renommer en "mon métier" ou quelque chose du genre), on a pour seul titre un h1 libellé "Être dans le vent, c'est l'ambition des feuilles mortes".
Smiley biggol
C'est poétique et plutôt sympa, mais pas du tout efficace ! Ni en terme de SEO, ni en terme de cohérence vis à vis du contenu qui suit. Ce n'est pas ce que j'appelle un titre de section. Cette citation pourrait à la rigueur avoir sa place en quote illustrative après le texte, mais surtout pas en titre de premier niveau. Essaye d'être plus rigoureux, méthodique, efficace dans la rédaction. Ne te perds pas dans des phrases à rallonge parfois HS : va à l'essentiel pour te présenter de la façon la plus efficace possible.
Et je continue avec cette page à propos car c'est en inspectant le code source que je me suis rendu compte qu'il y avait du contenu texte à l'intérieur des panneaux du point d'interrogation. Pour moi ça c'est très problématique, car ce n'est vraiment pas affordant (comment deviner que les panneaux vont se soulever ? rien ne l'indique !), ce qui fait qu'on loupe les trois quart du contenu le plus intéressant finalement de la page … Smiley confus

Bref pas mal de choses à revoir sur ce site.
Bon courage en tout cas, et bon vent sur Gre Smiley cligne

Ah oui une dernière chose. Je vois que tu utilise Piwik, ce qui est une bonne chose, mais tu pourrais du coup l'ajouter à tes compétences, tant qu'à faire Smiley cligne
Bonjour audrasjb et merci pour tes réactions ! Effectivement il y a du boulot mais je ne désespère pas d'y arriver. Smiley smile

Il y a des choses toutes à fait pertinentes dans ce que tu as dit mais aussi des choses que je ne comprends pas forcément:

- Qu'est-ce que le mode quirk?

- Pour l'attribut 'alt' qui est parfois manquant, je me pose une question: doit-on obligatoirement en mettre un lorsque l'image possède déjà une description (mes photos par exemple avec le titre en <h1>) ou quand l'image n'est pas vraiment descriptive ou que ce n'est pas pertinent (ma pizza et ses débris en accueil)? Je me positionne par rapport à une personne non-voyante et/ou avec une bande-passante très mince.

- Mon menu s'affiche bien pour ma part, je vais me pencher dessus avec un mac. Smiley lol Qu'elle est ta résolution d'écran?

- En ce qui concerne mes compétences je ne suis pas d'accord. Pourquoi se focaliser là où je suis le moins bon? Je possède plusieurs compétences avec des niveaux différents. Je trouve juste que l'employeur potentiel puisse s'informer sur mes capacités réelles... non? En plus j'aime bien préciser mes compétences "en apprentissage" pour montrer que je continue de me former. Smiley langue C'est comme sur un réseau social professionnel non? On indique ses compétences, même celles qu'on ne maîtrise pas à 100%, je crois.

- Pour le "Skill" ça m'est venu tout seul (le côté jeux-vidéos toussa Smiley lol ). Penses-tu que c'est vraiment impactant sur la compréhension de la page, surtout que c'est un terme anglais connu par beaucoup de français il me semble. Tu pensais à l'impact en terme de SEO?

EDIT: j'ai pigé pour le "bug" du menu. En faite c'est le comportement normal du menu. Le site est codé pour avoir un "layout fluide" ainsi que responsive.
Modifié par Bastien38 (29 Aug 2014 - 15:43)
Bastien38 a écrit :
- Qu'est-ce que le mode quirk?

Le mode quirks un mode de compatibilité utilisé par certains navigateurs pour afficher des pages qui ne respectent pas les standards web. On sait qu'IE peut passer en mode quirks si des caractères se trouvent avant la déclaration du doctype. Le premier caractère du doctype doit donc toujours être le premier caractère de la page web.
> Article sur le mode quirks

Bastien38 a écrit :
- Pour l'attribut 'alt' qui est parfois manquant, je me pose une question: doit-on obligatoirement en mettre un […]

Oui. En revanche, si l'image est purement décorative, tu peux laisser la valeur de l'attribut "alt" vide.

Bastien38 a écrit :
Pour le Skill ça m'est venu tout seul (le côté jeux-vidéos toussa Smiley lol ). Penses-tu que c'est vraiment impactant sur la compréhension de la page, surtout que c'est un terme anglais connu par beaucoup de français il me semble. Tu pensais à l'impact en terme de SEO?

Encore une fois, je pense que les textes que tu as rédigés pour ton site sont loin d'être efficaces. Tu utilise d'une manière générale bien trop de chemins détournés pour en arriver aux informations que tu veux présenter. Il faut que tu simplifie l'expression pour aller au but plus vite. Les professionnels qui viennent sur ton site de présentation n'ont pas 30 minutes à t'accorder Smiley cligne
D'une manière générale, je trouve que c'est un peu similaire pour la mise en forme de ton site. C'est assez typique (et compréhensible par ailleurs) chez les professionnels du web qui sont entrés par la technique : lorsqu'ils font du design, ils ont tendance à en rajouter des tonnes (comme en témoigne ton animation parallaxe de home…) ce qui surcharge le site pour pas grand chose et produit une certaine confusion. Les graphistes qui passent par la pourront en dire davantage mais c'est une erreur que j'ai longtemps reproduite… il faut que tu essaye de simplifier le tout, surtout si tu ne maîtrise pas les codes graphiques. Comme disait l'autre, less is more Smiley smile

Après, ne t'inquiète pas, c'est normal de refaire 40 fois son premier portfolio Smiley murf N'hésite pas à repartir de zéro souvent, pour te faire la main et apprendre davantage, c'est fait pour ça ! La prochaine fois, focalise toi plutôt sur ton contenu plutôt que de partir de ce que tu sais faire techniquement Smiley smile

Bastien38 a écrit :
EDIT: j'ai pigé pour le &quot;bug&quot; du menu. En faite c'est le comportement normal du menu. Le site est codé pour avoir un &quot;layout fluide&quot; ainsi que responsive.

Oui, j'ai vu mais lorsqu'un seul item passe à la ligne de façon centrée, ça ressemble furieusement à un bug de positionnement. A mon avis, tu ferais mieux d'opter pour le passage à la ligne de deux éléments comme lorsque l'on visite le site avec un viewport moins grand. Actuellement, ce n'est pas harmonieux du tout… même si c'est l'ensemble du site qui est concerné par ce manque d'harmonie visuelle principalement due à l'absence de grille de mise en page et à la mauvaise/incohérente gestion des marges internes/externes des éléments et notamment des espaces entre les éléments.
Modifié par audrasjb (01 Sep 2014 - 09:07)
Bonjour,

Puisque c'est gentiment demandé, je vais y aller de mon petit commentaire. Smiley lol

J'aime bien l'illustration avec la pizza, c'est fun et rigolo, en plus avec l'animation à la souris ça montre des qualités en code. Il faudrait probablement éviter de lier les éléments flous (la barre verte) à des éléments nets (l'icône ID), vu qu'ils sont sensés ne pas être sur le même plan, il est illogique qu'ils bougent à l'identique. Il n'y a qu'un élément flou alors que tout le reste est net, peut être y aller de manière progressive ?
En tout cas, une idée originale, même si elle peut être optimisée par quelques calages graphiques.

Sur le fond, une idée est plus forte quand elle est est mise en valeur. Là le fologo avec les initiales vient lui faire concurrence. Moi aussi, je choisirais de mettre le prénom + nom de façon simple. Ce fologo n'est pas soigné, il montre vos limites en graphisme et dévalorise le travail fait sur la pizza. Cette police compacte, ce marron jaunâtre avec ce vert fluo et ce rose fushia… ça ne s'harmonise pas.

La police de caractère du texte semble un peu datée et pas assez graphique (les v, w, l, r, c… ont des courbes inélégantes, la version italique bold est lourdingue). Regardez les sites dans mon étude en lien ci-dessous. Choisissez unr police graphique simple. Pas d'italiques dans les menus ou les titres, c'est une faute de typo.

Le menu me pose problème. Là j'ai 2 menus. 1/ Compétences Photographie, 2/ Créations A propos.
Passez tout sur une ligne (sauf version smartphone).
Ce marron est terne, choisissez une couleur fraîche et acidulée très 2014 ! replacez là par exemple pour le sous titres (Travailleur du web… ). Le terme "travailleur du web" est un peu bizarre et fait limite amateur. Positionnez vous en tant que pro : Intégrateur, Développeur Front End…
Le texte courant en noir, c'est un peu dur. Choisissez un gris foncé plus élégant qui s'harmonisera avec les gros titres en couleur (bleu vert acidulé ? Bleu électrique ? Rouge brique ?).

Je ne suis pas sûr que le fond gris rende service à votre design. Le blanc c'est frai aussi. Associé à une couleur franche titres, blocs… ) ça peut tout de suite donner une touche plus actuelle à l'ensemble.

La page "Compétences" est un peu classique et à l'ancienne. La partie "Design & graphisme" avec le menu déroulant pour afficher les logiciels de base, bof. 4 icônes auraient été suffisants sans avoir à cliquer des trucs.
Pourquoi pas un site one page plus moderne et synthétique ?

Attention à votre langage. Le ton adopté ne me semble pas des plus pertinents. Vous vous adressez à des recruteurs potentiels, pas à vos potes. La désinvolture et la familiarité n'ont pas leur place dans un site CV. C'est même contre productif si l'originalité est mal maîtrisée. Pire si vous prétendez avoir des qualités rédactionnelles.

Si vous placez le fond en blanc, pour éviter une impression de vide, il vous faudra structurer l'ensemble (taille et couleurs de titres, blocs de fond couleur (header, footer… ). La pizza doit rester sur fond blanc. Si vous lui mettez un fond couleur (une couleur claire mais vive), c'est envisageable aussi, tout comme il est envisageable de passer ce site en monopage (la tendance actuelle). Ça permettrait de monter vos compétences de façon plus simple et de jouer sur le contraste avec par exemple la couleur des blocs de fonds. Comme ce site par exemple :
http://timotheecottier.fr/
(on peut utiliser le blanc en fond ou bien en texte et icônes).
Une étude des tendances que j'ai rédigé qui peut vous aider à cadrer votre design :
http://obsedo.com/portfolio/webDesignTendances2015.pdf

C'est à vous de voir. Là votre site est cohérent, mais si vous essayez de coller aux codes actuels en terme de design et d'illustration (la pizza et ses couleurs funky), peut être est-il judicieux de se poser la question de pousser l'exercice de style jusqu'au bout ?
Là par exemple, la partie photo n'est pas d'un intérêt primordial pour un intégrateur. Placer 3 vignettes alignés (de même taille pour faire propre) serait largement suffisant. Pourquoi créer une page spécifique qui intéressera peu les recruteurs ?

Le footer ne respire pas, le texte trop bariolé s'étale sur une longueur qui ne devrait pas dépasser de celle du contenu. L'icône twitter est trop gros. Tous les icônes doivent avoir la même taille.
Si le fond du footer prend toute la largeur, pourquoi pas de même pour le header ? Ou bien et ça serait peut être préférable, une largeur définie en fonction du contenu avec du blanc sur les côtés (sauf sur smartphone). Les arrondis dans les header, bof.

Attention au contenu ! Des expressions comme :
« je pourrai postuler à un emploi de rédacteur web, intégrateur web ... enfin plein de trucs en web quoi. Être graphiste ou community manager ne me déplairait pas non plus ceci dit. Nous verrons bien !»
Smiley eek Non et non !

Vous devez vous présenter comme un pro. Pas comme un touche à tout qui s'exprime comme un ado qui ne sais pas trop comment s'occuper. Par exemple graphiste c'est un métier ! « graphiste ne me déplairait pas non plus ceci dit » là vous aller agacer les pros et passer pour un amateur prétentieux à côté de la plaque. Il faut au moins 5 ans pour faire un graphiste. Dire que vous avez quelques aptitudes, oui. Vous présenter comme "Monsieur je sais tout", non.
Vous devez complètement professionnaliser et revoir votre argumentaire pour en faire quelque chose de carré, concis, avec des compétences cadrées et un savoir faire qu'on puisse cerner et avoir envie de recruter. Là entre le sculpteur d'articles, le tailleur de code (quel rapport avec la pizza ?), le photographe amateur, le graphiste du dimanche, le rédacteur amuseur, l'intégrateur, le community manager, le journaliste en devenir, le pizzaiolo… On est perdu.
Vous êtes qui et vous faites quoi ? Quel est votre métier ?

Là vous pouvez apparaître comme quelqu'un qui ne sait pas ce qu'il veut faire, immature, voir instable ! Le gros point d'interrogation vert fluo dans la rubrique "À propos" (avec un accent), vient appuyer cette impression.

Structurez votre argumentaire de façon claire et explicite. Qu'on puisse vous positionner et voir vos atouts immédiatement. Vous serez déjà plus crédibles sur le plan rédactionnel.

« Me contacter: ... Sinon il y a les réseaux sociaux. »
Attention de ne pas faire rimer humour avec lourd. Smiley nananere Les entreprises recherchent des pros avant tout. Smiley jap
Un formulaire n'est en effet pas indispensable (en général jamais utilisé), en revanche un téléphone pour vous joindre serait pertinent. Smiley cligne


Voilà pour moi. Pour conclure et relativiser, je dirais que vous semblez déborder d'énergie avec des compétences multiples. Mais il faut recadrer tout ça avec un métier, des compétences, des compétences annexes, un ton professionnel posé, rassurant et circonstancié. Un design jeune, funky (j'aime bien la pizza) qui doit néanmoins rester pro et montrer les compétences que vous listez dans votre argumentaire.

Ce sont les qualités de votre activité de base qui doivent être valorisées (intégration, développement… ). Certains éléments sont confusants ou auraient d'avantage leur place sur un blog perso (photo amateur… ) ?

En attendant la suite ? Smiley smile
Bonjour à vous et merci d'avoir pris le temps de me fournir des réponses clairs et détaillées.

Audrasjb: c'est compris pour le mode quirks et l'attribut 'alt'. Je fais aussi essayer d'adopter une rédaction plus directe pour éviter de perdre le lecteur.
Merci du rappel concernant ma non-utilisation d'une grille css! C'est vrai qu'utiliser une grille me permettrait de caler mon design au poil prêt Smiley smile , mais j'avoue encore m'y perdre avec le vaste choix de grille à disposition. As-tu une préférence en tant qu'utilisateur? Quelque-chose qui peut s'adapter à plusieurs types de projet sans être une usine à gaz type framework?


Spongebrain: j'entends tous ces arguments. La "ligne éditorial" de mon site web est volontairement détendu (parfois trop je le concède) car je ne veux pas aboutir à des paragraphes arides et classiques comme on peut déjà en trouver. Cependant je ne veux pas tomber aussi dans le n'importe quoi et je te remercie pour ta critique! Je sais que ça ne plaira à tous mais on sait déjà que cibler un public très (trop) large induit une certaine fadeur.

Pour la partie design, j'avoue que le choix de ma charte graphique se discute! Les couleurs me plaisent et plaisent aussi à pas mal de personne de mon entourage... ce qui ne veut pas dire que se sont les bonnes en effet! Smiley lol . Je pense faire quelques tests prochainement pour apporter un peu de fraîcheur. (Et merci pour ton étude.) Smiley smile
Moi qui pensait que le gris clair apportait une base neutre, le marron une touche de solidité, le vert fluo une note acidulé et le fushia une touche funky ! Smiley lol


Bon avec tous ça, je crois que j'ai à faire !
Administrateur
audrasjb a écrit :
– ARGH ! HÉRÉSIE ! Nous ne sommes pas alsacreation.com Smiley lol Smiley biggol
Et au passage, tu peux corriger ton &quot;title&quot; : alsacreationS.com n'est pas une &quot;grande agence alsacienne&quot; mais une communauté d'apprentissage et de promotion des standards du web. L'agence, c'est alsacreations.fr Smiley cligne

3-4 jours et le 1er message est pas édité : y en a qui aiment vivre dangereusement Smiley baille
http://www.alsacreations.com/actu/lire/324-alsacreationssssssss.html