Bonjour à tous,

J'ai fait le site de mon asso, avec laquelle on a tourné un documentaire sur la Corse, c'est donc un webdoc avec des extraits. D'autres projets ne vont pas tarder à s'y ajouter...
Le voila : http://doculture.fr/

Il y a encore pas mal de choses qui ne fonctionnent pas (livre d'or,...) ou pas sur tous les navigateurs, et les pages en anglais, allemand ne sont pas encore traduites.
Mais comme à la base je n'y connais rien, je mets un peu de temps à faire tout ca (c'est long d'éplucher les forums!) alors c'est plus pour avoir vos avis ou vos conseils que je puisse rectifier le tir Smiley cligne

Merci d'avance!!
Modifié par 6l20 (31 Jan 2014 - 00:15)
Oulala! Du coup j'ai regardé ce qu'ils disent de faire mais ca ne me parle pas trop... Alors j'ai supprimé tous les codes et je les ai remis sur mon ftp. Est ce que ca suffit ou il faut faire autre chose?
Merci!
Bonjour Pouxinette.
Je ne m'y connais pas en sécurité web, mais je vous conseille de supprimer en effet les fichiers et de changer votre mot de passe FTP. Après, le CMS (si il y en a un) n'est peut-être pas à jour, il y a peut-être une faille dans un fichier PHP ou une base de données, ce genre de choses Smiley ohwell
J'ai tout supprimé, changé le mdp, et comme le cms ca ne me parle pas du tout, je pense qu'il n'y en a pas! j'ai regardé ma seule page php et je ne vois rien de suspect.
Du coup je crois que c'est réparé...
Bonjour Pouxinette,

Je ne comprends pas l'intérêt de forcer la maquette sur une aussi grande largeur statique tout en en limitant la hauteur. La double barre de scroll n'est pas utile. Utilisez toute la hauteur de la page. Même en 2014, sauf cas particulier, il faut éviter de dépasser des 1000 pixels de large, ou même les 900 pixels. Regardez par exemple le site Alsacréations. Pensez à ceux qui utilisent un écran en hauteur (tablettes… ) ou dont la fenêtre du navigateur n'occupe que la moitié de l'écran, même sur des grands moniteurs. Personnellement, ma fenêtre dépasse rarement les 800 pixels de large, j'affiche toujours plusieurs choses en même temps, c'est un usage très courant.

Du coup, les lignes ont une longueur démesurée désagréable à lire. Jusqu'à 136 caractères par ligne, c'est beaucoup trop ! Essayez de rester en deçà de 80 caractères.
http://www.compteurdelettres.com/

Pour le moment, j'ai un site qui est coupé sur la droite et deux grosses bandes en bas, noires et grises qui coupent inutilement ce site.

À cause de cette largeur, le menu est trop disparate avec des espaces trop importants entre chaque onglet. Trop de rubriques, coupez dans le vif, regroupez. Sans forcément faire un site sur une page comme c'est tendance actuellement, moins il y aura de rubriques, plus vous serez lus.

Utilisez du vrai texte plutôt que des images pour le menu. Vous avez l'embarras du choix avec notamment Google Fonts. Le choix de cette police de caractère destroy ne colle pas avec le sujet, surtout pour la Corse, choisissez une police plus à propos et moins explosive. Si c'est la police de la jaquette du DVD, vous pouvez la conserver uniquement pour le logo, mais pour le reste, place à la simplicité. Une police sans serif (lettres bâton comme l'Helvetica par exemple) apporterait de la modernité à cette charte assez lourde.
http://www.google.com/fonts

Le fond noir est dur, définissez une charte graphique à minima : une belle couleur fraîche et moderne. Idem pour le fond gris flou très daté, la tendance est à la simplicité, osez les aplats de couleurs, ou le fond blanc.

Le menu "Livre d'or, c'est obsolète. Un livre d'or pour quoi ?? Ce n'est pas une expo dans une galerie. Surtout avec la mention suivante qui s'inscrit sous les champs de caractères positionnés un peu n'importe comment (utilisez les CSS) :
Erreur : SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

Rubrique "Partenaires" pas indispensable non plus. Que diriez vous d'uns liste de logos cliquables et discrets en bas ?

La boutique est assez triste, le produit n'est pas valorisé sur ce fond grisâtre et daté.

Que fait la présentation de l'équipe dans "Contact" ? Présentez les dans une rubrique "Équipe" ou autre. Le formulaire de contact peut prendre la place du livre d'or complètement inutile.

Attention aux petits drapeaux pour les langues. Certains ont un bord blanc, d'autres pas. Ça manque de soin. D'ailleurs ça fait très site des années 90. Placez les de façon plus discrète, ou bien un menu pour l'anglais et l'allemand. Il ne sert à rien d'indiquer qu'on est sur la version francophone, il suffit de lire.

Rubrique "Film". Ah enfin, du bleu ! On respire un peu même si ce bleu ne doit pas forcément remplir tous les fonds c'est moins sinistre que ce fond gris. Les sous menus (Webdoc, Personnages… ) sont trop collés, de plus alors que le site occupe une largeur inhabituelle, pourquoi écrire ce sous menu en hauteur ?
Malheureusement en cliquant sur un sous menu, retour de ce fond gris hideux (même si vous lutilisez sur la jaquette du DVD, c'est hors de propos pour le site, c'est lourd, indigeste et ça fligue le contenu.
Par exemple les photos qui sont très belles et auraient leur place dans une jolie expo, sont ici dévalorisées dans cette succession de sous fenêtres ternes qui jurent avec les jolies couleurs de ces clichés. Et si vous osiez le fond blanc, une maquette ultra sobre ? Ça moderniserait d'un coup ce site au look daté.

La bande de photo à gauche, pourquoi pas. Mais jusqu'en bas. Pourquoi la couper, pourquoi couper le site ? À l'heure du design "responsive" qui s'adapte à la fenêtre des navigateurs, cette présentation dans un cadre anti ergonomique est à oublier.

Un site à retravailler, simplifier, moderniser et rafraichir.

Voilà pour moi. Smiley smile
Modifié par spongebrain (03 Feb 2014 - 23:15)
Tout d'abord merci beaucoup de t'être penché sur mon site!

Nous avons décidé du design il y a deux ans avec l'asso, et ca n'a pas évolué depuis car je me suis plutôt penchée sur comment coder tout ca...
L'idée de départ était d'avoir un rendu 16/9e, d'où les barres noires en haut et en bas. Je m'étais basée sur http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html en faisant du 1024 par 768.
Et nous voulions quelque chose de plutôt sombre et neutre pour mettre en valeur les photos et les vidéos (en voilà un autre plein de couleurs Smiley biggrin http://richardmarcouxnaturopathe.fr/ à retravailler aussi!).
Et on a mis le gris hideux Smiley cligne sur toutes (ou presque) les pages pour essayer de faire un peu d'unité sur l'ensemble du site.

Comme on est en train d'ajouter d'autres projets sans rapport avec la Corse, le plan du site va changer, j'essayerai de l'alléger...

La plupart des photos dans la pellicule à gauche sont aussi dans la page photo, affichées en grand !

Pour les drapeaux, c'est en cours de modification!!

Et on va réfléchir à tout le reste...
Merci encore Smiley smile
Je vous en prie. Smiley smile

N'y voyez pas de la malveillance, mais sur le plan du design, c'est tout réfléchi. Sauf si vous souhaitez garder cette maquette datée et mal dimentionnée qui est en fait complètement à revoir, à partir de zéro. N'appliquer que quelques retouches sera insuffisant. Smiley cligne (Vos drapeaux et le logo facebook se superposent maintenant avec le menu… [Chrome/mac])

pouxinette a écrit :
Je m'étais basée sur http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html en faisant du 1024 par 768.

Sauf que votre site fait 1370 pixels de large !!! Smiley eek Et pour afficher quoi ? Un formulaire, quelques lignes, une vidéo minuscule… Il faut tout revoir.
Même en plein écran, au moins la moitié des ordinateurs ne sont pas compatibles. Et ne parlons pas des tablettes…
Soit vous faites un design fluide comme conseillé dans le lien, soit vous limitez la largeur de la vidéo à 800 pixels pour laisser respirer autour (un peu plus pour l'ensemble du site). Pour la hauteur, ça n'apporte rien de la limiter, surtout pour faire un scroll dans une fenêtre inutile avec des bandes en dessous. Esthétiquement, ça ne fonctionne pas. Sur le plan ergonomique, encore moins.

Ce cadre pseudo "16/9" ainsi présenté n'existe pas car il est coupé, ce qui sera le cas pour la majorité des utilisateurs. Il n'évoque en rien un écran de cinéma. Si vous voulez la jouer "écran 16/9", faites un design responsive qui s'adaptera à chaque largeur écran et de fenêtre de navigateur. Ou placez une vidéo dans un format confortable (sans dépasser les 900 pixels) centrée sur un design élégant. Vous avez pris le problème à l'envers, c'est à vous de vous adapter, pas à l'internaute. Les largeurs d'écrans sont multiples…

De plus, si ma vue est bonne, la pellicule sur le côté n'est pas en 16/9. Un peu kitsch. À la base, il n'y a déjà pas de cohérence et pas de réflexion aboutie en terme de design et de mise en page. Faites simple, évitez les cadres qui mal utilisés, collent 10 ans d'âge à un site. Et ce fond gris rend peut-être bien sur votre jaquette, mais à l'écran, c'est lourd et daté.

pouxinette a écrit :

Et nous voulions quelque chose de plutôt sombre et neutre pour mettre en valeur les photos et les vidéos

Quelles photos ? Il n'y en a aucune sur la page d'accueil, les vignettes sont minuscules et ne font pas honneur aux clichés, la vidéo tout petite est complètement bouffée par ce design qui est tout sauf neutre et discret. Ça n'incite pas à cliquer. Sombre ou clair, regardez mes liens, vous verrez ce qu'est un site au design sobre (un design n'est jamais neutre) qui valorise le contenu. De plus les portfolios photo, vidéo, sont majoritairement sur fond blanc. C'est ce qui marche le mieux pour valoriser les couleurs et la lecture. Les portfolios sombres sont moins nombreux et ont un rendu plus dur, ça demande un minimum de maîtrise graphique pour éviter les pièges. À éviter si on a pas une maquette béton.

La seule chose qui sauve ce site, ce sont les photos vraiment très belles, sauf qu'il faut aller les chercher dans les tréfonds du site et qu'à la place sur la home on a ce fond gris destroy et cette maquette d'un autre âge. Ce site n'est pas au niveau des photos qu'il faut faire claquer dès la home. C'est très dommage, car si le film est aussi esthétique que celles-ci, ça doit vraiment être sympa.

À éviter, la musique qui se lance toute seule sur certaines pages. Aussi jolie soit-elle. Ça invite fortement à quitter le site, surtout si l'internaute écoute de la musique sur son ordinateur…

Pour vous aider à recentrer tout ça. Des tendances simples qui pourraient replacer votre site en 2014 : simplicité, efficacité, modernité, ouverture, pas de chichis…
Fond sombre
http://www.ericryananderson.com/PHOTOGRAPHY/Overview/thumbs/
Fond blanc
http://cargocollective.com/cavalier
http://cargocollective.com/cavalier/About-the-Project

À ne pas prendre au pied de la lettre, ce sont les premiers sites qui me sont tombés sous le clic dans google pour illustrer mon propos. Il y en a d'autres. Le site sur fond blanc pourrait être la base d'un design, avec à la place de l'image, une belle vidéo, ou mieux une jolie image qui sert de lien direct vers celle-ci et les principales rubriques. Les liens du haut peuvent rester très simples, juste du texte, même pour les langues (les drapeaux c'est très daté, au pire, petits en niveaux de gris). Vous devez faire rêver, pas faire fuir.
Concevoir un design sobre est tout sauf facile, même pour un pro. Si en tant qu'amateur on peut saluer le travail produit, je pense que vous vous êtes égarée. Si vous avez un bon produit, ce qui semble être le cas, une maquette à minima fera 100 fois plus d'effet que le design actuel. Smiley cligne
Modifié par spongebrain (05 Feb 2014 - 07:16)
Merci pour les photos !

Et bien je dois avouer que n'ayant ni tablette ni smartphone, je ne savais même pas ce qu'était un design responsive !
Maintenant que j'ai lu un paquet de trucs la dessus, je vais tenter d'adapter mon site ainsi...

J'ai enlevé ce vieux fond daté Smiley cligne que j'ai remplacé par du gris, faute de mieux pour l'instant.

Et oui j'avais fait du 1366 par 768, j'avais trouvé ca dans un sujet du site du zéro, (bizarrement, page que je ne retrouve plus aujourd'hui) où ils le présentaient comme le standard du futur proche.
Bonjour,

Avant d'adapter votre site pour les tablettes et smartphones, il est plus urgent de l'adapter aussi pour les bons vieux ordinateurs. L'occasion probablement de repenser l'ensemble ? Voici comment le site s'affiche chez moi (mon navigateur fonctionne parfaitement) :

http://images.jupload.fr/1393014768.png
(Image hébergée chez jupload)
C'est la largeur maximale de 1000 pixels que le site ne devrait pas dépasser (pour afficher l'image à l'échelle, cliquez dessus et affichez la dans une autre fenêtre). Le texte se place n'importe comment, le menu nécessite une scrollbar alors qu'il y a largement la place, la petite vidéo est perdue sur ce fond gris. Tout est collé sur la gauche. On a toujours cette grosse bande noire en bas. Les vignettes sur le côté assez anecdotiques sont peu valorisantes pour les photos… Ça ne donne toujours pas envie.

http://images.jupload.fr/1393016077.png
La version en presque 1400 pixels de large est à oublier direct, environ 5% des utilisateurs pourront voir le site correctement, seulement et seulement si ils utilisent leur navigateur en plein écran, ce qui est rare sur les grands écrans où on affiche plusieurs choses en même temps. Le texte est désagréable à lire, une ligne doit rarement dépasser 80 caractères, espaces inclus, là on est a plus de 100 !! C'est mal composé avec des trous et des interlignes fantaisistes… Toujours ce "livre d'or" digne des années 90, ce fond noir plombant…
Tenez vous à un maximum de 900 pixels, ça solutionnera bien des problèmes (notamment pour les tablettes).

Certes le fond destroy a été enlevé (ouf !) mais il y a encore du pain sur la planche (le site du zéro porte bien son nom Smiley lol ). Comme je vous l'avais dit dans mon précédent message, n'appliquer que quelques retouches sera insuffisant. C'est la structure du site qu'il faut revoir et mettre aux normes actuelles. Le mieux serait de repartir sur une nouvelle maquette plus simple et moins imbriquée dans ces cadres.

Aidez vous de mon message précédent plein de conseils, et éventuellement des liens pour restructurer ce site dont la maquette actuelle est toujours bancale.

Une autre option serait de choisir une template déjà faite sur themeforest par exemple, si vous n'avez pas le temps, en plus vous pourriez choisir une template responsive. Ce site n'est pas un portfolio donc aucun souci.

Bon courage. Smiley cligne
Modifié par spongebrain (21 Feb 2014 - 22:30)