[Intermédiaire] Elbé graphiste - webdesigner

Bonjour à toutes et tous,

Voici mon site (toujours en dév)

TODO :
- .htaccess
- intercompatibilité entre les navigateurs (FF, Opéra, IE) développé sous chrome.
- sitemap (Google)
- réglage du pad pour navigation au clavier (en cours) + effet fadeIn/Out pour rendre l'animation plus fluide.

Allez-y !
Modifié par Pooley (06 Mar 2012 - 12:37)

a écrit :
y a pas beaucoup de gens qui vont lire ça

Et si !
(mais c'est vrai que c'est petit... mais j'ai découvert le copyleft grâce à toi !)


J'donne mon avis en surface, je ne suis pas apte à critiquer ton code !

Point négatif
-> Je trouve ton site très sombre.
-> Les textes sur tes pages sont trop longs (perso, ça me rebute pour lire). Tu devrais plutôt avec un texte propre à chacun de tes projets.


Sinon j'adore ton site puisqu'il est plutôt original :
-> navigation avec le pad (même si c'est un peu perturbant, notamment pour la flèche du haut qui ne sert à rien)
-> le gif de chargement de l'image
-> L'ambiance générale

a écrit :
Et si !

Ah ah ! c'est une petite private pour les courageux comme toi !
Je pense qu'il faut juste que je rajoute mes remerciements à ceux qui arrivent jusqu'au point final !
Si ça ne tenait qu'à moi le site serait en full copyleft (dans le respect de la bien séance en donnant du crédit à l'auteur), mais du fait que j'utilise moi même des contenus copyrightés je préfère mettre en garde.

a écrit :
"J'donne mon avis en surface, je ne suis pas apte à critiquer ton code"

Merci pour la précision, j'espère avoir des avis là-dessus aussi car c'est mon premier site de A-Z et j'aimerai savoir si je ne pars pas avec des mauvaises habitudes à ne pas prendre !

a écrit :
"-> Je trouve ton site très sombre."

La dominante est noire, c'est clair ... \o/ Le pire c'est que tu n'es pas le premier à me dire ça ! Je conçois tout à fait que ça peut être dérangeant pour certains. Mais c'est la conditio sine qua à mon côté "intimiste" que je veux lui donner. Tu penses que ça peut incommoder certaines personnes ? (Si ça revient trop j'en tirerai surement les conclusions qu'il faut et revoir "l'éclairage" du site).

a écrit :
"Les textes sur tes pages sont trop longs (perso, ça me rebute pour lire). Tu devrais plutôt avec un texte propre à chacun de tes projets."

Quitte à réduire le blabla je préfère le faire en nettoyant l'intro des sections. Je ne préfère pas faire de speech sur chaque création et préfère me limité aux <title> sinon ça risque d'être encore plus long à lire (vu mon débit à d'écrit j'essaie de me restreindre et c'est dur)

a écrit :
"Sinon j'adore ton site puisqu'il est plutôt original"

Merci là pour le coup, concernant le pad il est plutôt bien accueilli par les personnes qui ont déjà vu le site. Si si je t'assure le bouton haut sert. Les boutons haut/bas servent à "SmoothScroller" après je vais peut-être mettre plus de 2 ancres dans la page (actuellement le cas) pour que le scroll ai plusieurs "palliers"... Je sais pas.
J'aime que tu aimes mon *.gif ! j'ai voulu arranger un peu à ma sauce le très bon shadowbox.

A en juger par ton avis sur l'ambiance générale dois-je en déduire que le côté sombre ne t'a pas plus dérangé que ça ?

Je partirai sur cette note positive en te remerciant d'avoir exprimer ton ressenti


(promis pour les prochains commentaires j'écrirai moins !)
Modifié par Pooley (06 Mar 2012 - 16:26)

Graphiquement je trouve ça super sympa, et la navigation est agréable et originale (la combinaison des deux étant suffisamment rare pour être soulignée ^^). C'est effectivement un poil sombre à mon goût, mais après tout pourquoi pas.

Sinon quelques trucs à améliorer :
-déclare ton encodage (utf-8) avant la balise <title>, surtout qu'en l'occurrence tu as un accent dans le titre, donc il risquerait de mal passer.
-Tu as d'autres petites erreurs html en principe pas trop dures à corriger, un validateur t'aideras plus que je ne pourrais le faire ^^
-La navigation sur android (4.0) en mode portrait est assez pénible : on ne voit pas tout l'écran, certains éléments se positionnent mal, et quand on redimensionne ça redimensionne aussi les barres en haut et en bas. Bref, ce serait peut-être utile d'utiliser des media queries =)
-Le pad pour naviguer c'est sympa, mais sur les pages en hauteur ce serait quand même sympa d'avoir un ascenseur je trouve... Mais bon j'ai toujours tendance à privilégier la fonctionnalité par rapport à l'esthétique, pour un site de graphiste ça se justifie peut-être.
-Le bouton précédent n'a pas toujours exactement le comportement attendu, mais là je chipotte vraiment, d'autant que c'est bien galère à gérer correctement ^^;


edit : Je suis en train de regarder le code html de la page d'accueil, ton div "preload" m'a l'air assez étrange, c'est manifestement une combine pour forcer à charger les images que tu utiliseras dans ton hover pour les liens. Pourquoi ne pas utiliser la technique des sprites CSS ? Ca fera moins d'images à charger et ça me parait plus simple (en tout cas ça simplifie le html). Peut-être pas utile de le changer pour cette page, mais si tu ne connais pas il peut être utile de te familiariser avec cette technique (google et alsacréations sont tes amis).


Voilà, bonne continuation !
Modifié par BlueScreenJunky (05 Mar 2012 - 22:46)

S'il s'agit de cette page : http://www.el-be.fr/wip/home/

Je n'arrive même pas à savoir où c'est cliquable : Aucun effet au survol, ni de réaction en cliquant sur les endroit qui logiquement pourraient être des liens… De plus, sur mon ordinosaure (Pentium 4 avec Ubuntu 10.04 et Firefox 10 + résolution 1280*1024), le parallaxe rame beaucoup
Je reste donc bloquée à la page d'accueil… en plus, tout, sauf les bandes jaunes devient invisible quand on utilise nos propre couleurs plutôt que celles des sites.

@bluScreenjunky :
Yes merci pour tes remontées.
je me fais un récap des tes préco :
- UTF-8 avant <title> (done ! j'ai setté le charset avant tout le reste même les méta)
- Pour la nav sur mobile/tablette je prévois de faire un site tablette et mobile (du fait du touchscreen et de la promiscuité je vais devoir repenser l'interface et j'ai mes petites idées )
- Le div preload est une rustine (en attendant de faire un sprite avec mes (énormes) images lol... Je fais déjà du sprite dans le menu du haut (accueil - Portfolio - Contact - About) j'ai prévu de le faire aussi pour les chipsets pour les raisons que tu as invoqué

J'ai aussi envie de mettre des placeholder sur le formulaire avec une petite anim comme sur les form twitter... je suis là dessus (en plus du pad) j'aimerai bien le mettre en ligne avant le 15 de ce mois grrr !

@IshimaruChiaki :
Tu es arrivé sur ma page en travaux remplace le "wip" par "beta" dans l'url
Modifié par Pooley (05 Mar 2012 - 23:35)

Bonjour,

J'aime beaucoup le visuel.

Petite note rapide:

Sur cette page ( http://www.el-be.fr/beta/home/portfolio.php ), veille à laisser la bulle informative ouverte quand on la survole avec une souris. Car présentement, quand on arrive à la jonctions des deux éléments, la bulle part en vrille et clignote incessamment.

a écrit :
- UTF-8 avant <title> (done ! j'ai setté le charset avant tout le reste même les méta)

À ce sujet, il est important de noter que si le balise meta est placé plus basse, il arrive sous certaines versions d'IE, que cela entraine en retéléchargement de toutes les ressources (js, css, images). Alors en effet, toujours en haut !

J'ai bien l'impression que tu vas me sauver la vie sur plein de points qui me chagrinaient Vaxilart !
Je me penche là dessus après avoir mis une simu de placeholder en js dans mon fumrluaire.

Merci m'sieur ^^

Ok ! charset toujours en haut

Augmente ton interlignage dans tes textes en général. Je pense même que tu devrais augmenter légerement le taille de ta police et en prendre une sans empâtement. Vu ton choix graphique, ce serait plus cohérent. Essaie de mettre quelques mots en avant avec du gras ou de la couleur peut etre! Bref met en valeur ton contenu texte

Bonjour aussi...

Visuellement, j'accorche pas. Mais c'est peut-être la faute au scroll horizontal présent en 1024 et au vertical absent (sous IE8)... Ou au fait qu'il n'y a aucune prise en charge mobile Ou encore peut-être parce qu'il n'y a aucun travail sur les typo passé l'accueil du site... Bref, vraiment pas convaincue.

Pour le code :
* La meta description n'a pas pour but de contenir des mots clés. Mais de proposer un contenu qui sera affiché dans les pages de résultats des moteurs de recherche (si jugée pertinente). Cette description doit être sexy et attirer le clic du visiteur. Là, ça donne pas envie.

* La meta keywords ne sert plus à rien (à part aider google à placer ses pubs), il n'y a donc aucun intérêt à prendre du temps et des octets à la remplir.

* Il est préférable (d'un point de vue performance) de limiter le nombre d'appels vers le serveur. Il serait donc bien que tu fusionne tes fichiers CSS et JS, pour ne garder que le minimum nécessaire : 1 fichier de chaque type.

* Les images porteuses de contenu (ton logo, typiquement) DOIVENT TOUJOURS se trouver dans le code HTML. Ta technique d'ajouter un h1 textuel envoyé hors de l'écran, c'est bien gentil, mais c'est tout aussi innaccessible que s'il n'était pas là. Désactive les images en laissant les CSS actifs (ce qui est le cas typique d'une connexion qui rame ou d'un serveur un peu surchargé), tu comprendras.

* Attention à title sur les liens. L'attribut title doit apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. Un title identique à l'intitulé du lien est inutile et gênant (c'est du bruit).

* Les label sur ton formulaire sont mal intégrés (ce qui réduit fortement leur intérêt). Label doit avoir un attibut for correspondant à l'id du champs de formulaire.

@unCoindPixel : Il est vrai que la lecture n'est pas encore optimisée, j'ai déjà augmenté l'interlignage (mais vais l'augmenter à nouveau) je vais aussi choisir une police plus appropriée
Merci à toi pour ton judicieux conseil

@Laurie-Anne : Bonjour Laurie-Anne (j'y étais presque ! j'ai les "merci" mais pas le "bonjour" c'est le 1er OP où je l'oublie, erreur fatale !)

Je garde à l'esprit que mon site est toujours en dev, donc pas irréprochable
- Le scroll horizontale est inacceptable je vais regarder ça.
- Pour la prise en charge j'ai déjà abordé ce point dans un post précédent. Et comme tu peux le voir plus haut un travail va être fait sur la typo

- Je vais apprêter ma meta description pour qu'elle soit sexy en espérant que tu tombes sous son charme ,
- Je vais effacer les keywords (depuis le temps qu'on me le dit je vais le faire, promis !),
- je vais réduire le nombre de js et de css (pertinent merci)
- pour les images je vais rectifier le tir ! (image de contenu - directement dans le html, c'est noté !)
- Title je vais soit les enlever soit les préciser.
- Les labels n'ont pas tous les attributs du départ car je bosse dessus en ce moment donc dans un souci de clarté j'ai enlevé mes for="" et mes id="" (je le remettrai quand j'aurai fini )
edit: d'ailleurs je viens de m'apercevoir que j'avais retiré ces attributs seulement sur le premier champs (je l'ai remis du coup).

Merci en tout cas à vous 2 pour vos conseils et vos remontées c'est très appréciable !
Modifié par Pooley (06 Mar 2012 - 13:09)

You're welcome

Bon courage

Merci il va m'en falloir !

rebonjour, cette fois c'est déjà beaucoup mieux! Même ça donne envie de regarder le site. Quelques remarques:

Navigation :
S'il est possible de ne pas mettre d’ascenseur, il faudrait émuler le scroll par la molette avec du javascript (faisable). J'ai usé ma molette en pestant jusqu'à ce que je me rappelle qu'il y avait un pad ^^. Quant au clavier, il n'y a pas d'animation de fait on ne sait pas si on a loupé quelque chose. Une fois en bas il faut appuyer 2 fois sur la touche haut pour remonter, et vice-versa.

textes :
De manière générale, un texte en clair sur fond foncé, a tendance, particulièrement sur un écran, à «baver». C'est à dire que visuellement il se produit une sorte de bordure qui rend la typo plus grasse qu'elle ne l'est. Ce qui rend le texte moins lisible et donne moins envie de lire. D'autant que le dégradé en fond n'arrange rien, quand le texte en blanc et par dessus la partie claire d'un dégradé ça fait vraiment mal aux yeux. Quelques conseils pour atténuer les problèmes: sur tes h3 en gras, l'effet pâté gêne beaucoup la lisibilité, un petit letter-spacing: 0.03em; ou dans ces eaux là améliore la lisibilité (testé, un petit rien qui fait tout!). Sur le texte un lui-même, l'aérer encore (line-height: 1.35em;) diminuera aussi l'effet pâté.

Ou pour faire plus théorique: pour faire un bon graphisme, on crée d'abord le vide.

Pour la nav :
j'ai envisagé d'émuler le scroll à la molette c'est donc dans le dev du pad (c'est les molettes qui vont être contentes ! )
Pour le clavier il n'y a effectivement pas d'anim (qui est malgré tout présente au clic souris sur le pad) et ça m'attriste ! C'est apparemment un souci entre mon SmoothScroll.js et le comportement par défaut du browser. Pour faire court c'est le bordel ! mais je vais trouver une solution pour contourner ça (si vous avez des pistes je suis preneur !).
Pour les textes :
Tu touches un des points qui la aussi est tricky pour moi... une police de couleur identique dans une div, qui soit visible sur du clair comme sur du foncé !
- letter-spacing sur H3 ( :0.03em; ), Done !
- Réhausser le line-height à 1.35em; Done !

Un grand merci m'sieur !
Modifié par Pooley (06 Mar 2012 - 16:26)

Encore une chose, je ne sais plus si j'avais trouvé un boulot qui fait tâche dans ton portfolio (j'adore faire ça ^^) mais en tout cas ce n'est plus/pas le cas. Cependant je ne peux m'empêcher une remarque: si j’admets qu'il est bien de se restreindre à peu de typo, la Century Gothic (ou une typo du genre) n'est pas la solution du monde! Bon c'était un peu personnel et HS comme point de vue ^^.

Je sais, je sais... mais je l'aiiiiiimeeuu ! ...Mais tout de même conscient que la diversité "tempérée" (sur un site web) est une très bonne chose, là encore c'est mon côté communiste qui parle ^^' !)

Ok j'avais mal vu, j'étais passée par le bouton WWW faute d'avoir vu le lien dans le message…

Mais tout devient quand même invisible si on utilise ses propres coulours (ce qui désactive les images de fond). Idem si on ne fait que désactiver les images en gardant le style actif.
- Pour ton menu en haut, @font-face aurait été beaucoup plus accessible tout en pouvant utiliser les effets de survol, en comparaison à la technique actuellement utilisée.
- Ton logo aurait dû utiliser une balise <img /> avec un texte alternatif (alt="") pertinent !
- Tes liens dans le corps (état normal) auraient eu intérêt là aussi à utiliser la balise <img /> avec un texte alternatif pertinent. Celles de l'effet hover utilisent bien une balise <img /> mais n'ont aucun texte alternatif…
- Le texte du copyright aurait dû être en texte brut…

Bref, tout ça aurait pu facilement être plus accessible…
Un peu de lecture : http://www.alsacreations.com/astuce/lire/62-balise-ltimggt-ou-feuille-de-style-css.html
Je te le dis en tant qu'internaute vivant avec un problème de vision qui est appelé à évoluer, et qui vient tout juste de traverser la pire période d'une crise d'uvéite (qui rend intolérant à la lumière vive) dont j'ai eu à utiliser mes propres couleurs pour ne pas être incommodée par les pages blanches durant la veille et les premiers jours du traitement.

À part de ça, 11 fichiers javascripts, c'est énorme !
- Réunis-les en aussi peu de fichiers que possibles pour diminuer le nombre de requêtes HTTP
- Minifie ce qui n'est pas déjà minifié, pour économiser des octets.
- Place-les en fin de document, avant de fermer <body>, afin de laisser le contenu se charger en priorité.

Quant au pad, je ne sais pas si c'est mon écran (1280x1024, mais même en fullscreen je ne le vois pas…

Bonjour IshimaruChiaki, merci pour ton retour très intéressant concernant l'accessibilité.

a écrit :
Mais tout devient quand même invisible si on utilise ses propres coulours (ce qui désactive les images de fond). Idem si on ne fait que désactiver les images en gardant le style actif.

je me renseigne plus dessus et je regarde ça.

a écrit :
Pour ton menu en haut, @font-face aurait été beaucoup plus accessible tout en pouvant utiliser les effets de survol, en comparaison à la technique actuellement utilisée.

il est vrai que la technique est devenu obsolète dès que j'ai intégré ma police perso et ça me démangeait de modifier le menu du haut, ce qui est fait !

a écrit :
Ton logo aurait dû utiliser une balise <img /> avec un texte alternatif (alt="") pertinent !

Balise <img /> mise en place et alt="" modifié ! tiens moi au courant pour la pertinence du alt, si c'est le genre de alt="" auquel tu t'attends.

a écrit :
Tes liens dans le corps (état normal) auraient eu intérêt là aussi à utiliser la balise <img /> avec un texte alternatif pertinent. Celles de l'effet hover utilisent bien une balise <img /> mais n'ont aucun texte alternatif…

peux-tu me préciser auxquels tu fais référence (m'en citer un sur mon site pour l'exemple) ?

a écrit :
Le texte du copyright aurait dû être en texte brut…

Modifié ! (est-ce ce que tu entendais par "brut" ?)

a écrit :
Je te le dis en tant qu'internaute vivant avec un problème de vision qui est appelé à évoluer, et qui vient tout juste de traverser la pire période d'une crise d'uvéite (qui rend intolérant à la lumière vive) dont j'ai eu à utiliser mes propres couleurs pour ne pas être incommodée par les pages blanches durant la veille et les premiers jours du traitement.

et ton avis est d'autant plus important ! je vais regarder le lien.

a écrit :
À part de ça, 11 fichiers javascripts, c'est énorme !
- Réunis-les en aussi peu de fichiers que possibles pour diminuer le nombre de requêtes HTTP
- Minifie ce qui n'est pas déjà minifié, pour économiser des octets.
- Place-les en fin de document, avant de fermer <body>, afin de laisser le contenu se charger en priorité.

En cours

a écrit :
Quant au pad, je ne sais pas si c'est mon écran (1280x1024, mais même en fullscreen je ne le vois pas…

ah bon ? arf je vais regarder ça.

Merci à toi pour tes conseils.
Modifié par Pooley (07 Mar 2012 - 13:56)

Concernant les alt, le principal à retenir est : si l'image porte du texte, il suffit de mettre le même texte, pas plus pas moins ; si l'image est un logo, le nom du site suffit.

Dans le cas de ton H1 : "alt="Logo Elbé - Retour à l'accueil". "Logo" est à supprimer, ce n'est pas du contenu alternatif, mais une description fonctionnelle de l'image. À mon sens la portion "Retour à l'accueil" est également en trop, car elle ne concerne pas l'image mais le lien. Ce contenu pourrait être placé sur le lien, mais ne gène pas tellement dans le alt.