[Amateur] Site sur la Scandinavie médiévale

Bonjour,

Je sollicite vos avis à propos du site fafnir.fr, consacré à la Scandinavie médiévale.

Le site a été développé avec Joomla. J'ai pas mal tâtonné pour chaque modification que j'ai effectuée - ou tenté d'effectuer - et je ne suis pas convaincu que le résultat actuel soit optimal.

C'est pourquoi je suis preneur de toutes les critiques et remarques, et vous remercie par avance pour vos avis.
Modifié par 2fray (02 Oct 2015 - 05:17)

Salut ! Je suis pas une pro mais je peux te dire ce que je changerais dans la mise en page css :

- la div en haut à gauche, je rendrais son background un peu transparent, genre une opacity: 0.7 pour qu'il y est moins un effet barrière avec le reste du site (peut-être un infime border radius aussi ... et peut-être la même marge symétriquement que la barre de recherche, faut voir)

- ajouter padding-left dans la barre de recherche ( et même j'éclaircirai légèrement le background de la barre de recherche genre #EFE9DE )

- sur mon écran ton menu de navigation se divise en deux lignes, il doit y avoir un truc pas tout à fait au point avec les largeurs. Je trouve ton effet hover super.

- et en dernier, depuis ton menu jusqu'en bas du site, j'augmenterais tous les margin-bottom et je ferais correspondre l'espacement des deux colonnes (je lui donnerai la même taille) quitte à réduire légèrement la taille de tes div sur la page d'accueil.

Je ne sais pas si c'est ce que tu attendais, en tout cas sympa de partager tes connaissances sur ce site )

Cy

Merci, Cy, pour ces si significatifs signalements :

- pour le premier point, comme il s'agit du module fourni par Facebook, je ne suis pas convaincu qu'il soit possible de personnaliser ;

- pour la barre de recherche, j'ai suivi tes deux conseils ;

- pour le menu, j'ai un peu de mal à me représenter le problème (ou à voir en quoi c'est un problème). En général, l'affichage est correct (ou à peu près) sur tous les écrans et tous les supports ;

- pour la dernière remarque, je ne suis pas sûr de bien comprendre ce que tu veux dire.

Encore merci.

Hello,

je ne ferais pas de commentaires sur le contenu, car c'est ton domaine, par contre sur la forme...

y'a deux trucs qui m'ont choqué dès les premières secondes

- le facebook en haut a gauche, il faut absolument le mettre autre part et n'avoir que le logo de facebook et non tout l'encadrer qui prendre trop de place.

- le fond d'une couleur unique. quand tu présente ton site je m'attendais à quelque chose de plus... médiéval (peut être du parallaxe dans un château ?)

et une question par curiosité pourquoi Joomla ?
Modifié par JENCAL (07 Oct 2015 - 10:38)

Salut,

Je trouve ça vraiment mieux la barre de recherche comme ça !
Je regarderai bien le contenu de ton site quand j'aurais le temps, déjà je suis contente de savoir ce qu'est un scalde en vieux norrois !

Ça ne te dérange pas que je poste une copie d'écran pour te montrer comment apparait le menu de navigation sur mon écran ?
Modifié par Cymophane (07 Oct 2015 - 15:53)

Merci à tous pour vos remarques.

JENCAL a écrit :
le facebook en haut a gauche, il faut absolument le mettre autre part et n'avoir que le logo de facebook et non tout l'encadrer qui prendre trop de place.

spongebrain a écrit :
Le lien facebook est en effet très/trop présent et pas très esthétique. Mettre juste le picto ou placer le visuel actuel en bas, juste avant le footer ?

Dans un premier temps, j'ai réduit la hauteur. C'est tout ce que je peux faire en conservant le module fourni par FB. Au besoin, je peux sans doute trouver une autre solution.

JENCAL a écrit :
le fond d'une couleur unique. quand tu présente ton site je m'attendais à quelque chose de plus... médiéval (peut être du parallaxe dans un château ?)

Je préfère faire dans la sobriété. Je trouve que ça fait plus sérieux. Et pour mon sujet, je pense qu'un bateau serait plus typique qu'un château fort .

JENCAL a écrit :
et une question par curiosité pourquoi Joomla ?

Parce que je serais bien incapable de construire un site ex nihilo. Donc j'avais besoin d'un CMS. Parmi les plus connus, WordPress est plutôt orienté blog, Drupal est réputé plus compliqué, donc Joomla.

Cymophane a écrit :
Je regarderai bien le contenu de ton site quand j'aurais le temps, déjà je suis contente de savoir ce qu'est un scalde en vieux norrois !

Ravi d'avoir pu t'apprendre quelque chose .

Cymophane a écrit :
Ça ne te dérange pas que je poste une copie d'écran pour te montrer comment apparait le menu de navigation sur mon écran ?

Volontiers, merci.

spongebrain a écrit :
Pour la mise en application d'un beau visuel en parallaxe, voici un rapide wireframe que je vous suggère

Je vais voir si mes faibles compétences me permettent de m'en inspirer. En particulier, je ne suis pas sûr de ne pas perdre au niveau responsive si je me lance dans de grands changements.

spongebrain a écrit :
Pour les couleurs, le fond actuel donne un côté old school au site, voir daté. Le fond blanc ou très clair sera plus valorisant pour votre contenu ?

Ce n'est pas forcément faux, mais le site est déjà très sobre. Je crains qu'avec un fond blanc, ça devienne carrément terne.

Encore merci.

Salut 2fray !

J'avais fait la copie d'écran avant tes modifs. Comme tu peux voir, le menu est sur deux lignes et n'est pas centré du coup : c'est pas super.

Bon, je m'étais permis de faire des modifs : j'avais mis une marge autour des éléments Facebook et j'avais un peu diminué l'opacité de la carte de backgroud =) Pour voir ce que ça donnait !

Perso je préférais quand ta barre de recherche était plus à droite.
Je trouve aussi que le Facebook tout seul et bleu à gauche ne va plus avec le reste =)
Pourquoi ne pas faire une icone facebook avec ta couleur dominante (rouge bordeaux). Ce serait plus joli ! Et d'ailleurs, les liens en rouge bordeaux seraient pas mal aussi selon moi.

Merci. Normalement, le menu devrait désormais tenir sur une ligne.

Au passage, j'ai effectué un certain nombre de modifications, et je suis toujours preneur de critiques et remarques.

je trouve que comparé à avant, y'a une bonne progression visuellement. même si je trouve pas cela accrocheur de nos jours (aujourd'hui on voit pleins d'effets sur les site, parallaxes etc..)
Modifié par JENCAL (21 Oct 2015 - 11:05)

Salut 2fray,

Gros changement ! Même si j'aimais bien l'inscription fafnir en alphabet runique le site est bien plus sympa avec la photo !
Écrire "recherche" en gris clair dans la barre de recherche ne ferait pas de mal )
Ton site est vraiment dense, bien écrit, dans ce que j'ai parcouru je n'ai pas repéré une seule faute. Well done man, beau travail de recherche !

cy

JENCAL a écrit :
je trouve que comparé à avant, y'a une bonne progression visuellement. même si je trouve pas cela accrocheur de nos jours (aujourd'hui on voit pleins d'effets sur les site, parallaxes etc..)

Merci. L'idée c'est seulement d'avoir un site dont la forme ne soit pas médiocre au point de détourner du fond et qui, de préférence, ne sente pas excessivement l'amateurisme. Pour le reste, je n'envisage pas de concourir aux Oscars du webdesign 2016

Cymophane a écrit :
Écrire "recherche" en gris clair dans la barre de recherche ne ferait pas de mal )

La petite loupe, ça te va aussi ?

Cymophane a écrit :
Même si j'aimais bien l'inscription fafnir en alphabet runique le site est bien plus sympa avec la photo !

Cymophane a écrit :
Ton site est vraiment dense, bien écrit, dans ce que j'ai parcouru je n'ai pas repéré une seule faute. Well done man, beau travail de recherche !

Merci beaucoup. C'était un plaisir de lire tes messages.

Hello

2 - 3 trucs en passant,

tu devrais mettre un lien sur "fafnir.fr" car là on peut cliquer sur l'image en dessous, mais pas sur le texte. c'est rien à rajouter.

le menu n'est pas de la même largeur que le contenu. si tu ne veux pas tomber dans l'amateurisme, complète le

dans runes et inscription j'ai un problème avec ton image /images/Futhorc-scramasaxe-Tamise.jpg qui en mode tablette sors du conteneur (énormément) (pareil pour /images/Futhark-pierre-Kylver.jpg)

dernier point : le footer, tu n'est rattaché à aucun réseaux ? Fb, tw..

beau travail.

Merci beaucoup. Je vais regarder tout ça.

La largeur du menu, c'est évidemment le problème principal. Je pensais l'avoir résolu en utilisant

display:table

Le résultat était plutôt satisfaisant a priori, mais je me suis rendu compte ensuite qu'avec cette propriété, je perdais l'aspect responsive : sur un écran plus petit, les différents liens de menu s'entassent les uns sur les autres au lieu de se disposer proprement sur plusieurs lignes. Pourtant, c'est la solution que j'ai trouvée un peu partout. Il va falloir trouver un correctif...

utilise les media queries pour le coté responsive

comme ça tu peux utiliser un css spécifique à ton menu.

2fray a écrit :

Le résultat était plutôt satisfaisant a priori,

hmmm;;; tu dois avoir un petit écran nan ?
regarde sur le mien, ton menu n'est pas de même largeur.

D'abord, non, je n'en ai pas un petit :



Mais j'étais revenu à la précédente version en attendant de pouvoir y retravailler.

JENCAL a écrit :
tu devrais mettre un lien sur "fafnir.fr" car là on peut cliquer sur l'image en dessous, mais pas sur le texte.

Fait.

JENCAL a écrit :
le menu n'est pas de la même largeur que le contenu. si tu ne veux pas tomber dans l'amateurisme, complète le

Fait. Grâce aux media queries . Le rendu semble à peu près correct sous toutes les configurations que j'ai pu tester.

JENCAL a écrit :
dans runes et inscription j'ai un problème avec ton image /images/Futhorc-scramasaxe-Tamise.jpg qui en mode tablette sors du conteneur (énormément) (pareil pour /images/Futhark-pierre-Kylver.jpg)

Fait.

JENCAL a écrit :
tu n'est rattaché à aucun réseaux ? Fb, tw..

Normalement le Page Plugin de Facebook s'affiche en bas de chaque page. Ce n'est pas le cas ?

Encore merci pour toutes tes remarques.

ahhh ton menu est bien de la même taille

concernant les rsx je viens de vois "Tweet" et "G+1" que je n'avais pas vu (je chercher le logo en faite.)


Je préfère le site actuel à l'ancien. au niveau du contenu Bravo on voit que y'a du boulot.

Bonjour,

Pour moi, il reste de gros problèmes à régler concernant la mise en page et la lisibilité du site.

Tout d'abord, la typo manque de style. Surtout dans les titres. Les polices serif sont moins lisibles à l'écran. Ici on peut en garder une pour les titres, vu le sujet abordé (pas en noir), mais ce n'est pas joli/lisible pour le texte courant.

Le fond gris latéral est trop soutenu, un gris très clair, genre 240/240/240 ou 245/245/245 reste à tester. Voir même blanc. Là ça contribue à "cloisonner" la colonne de contenu.

Il y a un problème d'habillage et de composition. Tout d'abord, il manque des blancs tournants, c'est à dire des marges tout autour du contenu, textes et images, qui équilibrent et permettent de laisser respirer. Là tout est collé sur les bords et ce n'est pas esthétique. Surtout avec une gouttière centrale aussi large.
Le titre principal « Dernières publications » est vide de sens, en plus d'être collé au bord.
Les textes justifiés sont à éviter en web, rarement utilisés à bon escient. Là sur des colonnes aussi étroites, on a des trous de la largeur de 6 lettres, ce qui casse la lecture en plus d'être laid. Texte calé à gauche. C'est plus moderne et lisible.
Les images ne sont pas mises en valeur, trop collées par les textes. Là encore, il faut laisser respirer.
Les titres des articles ne sont pas cliquable, ce qui manque. Sous les vignettes, il y a parfois une ligne qui se ballade toute seule. En typo c'est à éviter. À corriger.

http://img11.hostingpics.net/pics/938268Capturedcran20151106071819.png

Je trouve aussi dommage d'avoir supprimé le logo avec la typo stylée très sympa, pour être remplacé par rien. Là le fond image OK, c'est mieux que ce qu'il y avait avant, mais c'est encore étriqué. Le fond bleu ciel est redondant avec le ciel de la photo. Il faut définir une gamme de couleurs (2, 3 maxi), charter d'avantage la maquette du site.

Reste le problème principal, la gestion des textes. Par exemple sur la page « Runes et inscriptions runiques ». C'est complètement illisible. En typo, il faut éviter les lignes de plus de 80 signes (espaces incluses). Exceptionnellement, pour un paragraphe de 2 lignes en petit ou dans des cas particuliers, on peut grimper à 100 signes. Là sur mon compteur de lettre, ça m'indique autour de 170 signes par ligne en largeur maximale !!! En plus sans aérer, avec des images qui ne respirent pas et texte justifié… pour bien donner l'impression de remplissage. Il n'y a pas 1 millimètre carré de perdu !! Les paragraphes ne sont pas marqués (interlignes, titrages…).
En clair, on a un gros bloc de plus de 50000 signes bien compact, et débrouillez vous avec ça. Déjà que les textes trop longs ne fonctionnent pas sur le web (fatigue visuelle, lisibilité moindre que sur le papier…). Si vous réussissez à trouver un lecteur qui lit jusqu'au bout, donnez lui une jolie médaille.

http://img11.hostingpics.net/pics/664117Capturedcran20151106071635.png

Quelques bugs de maquette avec des images qui dépassent de la colonne.

Voilà pour moi, le contenu semble très intéressant*, mais pour le moment, la mise en page et la présentation manquent de soin. Même si des améliorations ont été apportées comparé à la version initiale. La lisibilité doit absolument être repensée, et la présentation revue avec un style plus aéré, graphique, typo (tailles plus tranchées, couleur, paragraphes, polices, surtout avec autant de texte !!). Remettre le joli logo (en un peu plus lisible) et agrandir le visuel d'accueil. Mettre le logo en scène directement sur la photo pour scénariser l'ensemble, raconter une histoire. Raconter l'histoire tout en restant moderne ! Autant par l'image que par le texte.


* Attention de bien relire le texte. Par exemple « La majorité des plus anciens objets portant des inscriptions runiques été retrouvés dans le sud de la Scandinavie… »…

Liens utiles :
https://www.google.com/fonts
http://www.compteurdelettres.com
http://fr.slideshare.net/philipperondepierre37/tendances-web-design

Bonne continuation.
Modifié par spongebrain (06 Nov 2015 - 15:30)

Salut Spongebrain !

Je reviens voir le topic et il y a un point sur lequel je ne suis pas d'accord avec toi. C'est un truc qui n'engage que moi: je trouve que de lire un texte long est plus agréable s'il s'étend sur une certaine largeur. Lire un texte aussi long dans des colonnes est agréable sur papier mais sur un écran je ne trouve pas. Moins de retour à la ligne donc l’œil fait moins de mise au point sur un écran lumineux et moins besoin de scroller.
Par contre c'est sûr, ça ne se voit nulle part: cette mise en page est plus que rare. Comme je l'ai dit je la trouve adaptée à ce genre de contenu et c'est peut-être parce que ce genre de contenu -disons "d'érudition" - est rare qu'il se conforme aux mises en forme classiques au lieu de s'arroger le droit de bouleverser des normes de design justifiées par ailleurs.

Autrement bien sûr tes remarques me semblent tout à fait pertinentes et c'est normal ça a l'air d'être vraiment ton domaine ! ... Comme tu dis, dans le sommaire les petits bouts de phrases parfois perdus tout seuls sous l'image (cf. "de leur civilisation") ou la mise en valeur des images pourraient être à revoir.


2fray, je prendrai le temps de regarder ça cette semaine pour te faire des petites propositions =)

Bon aprèm les gars !

Cy