[Intermédiaire] JeremDsgn - Web & UI Designer v2

Bonjour à tous,

Après avoir terminé ma maquette sur photoshop (Cf : http://bit.ly/fEYECJ), j'ai du passer à l'intégration HTML/CSS & JS ce qui n'a pas été facile. J'ai commencé au début avec du HTML5, mais ayant pas mal de retour négatifs sur les navigateurs comme Firefox 3.6, j'ai remis des balises <div> à la place des <header>, j'hésite donc à repasser sous un XHTML strict 1.0.
Quand dites-vous après avoir vu mon code ? et du design aussi ?

Le site : http://www. class="highlight">jeremdsgn.com

Cordialement.
Modifié par JeremGraph (04 Feb 2012 - 16:19)

Le lien vers le site présente une erreur : %3C/b%3E.
Le site est réussi, il manque quand même un moteur de recherche.

a écrit :
Le lien vers le site présente une erreur : %3C/b%3E.

Merci ! c'est corrigé

a écrit :
Le site est réussi, il manque quand même un moteur de recherche.

Heu.. qu'entends-tu par moteur de recherche, qu'il soit indexé ?

Salut JeremGraph,

Au niveau du design, c'est joli. Pas de faute de gout, c'est propre et aéré.

Juste une chose qui devrait être revu, ce sont les icones. Elles ne sont pas bien choisi et n'apporte rien du coup.
Par exemple, je ne suis pas sur qu'un éclair soit la meilleure illustration pour représenté une découverte de projet. J'aurai plus choisi une icône qui évoque un RDV, un dialogue, bref, quelque chose qui évoque un échange verbal.

Pour l'icône "mise en production", le pinceau ne se devine pas au premier coup. D'ailleurs, quand j'ai regardé ton logo, je me demandais ce qu'étais cette forme.

C'est sur le contenu que je trouve qu'il a matière à améliorer. Par exemple:

a écrit :
Je me présente, je m'appelle Jérémy et je suis un jeune passionné d'art visuel. Je préfère tout particulièrement le webdesign et tout ce qui se rapporte à cet univers.

Jeune = pas d'expérience. Je ne pense pas pertinent de préciser que tu es jeune. On doit te juger sur tes seules compétences.

a écrit :

Je réalise dans de brefs délais, correspondant au service demandé, des réalisations dans l'air du temps.

C'est trop vague. Surtout cette notion "dans l'air du temps". Surtout que le "à la mode" n'est pas une bonne idée dans le design web, tellement ça change vite.

a écrit :
Je travaille sous Adobe Photoshop, l'outil indispensable à tout bon graphiste.

Le client potentiel se fiche de savoir avec quoi tu travailles. Tu pourrais travailler avec MS Paint si tu veux tant que tu donnes du résultat.

a écrit :

Enfin, j'occupe une place dans un studio réalisant sites web et logos, laCréationWeb!

Là aussi, je ne sais pas si c'est pertinent. Dire que tu bosses ailleurs reviens à dire que tu auras moins de temps pour tes clients.

C'est vraiment pas évident de se vendre, j'en sais quelques chose.


Enfin, je vais critiquer aussi la partie folio. Tes réalisations ont l'air d'être du même niveau que le design de ton folio sauf que c'est très difficile de juger une image de 400px sur 250 à tout casser. Une présentation plus complète pour mettre en valeur ton travail serait la bienvenue. Un lien vers le site si il est toujours d'actualité serait apprécié par les utilisateurs, je pense.

Voilà voilà, en espérant t'avoir aider.

a écrit :
Enfin, je vais critiquer aussi la partie folio. Tes réalisations ont l'air d'être du même niveau que le design de ton folio sauf que c'est très difficile de juger une image de 400px sur 250 à tout casser. Une présentation plus complète pour mettre en valeur ton travail serait la bienvenue. Un lien vers le site si il est toujours d'actualité serait apprécié par les utilisateurs, je pense.

Malheureusement, je n'ai pas envie de créer une page pour chaque sites, beaucoup trop long, et si je ragrandis les images, elles seront plus lourdes et prendront encore plus de place. Sinon pour mettre l'adresse, je devrai peut-être la mettre lors du hover sur les vignettes ?!

Sinon pour ce qui est des divers remarques elles sont très justes, je vais essayé de les corriger au plus vite. Merci beaucoup !

@David-Dante : J'ai changé l'image de "découverte", modifié celle de "production".
J'ai aussi changé un peu les textes, mais je ne sais pas si les termes que j'emploie sont les meilleurs, j'attends donc vos retours.

Hello,

Je trouve le site bien même si, à mon gout, il me semble vu et revu, sans trop d'originalité. Enfin, n’empêche qu'il est pas mal.

Cependant, il y a une chose que je trouve dommage. Je ne sais pas si c'est fait exprès, inconsciemment ou pas du tout mais je constate que la partie A PROPOS de ton site et très semblable au site d'alsacréations.FR (donc l'agence et non la communauté). Notamment ton avatar qui m'a directement fait penser à ceux dudit site, ainsi que la bulle (allez voir "a propos" sur alsacreations.fr) tout comme les réalisation du projet en quatre étape (accueil d'asla).

Enfin bon, comme je dis peut-être que ce n'est pas fait exprès mais je trouve un peu dommage.

Voilà a++

Bonsoir,

petite astuce pour avoir une main sur le submit de ton formulaire, dans ton

input[type="submit"]{
background:url("../img/envoyer.png") no-repeat;
width:117px;
height:38px;
border:none;
outline:none;
text-indent:-7000px;
}

ajoutes

cursor: pointer;
cursor: hand;

- Sinon, design top en rendu global, mais la forêt de text-indent négatif avec ton menu images ne laisse pas beaucoup de chance aux connexions lente d’apprécier ton travail.
- Pourquoi un menu image alors que l'ensemble est aisément faisable en css ? La police utilisée n'est pas libre ?
- Tes caractères spéciaux sont codés alors que tu déclares ton doc en utf-8.
Modifié par fufu (18 Apr 2011 - 00:23)

Bonjour,

Visuellement, c'est pas mal, mais effectivement pas vraiment original. Les "tâches" dans le header m'ont fait nettoyer mon écran, ce qui lui a fait le plus grand bien, mais il serait peut-être bien de les adoucir ^^;

Le gros problème de ton site, c'est qu'il est inaccessible au clavier... Le menu ne change pas d'état au focus donc impossible de savoir où l'on se trouve...

Comme souligné par fufu, les text-indent pour placer le contenu alternatif aux images que l'on a placé en CSS au lieu d'HTML est une erreur et un gros problème d'accessibilité. Désactive les images en conservant les CSS pour t'en rendre compte. L'accessibilité, ce n'est pas uniquement pour les personnes handicapées ; c'est aussi pour ceux qui ont des problèmes matériels ou un gros pas de bol de tomber sur ton site au moment où son hébergeur rame...

Le menu ne fonctionne pas sous IE8... ça risque de poser problème à une bonne partie de tes visiteurs et clients potentiels.

Le slideshow d'actualité, c'est bien joli, mais il est trop rapide : ton client potentiel à le choix entre : lire le commentaire ou regarder l'image... Les trucs qui bougent doivent toujours pouvoir être arrêtés par le visiteur !

Dans la section "À propos", des titles sur les icones sous ton portrait doivent être ajoutés. Personnellement, je ne sais pas du tout ce que représente la troisième icone.

Dans la section "Portfolio", le texte qui apparait au survol est illisible pour la plupart des images (sur 11 images, j’arrive à n’en lire qu’un seul). C’est à revoir.

Ton formulaire a visuellement sympa... jusqu’à ce qu’on rentre du texte. Il serait bien que celui-ci soit plus gros et centré verticalement dans les inputs...

Pour la gestion des erreurs de ton formulaire, il ne faux pas dépendre de la couleur uniquement : « Verifiez la(les) case(s) en rouge(s) ! ».

Pour le code :
* La meta keywords ne sert à rien (sauf à aider google à proposer ses pub...), rien ne sert donc d’encombrer le code avec

* Ta meta description n’apporte pas d’information utile pour le visiteur potentiel. Pour rappel, le contenu de cette meta n’est utilisé que pour être affiché dans les pages de résultats des moteurs de recherche. Rien ne sert donc de la bourrer de mots clés, il faut qu’elle attire le visiteur, pas le robot.

* Il est toujours préférable de limiter le nombre de fichiers externes liés, que ce soit CSS ou JS. Tu as deux fichiers CSS et deux fichiers JS qui peuvent être fusionnés en un fichier de chaque type. Il est également préférable de placer les scripts en fin de document, sauf si leur code se charge de manière asynchrone (le script de GA, par exemple).

* Le alt d’une image ne soit pas contenir la fonctionnalité de l’image, mais la même information que celle véhiculée par l’image. Pour ton logo, le alt="logo" n’est pas correct. Il devrait reprendre le nom du site. Pour ton slider, par contre, les alt des images sont redondant avec leur contexte ; ils devraient donc être oubliés. Les alt="puce" aussi devraient être oubliés...

* Ta hiérarchie des titres n’est pas correcte : elle commence à h2 au lieu de h1.

* Le script en fin de page DOIT être externalisé !

Dans l’ensemble, visuellement c’est sympa ; malheureusement pour l’accessibilité, il y a un gros problème.

a écrit :
Hello,

Je trouve le site bien même si, à mon gout, il me semble vu et revu, sans trop d'originalité. Enfin, n’empêche qu'il est pas mal.

Cependant, il y a une chose que je trouve dommage. Je ne sais pas si c'est fait exprès, inconsciemment ou pas du tout mais je constate que la partie A PROPOS de ton site et très semblable au site d'alsacréations.FR (donc l'agence et non la communauté). Notamment ton avatar qui m'a directement fait penser à ceux dudit site, ainsi que la bulle (allez voir "a propos" sur alsacreations.fr) tout comme les réalisation du projet en quatre étape (accueil d'asla).

Enfin bon, comme je dis peut-être que ce n'est pas fait exprès mais je trouve un peu dommage.

Voilà a++

En effet, l'image ressemble à une de l'équipe alsacréation, mais je ne l'ai pas "volé" sur ce site. J'ai trouvé cette ressource libre sur un site de ressources pour webmaster, mais de toute façon je ne compte pas la laisser éternellement. Je la remplacerai dès que possible.

a écrit :
Bonsoir,

petite astuce pour avoir une main sur le submit de ton formulaire, dans ton

input[type="submit"]{ 
background:url("../img/envoyer.png") no-repeat; 
width:117px; 
height:38px; 
border:none; 
outline:none; 
text-indent:-7000px; 
}

ajoutes

cursor: pointer; 
cursor: hand; 

- Sinon, design top en rendu global, mais la forêt de text-indent négatif avec ton menu images ne laisse pas beaucoup de chance aux connexions lente d’apprécier ton travail.
- Pourquoi un menu image alors que l'ensemble est aisément faisable en css ? La police utilisée n'est pas libre ?
- Tes caractères spéciaux sont codés alors que tu déclares ton doc en utf-8.

Main corrigé.
Pour le menu, je vais essayer de le faire en texte, cela simplifiera beaucoup de chose, de plus la police est libre donc aucun problème.
Aussi bizarre que cela puisse paraître, les accents "é" font des carrées "&#65533;"

a écrit :
Visuellement, c'est pas mal, mais effectivement pas vraiment original. Les "tâches" dans le header m'ont fait nettoyer mon écran, ce qui lui a fait le plus grand bien, mais il serait peut-être bien de les adoucir ^^;

Je m'occupe de les atténuer un peu. J'ai réduis l'opacité de la texture.

a écrit :
Le gros problème de ton site, c'est qu'il est inaccessible au clavier... Le menu ne change pas d'état au focus donc impossible de savoir où l'on se trouve...

Comme souligné par fufu, les text-indent pour placer le contenu alternatif aux images que l'on a placé en CSS au lieu d'HTML est une erreur et un gros problème d'accessibilité. Désactive les images en conservant les CSS pour t'en rendre compte. L'accessibilité, ce n'est pas uniquement pour les personnes handicapées ; c'est aussi pour ceux qui ont des problèmes matériels ou un gros pas de bol de tomber sur ton site au moment où son hébergeur rame...

Je m'occupe au plus vite de la navigation au clavier.

a écrit :
Le slideshow d'actualité, c'est bien joli, mais il est trop rapide : ton client potentiel à le choix entre : lire le commentaire ou regarder l'image... Les trucs qui bougent doivent toujours pouvoir être arrêtés par le visiteur !

Je vais mettre 10/12 secondes. J'ai donc mis 11 secondes, mais un bug persiste, il faut revenir à l'image d'avant pour pouvoir aller à la suivante, je vais regarder ça dès mon retour, en plus des boutons pause et lecture.

Merci beaucoup de votre aide très précieuse !

EDIT :

a écrit :

* Il est toujours préférable de limiter le nombre de fichiers externes liés, que ce soit CSS ou JS. Tu as deux fichiers CSS et deux fichiers JS qui peuvent être fusionnés en un fichier de chaque type. Il est également préférable de placer les scripts en fin de document, sauf si leur code se charge de manière asynchrone (le script de GA, par exemple).
* Le script en fin de page DOIT être externalisé !

Voilà c'est fait, les deux css et js sont regroupés en un seul respectifs.

a écrit :
* Ta meta description n’apporte pas d’information utile pour le visiteur potentiel. Pour rappel, le contenu de cette meta n’est utilisé que pour être affiché dans les pages de résultats des moteurs de recherche. Rien ne sert donc de la bourrer de mots clés, il faut qu’elle attire le visiteur, pas le robot.

Je l'ai modifié un peu en espérant que ça soit plus adapté.

a écrit :
* Ta hiérarchie des titres n’est pas correcte : elle commence à h2 au lieu de h1.
* Le alt d’une image ne soit pas contenir la fonctionnalité de l’image, mais la même information que celle véhiculée par l’image. Pour ton logo, le alt="logo" n’est pas correct. Il devrait reprendre le nom du site. Pour ton slider, par contre, les alt des images sont redondant avec leur contexte ; ils devraient donc être oubliés. Les alt="puce" aussi devraient être oubliés...

Ça doit être corrigé !

a écrit :
Le gros problème de ton site, c'est qu'il est inaccessible au clavier... Le menu ne change pas d'état au focus donc impossible de savoir où l'on se trouve...

J'ai retiré tous les outline:none; normalement tout est ok !
Modifié par JeremGraph (18 Apr 2011 - 13:55)

Madrileno a écrit :
Le site est réussi, il manque quand même un moteur de recherche.

JeremGraph a écrit :
Heu.. qu'entends-tu par moteur de recherche, qu'il soit indexé ?

Un moteur pour pouvoir chercher les informations sur le site.
Modifié par Laurie-Anne (18 Apr 2011 - 13:32)

Madrileno a écrit :
Un moteur pour pouvoir chercher les informations sur le site.

Personnellement je ne vois pas l'intérêt d'un moteur de cherche sur ce type de production.
Surtout pour un OnePage.
Modifié par fufu (18 Apr 2011 - 13:29)

Petite remarque : pourquoi avoir conservé le doctype html5 ?

Techniquement c'est bien fait, mais comme l'ont souligné mes camarades ça manque cruellement de style. Être dans l'air du temps c'est une chose mais en ce moment quand je regarde les portfolios de certains webdesigner j'ai du mal à être sûr de ne pas avoir visité le site auparavant vu qu'ils se ressemblent tous plus ou moins.

C'est d'autant plus dommage quand je vois un site comme le tiens parce que tu as la technique et le potentiel, mais il faut trouver ton style !
Modifié par jb_gfx (18 Apr 2011 - 20:47)

@jb_gfx : (je vais faire un gros HS là)

C'est une question que je me suis posé...
J'avoues que cela m'a torturé quelques jours, j'étais en pleine créa de ma dernière maquette.
Marquer un site de ta "patte", au commencement, c'est très difficile, pour ma part en tout cas, j'ai préféré ne pas prendre de risque et partir sur le même schéma. Et quelque part, ça m'a rassuré.
Le topo c'est : voilà ce que font les poids lourds aujourd'hui (en sachant qu'ils sont les initiateurs d'un syle, pas comme moi qui suis derrière et m'en inspire), Je suis capable "techniquement" de produire ce que "trucmuche" vient de produire, ça me rassure, car cela me fait penser que je ne suis pas à la traîne par rapport à la profession. Mais l'effet vicieux je te l'accorde, c'est que tu t'inspire et tu colles à quelque chose d'existant, du coup, t'es dans la masse...

J'imagine que l'empreinte de chacun s'affirme doucement avec le temps.

c'était la pensée du soir bonsoir !
Modifié par fufu (18 Apr 2011 - 22:46)

spiral123 a écrit :
Petite remarque : pourquoi avoir conservé le doctype html5 ?

Voilà, je suis repassé sous un doctype html 1.0 strict.

Mais j'ai un soucis dans l'encodage des accents, normalement je devrais pas les encoder, mais quand je le fais pas j'ai des carrés à la place des "é". De plus, j'ai mis la balise méta en commentaire et mes accents s'affichent normalement. D'où vient ce problème ?

a écrit :
Techniquement c'est bien fait, mais comme l'ont souligné mes camarades ça manque cruellement de style. Être dans l'air du temps c'est une chose mais en ce moment quand je regarde les portfolios de certains webdesigner j'ai du mal à être sûr de ne pas avoir visité le site auparavant vu qu'ils se ressemblent tous plus ou moins.

C'est d'autant plus dommage quand je vois un site comme le tiens parce que tu as la technique et le potentiel, mais il faut trouver ton style !

Oui, c'est pour ça qu'il faut faire pleins d'essais avant de trouver son style. De plus, j'avais à coeur à faire un site clair et épuré. Au moins je me suis fait plaisir.

JeremGraph a écrit :
Mais j'ai un soucis dans l'encodage des accents, normalement je devrais pas les encoder, mais quand je le fais pas j'ai des carrés à la place des &quot;é&quot;. De plus, j'ai mis la balise méta en commentaire et mes accents s'affichent normalement. D'où vient ce problème ?

Avec ton éditeur vérifies que ta page est bien encodé en utf-8.
Avec notepad++ -> encodage -> UTF-8 (sans BOM)

Merci pour l'encodage, l'erreur venait bien de notepad++

Alors voilà j'ai fais beaucoup de modifications.

- J'ai mis des boutons "pause" et "lecture" au slider.
- J'ai modifié les images du portfolio. Je les est agrandi et rajouté un lien vers le site, si y'en a un.
- Je m'occupe de corriger les erreurs w3c, parce qu'elles viennent de la conversion html5 -> html 1.0 strict.

Voilà si vous avez des remarques n'hésitez pas !
Modifié par JeremGraph (19 Apr 2011 - 21:41)

Re bonjour à tous !

Voilà une petite news pour vous annoncer les derniers changements effectués et avoir encore quelques remarques.

Les nouveautés :
* Création/modification en cours de la version mobile, elle devrait ne plus tarder à sortir.
* Un nouveau logo qui va beaucoup mieux avec le nom.
* Modification du footer, accueillant désormais le dernier tweet et mes partenaires.
* Création d'une barre avec de nombreux réseaux sociaux pour me suivre.
* Changement de nom de domaine : [Modération : le lien se trouve déjà dans le premier message du sujet]

Voilà, n'hésitez pas à donnez votre avis et toutes les remarques qui vous passent par la tête.

a écrit :
C'est en forgeant, qu'on devient forgeron.

Modifié par Laurie-Anne (22 Nov 2011 - 12:29)

Bonjour à tous et à toutes,

Je re-up une dernière fois ce topic, pour avoir des retours sur la version mobile.
Merci de votre part.

* Sortie version mobile : -http://www.jeremdsgn.com/m
* Correction de certains bugs.
* Ajouts de créations toutes les deux semaines environ.