3247 sujets

Critiques de vos sites: code et design

[amateur] nouveau design pour mon site

Pages :
EDIT du 11/11/2013 : nouveau design pour mon site.

Le lien : Christus

J'ai codé le css/html de manière modulaire, dans le but d'être réutilisable à la manière d'un framework, que je peux réutiliser en fonction de mes besoins.

Parmi les nouveautés les plus importantes :
- respect d'une mise en page verticale,
- stylage par défaut de tous les éléments html possibles (mais pour certaines balises, comme audio et video, ce n'est pas encore effectif),
- ajout d'onglets js et de graphs full css (mais je pense que je vais remplacer ces derniers par du SVG).

L'api est ici : Scriptura.

Je veux bien un retour sur le code et sur le design (celui que vous voyez est celui par défaut).

PS : J'ai laissé tomber le support IE8, au moins pour l'instant. (édit : désormais IE8 ready. Mais pas pour toutes les fonctions of course...)
Modifié par Olivier C (26 Nov 2013 - 07:00)
Salut,

Rapidement (site consulté depuis un mobile, avec Opera Mobile) :
* en mode paysage, la mise en page montre une adaptation au mobile, ce qui n'est, en revanche, pas le cas en mode portrait ;
* il faudrait améliorer le contraste entre le texte et certains arrière-plans sombres ;
* il faudrait augmenter la taille de police pour un meilleur confort de lecture sur un mobile.

À l'occasion, je compléterai ma critique.
Salut attention tu as quelques erreurs sur tes pages, principalement des "role" rajoutés à des balises. Smiley langue
J'adore le style, tout à fait en accord avec l’iconographie religieuse Smiley smile . C'est très sobre, en revanche les hover pourraient être lumineux au lieu d'être sombres mais c'est un point de vue personnel.

Le slider de la page d'accueil est très peu lisible. Smiley ohwell

Globalement, je trouve cela à la fois travaillé et réussi.
Suite de ma critique :
* 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 ;
* il vaut mieux utiliser avec parcimonie la media query orientation: landscape : une page Web peut être consultée en mode portrait sur un mobile et, plus encore, sur une tablette ;
* évite de fixer la taille de police en pixels : IE refuse d'agrandir le texte sous une telle condition ;
* la hiérarchie des titres de la page d'accueil n'est pas pertinente : les h3 et h4 sont, en fait des h2 (ils ne dépendent pas du titre « Recherche »), à vérifier également sur les autres pages ;
* pas besoin d'alourdir le code HTML du caractère | et d'un élément span pour créer un séparateur : l'affichage en CSS d'une bordure latérale, allié à un espacement adéquat, suffit ;
* pour une citation présentée de façon isolée, il faut employer l'élément blockquote, et non l'élément textarea ;
* attention aux liens vides du slider ;
* ne pas oublier de signaler tout changement de langue : je pense notamment aux textes du Nouveau Testament affichés en grec ancien (le code langue pour le grec ancien est "grc", soit dit en passant).

Quant à ton souci avec @font-face, l'usage communément admis consiste à déclarer deux fois dans la règle @font-face la propriété CSS src, la première déclaration ne contenant que l'appel au fichier au format EOT (cf. les exemples de code CSS fournis avec le téléchargement des polices hébergées par Fontsquirrel).
Victor BRITO a écrit :
Rapidement (site consulté depuis un mobile, avec Opera Mobile) :
* en mode paysage, la mise en page montre une adaptation au mobile, ce qui n'est, en revanche, pas le cas en mode portrait.

Oui, je viens de remarquer cela aujourd'hui même. La version mobile du site est au stade expérimental. Comme je n'ai pas de mobile pour faire des essais je ne me suis pas encore penché sérieusement sur les media queries : je code à l'aveugle ! Mais je vais m'y intéresser sous peu car j'aime bien cette idée du web déservant un contenu adapté à des médias divers.
jmlapam a écrit :
attention tu as quelques erreurs sur tes pages, principalement des "role" rajoutés à des balises.

Oui, les même erreurs à la validation que pour le site Alsacreations... Je ne sais pas si c'est important ou non de garder ces balises pour Google, après tout je me dis que Alsacreations les garde ? La question ne se posera sans doute plus avec le HTML5 et ses balises dédiées...
jmlapam a écrit :
Le slider de la page d'accueil est très peu lisible.

Oui, j'ai travaillé sur un Mac et pour le rendu des polices c'est la nuit et le jour, mais sur ce point j'ai remarqué que ce sont surtout les navigateurs qui font la différence. Je prévoie de cibler les navigateurs afin de leur servir un weight différent pour les fonts au niveau du css. Auparavant je vais essayer de résoudre mon problème lié à @font-face sous IE.
Modifié par Olivier C (27 Oct 2011 - 02:10)
Bonjour, quelques commentaires vites fait :
1- tu es certain de l'orthographe de saint Jean ? J'écrirais plutôt Saint Jean.
2- Quand on arrive sur la page d'accueil, on ne sait pas trop de quoi traite le site. Un baseline aiderait. Je comprends qu'avec le titre "Chritus" ça paraît évident pour certains mais pas tous.
3- L'image sur la page "À propos" et "Contact" prend, selon moi, trop d'importance. Elle pourrait être plus petite et aussi flotter à droite et laisser le texte prendre de l'importance. Même chose pour le formulaire de contact. Il faut dérouler pour le voir.

Voili Smiley smile
Mabelle a écrit :
1- tu es certain de l'orthographe de saint Jean ? J'écrirais plutôt Saint Jean.

Les deux sont possibles...
Mabelle a écrit :
2- Quand on arrive sur la page d'accueil, on ne sait pas trop de quoi traite le site. Un baseline aiderait. Je comprends qu'avec le titre "Chritus" ça paraît évident pour certains mais pas tous.

Effectivement, à l'origine la page d'accueil avait une colonne à droite, comme sur les autres pages, avec une explication sommaire renvoyant à la page "à propos". Peut être devrais-je renvoyer ce mot dans le footer ?
Mabelle a écrit :
3- L'image sur la page "À propos" et "Contact" prend, selon moi, trop d'importance. Elle pourrait être plus petite et aussi flotter à droite et laisser le texte prendre de l'importance. Même chose pour le formulaire de contact. Il faut dérouler pour le voir.

C'est exact, je songeais depuis longtemps à les supprimer ou les déplacer, vous confirmez cette intuition, c'est donc chose faite. La page de téléchargement suivra le mouvement, mais de toute façon celle-ci doit être revue en profondeur.

Merci à vous
Modifié par Olivier C (27 Oct 2011 - 01:49)
Mabelle a écrit :
tu es certain de l'orthographe de saint Jean ? J'écrirais plutôt Saint Jean.

S'il s'agit d'évoquer le saint en question, on écrit saint tout en minuscules. C'est pour les toponymes, les lieux de culte et l'évocation de la fête, en revanche, que Saint prend une majuscule et est suivi d'un trait d'union (exemples : la gare Saint-Jean à Bordeaux, les feux de la Saint-Jean, l'église Saint-Jean).
Victor BRITO a écrit :
en revanche, que Saint prend une majuscule et est suivi d'un trait d'union (exemples : la gare Saint-Jean à Bordeaux, les feux de la Saint-Jean, l'église Saint-Jean).

Bien vu Smiley cligne
Bonjour,

En passant, le slider met bien en valeur l'iconographie (en mettant en valeur les sources en bas de l'image ce serait bien, dans l'état le manque de contraste m'empêche de le lire) mais l'animation sur le texte est superflu: le texte est dé-contextualisé par rapport à l'image et illisible, ce slider rapide et animé a à mon goût tendance à prendre le pas sur le contenu principal de chaque page.
Modifié par Igor (27 Oct 2011 - 02:03)
Igor a écrit :
En passant, le slider met bien en valeur l'iconographie (en mettant plus en valeur les sources en bas de l'image se serait bien, dans l'état le manque de contraste m'empêche de le lire) mais l'animation sur le texte est superflu: le texte est dé-contextualisé par rapport à l'image et illisible...

C'est réglé, j'ai augmenté la valeur opacity.
Igor a écrit :
ce slider rapide et animé a à mon goût tendance à prendre le pas sur le contenu principal de chaque page.

Oui, à tel point que je me suis posé la question de le garder que pour la page d'accueil, mais du coup cela changerais la structure du site. Une alternative pourrait être de virer le slider pour occuper son emplacement par une grande image en lien avec l'article (?)... j'y réfléchis encore.
Modifié par Olivier C (27 Oct 2011 - 01:45)
Salut,
Très belle réalisation.
Quelque petits commentaires supplémentaires à ce qui a déjà été dit :
- il manque pour un bouton pour valider la recherche. Cela parait évident pour la plupart de ceux qui viennent sur Alsacreations qu'il faille cliquer sur "enter" mais pas pour le reste de la population...
- pour la page "faq" ou pour les résultats de la recherhche, je ferais apparaitre le premier contenu de tes "menus accordeon", là encore pour montrer à l'internaute comment ca marche...
- pour la page contacts, lorsque je valide sans avoir rempli aucun champs, je suis renvoyé en haut de page. Et il faut que je scroll pour voir le message d'erreur...
- 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...

Good job Smiley cligne
Bye
Zed1
Zed1 a écrit :
il manque pour un bouton pour valider la recherche. Cela parait évident pour la plupart de ceux qui viennent sur Alsacreations qu'il faille cliquer sur "enter" mais pas pour le reste de la population...

C'est vrais, il faudra que je révise ce point.
Zed1 a écrit :
pour la page "faq" ou pour les résultats de la recherhche, je ferais apparaitre le premier contenu de tes "menus accordeon", là encore pour montrer à l'internaute comment ca marche...

Heu ? je n'ai pas compris la suggestion. Vous voulez dire qu'il faut laisser le premier lien accordéon en position "ouvert" ?
Zed1 a écrit :
pour la page contacts, lorsque je valide sans avoir rempli aucun champs, je suis renvoyé en haut de page. Et il faut que je scroll pour voir le message d'erreur...

Aïe ! Alors ça ce n'est pas pour tout de suite car je ne sais pas encore faire ce que vous me suggérez.
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...

Oui, décidément cette intuition se confirme chez tout le monde, ce sera donc chose faite... dès que je serais capable de lier une image avec un article sous WordPress.
Modifié par Olivier C (27 Oct 2011 - 02:04)
Olivier C a écrit :

C'est réglé, j'ai augmenté la valeur opacity.


C'est un peu mieux (quoique encore plus sombre Smiley cligne )

a écrit :
Oui, à tel point que je me suis posé la question de le garder que pour la page d'accueil, mais du coup cela changerais la structure du site. Une alternative pourrait être de virer le slider pour occuper son emplacement par une grande image en lien avec l'article (?)... j'y réfléchis encore.


Une idée en effet, avec peut-être sur la page d'accueil (sur le slider) une baseline comme dit Mabelle explicative de l'objet du site. Graphiquement l'univers est bien identifié mais pas trop le sujet ni son traitement.

ps: sinon belle 404
Modifié par Igor (27 Oct 2011 - 02:16)
Igor a écrit :
C'est un peu mieux (quoique encore plus sombre Smiley cligne )

Oui, je sais bien ce qu'il faut faire : rajouter une div superposée sous le texte pour un background dédié, ainsi la div ne sera pas liée à la valeur opacity du texte. Je ferais ça dès que j'aurais un peu moins la flemme ! (mais là je vais aller me coucher !)
Igor a écrit :
Une idée en effet, avec peut-être sur la page d'accueil (sur le slider) une baseline comme dit Mabelle explicative de l'objet du site.

Oui: je viens d'y penser suite aux remarques des uns et des autres. À terme cette solution sera adoptée.
Igor a écrit :
ps: sinon belle 404

J'ai pensé à l'animer un de ces jours. Quoi que : les effets "pyrotechniques" ne sont peut être pas toujours le mieux... (d'ailleurs je viens de voir qu'il y a un pb : en version "mobile" il n'y a pas de formulaire de recherche alors que la page 404 y invite).
Modifié par Olivier C (27 Oct 2011 - 02:39)
Bon, j'ai testé les articles sans le slider : ça ne casse pas trop la structure mais je trouve le design trop sobre. Je vais donc opter pour une grandes image personnalisée pour chaque article en lieu et place du slider, ce qui gardera la structure du site intègre et plus conforme à ce que je cherchais au départ. Les images se situants actuellement dans les entêtes des articles seront supprimées.
Olivier C a écrit :

Heu ? je n'ai pas compris la suggestion. Vous voulez dire qu'il faut laisser le premier lien accordéon en position "ouvert" ?


Oui exactement. Car au premier abord on a l'impression que rien ne fonctionne...

Olivier C a écrit :

Aïe ! Alors ça ce n'est pas pour tout de suite car je ne sais pas encore faire ce que vous me suggérez.


Mais si, mais si, pour un petit site que j'ai fait pour ma nièce : http://www.queen-little-monsters.com/contacts.php
http://www.queen-little-monsters.com/contacts.php
[/url]
Clique sur : "Envoyer"
Le seul inconvénient, à mon sens, c'est qu'il faut que tu prévoie de l'espace en dessous pour ne pas faire disparaitre le bouton au clic.
Je viens de remettre mon site à jour, conformément aux suggestions sur les articles (mais je trouve cela moche et sans personnalité, ce qui était le but des grandes images, je vais choisir l'autre option et retoucher le code). J'ai aussi retouché les media queries. N'hésitez pas à me dire ce que vous en pensez.
Modifié par Olivier C (28 Oct 2011 - 13:13)
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à Smiley smile

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