[amateur] nouveau design pour mon site

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)

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

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

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
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 )

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 )

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.

Zed1 a écrit :
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]

Bien vu le report des informations manquantes dans une même div

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à

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