Mon site web LightBen's Design soumis à vos critiques =)

Je viens de découvrir cette section du forum... bien pratique car je compte officialiser mon site dès mardi =)

http://www.lightben-design.com

Qu'en pensez-vous ? Niveau design, niveau prog, vitesse, compatibilité navigateurs... j'ai pas fait de version mobile encore, mais comme j'aurai pas le temps avant un petit moment...

Quels points noirs pouvez-vous en ressortir ?

Merci d'avance

Edit : au moment où j'écris ces lignes, Twitter est en panne, du coup, le fil Twitter dans "Feed" ne fonctionne pas... normal hein
Modifié par LightBen (31 Dec 2011 - 20:46)

Salut à toi,

J'aime beaucoup ton site.

Niveau design c'est assez épuré et tendance donc bien joué. C'est tout ce que j'aime dans le web, du style sans agression des yeux de l'internaute. Après d'autres trouveront certainement à redire.


En revanche:
-Ta lightbox met beaucoup de temps à s'afficher et la taille de l'image en grand format dépasse de l'écran.
-Le slider de la partie print est pas vraiment dans le même ton que les autres sliders du site.
-Niveau compatibilité, ton site se dégrade mal sous IE8, même s'il reste à peu près correct dans l'affichage, les effet jquery partent dans tous les sens.
-pas de label sur le formulaire de contact réalisé avec des table
-mets des majuscules à "english, french"
Modifié par jmlapam (01 Jan 2012 - 15:11)

Merci pour ta réponse =)

1) Qu'appelles-tu Lightbox ?
2) Print... du fait que ce sont des bandes horizontales ?
3) J'ai testé sur un PC ici, la seule chose que j'ai vu, c'est une disparition des effets JQuery, lorsque je clique sur "Print" par exemple, au lieu de slider, ça s'affiche cash. C'est ça que tu voulais dire ou autre chose ?
4) Tu peux m'éclaircir une ligne de code ? =)
5) Ah, je crois que tu as raison, en français, c'est en minuscules mais en anglais en majuscules c'est ça ?

Yop,

Ta lightbox c'est le script Javascript ou jQuery, assez souvent, qui affiche les images en grand dans ton portfolio.

Pour ce qui est de la critique elle-même, j'accroche que moyennement au design. C'est assez classique, ça va, mais c'est pas super bien réalisé (ça pourrait être mieux, disons).

Alors voilà :

1) La font intégrée par font-face est super aliasée, pas très belle, et elle n'a aucune particularité (autant mettre Verdana directement ...).

2) Le footer sur la homepage est beaucoup trop gros et trop visible, et ça fait super amateur de mettre un bouton +1 dedans.

3) Le footer sur les autres pages est un peu moins dérangeant, mais les polices utilisées sont trop grosses, et les boutons sociaux à droite sont moyen, on comprend pas trop ce que c'est au début.

4) Tu crois pas que t'en demandes un peu beaucoup trop des infos dans ton formulaire de contact ? En plus en anglais, c'est pas adress, c'est address il me semble (à vérifier).

5) Pourquoi donnes-tu du "we" ? Tu as des collègues ?

6) Quand tu mets "Feed" dans About, c'est pas clair. Moi je m'attendais à tomber sur un RSS et même comme ça je trouvais ça bizarre.

7) Police noire sur fond blanc, c'est assez tristounet. Prends un bleu pâle plutôt que le blanc, un peu comme celui que j'ai mis sur mon site à moi.

Et voilà

Bon, après, faut contraster hein. J'ai fait que le côté négatif, mais y a aussi du bon
Modifié par Stephanelam (01 Jan 2012 - 17:08)

LightBen a écrit :


1) Qu'appelles-tu Lightbox

La "boîte qui s'illumine" ( ) pour mettre en valeur tes photos. Cela dépasse du cadre de l'écran sur la résolution la plus standard qui soit.

LightBen a écrit :

2) Print... du fait que ce sont des bandes horizontales ?

Non, le chevauchement n'est pas très heureux, c'est plus fouillis qu'autre chose

LightBen a écrit :

3) J'ai testé sur un PC ici, la seule chose que j'ai vu, c'est une disparition des effets JQuery, lorsque je clique sur "Print" par exemple, au lieu de slider, ça s'affiche cash. C'est ça que tu voulais dire ou autre chose ?

Non les polices ne sont pas les mêmes, on dirait que c'est pixelisé même.

LightBen a écrit :

4) Tu peux m'éclaircir une ligne de code ?

Kesako?

LightBen a écrit :


@stephanelam: pas du tout d'accord, on ne peut pas dire que c'est mal réalisé.
Le footer sur la homepage est beaucoup trop gros et trop visible, et ça fait super amateur de mettre un bouton +1 dedans.

En quoi c'est amateur?
Modifié par jmlapam (01 Jan 2012 - 17:19)

Ah mais oui la LightBox que j'suis c**
Non mais concernant la LightBox : pas grave que ça dépasse l'écran, j'ai choisi ça pour voir une grosse qualité, c'est un choix arbitraire. Par contre, dans mon PC qui dispose de IE (oui parce que cette grosse m**** n'arrive ni à s'installer ni à se désinstaller sur mon PC, il reste quelques fichiers qui refusent de bouger, j'ai tout essayé, faut formater), le fond gris qui cache le site une fois une photo ouverte n'est que du côté gauche... à droite, on voit toujours le site en clair, quelqu'un sait d'où cela peut venir ?

@Stephanelam : ne t'inquiète pas, je préfère les points noirs, ça me fait avancer et me donne la critique justement, si j'avais que du "c'est beauuu", soit c'est que mon site est parfait, soit que j'avance pas

1) la font-face : Aliasing sur la police... tu trouves ? Peut-être ça dépend des PC, ou alors je ne m'y connais pas assez en police pour juger. Faut dire que j'ai pas de bol, je joue sur le graphisme et je code/design sur un écran pas génial...

2) Tu verrais le footer plus petit en index c'est ça ? Parce qu'il est le même sur toutes les pages. Et pourquoi ça fait amateur le +1 ? J'avais placé un Like et un Tweet dedans, mais la page chargeait énormément (même ce +1 ralentit, mais ça va encore). De plus, si j'accumule les +1, c'est bon pour le référencement, Google aime ce qui vient de Google (je l'invente pas hein)

3) Je voulais faire des boutons de pages de réseau social design mais finalement c'est vrai que pas tout le monde reconnait de suite facebook etc. Après j'ai joué la carte facilité car je sais pas comment faire une transition de 400ms sur une image en rollover en CSS3... alors que changer le background-color si ^^ si quelqu'un a une solution pour moi je change, je place les icones officielles en N&B qui se colorent en 400ms sur rollover.

4) Bah, les seules infos obligatoires sont Nom, email et message, après, ça peut ajouter des infos complémentaires concernant la localisation de celui qui envoie le message =)

Et oui, merci d'avoir relevé, c'est bien address

5) Tkt pas pour ça

6) Tu me conseillerais quoi ? J'ai donc actuellement About > Feed ainsi que le bouton rss en bas de chaque page dans le footer.

7) J'suis allé voir ton site. Mon écran n'est pas le top du top (pauvre vieux TN 19 pouces pas génial) l'écriture des articles, c'est ça le bleu pale ? (moi je vois comme du noir)

Merci =)

Avant de poster je vérifie... et jmlapam a répondu ^^ je réponds donc encore

1) On a répondu au dessus ^^
2) J'arrive toujours pas à comprendre... désolé
3) Quelles polices ne sont pas les mêmes ?? Et pour le pixel, tu rejoints Stephanelam pour l'aliasing de la police utilisée ?
4) Ben me remplacer une ligne de code à moi du formulaire par ce qui manque

Hop hop hop, lire ceci pour le code en question: http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html

Pour la lightbox, c'est comme tu veux mais c'est très contestable... et quel lien avec la qualité? Les flyers de la partie "computer graphics" ne sont pas d'une qualité extrême.

Oui je rejoins stephanelam pour l'aliasing et sinon qu'entends-tu par prog? je n'en vois pas tant que cela sur le site.

LightBen a écrit :

De plus, si j'accumule les +1, c'est bon pour le référencement, Google aime ce qui vient de Google (je l'invente pas hein)

Pas vraiment, ça ne fait personnaliser les résultats pour les personnes qui ont attribué un +1 à ton site (et pour les personnes présentent dans leur cercles sur Google+). Mais ça n'affecte pas le référencement. Dans certains cas ça peut quand même être intéressant. Pour un portfolio comme le tiens j'en doute quand même.
Modifié par jb_gfx (01 Jan 2012 - 17:44)

@jmlapam : c'est une impression perso, mais bon après voilà quoi, tu vas sur le site de Happy Cog Hosting, y a pas de "likez-nous sur facebook" ou "+1 sur Google" ...

@Lightben : je parlais du bleu pâle du fond d'article par exemple. C'est à la limite du blanc, mais c'est pas blanc, donc ça passe mieux je trouve.

Je te dis après pour la suite.

OK pour le +1, j'ai noté vos avis =)

Pour le bleu pâle, malheureusement, à cause de mon écran, j'ai pas de moyen pour super tester... sur la page d'un site web (sabao par exemple), j'ai utilisé un blanc 98% (fafafa je crois ou f2f2f2) histoire que ça fasse pas vide, mais je ne sais pas si ça rend bien sur de bons écrans, j'ai pris un risque. Toi déjà tu le verrais où ce bleu pâle (tout du moins une couleur proche du blanc mais moins vide en gros), dans le contenu, le header/footer (sachant qu'ils ont 80% d'opacité, ça peut jouer)

jmlapam : merci pour les labels, je vais modifier =). Pour la qualité, je voulais dire qu'on le voit en grande taille. La "prog", tu parlais des labels ? J'ms suis perdu en route ^^

Merci pour vos avis, c'est génial ^^

Edit : pour le formulaire de contact, ouais, je pense finalement que ça me sert à rien Zip Code etc, mais ça peut être cool d'avoir la ville pour éventuellement se rencontrer, je pense donc remplacer par Country et City tout simplement, en champs non obligatoires.
Modifié par LightBen (01 Jan 2012 - 17:57)

Ah no, tu demandes un avis sur la prog du site mais c'est juste pour le feed et les scripts? Parce que pour la plupart c'est des scripts tout faits que tu as utilisés ou légèrement miodifié.
Modifié par jmlapam (01 Jan 2012 - 17:57)

Ahhhh, oui je suis pas un développeur d'algorithmes fait maisons encore, ou alors... première année post bac ^^

Mais je voulais dire, si vous voyez pas, dans le peu que j'ai écris moi-même (j'ai laissé les copyrights sur ce qui est pas à moi), vous ne voyiez pas d'incohérences ou autre =)
En plus, j'suis content, j'ai validé W3C sauf le Feed ou ça dépend pas de moi, ya une erreur qui concerne Twitter... Bon, ok, on peut pas tout le temps valider W3C à cause du non respect des standards par tout le monde, donc on s'en fiche, mais au moins de ce côté là c'est correct c'est sympa (ok j'avoue, ça me fait de l'effet de voir "validé W3C" sur leur site, et alors ^^)

Edit : du coup, pour les font, vous auriez tous mis du Verdana au lieu de l'Open Sans ? (sauf pour le logo)
Modifié par LightBen (01 Jan 2012 - 18:13)

Une petite note rapide pour l'Open Sans, elle est disponible sur Google Webfont.

http://www.google.com/webfonts/specimen/Open+Sans
http://www.google.com/webfonts

Elle y est de bonne qualité.

Souvent le problème est que FontSquirrel ou des services du genre gâchent un peu trop les polices lors de la conversion et de la compression. Quand le résultat n'est pas excellent, parfois il suffit de repasser la font et elle sort étrangement mieux... Sinon faut essayer différents paramètres.

Justement, je l'avais utilisée depuis Google Fonts, mais j'ai changé car je voulais inclure la version pour IE aussi, et je sais plus encore pour quelles raisons mais c'était plus pratique de la mettre par FTP. Au final, ya une différence ?
Modifié par LightBen (01 Jan 2012 - 21:55)

Tu as téléchargées tes Open Sans de Google webfont ou tu les as convertit via une application comme Font Squirrel ?

Si ça provient de Google Webfont, il n'y a pas de différence.

J'ai téléchargé la font de Google fonts puis j'ai converti (je sais plus si c'est Font Squirrel, mais ça m'a donné les différentes versions + le code CSS... grosse feiniasse je sais ^^)

Edit : Il y a un moyen pour importer depuis Google Webfont mais que si l'utilisateur est sous IE, alors on passe à un font-face qui importe une font compatible IE (oublié le type de format) ?
Modifié par LightBen (02 Jan 2012 - 12:47)

L'API de Google Webfont prend en compte IE et fonctionnera sur ce dernier évidemment. Mais si tu tiens absolument à les télécharger, je te conseillerais de toutes les prendre à partir de Google et d'éviter la conversion automatique qui ne donne pas toujours le meilleur des résultats.

API Google ?

Moi j'avais juste un lien qui incluait la police en ttf il me semble... je vais revérifier dès que je peux...