Avis portfolio www.ingridthonet.com

Bonjour,

Voilà je suis dans le web depuis quelques mois et j'ai réalisé mon portfolio en mobile first c'est le deuxième site que je conçois comme ça…
Je galère un peu sur le design de la page "a propos"…
Ce site est destiné (comme beaucoup d'autres) à trouver du travail…
Vos avis, remarques, commentaires siouplé ?

www.ingridthonet.com

Merci d'avance
Modifié par digitalgrin (12 Aug 2012 - 20:52)

Bonjour,

merci d'indiquer le titre ou l'URL de ton site dans le titre de ton message, comme cela est demandé dans les règles spécifiques de ce forum.

C'est fait !
Modifié par digitalgrin (12 Aug 2012 - 20:52)

Hello !

Mes premières impressions en consultant le site :

- L'en-tête c'est très "HTML5-like" je sais pas si c'est voulu
- C'est très aéré sur mon écran en 1900*1080, peu être trop
- C'est sobre et soigné, j'aime bien

Au niveau du code, j'ai relevé 2 points, sans trop m'attarder sur le reste :

- On dirait que tu utilises la meta "description" comme "keywords"
- Tu n'utilises pas les attributs "for" sur tes labels de la page "contact"

C'est tout pour ma petite contribution.

Bye !

Coté design rien à dire si ce n'est quelque effet de survol sur tes éléments liens ça donnerait un peu de vie à ton site je le pense

coté code

comme l'a dit Anymah tu n'utilises pas les attributs "for" sur tes labels de la page de contact

Puisqu'on parle de la page contact, tu peux remplacer le type="text" du champs email par type="email", les utilisateurs de smartphones et de tablettes te remercieront.

Tu peux aussi ajouter les attributs required et aria-required="true" (voir ma page de contact).
Modifié par Patidou (13 Aug 2012 - 14:19)

Bonjour,
Quelques petites remarques :
-Je ne suis pas spécialiste des polices, mais il me semble bien qu'il y a du comis sans ms, ce qui fait tout sauf professionnel.
-Le lien vers le header devrait plutôt renvoyer à http://ingridthonet.com/ et nom http://ingridthonet.com/index.html, ça sert à rien.
-je m'avance peut-être un peu puisque je suis loin d'être un spécialiste, mais je trouve qu'il manque un "grid"... En effet, il n'y a pas de cohérence de placement entre les 3 pages et cela est un peu dérangeant.

Voilà

Sylverdragon a écrit :

-Je ne suis pas spécialiste des polices, mais il me semble bien qu'il y a du comis sans ms, ce qui fait tout sauf professionnel.

Un jour, il faudra m'expliquer pourquoi le comic sans ms fait moins professionnelle qu'une autre font... c'est sont utilisation qui peut la rendre non professionnelle

Quand je vois la floppé de font qu'il y a sur certains sites "pro" j'ai envie de leur pisser au visage avec leur connerie du genre "le comic sans c'est pas pro" tsss....

[/hs]

Hmm, ça reste très perfectible au niveau du code (certaines classes, certains id et certains div ne servant à rien), mais pour ce qui est du design, c'est joli comme tout. Niveau accessibilité, quelques petites choses à revoir (notamment spécifier à l'écrit que ton CV est au format PDF, c'est très utile pour JAWS et autre lecteurs d'écran !). Au passage, comme dit plus haut, la meta description est utilisé pour caler des mots clés, admettons.. Sur la page "À propos", faire une grosse image avec tout tes petits pictos, je pense, et c'est mon avis à moi, que ça serait mieux. Joli travail sinon.. Attention à certaines images pixelisées dans ton slider

SuperMerguez a écrit :




Un jour, il faudra m'expliquer pourquoi le comic sans ms fait moins professionnelle qu'une autre font... c'est sont utilisation qui peut la rendre non professionnelle

Quand je vois la floppé de font qu'il y a sur certains sites "pro" j'ai envie de leur pisser au visage avec leur connerie du genre "le comic sans c'est pas pro" tsss....

[/hs]

Peut-être parce qu'elle a été créée pour la BD?

Sylverdragon a écrit :
Peut-être parce qu'elle a été créée pour la BD?

Non, elle a été rapidement faites (pour pas dire bâclée) pour une application pour enfant (même si elle se base sur les polices utilisées dans les BD). Son utilisation devrait être limitée au contenu destiné aux enfants (et pas à leur parents).

Source : http://en.wikipedia.org/wiki/Comic_Sans#History

Merci pour toutes vos remarques.
Je suis en train d'apporter des modifications.
Et sinon non SylverDragon je n'utilise pas de comics (j'ai fait un peu de typo ) c'est du ALFA SLAB et du PT sans (la typo ne monte peut-être pas sur ton navigateur ?).

Patidou a écrit :
Puisqu'on parle de la page contact, tu peux remplacer le type="text" du champs email par type="email", les utilisateurs de smartphones et de tablettes te remercieront.

Tu peux aussi ajouter les attributs required et aria-required="true" (voir ma page de contact).

Concernant le champs "email" ça boycotte un peu les vieux navigateurs nan ?

Sinon une idée pour la page à propos (la colonne droite est assez bizarre nan ?) ? (oui je sais : j'veux pas 100€ et un mars ? )
Modifié par digitalgrin (13 Aug 2012 - 21:23)

Salut,

SuperMerguez a écrit :
Quand je vois la floppé de font qu'il y a sur certains sites "pro" j'ai envie de leur pisser au visage avec leur connerie du genre "le comic sans c'est pas pro" tsss....

Elle est bien agressive cette saucisse.

Deux trois petites choses pour le site :
- J'ai un ascenseur horizontal sur la page Contact et à propos ;
- dans ton #coordonnees la façon dont tu as traité tes icônes crée des liens vide de contenu. Tu y gagnerais à les mettre dans une balise img plutôt, avec un alt pertinent. Dans le cas présent ce n'est pas très accessible ;
- tu as pas mal de balises vides ce qui nuit à la sémantique de ta page ;
- les alt des images de ton slider sont assez surprenants ;

Gili a écrit :
Salut,Elle est bien agressive cette saucisse.

Deux trois petites choses pour le site :
- J'ai un ascenseur horizontal sur la page Contact et à propos ;
- dans ton #coordonnees la façon dont tu as traité tes icônes crée des liens vide de contenu. Tu y gagnerais à les mettre dans une balise img plutôt, avec un alt pertinent. Dans le cas présent ce n'est pas très accessible ;
- tu as pas mal de balises vides ce qui nuit à la sémantique de ta page ;
- les alt des images de ton slider sont assez surprenants ;

Merci pour les remarques…
Pour le #coordonnées c'est parce qu'on m'a recommandé d'utiliser des sprites…
Pour le scroll horizontal ça m'embête je l'ai pas chez moi quel est ton navigateur ?
Et sinon est-ce que si je mets un scroll-x : none ça suffit ?
Merci beaucoup

Edit : Merci pour les alt, un vieux copié/collé qui traine
Modifié par digitalgrin (13 Aug 2012 - 21:24)

Les sprites c'est bien mais pas au dépend de l'accessibilité. De plus ici tu n'as même pas d'état différent au survol. Les sprites c'est intéressent pour les images décoratives.

Sinon je suis sur Firefox sous mac. Ce que tu proposes ne fonctionne pas mais l'overflow:hidden bien. Cependant c'est contourner le problème. Le problème vient de ton margin négatif sur #coordonnees, #header-container.

Sinon j'ai vu que tu visais plusieurs périphériques. Au redimensionnement chez moi le menu est tout cassé. De plus le contenu du bas est collé contre la fenêtre du navigateur. Un peu de padding ne ferais pas de mal

Gili a écrit :
Les sprites c'est bien mais pas au dépend de l'accessibilité. De plus ici tu n'as même pas d'état différent au survol. Les sprites c'est intéressent pour les images décoratives.

Sinon je suis sur Firefox sous mac. Ce que tu proposes ne fonctionne pas mais l'overflow:hidden bien. Cependant c'est contourner le problème. Le problème vient de ton margin négatif sur #coordonnees, #header-container.

Sinon j'ai vu que tu visais plusieurs périphériques. Au redimensionnement chez moi le menu est tout cassé. De plus le contenu du bas est collé contre la fenêtre du navigateur. Un peu de padding ne ferais pas de mal

Pour le padding c'est fait
Sinon j'ai rajouté un alt dans les coordonnées et t'as raison je vais mettre un survol !
Pour les marin négatifs ouais va falloir que je travaille là…
et pour le menu haut aussi du coup …
merci

digitalgrin a écrit :



Concernant le champs "email" ça boycotte un peu les vieux navigateurs nan ?

C'est là toute la beauté de la chose: les vieux navigateurs verront un champs de type text (c'est pareil pour tous les nouveaux type html5).

Le script qui contrôle le formulaire n'a pas besoin d'être modifié non plus.
Modifié par Patidou (14 Aug 2012 - 14:33)

Patidou a écrit :


C'est là toute la beauté de la chose: les vieux navigateurs verront un champs de type text (c'est pareil pour tous les nouveaux type html5).

Le script qui contrôle le formulaire n'a pas besoin d'être modifié non plus.

Cool

C'est globalement très clean.
Il serait bon de préciser ta localisation.
La tasse de café que tu associes à javascript est en réalité l'icône du langage java.

Question perf, c'est encore perfectible:
tu peux combiner les js et css
T'as la même ressource sous 2 urls disintes ( http://static.ak.facebook.com/connect/xd_arbiter.php?version=9 & https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9)
Tu peux gratter plusieurs kb en compressant mieux tes images (cf jpegmini.com)

Je plussoie Anymah : la meta description est utilisée comme meta keyword !

En outre, je trouve que le site est trop dépendant de @font-face et que les conteneurs des liens du menu devraient être cliquables.