Hello !!
Afin de trouver un stage en tant que webdesigner sur Strasbourg, j'ai réalisé un portfolio qui est en ligne.
J'aurai aimé avoir votre avis sur le code.
Merci d'avance ! Smiley biggrin

site : www.claireromer.fr Smiley biggrin
Modifié par claireRweb (20 Dec 2017 - 11:31)
Administrateur
Je te fais mes remarques comme elles me viennent, désolé si c'est un peu décousu Smiley smile

Visuellement :
- L'aspect général est clair et épuré, c'est assez sympa
- La police est très difficilement lisible : gros manque de contraste car elle est ç la fois très fine et de couleur gris clair. Le pire étant "Étudiante en webdesign et en graphisme", vraiment minuscule
- L'espace interne aux blocs est assez curieux : beaucoup de padding en haut partout, et rien en bas. Du coup, les proportions sont disgracieuses et ça me fait bizarre

Code :
- c'est un beau challenge d'avoir conçu ton site de tes propres mains et non à l'aide d'un CMS tout fait, bravo !
- tu appliques knacss après tes propres styles. Ce n'est généralement pas l'idéal car il risque d'écraser tes propres styles. Knacss est un reset, il vaut mieux l'appliquer en premier
- tu utilises beaucoup de fichiers de police différents, cela a un impact sur les délais d'affichage
- tu importes tes scripts dans le head, ils bloquent donc l'affichage de la page

Concernant le reste de ton code, je te conseille vivement de tester sur des outils tels que Dareboost, tu y trouveras énormément de bonnes pratiques à suivre : https://www.dareboost.com/fr/report/5a3a3f860cf201dc18cbe2b3

PS : tu as été stagiaire chez Cera Interactive ? C'était bien ? Smiley cligne
Modérateur
Bonjour,

Le CaviarDream en 12.8px est très difficile à lire je trouve. Autrement c'est sobre et clair mais ressemble de très près à tout ce qu'on peut croiser en ce moment.

Les destinations des liens sont un peu déroutantes. Tantôt ils ouvrent un nouvel onglet (créations), tantôt on reste sur le site (CV).


Bonne chance !
Bonjour,

j'aime bien le design du site mais la police choisi est difficilement lisible
Salut

Super !

Je tatillonne :
au niveau des dates 2016 2018 ça m'a fait bizarre qu'elle soit inverser. Le 2018 est en dessous du 2016 (je chipote !)

Après, c'est un avis perso, j'ai beaucoup de mal avec les "pourcentages" au niveau des compétences (je sais c'est à la mode et c'est plus fluide...) mais HMTL 60%, 60% de quoi ? tu connais 60% du langage ? comment sais-tu qu'il te reste 40 % ? je préfère l'ancien "Confirmé" ou "Expert"

Sur la page http://www.claireromer.fr/html/webdesign.html, les titres ne sont pas alignés peut être est ce voulu ? La police est très petite, du mal à lire :s.... J'aurais aimer retrouver le bandeau image sur cette page, qui est très sympas d'ailleurs..

Sur http://www.claireromer.fr/html/claire_romer_photographe_strasbourg.html, la petite flèche en bas ne marche pas.

Je suis superstitieux, mais je laisserais pas mon téléphone visible sur le site (sur le CV oui, mais pas sur le site).


Dans l’ensemble, personnellement, j'aime bien!
Modérateur
Bonjour,

Comme mes camarades, j'ai du mal avec la police des paragraphes. C'est le point à corriger : on n'a pas tous des yeux de 20 ans, surtout quand on est recruteur !

À part ça, globalement, ça va. Les remarques qui suivent sont du pinaillage.

J'aurais ajouté un span contenant "Accueil" (éventuellement rendu invisible via javascript) à côté de la fa-home de manière à avoir quelque chose de visible à cet endroit si javascript est désactivé. D'une manière générale, il ne me semble pas très bon d'avoir un lien qui n'est plus accessible (ou difficilement accessible) si javascript est désactivé, surtout celui qui va à la page d'accueil.

Je n'aurais pas utilisé comme nom de classe "seconde_section" sur les sections du portfolio. Mieux vaut un nom sémantique, ou bien utiliser dans le css un sélecteur qui va bien comme par exemple ici section>section:nth-of-type(2). D'une manière générale, il faut éviter les noms de classe faisant référence à la position d'une balise, et qu'il faudra changer dans la douleur en cas d'évolution du contenu du site.

Des balises <p> n'ont pas de balises </p>.

Il y a (a minima) un petit bug dans le menu. On ouvre la page dans une fenêtre étroite (ou on l'ouvre dans une fenêtre large et on réduit la largeur de la fenêtre) : le menu complet est remplacé par "Menu". On clique sur "Menu" une fois, puis une deuxième fois. Le menu apparait puis disparait. Jusque là tout est normal. Mais si ensuite on agrandit la fenêtre, le menu complet reste invisible.

Les <h3> de la page http://www.claireromer.fr/html/webdesign.html sont aligné avec firefox sous mac os, mais ne le sont pas avec Chrome.

Les ":" dans les titres h3 (et peut-être ailleurs) ne sont pas précédés d'un espace insécable (d'où un effet visuel déplaisant en fenêtre étroite).

Un hover sur les h3 change la couleur du texte des titres mais le résultat manque de contraste et est illisible.

Amicalement,
Modifié par parsimonhi (20 Dec 2017 - 13:48)
Bonjour,

gtmetrix dit :

Serve scaled images F (9)

Defer parsing of JavaScript F (38)

Leverage browser caching F (45)

Optimize images D (61)

Voilà beaucoup de k de téléchargement à supprimer, ça vaut le coup.

Moi aussi je pinaille :
"J'ai eu la chance d'obtenir plusieurs postes dans des différents types d'établissement"
Le "des" est inutile, il alourdit la phrase. Et "établissement", il faut un "s", il sont plusieurs.
Sinon, le site est bien fait, mais je laisse les spécialistes s'occuper du code.

Ne jamais, surtout pour une femme, donner directement ses coordonnées SUR le site.

Cordialement.
Bonjour,
Voici mes impressions après un rapide coup d'oeil.

- Il faut éviter à tous prix les différences de polices sur les sites que tu crées. Le mélange serif et sans serif est très désagréable, voire perturbant. (Attention à ne pas mélanger la conception web et print) ergonomie oblige
- Attention également aux proportions (taille de texte, blocs) la hiérarchie du document globalement (ce n'est pas du print, encore une fois j'insiste)
- Sur une interface utilisateurs, on dit qu'un élément qui change d'aspect au survol ou au toucher est un élément avec lequel on va pouvoir interagir. (sous-entendu -> il va permettre d'effectuer une action)
Sur ton site, j'ai du mal à savoir où se trouve les "objets" que je peux actionner. (exemple : les titres de tes articles qui changent d'aspect au survol, or, rien ne se passe lorsque je clique dessus… ou encore dans la page création web les titres carrément changent d'aspect comme si c'était des boutons, aie aie aie…) C'est presque comme si tu tendais un piège à ton utilisateur.
A l'inverse, ton bouton télécharger mon cv reste figé au survol alors que lui, va me permettre d'effectuer une action… Heureusement, il ressemble à un bouton, bien joué Smiley cligne
- Sur une interface web, texte souligné = lien hypertexte.
- Comme dit plus haut, attention au problème de contraste sur ton site, malheureusement certaines personnes ont une déficience visuelle et la lecture notamment des textes devient alors difficile. Ta barre de nav par exemple. Sombre sur sombre c'est très difficile à lire.
- Attention lorsque tu utilises les pictogrammes, ils peuvent substituer un texte et traduire un message universel, mais mal le choisir c'est la catastrophe. Dans la partie contact de ton site, à côté de ton adresse mail il y'a un pictogramme de localisation (ce qui n'a aucun rapport avec l'élément auquel il semble lié)
- Ton site manque de structure en terme de design. Essaie de garder une cohérence entre les espaces, l'affordance, et surtout les conventions web.
- Par son système d'utilisation ton site ressemble à un site one page mais certains liens de la navigation renvoie sur d'autres pages…
Choisis soit une navigation one page ou avec un changement de page mais pas un mix des 2 ou ton utilisateur final sera perdu.

Une interface utilisateur parle, communique, sinon, elle n'a pas lieu d'être. Lorsque tu monte dans une voiture, le volant, la boîte de vitesse, la pédale de frein, la ceinture de sécurité, les pictogrammes utilisés sur le tableau de bord et l'interface utilisateur, les signaux sonores parlent d'eux même pour communiquer avec toi ; soit pour t'avertir, t'alerter, confirmer tes actions, etc. Tu ne réfléchis pas en les utilisant, ils sont logiques d'utilisation, au même titre que tu puisses d'avance savoir si tu dois pousser ou tirer une porte, rien qu'à la regarder…

Bon courage en Web Design.