[Amateur] Faculté des Lettres

Bonsoir tout le monde,

Bonne année pour commencer
Je suis en train de faire un site web en faveur d'un bâtiment historique de la ville de Genève. L'État promet de rénover mais se rétracte à chaque fois... Tout cela pour dire que ce site a pour principale vocation de devenir une vitrine de ce qui ne va pas dans ce bâtiment. Il est donc destiné à un peu tout le monde, mais je pense que les personnes qui le visiteront le plus sont les étudiants, professeurs et personnel administratif des deux facultés concernées (Théologie et Lettres).

L'avis de mon entourage est que le site répond plutôt très bien aux attentes d'une telle démarche. Mon avis va dans cette direction, mais il y a tout de même quelques petites choses à droite à gauche qui je pense méritent à être modifiées. Je pense surtout au menu sur lequel j'ai passé beaucoup temps à réfléchir... mais mon imagination se trouve dans un cul-de-sac sur ce point !

Je suis donc prêt à tout entendre, ouvert à la critique sur la totalité du site. Et je vous remercie d'avance de mettre ainsi votre expérience à contribution !

http://www.unibastions.ch/test345

Une excellente nuit !

PS : Le site n'est pas encore accessible à tous, d'où le "/test345".

Salut,
tout d' abord ma première impression, un site efficace, simple donc léger J AIME !
Comme tu dis ça colle bien, le menu est en effet une grande question sur tous les projets web pour moi. Tu pourrai pour dynamiser ce dernier présenter les liens façon onglets, ou pourquoi pas imaginer quelque chose en jquery comme un accordéon horizontal. En tout cas j aime pas le .hover couleur du lien qui change ( rétro ). Ce menu pourrait être l' occasion d' incorporée une couleur qui tonifie le tout.. une tonique donc !
ps : un petit effort supplémentaire sur la page contact serait un plus.
Bonne journée !
Modifié par agence_web (06 Jan 2014 - 12:37)

Salut,
Site épuré et efficace, le contenu est tout à fait accessible en plus d'être bien rédigé !

J'aime bien, concernant le menu, d'un point de vue navigation je trouve ça parfaitement clair,
d'un point de vue esthétique je ne vois pas vraiment où est le problème, je trouve ça lisible et cohérent avec le reste de la charte graphique.

Tu pourrais facilement rendre ton site responsive, étant donné la simplicité du gabarit. (header menu bloc)... Sinon, peut-être agrandir un poil la largeur des boutons du menu, mais bon ça reste subjectif...

En tatonnant avec firebug, j'obtiens ça :
http://www.heberger-image.fr/data/images/15644_screen.jpg

Sinon, beau travail et belle initiative, ça doit être pénible d'étudier dans ces conditions.
Modifié par ohweb (06 Jan 2014 - 13:01)

Bonjour et bonne année !

Comme mes camarades, je trouve que c'est du bon travail. C'est propre et bien construit.

Mes critiques se porteront plutôt sur la forme. Il s'agit là d'un site "coup de gueule" et quand on arrive, la présentation est très sage. On pourrait penser qu'il s'agit d'une amicale d'anciens élèves ou d'un groupe littéraire au sein de l'école… Bref on ne comprend pas tout de suite de quoi il s'agit.

Le bâtiment qui s'enlise est une excellente idée, mais il faut aller un peu plus loin. Avec ça les autorités concernés ne vont pas beaucoup trembler, car il faut lire le contenu pour comprendre et c'est presque sage, même si la situation décrite semble plus qu'embarrassante pour les gens qui travaillent dans un bâtiment qui apparemment tombe en ruine.

Mes conseils seraient donc d'être plus radical sur la forme et aussi sur le fond (en matière de manif, les français ont une petite longueur d'avance sur les suisses ).
Des idées simples mais efficaces, comme par exemple remplacer ce joli bleu gris en fond par une photo de mur décrépit et tombant en lambeaux (vous devez avoir ça ?). Votre site est léger avec peu d'images, vous pouvez vous permettre d'en placer une grande en arrière plan si elle est bien optimisée en JPEG pour ne pas être trop lourde. Ça se fait beaucoup.
Il manque aussi sur la page d'accueil des photos qui montrent l'étendue des dégâts. Par exemple dans le paragraphe « Le problème » vous pouvez aligner 3 ou 4 photos représentatives qui placent tout de suite le décor. Inutile de les mettre en grand ou de placer une lightbox ou un diaporama, bien que…

Il faut que ce site exprime le malaise qui est le vôtre, qu'on se dise d'entrée : Oh put... il y en a qui travaillent là-dedans ! Quelle honte !!
Il faut que les gens qui vous ont laissé pourrir dans cette situation soient d'emblée mal à l'aise dès qu'ils arrivent sur le site. Que ça fasse le buzz. Pourquoi pas une partie blog, pour alimenter l'étendue des dégâts ! La forme doit coller au fond et là ce n'est pas le cas. Ce qui n'empêche pas l'humour, comme la partie "Shop" qui m'a bien amusé !

Pour le texte, le titre "Le problème" n'est pas explicite. En arrivant sur un site à la maquette si sage, je me suis demandé "quel drôle de titre ?", "Quel problème ?", "Tout semble allez si bien sur une maquette aussi paisible…".
Mettez votre requête directement en titre. Je ne peux pas le trouver à votre place, mais un truc du genre « L'université de Genève tombe en ruine : les étudiants et les enseignants en colère ! »
À vous de voir…

La citation de Calvin est peu être fine et subtile, mais je ne vois pas le rapport avec le sujet, ça disperse le lecteur.

Il manque une vraie accroche dans le header, « …étudiants et professeurs pas très content… ». Inutile de vous dire qu'ici en France, avec un slogan aussi choc, votre université serait rénovée en 2075 !! Là on a l'impression que vous poussez un coup de gueule parce qu'une étudiante a laissé tombé un papier gras sur la pelouse (la vilaine)… Dites vraiment votre malaise et soyez explicite. Il faut qu'en lisant le titre, l'accroche, en voyant les photos, on ait tout compris. Le texte n'est là que pour donner plus de détails.

Mettez directement le lien Facebook dans le header avec une phrase du style : "nous soutenir", ou "groupe facebook pour la rénovation de l'université"… Que vos interlocuteurs voient que vous n'êtes pas un groupe isolé et que vous avez un certain poids, donc un certain pouvoir. D'une façon globale, soyez un peu plus agressifs et explicites… Pas méchants mais suffisamment pour interpeler et être entendu.

Techniquement :

Concernant vos questions sur le menu, je le trouve un peu placé bizarrement. Avez-vous essayé dans le bloc blanc, sur le haut, plutôt qu'en dehors ? Les effets de roll over on s'en fout, c'est pas un site de design.

Votre titre "unibastion" est flou.

Le choix des couleurs est peut être en lien avec votre université mais il est très sage, très reposant, très conventionnel. Des couleurs plus efficaces seraient plus en accord pour exprimer votre malaise. Rouge ? Orange ? À vous de tester, ou pas. Déjà mettre un fond décrépit en arrière plan risque de faire son effet (attention, la photo doit rester bien faite et authentique).
Le but n'est pas de faire un "joli site", mais un site efficace, qui parle, même si pour ça il faut le faire un peu moche et décrépit. Comme l'état du bâtiment.

Voilà pour moi et bon courage. Je vous comprends, quand j'étais étudiant, suite à nos plaintes on nous avait acheté des pots de peinture et nous avions dû repeindre les murs nous même pendant une semaine…

Bonsoir,

Merci mille fois pour ces commentaires !!! J'ai tout noté par points, je vais tenter quelques modifications et je vous tiens bien sûr au courant du résultat.

@ Spongebrain, votre commentaire m'a fait beaucoup rire . Mais j'en tire aussi bien du positif pour l'amélioration du site. Ce qui me fait rire c'est à quel point je me rends compte que j'agis en Suisse dans ma démarche. Je fais un beau petit site en bleu histoire que les gens soient à l'aise, pas trop choquer, propre, etc. Car amis français, il ne s'agit pas uniquement d'un cliché, il y a bien une partie de la mentalité suisse qui est caractérisée par le fait de pas trop aimer tout ce qui dépasse ! (Ce qui est critiquable aussi, mais bon on va pas commencer à parler politique ^^).

Bon après l'objectif est avant tout d'ironiser cette situation, la section "shop" en est un bon exemple, et le côté "petite fille qui fait tomber un mouchoir en papier sur la pelouse" est un peu voulu . Le fait est qu'un site trop contestataire ne sera pas pris au sérieux. Je pense que c'est pareil un peu partout, se plaindre les gens le font tout le temps et toujours de la même manière. C'est pour cela peut-être qu'ils ne sont plus entendus, et c'est pour cela que j'ai essayé de contourner cela avec l'ironie et l'humour, car ce sont des outils qui marquent la mémoire de manière plus durable et plus agréable (les publicitaires l'ont bien compris). Mais je pense que vous avez tout de même raison sur le message n'est pas présenté de manière assez claire. Je vais donc tenter de trouver un juste milieu entre la manière suisse et la manière française !

Vos commentaires me sont très précieux en tout cas
Je retiens surtout le fait de mettre le lien Facebook dans le header, de mettre des photos sur la page principale, de changer le titre "Le problème", la citation de Calvin. Je vais voir si je ne change pas les tons de couleurs, c'est vrai que le bleu fait très... dans la norme.
Merci beaucoup en tout cas

Juste une question, qu'entendez-vous par "Pourquoi pas une partie blog, pour alimenter l'étendue des dégâts !". De mon point de vue le groupe Facebook fait l'affaire, mais si vous aviez une autre idée derrière la tête je suis prenant !

Merci à tous !

Adasteria a écrit :
@ Spongebrain, votre commentaire m'a fait beaucoup rire . Mais j'en tire aussi bien du positif pour l'amélioration du site. Ce qui me fait rire c'est à quel point je me rends compte que j'agis en Suisse dans ma démarche. Je fais un beau petit site en bleu histoire que les gens soient à l'aise, pas trop choquer, propre, etc. Car amis français, il ne s'agit pas uniquement d'un cliché, il y a bien une partie de la mentalité suisse qui est caractérisée par le fait de pas trop aimer tout ce qui dépasse ! (Ce qui est critiquable aussi, mais bon on va pas commencer à parler politique ^^).

En Suisse, on ne manifeste pas, on évoque cordialement notre désaccord.
Plus sérieusement, je rejoins Adasteria sur le point qu'en Suisse, un site par trop contestataire ne sera pas pris en compte, alors que si la démarche semble emballée dans un joli papier tout rose, celle-ci aura plus de chance d'aboutir à des résultats tangibles. => Comme ce n'est pas dans nos habitudes de manifester/faire la grêve/etc. tout cela est souvent vu d'un très mauvais œil dans notre joli petit pays.

Après ça n'a pas besoin d'être hyper austère non plus, le ton badin utilisé permettrait de mettre un peu plus de gaité dans tout cela (visuellement).

Allons bon, les suisses se révoltent !
Il est vrai que la typographie suisse fait référence. Ou plutôt le style suisse, qui n'a pas de frontière. L'Helvetica en est le symbole.

Il ne s'agit pas de faire grève ou de kidnapper le responsable, mais de passer un message clair et compréhensible, même si cela nécessite d'être un peu radical. Suisse ou pas, ce design ne passe pas le bon message, d'ailleurs il ne passe pas de message du tout. C'est pas ça le style suisse.
Une touche d'humour aide parfois à faire passer une revendication (mais pas trop), c'est ainsi que j'ai abordé le sujet. Même si l'humour varie en fonction de la géographie…
Allez demander aux belges !

Adasteria, si vous utilisez facebook pour fédérer et alimenter le sujet, en effet, un blog n'est pas indispensable.

Bonjour !

J'ai donc modifié quelques trucs sur le site web. Je voulais simplement vous remercier encore une fois tous pour vos commentaires constructifs !

J'ai donc :
- Changer un peu le header.
- Rendu le site web responsive.
- Ajout d'informations dans la section contact.
- Aéré un peu le menu.
- Mis le lien Facebook dans le header.

Voilà le principal ! J'ai tenté un remaniement des couleurs, mais mon entourage suisse a réagit de la même manière que kustolivic

Je compte le mettre en ligne ce dimanche ! S'il y a encore des choses à dire, je suis à l'écoute !

Merci mille fois à vous tous

Ouais et puis... si je dis pas que c'est une autre URL qui faut aller voir, ça va pas être très utile...
www.unibastions.ch/v2

Bonjour,

C'est beaucoup plus clair et efficace !
Attention de mettre à jour vos liens : http://www.unibastions.ch/

S'il manque un titre qui explique clairement ce qu'est uni-bastion du style "Association pour le… " (à placer en haut du bloc blanc dans la typo rouge bold du logo ? ou bien à inverser avec le menu ? À vous de voir… ), on comprend enfin de quoi il s'agit dès le premier coup d'œil. La nouvelle typo suisse est plus efficace et moderne, à appliquer partout ? La police de caractère fantaisie du menu n'a rien à voir avec le reste. Pour le menu, restez dans vos codes couleur brique/blanc, et blanc/brique en hover ? Restez en aplat, vous aurez l'air plus Suisse !

Si passer du bleu au brique est une bonne idée, le logo facebook peut rester dans sa vraie couleur.
Attention aux accents sur les majuscules : « À quoi sert… »

La photo d'arrière plan est un peu trop compressée et flou, avec juste une petite fissure (en attendant mieux/pire ?). Les ombres de blocs (bâtiment et contenu) sont trop marquées et/ou décalées. Celle du contenu semble bleutée.

Éventuellement, marquez des espaces entre vos paragraphes sans que les photos passent d'un paragraphe à l'autre.

Bonne chance dans votre démarche !

Hello,

Merci pour votre commentaire. Je vais prendre en compte toutes ces choses et les rectifier sous peu !
J'ai lancé le site dimanche soir, et pour l'instant il marche plutôt bien

Merci merci !
A très bientôt !

Bonsoir,

J'approuve les modifications
(on s'en fout, mais je tenais à le dire )

Petit souci avec l'image de fond sur tablette (iPad) peut-être avec d'autres appareils mobiles ?
Un "background-size:cover;" ou toute autre solution devrait convenir

ps: Je comprends enfin certaines différences entre nos pays
http://www.unibastions.ch/img/inventaire/hr_lumiere_mini.jpg

Chez nous, on dit portemanteau en un seul mot
Modifié par 6l20 (14 Jan 2014 - 21:40)

6l20 a écrit :
Bonsoir,

J'approuve les modifications
(on s'en fout, mais je tenais à le dire )

Et bien pareil (et pareil).

6l20 a écrit :
Petit souci avec l'image de fond sur tablette (iPad) peut-être avec d'autres appareils mobiles ?

Même souci sur desktop, je navigue toujours en fenêtré et la la surface de mon navigateur est plutôt carrée, et l'image commence à la moitié du logo. (+1 pour le background-size: cover)

6l20 a écrit :
Chez nous, on dit portemanteau en un seul mot

Tiens c'est fou ces différences culturelles, en Suisse on écrit «Un 'background-size:cover;' ou toute autre solution devrait convenir»

kustolovic a écrit :
Tiens c'est fou ces différences culturelles, en Suisse on écrit «Un 'background-size:cover;' ou toute autre solution devrait convenir»

Ah tiens, le Suisse est taquin...aussi ?!

Ha ! Vous m'avez bien fait rire tous les deux.
Et bien en Suisse aussi on écrit "portemanteau"... C'est pour vous dire le désespoir qui règne dans cette faculté... qui plus est de Lettres !

J'ai changé pour cette histoire de background. Vous pourriez me dire si c'est ok maintenant ?
J'ai une tablette (nexus 7) et un phone (Xperia) et tout marche parfaitement. Par contre il y a des navigateurs qui font des leurs (Next Browser par exemple).

Et en passant, il y a un soucis que j'arrive pas à fixer... Lorsqu'on arrive sur la page d'accueil, il y a cette première image de plafond décollé qui ne veut pas rétrécir sur mobile ou tablette. Elle se fait manger sur la droite. J'ai essayé des padding, margin, mais rien à faire.
Là sont mes limites dans le CSS !

Vous auriez peut-être une petite idée ?
Merci beaucoup en tout cas !

(Vous savez s'il existe des simulateurs d'ipad ou iphone sur google ? Parce que j'ai bien trouvé des simulateurs de résolution, mais j'ai l'impression que ça ne fait pas tout...)

Salut,

Les émulateurs d'iPad et de smartphones sur le web sont souvent des recadrages bidons pour la plupart d'entre-eux, qui ne correspondent en rien au véritable affichage.
Le seul qui semble proposer une vraie émulation sur smartphone que j'ai trouvé est celui-ci (qui date un peu) :
http://emulateurmobile.com/
Attention, si la page peut s'afficher trop grand sur l'émulateur, il suffit souvent dans la réalité d'un petit pincement de doigt pour afficher toute la page. Rien ne remplace un test en live.

Si quelqu'un a un lien plus exhaustif, je suis également preneur.

Sur moniteur d'ordinateur le fond se positionne sur toute la surface désormais (chrome/mac). Avant j'avais des bandes grises en haut et en bas que je croyais volontaires. Donc c'est nickel chez moi.

Sur tablette (iPad air), le fond se positionne bien aussi, même s'il n'apparait qu'en haut et en bas, le bloc du contenu blanc prenant toute la largeur de l'écran, ce qui est une bonne chose. Ça reste cohérent. Nickel donc sur mon iPad, que ce soit en position à l'italienne ou à la française (tiens, il n'y a pas de position à la suisse ? ).

Mais… il fallait bien un petit bug histoire de s'amuser.
Sur iPad, j'ai testé le site (la page d'accueil) sur chrome et safari. Le même bug apparait sur les deux navigateurs. Quand je suis en position à l'italienne tout semble OK. Mais quand je passe en position à la française (en hauteur), le logo facebook se retrouve bizarrement tout en haut de la page, au milieu, juste au dessus du logo. Le problème persiste en passant d'une page à l'autre.

Voilà pour moi.

Salut spongebrain,

Merci beaucoup pour ta réponse détaillée ! En fait le logo Facebook qui part en haut en petite résolution est fait exprès. En petite résolution, le header rétrécit, et je voulais quand même garder la possibilité de cliquer sur le bouton Facebook. Je ne trouve pas que ça choque beaucoup, j'ai en conséquence arrondi le haut de l'onglet "information importante" pour que ça ne choque pas trop.
En ce qui me concerne, le problème est réglé ! Si tu vois une meilleure manière de mettre en avant le lien Facebook en petite résolution, j'écoute avec attention
Sinon, pas de problèmes !

++

Le logo Facebook devrait rester à sa place. Ça fait vraiment bug de le trouver tout seul au centre, sans le texte qui fait le lien, en plus il flotte.
On ne vas pas non plus vous couper la tête pour ça hein (bien que… ), à vous de voir.