[intermédiaire]Portfolio

Bonjour à tous.
Je suis actuellement une formation dans le web et dans ce cadre j'ai eu à créer un site port-folio qui présentera mes futurs sites internet au fil de leurs créations.

Réalisé en html5, avec du javascript, du css3 et un peu d'huile de coude.

Évidemment Je n'accepte que les critiques positives! (et négatives).

http://thomasneels-webdesign.fr/index.php
Modifié par aelor (04 Jun 2011 - 15:51)

Bonjour,

Perso je n'aime pas du tout le concept du site tout noir.

L'écriture est pas assez démarqué du background, résultat je n'ai pas envie de forcer avec mes yeux pour lire, je n'ai donc pas lu le texte.

Les animations des sites qui défilent rament un peu chez moi, c'est pas très fluide.

Les animations dans illustration sont sympa, ainsi que les dessins.

Le lien d'accueil nous fait revenir vers le logo de la première page, ca nous oblige à recliquer dessus pour revenir sur l'index.

Cordialement

Bonjour,

Le splash screen est à oublier absolument !

Les effets, de mouvement, c'est super cool... sauf quand ce n'est pas fluide et que ça présente un intérêt très limité.

Sinon dans l'ensemble, il y a de l'idée, mais il faut absolument peaufiner le tout :
* Borner le site en largeur (sur écran wide et grand (je n'ai qu'un 20", il y a plus grand), la lecture du contenu devient très difficile, donc désagréable, donc personne ne lira).

* Les images mal finies, pixélisées... ne peuvent pas être présentes sur un portfolio.

* Il faut travailler la typographie (les mélanges de polices ne sont pas heureux).

Pour le code :
* Les scripts DOIVENT être externalisé, surtout quand il font autant de lignes (environ 160, ici), regroupés en aussi peu de fichiers que possible, et placé en fin de document (sauf pour les chargements asynchrones, si tu n'est pas sûr, place tout en fin de document).

* Ta hiérarchie de titres est incorrecte (et un peu nawak). Elle doit toujours commencer à 1 et ne pas comporter de sauts (jamais de h1 puis h3 sans h2 entre les deux). Pour le côté nawak : un élément de menu de navigation n'est pas un titre de section.

* Les images support de liens doivent avoir un attribut alt vide. Sinon, virtuellement, le lien n'existe pas.

* Le target blank, c'est le meilleurs moyen de perdre des visiteurs.

* La liste d'exemple de prestation devrait être balisée avec ul et li.



Présenter tes créations dès la page d'accueil, pourquoi pas, mais il serait préférable de te présenter toi ; et surtout, d'annoncer ta zone géographique...



ps. : par pitié, "portfolio" en un seul mot.

Ok.

Bon déjà merci pour toutes ces précisions. Ils y a certaines choses que je ne pouvais pas deviner tant qu'on ne me les avait pas dit. (exemple H1, h3...)

Je vais revoir ma copie dès que j'aurais le temps.

Qu'est-ce que tu appelles le splash screen?

J'écrirais plus port-folio, promis.

Bonsoir à une heure nocturne ,

Concernant le remarque faite par Mobile83 : je vais dans son sens, mais pour la modérer un peu, je dirais qu’il y a de l’idée tout de même d’être dans le gris pour un fond noir, parce que le texte blanc sur fond noir c’est encore pire. C’est seulement que le gris n’est pas assez clair. Sinon, il est possible de remplir les critères d’accessibilité visuelles, même avec un fond noir.

Concernant l’animation du splash-screen, je suis d’accord avec Laurie-Anne, le première impression que j’ai eu, c’est : « mouvement brutal ». Il faudrait que tu y ajoute un minimum d’inertie, que tu pondère l’angle de rotation avec une proportion de l’angle précédent (la proportion doit aussi dépendre de l’intervalle de temps entre deux positions).

Sur la « page de contenu » qui vient ensuite, j’ai une sensation de vide quand-même, ce n’est pas bon. Une mosaïque en deux dimensions, serait préférable à ce rail linéaire.

Toujours au sujet de cette page, il faudra que je la teste sous Windows avec IE, parce que j’ai un doute sur un truc (j’ai déjà tenté de réalisé une animation comme celle-ci, mais elle fonctionnait mal sous IE… en même temps, je n’avais pas poussé son développement très loin).

Sur la page qui vient en suivant le lien Illustrations : il faudrait essayer d’adapter la hauteur de l’image à la hauteur de l’écran du navigateur, ce qui doit être possible, puisque tu n’as pas exclu l’usage du JavaScript pour ton design. Avoir besoin d’un défilement vertical pour ce type de page, ce n’est pas terrible pour l'ergonomie (ne serait-ce que concernant l’accès aux contrôles permettant de passer d’une image à une autre).

Le lien Profil : ton site n’est pas une page sur un site genre réseau social ! (pardon pour le point d’exclamation). Trouve lui un autre intitulé, ça ne va pas (IMHO).

La page CV : alors là, ça ne va pas du tout, c’est violent, on passe d’un design sur fond noir, à un design sur fond blanc… le choc . Si tu veux proposer un CV avec une mise en forme adaptée à l’impression, propose un PDF à télécharger (ou un lien vers une page dédiée à l’impression, avec un CSS adapté), et met la version en ligne en harmonie avec le reste de ton design. Difficile de comprendre que ça ne t’ai pas sauté au yeux.

Profil + Contact : crée plutôt une page unique où tu te présente, plutôt que deux pages séparées. À moins que tu ne vois une bonne raison de séparer les deux… je n’en vois aucune, je n’arrive pas à expliquer ce découpage sémantique.

La page Contact : aucun style, c’est pauvre. Essai au minimum d’ajouter un peu d’harmonie en donnant la même largeur aux champs INPUT-text et au TEXTAREA, de styler un peu le bouton d’envoi. Ce ne sera pas grand-chose, mais ça renverra au moins un peu la sensation qu’il y a eu un souci d’harmonie.


Je ne me suis pas plongé dans le reste (source, conformité, etc), mais pour ce reste, tu as apparemment déjà eu des réponses
Modifié par hibou57 (30 May 2011 - 01:55)

aelor a écrit :
Qu'est-ce que tu appelles le splash screen?

Le splash screen c'est la page qui ne sert à rien avant d'accèder à l'accueil du site (ton index actuel).

Bonjour,

Laurie-Anne, je ne suis pas d'accord avec toi quand tu dis que le target blank est le meilleur moyen de faire fuir ses visiteurs.... c'est totalement faux..

D'ailleurs, quand je surf sur alsacreations et que je clique sur des liens pointant vers un autre site je me dis toujours "mince ! j'aurais du ouvrir dans un nouvel onglet !"

Bref, pour ma part, ça me dérange de quitter le site sans nouvelle fenêtre.

Beaucoup de personne lambda sont comme ça également, ils ne pensent pas forcément à ouvrir une nouvelle fenêtre.

Mon père le premier, quand je le vois surfer, il quitte un même site pour se rendre sur un autre, il utilise toujours le bouton précédent pour revenir sur le site du départ et ça le gêne un peu..

D'ailleurs les gros sites marketing utilisent tjr le target blank et ont bien compris que ça faciliter la navigation.

Je me doute que les personnes qui pensent le Web ont décidé par je ne sais pas quel principe que ça gênait les visiteurs alors tout le monde dit ça.

Mais tu as tord à 200%.

Et si le W3C avait indiqué que c'était essentiel, tu aurais été la première à le préciser.

Ce n'est en aucun cas une gêne, c'est plutôt une façon de pensée ou les personnes qui se prennent pour des "pro" viennent nous casser les cacahuètes en trouvant des excuses bidon pour faire comme à l'école, lécher les bottes du professeur W3C.
Modifié par mobile83 (31 May 2011 - 11:26)

mobile83 a écrit :
Je me doute que les personnes qui pensent le Web ont décidé par je ne sais pas quel principe que ça gênait les visiteurs alors tout le monde dit ça.

Bonjour,

Target="_blank" est déprécié en xhtml strict parce qu'il s'agit d'une propriété qui agit sur le comportement des documents et que HTML et XHTML stricts mettent l'accent sur la séparation entre contenu, présentation et comportement...

Bonjour mobile83,

Mes "affirmations" se basent sur des études d'ergonomie, d'accessibilité et d'utilisabilité ; ces études sont réalisé avec un pannel de personnes de background et compétences variés.

Ces études mettent en avant que l'ouverture d'une fenêtre à plus de chance de gêner le visiteur (forcer l'ouverture d'une fenêtre/onglet contre son grès) et de le perturber (sous lecteur d'écran, l'ouverture passe "innaperçue" et empèche du coup la personne de retourner sur l'ancien site (puisqu'il ne sait pas que c'est un nouvel onglet/fenêtre).

Top-10 Application-Design Mistakes in 1999


Tes "affirmations" se basent sur ton expérience propre et celle de ton père (qui a de forte chances d'avoir "appris le web" de ta part (que ce soit en t'observant ou par cours magistral)). Niveau crédibilité, c'est pas vraiment génial...



ps. : insulter (même avec trois tonnes d'ironie) les gens n'est jamais une bonne idée.
Modifié par Laurie-Anne (31 May 2011 - 13:14)

Mon père a appris tout seul à naviguer, tes conclusions si tôt fondées sont encore une fois erronées

quand il veut me montrer un truc sur l'ordinateur et qu'il clique sur un lien et qu'il rale car ça change de site ce n'est pas moi, c'est celui qui navigue qui est pas content.

Combien sont comme lui ? et combien ne le sont pas aussi ?

Dans ce cas là, il faut préciser que le lien est un lien sortant du site en lui même, ce qui éviterait pas mal de problème.

Les utilisateurs lambda ne regardent pas forcément dans la barre des tâches si l'url envoi sur un autre site ou pas.

pour le côté target="_blank" je suis vraiment mitigée, côté comportement du navigateur ce serait top si cela pouvait être paramétré par l'utilisateur... parce que personnellement je suis comme mobile83 : je déteste en cliquant sur un lien changer de site , je préfère en général avoir un nouvel onglet ... depuis que l'on a des onglets bien sûr.

Du coup Laurie-Anne a aussi raison .... tout dépend du navigateur et de l'utilisateur en fait.

Personnellement l’absence de target="_blank" pour les liens hors site me gêne de plus en plus car mes habitudes ont changées et je commence à faire de plus en plus clic droit sur le lien pour être sûre d'ouvrir dans un nouvel onglet .... je ne trouve pas cela très ergonomique pour ma part .

PS : au fait moi j'aime bien le splash screen même si c'est une perte de temps côté navigation
et petite remarque : on ne sait pas dans quelle partie du site on est , une modification de l'option du menu en cours serait bienvenue
Modifié par Arialia (31 May 2011 - 13:49)

mobile83 a écrit :

Dans ce cas là, il faut préciser que le lien est un lien sortant du site en lui même, ce qui éviterait pas mal de problème.

Un bon compromis est effectivement d'indiquer que le lien s'ouvre dans une nouvelle fenêtre, parce qu'il s'agit bien d'un compromis. La gêne est que l'utilisateur, même si c'est indiqué, n'est plus libre de choisir comment il veut ouvrir le lien.

Il serait sage aussi d'apprendre à ton père à regarder la barre d'état et à repérer les sites externes. De cette façon, il ne sera plus jamais gêné lors de sa navigation, puisqu'il sera toujours libre d'ouvrir ou non les liens dans un nouvel onglet/nouvelle fenêtre, sur tous les sites qu'il visite et pas seulement sur ceux qui utilisent le target _blank.

Tu as le droit de ne pas être d'accord avec Laurie-Anne, ou n'importe qui sur ce forum, mais de là à prétendre que les autres ont totalement tort à 200%... Il y aura toujours des gens qui n'entrent pas dans le moule, qui utilisent le navigateur autrement avec des expériences et habitudes différentes, alors personne ne peut avoir raison à 100% sur le comportement des utilisateurs.

Arialia, faudrait voir s'il n'y a pas une extension existante. Ça ne devrait pas être trop compliqué comme extension. Il s'agirait de détecter les liens avec un domaine différent et de les faire ouvrir automatiquement dans un nouvel onglet. Si ça n'existe pas, faudrait le créer. Ça pourrait plaire à plusieurs.

Arialia a écrit :
je commence à faire de plus en plus clic droit sur le lien pour être sûre d'ouvrir dans un nouvel onglet ....

Avec le bouton du milieu c'est plus rapide.

Hello,

fufu a écrit :

Target=_blank est déprécié en xhtml strict parce qu'il s'agit d'une propriété qui agit sur le comportement des documents et que HTML et XHTML stricts mettent l'accent sur la séparation entre contenu, présentation et comportement...

Toutafé
Et suivant ce même principe de séparation des couches contenu/présentation/comportement, la dernière est justement faite pour répondre à ce type de besoin ! Donc si target=_blank est a bannir du HTML, Javascript te permet d'ajouter un comportement déclenchant l'ouverture de liens dans une nouvelle fenêtre. Cependant, comme ça a déjà été bien expliqué ci-dessus, ce n'est pas une bonne pratique car l'utilisateur perd le choix de ce qu'il peut faire avec son navigateur.

jb_gfx a écrit :

Avec le bouton du milieu c'est plus rapide.

…ou avec un doigt sur ctrl (ou pomme/cmd pour ma part…)
Modifié par audrasjb (31 May 2011 - 16:22)

Hello,

mobile83 a écrit :

D'ailleurs les gros sites marketing utilisent tjr le target blank et ont bien compris que ça faciliter la navigation.

A voir. Il y a quelques temps, ça existait encore un peu, mais aujourd'hui, c'est vraiment difficile de trouver un site ayant fait l'objet de réflexion au niveau de l'ergonomie (au hasard, les gros sites de e-commerce tels qu'Amazon, Price Minister, Apple Store…) ou target=_blank est encore utilisé… Ce n'est pas pour rien.

mobile83 a écrit :

Je me doute que les personnes qui pensent le Web ont décidé par je ne sais pas quel principe que ça gênait les visiteurs alors tout le monde dit ça.

Et si le W3C avait indiqué que c'était essentiel, tu aurais été la première à le préciser.

Oui, mais en l'occurrence, l'attribut target est déprécié. Ce type de raisonnement par l'absurde ne sert pas vraiment ton argumentation.

mobile83 a écrit :

Ce n'est en aucun cas une gêne, c'est plutôt une façon de pensée ou les personnes qui se prennent pour des "pro" viennent nous casser les cacahuètes en trouvant des excuses bidon pour faire comme à l'école, lécher les bottes du professeur W3C.

Pareil, ce type d'argumentation agressive ne sert pas vraiment ton discours…

/ Comme quoi, si certains doutaient encore de l'intérêt d'Alsacréations (soi-disant qu'il serait aujourd'hui devenu inutile de défendre les standards puisqu'ils seraient parfaitement intégrés), ben pas moi
Modifié par audrasjb (31 May 2011 - 16:37)

Mon avis (avec du retard) à propos du target=blank, et en temps qu’internaute : ça parasite la navigation, je n’aime pas qu’une page se permette d’ouvrir une fenêtre ou un onglet à ma place.

Le principal problème objectif, est que c’est imprévisible, et pour une UI, être imprévisible, c’est un problème.

Bémol avec les forums cependant, parce que là par contre, c’est prévisible, la plupart des forums font de cette manière. Alsacréations est donc plutôt une exception, mais cette exception ne me dérange pas.

En parlant d’exception, je préfère que le comportement imprévisible soit de ne pas ouvrir de nouvel onglet quand je m’attend à ce qu’un nouvel onglet s’ouvre, plutôt que l’inverse, la nécessité de faire un retour arrière après avoir consulté une page, pose moins de gêne que celle d’un onglet qui s’ouvre tout seul.

Pour m’exprimer sur un mode moins formel, et plus sur le ressenti maintenant : un site qui fait s’ouvrir les liens dans de nouveaux onglets, me donne l’impression de vouloir s’imposer ou de vouloir être envahissant (comme un vendeur qui vous tiens la jambe). C’est une sensation désagréable.
Modifié par hibou57 (31 May 2011 - 17:25)

Le soucis avec les URL externes c'est que parfois on se retrouve avec une redirection instantanée sur le site externe (qu'on ne peut pas contrôler donc) et du coup le bouton retour ne fonctionne plus. Ça reste assez rare (mais pas tant que ça) et c'est vraiment pénible (nécessité d'utiliser l'historique pour revenir au premier site).

Bonjour,

Je n'accroche pas aux couleurs (c'est trop sombre), sinon comme petite modification sur la page site-web, quand on survole une image (même si il n'y en a qu'une pour le moment) je trouve "gênant" le fait de devoir attendre que l'image soit totalement agrandie pour la voir en entier, je pense que ce serait mieux que, quand on survole une nouvelle image, cette image en s'agrandissant passe devant les autres images (donc qu'il n'y est pas une partie cachée par l'image de droite)

Petite mise a jour du post.

Déjà merci à tous pour vos observations, ça aide à y voir plus clair. Quand on à la tête dans le guidon on ne se rend pas compte de pas mal de choses.

J'ai tenu compte des remarques que l'on m'a faites et ai effectué quelques modifications parmi lesquelles:
-Couleur du texte d'un gris plus clair
-suppression du lien permettant de revenir à la l'index
-refonte de la partie CV et profil en une seule partie, plus en accord avec l'aspect général du site.
-petite modification du formulaire permettant d'envoyer un mail (encore à travailler)
-j'ai mis des images moins pixellisée dans la partie sites web(mais plus lourdes par conséquent)
-scripts externalisés
-Il y a des h1, h2, et plus de h3

Ce que j'ai laissé comme avant:
-les couleurs restent sombres (sinon autant recommencer le site à zéro, cependant j'en tiens compte pour mes futurs sites)
-j'ai gardé le splash screen parce que j'y ai mis pas mal d'huile de coude et puis je l'aime bien
-j'ai pas trop suivi l'histoire du target blank, ou est-ce que j'en ai un... du coup j'ai surement pas touché
-j'ai pas touché aux polices, mais j'en ai que deux différentes donc je trouve que ça reste correct (j'ai viré le CV, c'est peut-etre la que tu trouvais que ça faisait trop Laurie Anne)

Ce que je compte faire:
-adapter les illustrations à la taille de l'écran
-retravailler un peu le formulaire pour le rendre plus attractif

@ Natha: effectivement ta remarque est justifiée pour l'anim'. Cependant ça permet de passer plus rapidement d'une image à l'autre. Je m'explique: si les petits screen passaient en dessous du gros, on devrait attendre que l'anim soit terminée pour pouvoir repasser dessus. J'ai donc choisi une navigation plus facile.

Laurie Anne, une derniere chose. Toi qui a un écran assez balèze, mon image de fond ne s'agrandit pas systématiquement en fonction? Pourtant je croyais.
Modifié par aelor (04 Jun 2011 - 16:04)