Bonjour !
Je me lance (dans la fosse aux lions =D)

Voici mon site : Deezine.fr presque terminé, le code HTML/CSS est à épurer.

PageSpeed me note 87/100 et m'explique que je devrais :
PageSpeed a écrit :
Diffuser les ressources à partir d'une URL unique
Réduire la taille des ressources JavaScript
Différer l'analyse du code JavaScript
Exploiter la mise en cache du navigateur
Autoriser la compression
Spécifier une technique de mise en cache
Spécifier un jeu de caractères
Spécifier un en-tête "Vary: Accept-Encoding"
Supprimer les chaînes de requête des ressources statiques

Malheureusement, même si j'apprend vite, j'ai encore quelques lacunes avec ce genre de choses

CSS validator ne trouve pas (ne trouve plus) d'erreurs,
J'ai caché les "-moz,-o,-web" sur mon html avec du JS, un peu de la triche mais bon...

HTML validator me trouve une dizaine d'erreurs que je ne saurais résoudre...



A vos notes !
Modifié par lithiumsound (19 Jun 2012 - 10:03)
Salut,
Le site me plait bien. Les couleurs sont très reposantes, la typo des titres colle bien; ça forme un "tout" cohérent.
Par contre, le contenu est finalisé?

Il y a quand même 2 colonnes complètement vide dans "moi". Dans la partie portfolio, il y a un jolie slider mais on ne peut pas vraiment voir tes réalisations.

Ce serait bien aussi de t'attribuer un niveau sur chaque compétence. Smiley smile
Bonjour,
Les erreurs de HTML sont principalement dues au fait que tu n'as pas mis de guillemets pour les paramètres http-equiv et name...

Sinon quelques petites remarques :
-Je ne comprend pas pourquoi il y a un scrolling vertical quand on est sur le "dossier" contact...
-Les images de ton portfolio sont pixelisées, notamment au niveau des écritures...
-Pas de hiérarchisation, seul un h4 traîne...
-Les "alt" de tes images ne servent à rien du tout, 4 alt identiques pour 4 images différentes...

Et je suppose aussi qu'il manque du contenu?
David-Dante a écrit :
Salut,
Le site me plait bien. Les couleurs sont très reposantes, la typo des titres colle bien; ça forme un "tout" cohérent.
Par contre, le contenu est finalisé?

Il y a quand même 2 colonnes complètement vide dans "moi". Dans la partie portfolio, il y a un jolie slider mais on ne peut pas vraiment voir tes réalisations.

Ce serait bien aussi de t'attribuer un niveau sur chaque compétence. Smiley smile

Non le contenu n'est pas terminé, il manque encore les boutons pour les réseaux sociaux, les textes et quelques images, d'ou les colonnes vides

Pour le slider, tu penses qu'il est trop petit ?
Ou qu'il défile trop vite ?

Sylverdragon a écrit :
Bonjour,
Les erreurs de HTML sont principalement dues au fait que tu n'as pas mis de guillemets pour les paramètres http-equiv et name...

Sinon quelques petites remarques :
-Je ne comprend pas pourquoi il y a un scrolling vertical quand on est sur le "dossier" contact...
-Les images de ton portfolio sont pixelisées, notamment au niveau des écritures...
-Pas de hiérarchisation, seul un h4 traîne...
-Les "alt" de tes images ne servent à rien du tout, 4 alt identiques pour 4 images différentes...

Et je suppose aussi qu'il manque du contenu?


J'ai carrément zappé les guillemets :\

Pour le dossier contact, j'ai préféré mettre un scrolling des le départ, sinon quand on clique sur un des onglet la page s'allonge et ça fait un décalage brusque a cause de la barre de défilement qui apparaît.

Les images du portfolio sont pixelisés a cause du format Jpg non ?
J'ai peut-être un peu forcé sur la compression...

Pour la hiérarchisation c'est pas faux, j'ai complètement oublié de reprendre ce point :\

Les Alt identique sont provisoires, tout comme les colonnes vides






Merci pour vos avis =)
Je vais en tenir compte et corriger ça tout de suite
Modifié par lithiumsound (20 Jun 2012 - 09:49)
Modérateur
Bonjour,

Je trouve que pour un graphiste, les finitions sont pas mal bâclées,
Tu as notamment d'énormes problèmes typographiques:

- Tu as choisi une police qui ne gère pas les accents, et donc tu as enlevé les accents de tes textes pour éviter des remplacements de caractères disgracieux. Il faudrait plutôt choisir une police de meilleure qualité, que de rajouter volontairement des fautes.
- Interlignage de 1, beaucoup trop faible. Cette typo nécessite au moins 1.3
- Les puces sont beaucoup trop collées au texte.
- Impossible d’agrandir le texte. Les (fausses)boîtes sont de taille fixe.
- Le texte justifié, provoque sur cette largeur des espaces atroces.
- Le textes de tes onglets sont des background-images sur des spans vides. Pour l'accessibilité, il faudrait que ce soit des images (img). Comme c'est la même typo que tu as en font-face, tu peux simplement les mettre en texte.
- La police n'ayant pas de gras, "9 Avenue General de Gaulle, 13410 Lambesc" est rendue en faux-gras, pas joli-joli.
On arrive sur le site : un formulaire de contact, une adresse. Aucune idée de quoi ça parle, pas de titre, pas de logo, même pas une balise title. Ton nom apparait 4 fois dans le code source dans des balises meta complètement inutiles et pas une seule fois sur le site.

La navigation est buguée : clique moi puis sur contact, ça ouvre l'onglet portfolio.

Le code est rempli de trucs inutiles : des meta à profusion qui ne servent à rien, des div et des span vides à gogo.

Le lien vers jquery devrait se faire depuis un CDN, pas depuis jquery.com en plus charger la dernière version automatiquement c'est le meilleur moyen de se retrouver un beau matin avec un site cassé.

Niveau sémantique c'est le vide totale. Pas de titre, pas de hiérarchie dans la page. Que des divs, spans et p. Des liens qui ne servent à rien (dans le slider) avec un attribut href faux.

Aucun message et aucune indication quand on soumet le formulaire de contact.

Une grosse bidouille foireuse et inutile pour valider la feuille de style : franchement j'avais encore jamais vu ça.

Bon sinon c'est joli. Smiley smile
kustolovic a écrit :
Bonjour,
Je trouve que pour un graphiste, les finitions sont pas mal bâclées,
Tu as notamment d'énormes problèmes typographiques:

- Tu as choisi une police qui ne gère pas les accents, et donc tu as enlevé les accents de tes textes pour éviter des remplacements de caractères disgracieux. Il faudrait plutôt choisir une police de meilleure qualité, que de rajouter volontairement des fautes.
- Interlignage de 1, beaucoup trop faible. Cette typo nécessite au moins 1.3
- Les puces sont beaucoup trop collées au texte.
- Impossible d’agrandir le texte. Les (fausses)boîtes sont de taille fixe.
- Le texte justifié, provoque sur cette largeur des espaces atroces.
- Le textes de tes onglets sont des background-images sur des spans vides. Pour l'accessibilité, il faudrait que ce soit des images (img). Comme c'est la même typo que tu as en font-face, tu peux simplement les mettre en texte.
- La police n'ayant pas de gras, "9 Avenue General de Gaulle, 13410 Lambesc" est rendue en faux-gras, pas joli-joli.


-Pour la police je comprend pas pourquoi je me retrouve avec un fichier sans accents, pourtant la police de base contient tout un tas de caractères (voir) j'ai peut-etre mal choisi les fichiers ou le type de telechargement...

-Je n'ai pas défini d'interlignage, donc dans ce cas la c'est l'interlignage auto qui s'affiche non ?

-Pour la taille des boites c'est normal je ne compte pas revenir sur la taille du texte

-Pour les onglets background j'ai préféré utiliser des images plutôt que du texte par rapport à l'ombre et au petit logo,
si j'utilise text-shadow ça ne marche pas sous ie. Ok pour la balise span, je prend note.

-La police n'a pas de gras en effet, j'ai préféré ne pas utiliser toute une multitude de fichiers pour gérer la police, je trouve que c'est déjà assez lourd, 105ko en comptant les 4 formats de fichiers, je vais plutôt me contenter d'enlever le gras sur ce texte.


jb_gfx a écrit :
On arrive sur le site : un formulaire de contact, une adresse. Aucune idée de quoi ça parle, pas de titre, pas de logo, même pas une balise title. Ton nom apparait 4 fois dans le code source dans des balises meta complètement inutiles et pas une seule fois sur le site.

La navigation est buguée : clique moi puis sur contact, ça ouvre l'onglet portfolio.

Le code est rempli de trucs inutiles : des meta à profusion qui ne servent à rien, des div et des span vides à gogo.

Le lien vers jquery devrait se faire depuis un CDN, pas depuis jquery.com en plus charger la dernière version automatiquement c'est le meilleur moyen de se retrouver un beau matin avec un site cassé.

Niveau sémantique c'est le vide totale. Pas de titre, pas de hiérarchie dans la page. Que des divs, spans et p. Des liens qui ne servent à rien (dans le slider) avec un attribut href faux.

Aucun message et aucune indication quand on soumet le formulaire de contact.

Une grosse bidouille foireuse et inutile pour valider la feuille de style : franchement j'avais encore jamais vu ça.

Bon sinon c'est joli. Smiley smile




C'est vrai qu'en y réfléchissant l’onglet contact en premier plan ça le fait pas...
Tu me conseillerais quel ordre pour les onglets ? "moi" affiché d'office, puis "portfolio" et "contact" cachés ?
Pour les balises meta, quelles sont celles que je devrais supprimer ?

Contact ouvre volontairement l'onglet portfolio, étant donné que contact n'a rien a ouvrir.
en gros, "moi" ouvre "moi", "portfolio" ouvre "portfolio", "contact" ouvre "portfolio".
J'ai fait ça pour simplifier la navigation, mais si ça parait buggé je vais peut être supprimer ça :\

Aucun message et aucune indication quand on soumet le formulaire de contact parce que j'ai foiré le code,
la version fonctionnele n'est pas en ligne.

C'est pas comme ça qu'on fait pour la feuille de style ? =D
Qu'est ce qui pose probleme avec ça ?










Merci pour les critiques en tout cas, ça va beaucoup m'aider, je vais corriger tout ça et vous verrez le résultat demain =)
Salut,

C'est très esthétique, le design est fin et élégant.
En revanche c'est pas du clair.
Le formulaire ne fonctionne pas ou alors mal. Rien à la validation.
Pas de lien vers les réalisations.

Donc à améliorer et étoffer mais je trouve que c'est une belle base.

Commencer par indiquer ton nom serait un début Smiley smile
lithiumsound a écrit :

C'est vrai qu'en y réfléchissant l’onglet contact en premier plan ça le fait pas...
Tu me conseillerais quel ordre pour les onglets ? "moi" affiché d'office, puis "portfolio" et "contact" cachés ?


J'aurais bien vu un onglet de présentation plus classique qui explique brièvement qui tu es et qu'est ce que ce site.

lithiumsound a écrit :

Pour les balises meta, quelles sont celles que je devrais supprimer ?


La seule meta obligatoire c'est celle qui définie le charset. Donc déjà celle la tu la gardes. Elle doit toujours apparaitre en première position dans ton head (comme tu as fais donc). Ensuite tu peux garder description, elle est utilisée, entre autre, pour afficher un texte dans les résultats de moteur de recherche.

Toutes les autres ne servent à rien et peuvent être supprimées sans regret.

Par contre tu n'as pas de balise <title> dans ton head et ça c'est très mal. Smiley smile Pense à en ajouter une et à lui donner un contenu explicite du genre : "Portfolio de Thibault Calabrese, graphiste et webdesigner".

lithiumsound a écrit :

Contact ouvre volontairement l'onglet portfolio, étant donné que contact n'a rien a ouvrir.
en gros, &quot;moi&quot; ouvre &quot;moi&quot;, &quot;portfolio&quot; ouvre &quot;portfolio&quot;, &quot;contact&quot; ouvre &quot;portfolio&quot;.
J'ai fait ça pour simplifier la navigation, mais si ça parait buggé je vais peut être supprimer ça :\


Oui ça rend la navigation confuse, et ça m'a clairement fait penser à un bug dans ton script.

lithiumsound a écrit :

C'est pas comme ça qu'on fait pour la feuille de style ? =D
Qu'est ce qui pose probleme avec ça ?


Les propriétés qui utilisent des préfixes vendeurs apparaissent comme des erreurs ou des avertissements (c'est paramétrables dans les options du validateurs) afin de rappeler que ce ne sont pas de propriétés standards et qu'on doit les utiliser en connaissance de cause. C'est pas pour autant que ta feuille de style est invalide parce que tu les utilises. Garde en tête que certaines erreurs comme celle là n'ont pas d'importance et sont affichées juste à titre d'indication. Mais surtout, pense, que le validateur est juste un outil et que ce n'est pas une fin en soi d'avoir 0 erreurs affichées quand tu valides tes CSS, l'important est que tu saches ce que tu fais.
Modifié par jb_gfx (21 Jun 2012 - 18:41)
Modérateur
lithiumsound a écrit :


-Pour la police je comprend pas pourquoi je me retrouve avec un fichier sans accents, pourtant la police de base contient tout un tas de caractères

En effet la police a bien ces accents, mais ni celle utilisée ni ton texte n'en ont!
lithiumsound a écrit :

-Je n'ai pas défini d'interlignage, donc dans ce cas la c'est l'interlignage auto qui s'affiche non ?

Tu as bien un line-height: 1 sur ton body. De plus, l'interlignage auto, ca n'existe pas...
lithiumsound a écrit :

-Pour la taille des boites c'est normal je ne compte pas revenir sur la taille du texte

Toi pas, mais peut-etre les utilisateurs.
Merci pour vos conseils =)
Je prend tout ça en compte, je vais réécrire tout le code.

Avant ça encore quelques question:

-je me suis servi de balises SPAN pour faire mes boutons (contact, portfolio, moi),
je me suis servi du fichier css pour l'animation des background.
Apparemment ça pose problème. pourquoi ?
Comment faire autrement ?
balise IMG et donc pas de background css pour le bouton ?
pas de sprites + "background-position" ?
est-ce vraiment mieux ?

-a propos des DIV vides, même problème.
pourquoi est-ce que ce n'est pas correcte ?
par quoi les remplacer ?




Est-ce correcte pour les boutons ? :
<h2 class="popular"><img src="img-sprite.png" alt="" />Featured</h2>
<h2 class="featured"><img src="img-sprite.png" alt="" />Popular</h2>


h2 {
	overflow: hidden;
	position: relative;
	height: 50px;
	width: 200px;
}
h2 img {
	position: relative;
}
h2.popular img {
	top: -100px;
}
h2.featured img {
	top: -200px;
}

Modifié par lithiumsound (22 Jun 2012 - 12:06)