[amateur] nouveau design pour mon site

(reprise du message précédent)

Salut,

Moi je trouve l'idée très bonne, la réalisation aussi.
J'ai pas trop le temps de regarder maintenant mais je repasserai, néanmoins :
- lorsque je resize ma window, j'ai une action de media queries à un moment, le slider du haut disparaît. En resizant encore, je m'attends à un second allègement, alors que le site revient sur sa version initiale. Pourquoi avoir mis un range comme cela ?
- tu pourrais, sur la page d'accueil, faire un transition: all pour les media queries comme cela les bordures changeront doucement de couleur, tout comme la teinte de l'image.
- je ne suis pas convaincu par les polices utilisées ... as-tu regardé sur Font-Squirrel ? Moi j'aime bien "Classic", qui rend très bien, et "Droid Serif", plus connue, mais pas mal non plus.
- j'aime bien dans la page test le "vous n'utilisez pas IE ... bravo !"
- je n'aime pas trop le passage des liens de l'orange au vert avec une underline au hover ... pourquoi ne pas mettre une transition css3 et quelque chose de plus soft qu'orange à vert ? Si ton problème est celui de l'accessibilité, ne t'en fais pas, quelque chose de plus soft n'aura pas d'effet néfaste.
- je trouve que tu devrais augmenter la line-height des ul de ton footer, les liens sont un peu trop collés verticalement.
- le letter-spacing de la toute dernière ligne de la page est trop grand, et moi j'aurais plutôt vu une petite phrase en Verdana 10px, c'est plus classique pour un copyright ...
- pourquoi ne pas faire un truc un peu plus marrant en footer ? Du genre "Merci de votre visite, allez dans la paix du Christ." ?
- on ne voit pas très bien le texte sur les photos dans le slider ...
- et je dois avouer, au risque de me répéter, que je n'aime pas les polices en font-face ...

Voilà

Bonne continuation, et n'hésite pas à me contacter si tu as besoin d'aide, j'aime beaucoup ton projet !

Bonjour Stephanelam,

Stephanelam a écrit :
- lorsque je resize ma window, j'ai une action de media queries à un moment, le slider du haut disparaît. En resizant encore, je m'attends à un second allègement, alors que le site revient sur sa version initiale. Pourquoi avoir mis un range comme cela ?

Je l'ai remarqué aussi : c'est un bug que je n'arrive pas à corriger, pourtant les conditions que j'utilise me paraissent normale... J'utilise les media queries à la fin de ma feuille de style comme ceci :

@media only screen and (max-width:1000px) and (orientation:landscape)

... et je voulais faire la même chose avec un max-width à 750px mais pour l'instant je n'y arrive pas.

À terme, et pour prendre en considération ce qui a été dit par ici même, je mettrais une condition pour faire sauter le slide quand l'écran ne sera pas assez haut (un "max-height", ou encorce mieux : un "device-height" ? à essayer).

Stephanelam a écrit :
- tu pourrais, sur la page d'accueil, faire un transition: all pour les media queries comme cela les bordures changeront doucement de couleur, tout comme la teinte de l'image.

Merci, je n'y avais pas pensé.

Stephanelam a écrit :
- je ne suis pas convaincu par les polices utilisées ... as-tu regardé sur Font-Squirrel ? Moi j'aime bien "Classic", qui rend très bien, et "Droid Serif", plus connue, mais pas mal non plus.

Tu n'es pas le seul... je vais songer sérieusement à changer les fonts, de toute manière la font des titres (que j'aime pourtant beaucoup) n'est pas compatible avec certains caractères latins (genre æ, œ, etc...). J'ai déjà un max de police Font-Squirrel placé dans un dossier de mon thème, elles n'attendent qu'à être employées...

Stephanelam a écrit :
- je n'aime pas trop le passage des liens de l'orange au vert avec une underline au hover ... pourquoi ne pas mettre une transition css3 et quelque chose de plus soft qu'orange à vert ?

J'avais voulu imiter Alsacreations dans d'autres couleurs... mais depuis que j'ai découvert les surbrillances avec jQuery je vais uniformiser tout ça.

Stephanelam a écrit :
- je trouve que tu devrais augmenter la line-height des ul de ton footer, les liens sont un peu trop collés verticalement.
[...]
- pourquoi ne pas faire un truc un peu plus marrant en footer ? Du genre "Merci de votre visite, allez dans la paix du Christ." ?

Comme je te le disais sur ton topic, le footer de ton site m'inspire. Je vais donc réfléchir pour produire un footer plus original, mais j'ai d'autres choses à modifier avant. Voilà pour le côté technique... pour le côté original, ce n'est pas trop mon tempérament mais pourquoi pas ? À voir...

Stephanelam a écrit :
- le letter-spacing de la toute dernière ligne de la page est trop grand, et moi j'aurais plutôt vu une petite phrase en Verdana 10px, c'est plus classique pour un copyright ...

Moi j'aime bien...

Stephanelam a écrit :

- on ne voit pas très bien le texte sur les photos dans le slider ...
- et je dois avouer, au risque de me répéter, que je n'aime pas les polices en font-face.

Je sais que l'on ne vois pas bien le texte sur le slide, à terme je supprimerais ce script, ou alors je le déplacerais.

Merci pour ton commentaire, n'hésite pas à me faire des suggestions, c'est mon premier thème. A+
Modifié par Olivier C (29 Oct 2011 - 10:19)

Zed1 a écrit :
- je regarde ton site à partir de mon portable (1366*768) et pour chaque page, il faut que je scroll pour voir le contenu de la page. C'est rapidement fatiguant et énervant.
Si tu souhaites vraiment garder ton slider d'images sur toutes les pages, profites-en pour afficher du contenu propre à la page concernée...

Merci pour cette remarque. J'ai opté pour les deux suggestions :

- désormais le slide affichera une thématique en lien avec l'article ou, par défaut, en lien avec la catégorie. C'est à mon avis le changement le plus important sur mon site de ces derniers temps.

- pour les écrans petit en hauteur il y a désormais une disparition du slide en dessous de 760px que je rends possible par une condition media queries "max-height". On aurait pu choisir aussi "device-height" mais si une personne veut voir le site juste en réduisant la taille de son navigateur en hauteur...
Modifié par Olivier C (29 Oct 2011 - 11:09)

Salut,

Je vais être bref, c'est qu'une opinion d'utilisateur et non de pro. Je trouve le site agréable, mêlant technique et esthétique. Beau boulot à mon goût.

Bon courage.

Olivier C a écrit :
J'utilise les media queries à la fin de ma feuille de style comme ceci :

@media only screen and (max-width:1000px) and (orientation:landscape)

... et je voulais faire la même chose avec un max-width à 750px mais pour l'instant je n'y arrive pas.

Je t'avais, pourtant, bien dit d'utiliser la media query orientation: landscape avec parcimonie. En consultant ton site avec un iPad, j'obtiens une mise en page adaptée en mode paysage, mais pas en mode portrait (barre de défilement horizontale et mise en page pour écran classique).

Pour ton problème, rien ne t'empêche d'enchaîner les règles @media les unes à la suite des autres, y compris pour appeler une nouvelle media query.

Victor BRITO a écrit :
Je t'avais, pourtant, bien dit d'utiliser la media query orientation: landscape avec parcimonie.

Et oui Victor. C'est à dire que pour l'instant je n'ai pas encore mis en œuvre toutes les recommandations que l'on m'a proposé... et pas du tout les vôtres (!). Mais ça va venir : j'étais occupé (et fasciné) par le remplacement et la mise en place d'images dans le header, personnalisée pour chaque page du site. Cela suite à la mise en place d'un simple bout de code php, estampillé WordPress, permettant de charger des images, de les recouper en plusieurs format dans une taille prédéfinie, et au final de les "smush.iter" automatiquement...

Mais il ne saurait être question de passer à côté de vos précieux conseils (d'ailleurs des conseils je ne demande que ça) ! Je les mettrais en application dès que j'aurais le temps (et les neurones !) suffisant pour les mettre en application.

Bien à vous

Édit : c'est fait !
Modifié par Olivier C (30 Oct 2011 - 23:30)

Je viens de faire une nouvelle mise à jour :

Le site s'affiche désormais en fonction de la résolution : normal, tablet, mobile, et light height (entre autre chose le slider s'escamote pour les petites résolutions d'écran en hauteur). Amusez-vous à tester en jouant sur la taille de la fenêtre de votre navigateur (ou mieux : sur un tel mobile)... et donnez votre avis !

Merci à Victor pour ses conseils sur les media queries.
Modifié par Olivier C (01 Nov 2011 - 03:51)

Tes hover sont beaucoup mieux mais tu as plus d'erreurs notamment des li sans ul

jmlapam a écrit :
Tes hover sont beaucoup mieux mais tu as plus d'erreurs notamment des li sans ul

Ah ! Je ne suis pas repassé par la casse Validator... Merci, je vais aller voir ça.
Modifié par Olivier C (30 Oct 2011 - 17:24)

@ Victor : Je viens seulement de mettre à jour une partie de vos conseils, merci pour ces derniers, je les ai trouvé très pertinents. Donc :
- j'ai mis à jour ma hierarchie des titres, du coup j'ai aussi modifié un peu le design de certains d'entre eux
- la font principale du site a été changée, peut-être pas définitive, mais plus lisible je pense (les anciennes ont été critiquées par nombre d'entre vous)
- pour la gestion des @font-face, le problème est réglé
- les relicats de fonts définies en pixels ont été converties en "em"
- la media query "orientation:landscape" a été supprimée
- pour les déclarations de la langue grecque j'ai mis lang="grc" dans les balises p concernées, c'est bon ?

Pour le slider, je ne vais pas trop m'attarder dessus pour l'instant car je compte le remplacer pour que les liens des articles proposés dans le slide ne soient pas en dur : je vais penser un script compatible avec les loops WordPress. Pour le reste de vos conseils, ainsi que pour ceux des autres contributeurs de ce topic, je vais continuer à plancher.

En attendant, les uns les autres, n'hésitez pas à critiquer encore le site, notamment par rapport à l'expérience de navigation (Il y a désormais deux logiques de navigations bien différentiées). Merci à tous.
Modifié par Olivier C (09 Nov 2011 - 04:56)

Olivier C a écrit :
pour les déclarations de la langue grecque j'ai mis lang="grc" dans les balises p concernées, c'est bon ?

C'est ce qu'il faut faire. D'ailleurs, puisque tu codes en XHTML 1.0, n'hésite pas à doubler cet attribut lang="grc" de l'attribut xml:lang="grc". Et, si jamais plusieurs paragraphes consécutifs sont en grec, il convient dans ce cas de les regrouper dans un div, qui portera ces attributs lang et xml:lang (histoire de factoriser ).

Merci Victor.

Pour cette autre suggestion :

Victor BRITO a écrit :
* pour le formulaire de recherche, évite de masquer l'élément label avec display: none : les lecteurs d'écran comprennent, justement, cette déclaration CSS, et le mieux serait d'incorporer le h2 « Recherche » dans le formulaire et d'en faire l'élément label ;

Je ne suis pas très au clair avec les éléments de formulaire : J'ai imbriqué des balises h2 à l'intérieur des éléments label (sous WordPress la fonction de recherche est directement appelé par le CMS ; du coup, pour pouvoir ajouter les balises h2, je l'ai codé en dur) :

<label class="screen-reader-text" for="s"><h2>Rechercher</h2></label>

Faut-il au contraire mettre les labels au sein des h2 ? À moins qu'il ne faille simplement designer les labels comme des h2 sans rajout de balises de titre... Je me demande quelle est la bonne pratique ?
Modifié par Olivier C (09 Nov 2011 - 08:43)

L'élément label est un élément de type inline et ne peut donc contenir d'éléments de type block, comme h2 (d'ailleurs, le validateur du W3C retourne une erreur à ce sujet). Il faut donc englober l'élément label dans le h2, comme suit :

<h2><label class="screen-reader-text" for="s">Rechercher</label></h2>

Mince, une chance sur deux ! ... enfin pas tout à fait car je savais que les éléments h se comportaient comme des block, j'aurais dû réfléchir un peu plus.

Sinon la font principale est un peu épaisse pour le texte de base, je vais aller prospecter sur FontSquirrel pour la changer...

My 2 cents (note : je n'ai pas lu toutes les critiques précédentes donc un peu de redondance sans doute).

Le site est très sympa et le côté "sombre" le rend mystique.
- par contre difficile de comprendre rapidement de quoi il en retourne.
- des que nous avons passé la page de "home", on souhaiterait avoir du contenu a lire en direct mais ici, l'image en header prend trop de place sur les pages et donc nécessite de scroller.
- le résultat de la recherche est un peu perturbant car tune highlight pas le texte cherché dans le résultat.
- la photo du case "moderne" m'a perso choqué. Ce n'est pas en accord pour moi. Une autre image serait sympa.
- la police utilisée pour le sidebar de droite est surement originale pas pas trés lisible.
- j'ai testé le design sur mobile est .. ça fonctionne bien.

Bonne continuation

patmisc a écrit :
Le site est très sympa et le côté "sombre" le rend mystique.
- par contre difficile de comprendre rapidement de quoi il en retourne.

Hmmm... d'autres ont déjà fait cette remarque. Je pensais que la présentation en sidebar était suffisante... je verrais si je peux améliorer ça.

patmisc a écrit :
- des que nous avons passé la page de "home", on souhaiterait avoir du contenu a lire en direct mais ici, l'image en header prend trop de place sur les pages et donc nécessite de scroller.

Oui je sais : je me suis longtemps posé la question avant d'opter pour ce choix. J'ai opté pour un aspect visuel avec des images header liées aux articles. Je garde l'option pour l'instant, nous verrons bien...

patmisc a écrit :
- le résultat de la recherche est un peu perturbant car tune highlight pas le texte cherché dans le résultat.

Oui je comprends que ce choix peut-être discutable, mais j'avoue que j'y tiens (et j'ai eu d'autres avis qui contrebalancent le vôtre sur ce point) car à partir d'un certain nombre d'articles le résultat de recherche deviens vraiment fastidieux à utiliser si on laisse plus que le titre, le résumé n'est là que pour info rapide. D'ailleurs, ce résumé ne comporte que le début de l'article, pas l'emplacement des termes utilisés (je ne sais pas encore faire cela).

patmisc a écrit :
- la photo du case "moderne" m'a perso choqué. Ce n'est pas en accord pour moi. Une autre image serait sympa.

Heu??? je n'ai pas compris la remarque, vous pouvez préciser ?

patmisc a écrit :
- la police utilisée pour le sidebar de droite est sûrement originale pas pas très lisible.

Bon, je pense que vous avez raison. De toute façon la débauche de polices ce n'était pas bon : ce n'est pas parce qu'une chose est techniquement possible qu'il faut forcément la mettre en place. Je me limite donc désormais à deux fonts, plus deux supplémentaires appelées uniquement sur mes claviers en ligne grec et hébreu (ben oui : une vraie police en hébreu c'est la classe quand même ).

patmisc a écrit :
- j'ai testé le design sur mobile et .. ça fonctionne bien.

Merci pour le test sur mobile, comme je n'en ai pas j'avais codé en "aveugle" et je n'étais pas encore allé voir ce que cela pouvait donner (à la Fnac ! ).

Mise à jour du responsive design afin de garder les images des articles (auparavant je coupais le header pour les versions "tablet" et "mobile"). Le header a été légèrement modifié pour gagner un peu en hauteur.
Modifié par Olivier C (04 Dec 2011 - 23:42)

Salut, salut,

Déjà évitons de parler d'IE5 quand déjà IE6 nous paraît un ancêtre.
Pourquoi tu mets des role, tu es en strict là non? >> mets des rel plutôt

em c'est jamais que px * 10 non? Je suis pas sûr de celle-ci
Modifié par jmlapam (19 Dec 2011 - 12:07)

Iop

jmlapam a écrit :
em c'est jamais que px * 10 non? Je suis pas sûr de celle-ci sweatdrop

non en fait :

fvsch a écrit :
Cette unité, notée em, est appelée « cadratin » en typographie française. Historiquement, le cadratin correspond à la hauteur d'un caractère de plomb utilisé dans l'imprimerie.

et une petite lecture ^^

@gili: Merci, je l'avais pas lu celui-là pourtant j'abuse royalement de la lecture sur ce site...