[Pro] Portfolio de Romain Cousin, graphiste / motion designer

Bonjour !

Je suis graphiste / motion designer à Nantes, et après être passé sur ce même forum il y a quelques semaines avec des ptits soucis en javascript, me revoilà cette fois pour vous présenter la version finale de mon portfolio

Mais trêve de bla bla, je vous donne l'adresse :

Portfolio de Romain Cousin, graphiste / motion designer à Nantes

En espérant qu'il vous plaise, et en espérant aussi avoir des critiques !

Merci,
Romain
Modifié par hangmaniak (25 Feb 2013 - 12:45)

ché bio
ton javascript cta-javascript.js c'est meuch
tu duplique x fois le même code alors que tu aurais pu appliquer l'effet hover sur un ensemble d'élément de même classe en les surclassant :

[code]
$(' a.superhoverquitue')
.css({ 'backgroundPosition': '0 0' })
.hover(
function(){
$(this).stop()
.animate({
'opacity': 0
}, 120);
},
function(){
$(this).stop()
.animate({
'opacity': 1
}, 160);
}
);
[code]

et dans l'html <a class="class1 class2 superhoverquitue">pot de zob</a>

Visuellement c'est très réussi.

Question webperf, tu pourrais condenser tes scripts (8), activer gzip, spriter quelques images et placer le js en fin de document.

Je préciserais ta localisation de manière plus évidente.

Bonjour,

Le design est vraiment sympa, par contre le redimensionnement un peu à l'arrache après le chargement de la page n'est, visuellement, pas agréable. Dois-tu réellement passer par du JS pour le redimensionnement ?


Le code, par contre, ce n'est pas aussi bon :
* 24 erreurs de code : si tu tiens absolument à utiliser target (ou tout autre élément déprécié), il faut utiliser un doctype transitionnel.

* Il manque un attribut lang sur html (différent de xml:lang) pour préciser la langue du document.

* Tu utilises plusieurs meta inutiles : Author, Publisher, Category, Keywords ; elles font bien joli, mais elle ne servent strictement à rien, sauf à prendre de la place dans ton code.

* Ta meta description est bien trop longue, de plus elle est sensé accueillir une description de la page en cours, non pas une liste de mots clés. Pour rappel : le contenu de la meta description est utilisé par les moteurs de recherche, si jugé pertinent, pour afficher une présentation de la page dans les résultats de recherche. Cette meta ne sert en rien au référencement/positionnement : par contre, elle peut se révéler particulièrement importante pour attirer le clic du visiteur. Cette meta doit être remplie pour attirer le visiteur, par pour le robot.

* idem pour <title> un peu trop long, trop de mots clés.

* Il est préférable de placer les scripts en fin de document. Il est également préférable de les regrouper en aussi peu de fichiers que possible (1 étant parfait).

* Il est également préférable de rassembler les CSS en un seul fichier externe.

* Le target=_self est particulièrement inutile

* Ton logo porte le texte "Romain Cousin Graphiste", son alt devrait reprendre la même information, et non pas y ajouter des mots clés supplémentaires.

* Il eut été judicieux de baliser ton menu principal avec une liste.

* Les images porteuses de contenu doivent se trouver dans le code HTML, toujours. Placer un texte de remplacement hors de l’écran ne les rend pas plus accessible. Essaye de désactiver les images de ton site, tout en laissant les CSS actif (cas typique de l’image pas chargée à cause d’un problème de serveur ou de connexion) : ton menu a disparu...

* Une classe avec titre dedans, c’est le signe d’un problème de hiérarchie des titres...

* le target=_blank c’est le meilleurs moyen de perdre des visiteurs.

* Plutôt qu’une div vide pour faire une séparation, il aurait été préférable d’utiliser hr.

* Est-ce que Flash est vraiment nécessaire pour afficher des images cliquables ?

Salut,

@Le_chevalier_blanc : Pourrais-tu faire des efforts dans ta manière de t'exprimer, car comme tu devrais le savoir, ce forum a une vocation à se vouloir au maximum accessible. Je doute sérieusement de l'interprétation des synthèses vocales, d'expressions telles que "ché" ou "meuch"

@hangmaniak : Graphiquement propre et fonctionnel. Je trouve dommage que cela soit si triste, il manque une petite couleur chaude pour égayer le site.

Les découpes angulaires dans cette colonne soit très agressives et trop présentes, et mettent l'accent pour l'instant sur une zone peu intéressante. "Bonjour", si c'est le soir je me sens plus trop concerné, "bienvenue...", si je me sens bien sur le site je me sentirai bienvenu, sinon le dire ne changera pas mon opinion.
Cette colonne serait un bon point d'accroche pour le visiteur pressé, pour effectivement te présenter en bref, mais mettre des infos essentielles, si tu travaille ou pas, si tu recherche un poste, ta(tes) spécialité(s), ton téléphone, ou je sais pas...

Sinon j'aime bien tes photos.

Ouah ca fait beaucoup de choses d'un coup

Alors pour le moment j'ai déplacé mon script google analytics en bas de page, c'est suffisant ou est ce que je dois également déplacer ces 4 lignes ? A vrai dire j'avais toujours entendu dire qu'il fallait placer les scripts entre les balises HEAD...

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
	<script type="text/javascript" src="js/cta-javascript.js"></script> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>

@ Mikachu
Aah les gouts et les couleurs ! effectivement il peut sembler un peu "froid" mais ca va bientot être de saison ^^
Plus sérieusement, pour le menu à droite je penserai effectivement à tes suggestions pour le remanier.
Et merci pour les photos

@ Laurie-Anne :
- J'ai supprimé les target, effectivement avec du recul ca me servait pas...
- idem pour les meta inutiles
- Pour le menu balisé avec une liste quel serait l'interet ? (c'est pas sarcastique je me demande vraiment ! )
- merci pour la balise hr, je la connaissais pas
- Pour flash c'est purement esthétique, et d'ailleurs les images sont affichées normalement tandis que les swf viennent s'afficher par dessus en transparence. Il faut néanmoins que je retravaille la version alternative de ces éléments flash.

@ Paolo
- Pour gzip j'en ai entendu parlé mais ca consiste en quoi exactement ? car j'ai compressé toutes mes images spécialement pour ce site, il y a réellement un gain de perf ?
- idem pour la localisation, je vois pas trop ce que tu veux dire... tu parlais de l'attribut lang comme Laurie-Anne ?
- Pour les sprites c'est noté !

@ Le chevalier blanc
- j'avais bien remarqué que c'était hyper redondant comme code mais même avec ton exemple je suis incapable de faire fonctionner mes rollover ! Ca fait une demi heure que je teste plein de trucs sans succès... Décidément la javascript c'est pas encore mon truc... Donc si tu veux bien être encore plus précis car je galère vraiment

Bon... j'ai encore du taf ! En tout cas merci de m'avoir répondu si vite, je manquerai pas de repasser quand j'aurai un peu avancé !

Pour la localisation je voulais dire ta situation géographique. Sauf raison particulière, il est bon qu'elle soit clairement indiquée.

Gzip, c'est surtout pour les fichiers textes, le gain est important. Si ton hébergeur le permet, une simple ligne dans ton htacces est suffisante.

A propos de htaccess, place un options -indexes pour éviter le listage de répertoires.

[En bon vieux françois]

si tu veux mon code veut dire :
j'applique le rollover javascript sur toutes les balises <a> ayant la classe "superhoverquitue" contrairement à ton code qui vient appliquer le rollover sur la balise a qui est dans la div avec tel id, puis la balise a qui est dans la div de tel autre id etc.
si tu veux le $() prend en paramètre un selecteur css.
Si tu veux plus d'info mp moi.

[/En bon vieux françois]

est-ce que je m'as bien faire comprendre?