Bonjour,

Après mon book que je vous ai soumis il y a un mois, voici ma seconde réalisation de site web :

http://www.cartelmatic.com/

Pour info c'est le site web ou je fais mon alternance pour ma dernière année d'études.

Vos critiques m’intéressent en vue de son amélioration! Smiley cligne

++
Modérateur
Bonjour, voilà une petite analyse succinte des choses à améliorer, sinon il y a aussi de bonnes choses Smiley cligne

couleurs: Vous avez trop fait la promo de Gray! globalement c'est très gris, avec pleins de variante qui ne sont finalement pas utilisées pour hiérarchiser/classer le contenu.
Du gris clair sur gris foncé, du gris plus foncé sur gris moyen, il y en a pour tous les goûts. Un peu trop même. Le texte en clair sur le gris moyen tramé, ça passe très vite l'envie de lire. Cela peut aller sur quelques titres, mais pour du paragraphe c'est problématique. Idem pour les lettrines (même pire) le passage de texte clair sur foncé à texte foncé sur clair sépare complétement la première lettre la suite. (On lit résentation au lieu de Présentation). En gros: restreindre les variantes et faire des choix, et utiliser les différences pour mettre en valeur le contenu. Le bleu pourrait être plus présent.

typo : Si tu utilises deux typos différentes, c'est de nouveau pour hiérarchiser ton contenu, or là on dirait que les choix ont été faits au petit bonheur la chance... Et si il est juste d'espacer un peu des textes en capitales, le texte du haut est beaucoup trop espacé, c'est assez horrible. Un ou deux pixels suffiraient. De plus cela rajoute un style différent qui n'a pas d'utilité.

mise en page générale: Ne pas différencier la page du fond perdu demande d'être plus stricts sur pleins de points de graphisme, c'est donc difficile et dans ce cas, pas atteint. La hiérarchie prends plus d'importance, chaque espace etc. Le bloc du menu a un peu l'air d'être posé gratuitement comme ça. Globalement, je vois trop de css3 pour pas assez de réflexion (bling-bling).

détails:
Il m'a fallu un moment avant de me rapprocher de mon écran pour voir que les pattes de mouches dans les petites mains étaient des logos twitter et facebouc.

Sous présentation, le menu en fixed passe par dessus le footer en scrollant...

"votre mail": votre e-mail ou votre courriel. (sans entrer dans un venredébat Smiley biggrin )

"En savoir [+]" Pourquoi des crochets autours du plus?
Modifié par kustolovic (24 Feb 2012 - 15:35)
Bonjour,

E lisant le site de la page "solutions pour e-tourisme", je n'ai pas pu m'empècher d'ajouter mentalement "de cimetière". Il faut absolument revoir les couleurs !
Merci je vais revoir qq petits trucs demain alors Smiley cligne

Oui en effet le site est assez "dark" Smiley ravi J'en suis conscient mais c'est une demande du client...
Salut,

Bah c'est GRAY quoi ...

Ce qui est plus gênant :
- on ne sait pas quelle est la page en cours
- les icônes des réseaux sociaux sont pas évidentes, on ne comprends pas tout de suite
- la page de contact est un peu destructurée
- tu as mis en fixed un sous-menu sur certaines pages mais quand on scrolle cela finit par se chevaucher avec le footer.
- la partie anglaise est inexistante, les icônes drapeaux sont un peu pixelisées
- les contrastes sont mal gérés.
- la page actu est pas top il y a des gros blanc, des photos trop grandes ou mal positionnées par rapport aux textes.
Smiley ohwell
Bonjour,

En raison d'une uvéite qui fait que mon oeil droit est intolérant à la lumière vive (donc aux pages blanches), j'ai désactivé les couleurs définis par le CSS des sites pour utiliser mes propres couleurs (fond gris foncé avec texte gris clair) sur tous les sites. Et donc chez moi, le header devient déstructuré avec cette config, tandis que si je réautorise les sites à utiliser leurs couleurs, le header redevient normal.

Voici une capture d'écran :
http://dl.dropbox.com/u/25752921/pb-display-prefcolours01.png
Salut,

- Le truc qui me semble à retravailler (enfin ça dépend l'importance que tu y accordes), c'est le code.

- Par exemple tu commences avec un h5 pour ensuite passé par un h1. De plus ton h1 tu l'as mis en majuscule, alors que CSS est fait pour ça.

- Tu n'as aucun attribut alt mentionné.

- Quand tu met la première lettre d'un mot en couleur tu utilises des <span> hors l'élément first-letter est là pour ça. De plus il me semble que les lecteurs vocaux lirons d'abord la première lettre et ensuite le reste du mot. Donc tu nuis à l’accessibilité de ta page uniquement pour du design.

- Tes formulaires n'ont ni de label ni de placeholder.

- Accès client ne sera pas lu par les navigateurs alternatif car c'est une image sans attribut alt. Hors tu aurais très bien pu mettre du texte et généré ta petite icône par CSS. Ici tu as tout mis en image seulement pour une petite icône.

- Sur la page références ton menu en fixed vient s'encastrer dans le contenu du footer pour les petites résolutions.

- Tu as des images de décorations qui sont dans le HTML.

- Les contrastes sont vraiment pas terribles.

Bref, si tu vises un sites un minimum accessible, il y a pas mal de points à revoir.

Graphiquement parlant tout à été dis. Ce qui me gène le plus c'est l'absence de rythme, et de grille. On dirait que les éléments flottent dans le vide.
Modérateur
Passer le footer par-dessus, avec un z-index.

Je ne vois pas trop d'autre solutions, sinon bricoler du js...
J'ai une question subsidiaire (je suis en train de bosser sur les bugs du site, j'ai enfin du temps à y consacrer)

Les vidéos Youtube (sur cette page : http://www.cartelmatic.com/references.php ) quand elles s’achèvent finissent sur une mosaïque de vidéos conseillés par Youtube. Le problème, c'est que je n'en veux pas car je veux éviter les propositions de vidéos d'ados boutonneux etc... Smiley lol

Il y a un moyen de virer ça?

Merci
Salut,

Il faut décocher l'option "afficher les suggestions de vidéos" dans l'interface de Youtube qui te permet de récupérer le code d'affichage de ta vidéo.
Sinon, il faut ajouter ?rel=0 tout à la fin de la valeur de l'attribut src de la balise iframe de ta vidéo.