Normandie Web : critiques et suggestions

Bonjour à toutes,
bonjour à tous.

Je suis en train de bosser sur un site Web que je vais lancer le 20 septembre prochain.

Le design du gabarit actuel n’a pas l’heur de plaire à des amis ou des connaissances professionnelles et j’aimerai avoir vos avis.

L’URL de la page d’accueil c’est celle du blog que je remplis de contenu pour le moment (la vraie page d’accueil est en gestation). C’est ici : Blog Normandie Web.


Merci d’avance.
Modifié par Sventovit (25 Aug 2010 - 10:43)

Bonjour,

Ton site est un peu trop large (assenceur horizontal avec un viewport de 1036px).

Graphiquement, je ne suis pas convaincue : les couleurs sont assez face, le site est bien trop minimal (il faudrait au moins jouer sur les typos) et j'ai un peu de mal à lire les textes (typo très fine et constrate légèrement trop fort pour moi).

Je vais donc rejoindre le camps de tes amis

Salut,

Le menu bouge au survol du lien "à propos & contact", c'est assez inélégant.
Moi qui ait un écran très large (1920px de large), face au quel je suis positionné face au milieu (position fauteuil, bureau, etc.) et j'avoue qu'un gabarit qui m'oblige à m'orienter plus sur la gauche et/ou faire travailler plus mon oeil gauche me dérange.

Niveau couleurs les couleurs des deux bandeaux et du fond du site ne sont pas spécialement ternes entre elles, mais cette couleur moutarde du titre du site et des liens, rend le tout très austère. Une couleur plus orangée, ou carrément plus contrastée (froide), améliorerait la chaleur du site.

Niveau typo, un brun foncé ou une couleur plus contrastée (froide et sombre) changerait déja pas mal la dynamique.

Sinon je trouve aussi que c'est très austère, malgré les photos dans le contenu, car dans les situations de scrolling où elles n'apparaissent pas, cela reste froid et triste. Agrandir un peu le bandeau pour y avoir un visuel d'ambiance ou de matière pourrait apporter un peu plus de personnalité.

Salut Philippe,

En sus des remarques précédentes.

Malgré un aspect (que je trouve) globalement agréable, ça manque un peu de 'brand identity'.
Le dégradé encadrant les images pourrait être adouci.
L'icône apparaissant au survol des liens du corps de texte masque le texte adjacent (je pinaille)


Ça sert à quoi d'encoder les url d'images d'arrière plan en base64?

paolo a écrit :
Ça sert à quoi d'encoder les url d'images d'arrière plan en base64?

AMHA c'est pour économiser les requêtes http. Attention de ne pas en abuser, ça pourrait gonfler inutilement le fichier css (ce qui n'est pas le cas ici).

Bonjour Laurie-Anne; bonjour Mikachu, hello Paolo
et merci pour vos remarques.

Largeur de la page : corrigé.

Menu : corrigé.

Suppression du pseudo frame (bandeau supérieur du menu).

Typo des articles :
- trop contrasté ? J’ai changé le fond crèmeux pour du plus foncé.
- trop fine ? Si c’est la taille, je viens de l’augmenter. Si c’est la graisse je n’ai jamais vu de différence entre 3,4,5 ou 600.

« L'icône apparaissant au survol des liens du corps de texte masque le texte adjacent (je pinaille) »
- Ah ben nan : ça je l’ai fait exprès.

« Agrandir un peu le bandeau pour y avoir un visuel d'ambiance ou de matière pourrait apporter un peu plus de personnalité. »
« Malgré un aspect (que je trouve) globalement agréable, ça manque un peu de 'brand identity'. »

Ce n’est que le blog où le contenu prime plus que le design. La page d’accueil sera plus parlante. Enfin j’espère...
Le gabarit n’est certes pas très actuel mais comme pour mon autre blog je le voulais décalé.
Mais pas forcément moche. C’est là que j’ai un doute.

Quant à l’aspect commercial avec l’image de marque que doit renvoyer le design c’est une règle fondamentale tu as raison.
Dans « mon cas », je veux passer pour un artisan soucieux avant tout du code que va produire le CMS que j’utilise pour les sites de mes clients.

EDIT : je n’avais pas fini une phrase.
Modifié par Sventovit (25 Aug 2010 - 15:01)

Patidou a écrit :


AMHA c'est pour économiser les requêtes http. Attention de ne pas en abuser, ça pourrait gonfler inutilement le fichier css (ce qui n'est pas le cas ici).

Ah merci Patidou.
J’avais oublié de répondre sur ce sujet à paolo.

C’est effectivement pour l’optimisation du site côté requêtes.
Comme dit Patidou, ce n’est valable que pour de petites images.

Je viens juste de comprendre que c'est l'image elle-même et pas son url qui est encodée.
Je ne connaissais pas, merci.

Bonsoir Sventovit

Déjà, je suis une fan inconditionnelle de ton blog et de tes explications sur le html5 c'est une mine d'or, j'y ai d'ailleurs passé l'après midi et en regardant "Le plus beau site HTML5 of the World" camen design, de prime abord, je me suis dit, tiens il y a un bug d'affichage, le texte est tronqué... je n'ai vu qu'après que le footer était fixe et que je pouvais faire défiler le texte avec la barre du navigateur...

Avec le tien, cela ne me l'a pas fait mais je trouve que ça fait quand même bizarre le texte qui chevauche "un peu" le footer.

Sinon, je n'aime pas trop non plus les premières lettres "penchés" du menu, je ne vois pas trop ce que ça amène de plus et pourquoi mettre le a de "A propos" en majuscule alors que le reste est en minuscule.

J'aimais bien aussi la texture de fond et le quadrillage blanc de Normandie Web présent sur ton blog

Il y a des petits soucis d'affichage sur un iPhone (iOS4). Peut-être des éléments en position fixe.

Une mine d’or cilou ? Pour moi c’était plutôt aller au charbon et il y eut pas mal de coup de grisous avant que je sorte quelque chose de convenable avec un balisage correct.

Tu parles de camen design dont le code est véritablement stupéfiant. Krok Camen est une espèce de génie avec des idées tout à fait novatrices. J’ai beaucoup appris en le lisant. En particulier l’utilisation de <html> et de <body> comme conteneurs.

J’ai supprimé à l’instant le 1er caractère en italique du menu. Tu avais raison : cela n’apportait rien.

Maintenant tu sembles me dire que tu préférais cette version du design.
Il va falloir que je fasse un sondage alors parce que celle-ci n’avait pas plut.

C’est terrible le design quand même !

@ Patidou
dont je viens de prendre connaissance du message.
Ah oui tiens. C’est curieux. J’avais testé avec cet émulateur sans constater de problème.
N’ayant aucun téléphone portable il va falloir que je trouve une solution pour tester le blog sous différents moteurs et OS de mobiles. Pour le moment je n’ai pas trouvé un service en ligne proposant d’émuler tous.

Marche pas terrible l'émulateur, mon site s'affiche comme sur un ordi.

Il y a déjà les versions desktop de Opera Mobile et Firefox Mobile. Peut-être que le navigateur dans Android est dispo en version desktop ou alors une machine virtuelle android, c'est celui qui est le plus proche de Safari Mobile.

Bonjour,
dans l'ensemble c'est assez propre mais comme déjà dit bien trop austère et le fond brun y participe.

> L'interface utile n'est pas centrée.
> Attention à ne pas réduire l'interlettrage excessivement (les lettres se touchent), surtout si c'est écrit en minuscule ou en lettre capitale avec une typo serif comme ici.
> Les cadres dégradés entourant les photos alourdissent l'ensemble et nuisent par conséquent à la mise en valeur des photos.
> Il manquerait un bouton rechercher (ou une loupe) au niveau du champ de recherche pour le rendre plus signifiant.
Modifié par Hermann (26 Aug 2010 - 13:29)

Bonjour

Sventovit a écrit :
Une mine d’or cilou ? Pour moi c’était plutôt aller au charbon et il y eut pas mal de coup de grisous avant que je sorte quelque chose de convenable avec un balisage correct.

Pour moi, débutante en html5, je trouve tes explications très utiles et compréhensibles

Sventovit a écrit :
Tu parles de camen design dont le code est véritablement stupéfiant...

Effectivement, son code est très intéressant et mettre le header en footer niveau visualisation, je n'y aurais jamais pensé... après, si ça ne passe pas sur les mobiles...

Pour ton autre version, je ne suis pas une pro du graphisme... alors à prendre pour ce que ça vaut

Bon courage

Bonjour Hermann

* L'interface utile n'est pas centrée.
-> Allons bon ! Avec quel moteur ? Je centre comme tu as peut-être pu le voir avec le conteneur html pour me passer d’un wrapper sous la forme d’une div. Peut-être que certains navigateurs l’interprètent mal. Mais de mon côté même avec IE ça passe.

> Attention à ne pas réduire l'interlettrage excessivement (les lettres se touchent), surtout si c'est écrit en minuscule ou en lettre capitale avec une typo serif comme ici.
-> Corrigé

* Les cadres dégradés entourant les photos alourdissent l'ensemble et nuisent par conséquent à la mise en valeur des photos.
-> Hum... un effet CSS3 superfétatoire nuisant déjà à Opera qui ne l’affiche pas ! J’envisageais déjà de le changer pour un cadre uniforme de couleur marron claire.
C’est en ligne maintenant : si tu as la gentillesse de repasser tu me diras si c’est plus seyant.

* Il manquerait un bouton rechercher (ou une loupe) au niveau du champ de recherche pour le rendre plus signifiant.
-> Il y a 2 icônes en fait : une loupe (ferré à gauche) et une flèche (à droite) invisible tant qu’on n’entre pas dans le champ. Elle apparaît lors du focus.
Mais si ça marche avec FF et Opera, avec Safari et Chrome je m’épuise à essayer de comprendre pourquoi la loupe ne s’affiche pas.

@ Tous
Merci beaucoup pour vos remarques, critiques et conseils. Je suis très touché et reconnaissant.

@ cilou qui n’est pas une pro du graphisme.
Moi non plus et ça se voit.

Patidou a écrit :
Marche pas terrible l'émulateur, mon site s'affiche comme sur un ordi.

Il y a déjà les versions desktop de Opera Mobile et Firefox Mobile. Peut-être que le navigateur dans Android est dispo en version desktop ou alors une machine virtuelle android, c'est celui qui est le plus proche de Safari Mobile.

Je vais regarder cela de très très près. Mon autre blog reçevant près de 25% de visites depuis des mobiles, il faut être fou pour faire l’impasse sur des bugs d’affichage sur ces terminaux...
Modifié par Sventovit (26 Aug 2010 - 15:14)

Sventovit a écrit :

-> Allons bon ! Avec quel moteur ?

J'ai pas regardé ton code mais mieux vaut centrer le body que l'élément racine dont le statut est un peu particulier. Ce n'est pas centré sur Gecko en 1680px de large

Sventovit a écrit :

J’envisageais déjà de le changer pour un cadre uniforme de couleur marron claire.
C’est en ligne maintenant : si tu as la gentillesse de repasser tu me diras si c’est plus seyant.

Je ne vois plus la serie de photos.

Sventovit a écrit :

-> Il y a 2 icônes en fait : une loupe (ferré à gauche) et une flèche (à droite) invisible tant qu’on n’entre pas dans le champ. Elle apparaît lors du focus.

C'est une erreur, dans une approche conventionnelle du mode d'interaction, tout élément d'interface devrait être compréhensible et identifiable sans avoir à interagir dessus.
Modifié par Hermann (27 Aug 2010 - 14:28)

Hermann a écrit :

J'ai pas regardé ton code mais mieux vaut centrer le body que l'élément racine dont le statut est un peu particulier. Ce n'est pas centré sur Gecko en 1680px de large

Pour être particulier ça l’est. C’est en fait mon footer que je dois revoir.

Hermann a écrit :

Je ne vois plus la série de photos.

Elles sont là

Hermann a écrit :

C'est une erreur, dans une approche conventionnelle du mode d'interaction, tout élément d'interface devrait être compréhensible et identifiable sans avoir à interagir dessus.

Euh? Une boîte de saisie avec écrit dedans « Rechercher » n’est pas assez signifiant tu trouves ?
On est en HTML5 avec :

placeholder="Rechercher..."

qui s’affiche en Wekkit mais pas encore avec FF.

Sventovit a écrit :

Euh? Une boîte de saisie avec écrit dedans « Rechercher » n’est pas assez signifiant tu trouves ?
On est en HTML5 avec :

placeholder="Rechercher..."

qui s’affiche en Wekkit mais pas encore avec FF.

Et comme je suis sur FF je ne le vois pas

Pour les photo c'est mieux mais le cadre est presque invisible.

Le gris est encore très austère. Pourquoi ne pas choisir une couleur plus lumineuse et gaie?

Hermann a écrit :

Et comme je suis sur FF je ne le vois pas

Ah ! ces geeks !

Hermann a écrit :

Pour les photo c'est mieux mais le cadre est presque invisible.

Le gris est encore très austère. Pourquoi ne pas choisir une couleur plus lumineuse et gaie?

Ta visite de Garennes sur Eure sera couleur des volets de ma maison : rouge basque (ou chorizo, c’est selon).

La page d’accueil de Normandie Web est faite.
À part le blog qui va se nourrir à mon clavier il n’y aura pas grand chose d’autre.