Pages :
Bonjour,

Une nouvelle fois je souhaite mettre à jour notre site associatif dédié aux aquariums et poissons.
Notre site est un portail d'aquariophilie avec plein de modules : forum, gestion de son aquarium, fiches descriptive des poissons, base de donnée sur les magasins proche de chez nous, etc. le tout géré par quelques bénévoles.

Comme je ne suis pas un pro, je me suis inspiré de la mode "responsive" et du look "métro" Smiley biggrin
Ce nouveau design sera orienté pour les nouveaux arrivant (les habitués passe rarement par la page d'accueil).
Les tuiles de couleur à la windows devraient les rassurer et sur les tablettes / smartphone je trouve que c'est très intuitif à cliquer.

Ce design est donc très très simple sans fioritures. J'aime bien l'idée d'orienter rapidement le nouveau visiteur vers ce qu'il cherche et donc nos principales rubriques et ne pas les noyer sous une montagne d'info ou de texte.

J'ai repris la dernière version de Boostrap et les scripts Modernizr et Respond pour la compatibilité. Le tout avec un peu de JQuery.

Le site actuel : http://www.aquariophilie.org/
que je propose de faire évoluer vers 2 versions mais laquelle choisir ?

1 - Avec menu fixe en haut : http://www.aquariophilie.org/tmp/
2 - Avec Sidebar : http://www.aquariophilie.org/tmp2/

Sur la version Sidebar, j'ai plus de place pour le menu de navigation mais évidement ça réduit l'espace du contenu de la page Smiley confus

Qu'en pensez-vous ? Avez-vous des suggestions ?
Modifié par Nicolas-Asso (19 Feb 2014 - 15:47)
Salut,

J'aime beaucoup ton menu horizontal bleu !

Par contre ça pèche en dessous, le ton sur ton c'est pas mon truc et on voit même pas le deuxième menu sur un écran très clair.
Bonjour,

Merci pour ce retour Smiley cligne

J'ai choisi le ton sur ton pour des informations qui ne sont pas primordial mais que je souhaite quand même afficher. Par exemple la phrase "Un forum aquariophilie pour vos aquariums, vos poissons ..." contient des mots clefs dans une balise H2. J'ai lu dans un article que c'est plutôt positif pour le référencement !

Sinon je ne comprend pas votre phrase :
SuperMerguez a écrit :
on voit même pas le deuxième menu sur un écran très clair.

Vous parlez bien de cette version http://www.aquariophilie.org/tmp/ mais de quelle 2ème menu ? Le sitemap dans le footer ?

Merci de vos commentaires et suggestions Smiley biggrin
Hello,

Quelques remarques et suggestions :

– Bonne customisation de Bootstrap, je trouve ça sympa visuellement même si le tout fait quand même un peu chargé (je m'arrête là pour les critiques graphiques et visuelles, d'autres le font mieux que moi).

– Le contenu de ta meta description comporte bien trop de caractère. Ce ne sera pas utilisé par les moteurs.

– La meta keyword est inutile (pour le positionnement dans les SERP en tout cas, elle ne joue plus depuis longtemps), surtout avec autant de mots-clés ! Mets en deux ou trois, puis voilà.

– J'arrive sur le site : "Aquariophilie.org souhaite avoir accès à la position géographique de votre ordinateur". Un rapide tour dans la page, pas de cartographie ou autre, je refuse évidemment. Pourquoi faire ? Pour tracker le visiteur ?

– Logiquement, le titre "Poecilia reticulata, guppy" sur la page d'accueil devrait être en h2 et pas en h3.

– Tous les titres des blocs suivants devraient également être des titres HTML, dans la suite de la logique.

– Je ne comprends d'ailleurs pas trop la logique de ces collapses, en bas… pourquoi certaines sont ouvertes et d'autres fermées. Pourquoi permettre de fermer celles qui sont ouvertes par défaut ? Finalement, les infos des blocs qui sont fermés ne devraient-elles pas être accessibles dès le départ ? Je pense que là tu as utilisé une technique juste parce qu'elle est disponible, sans te poser la question de savoir si c'était bien ce qu'il te fallait Smiley cligne

– D'une manière générale, les textes ne sont pas assez espacés de leur conteneur. Il faut augmenter les marges de tes textes (ou les marges internes de tes blocs) : ça ne respire pas du tout là !

– Le pied de page "plan du site" est salutaire ! Quand on voit le menu de navigation, on est loin de se douter que ce site comporte autant d'infos Smiley ravi

– Côté responsive, il y a un souci pour le bloc "actualités" : il faut survoler le titre pour afficher le contenu entier… or le survol sur une interface tactile… ça coince ! L'erreur classique Smiley langue

– Responsive, toujours : il y a deux boutons "menu" (pictogramme burger), mais le clic l'un des deux boutons déclenche de toute façon l'ouverture des deux menus ! Pourquoi ne pas mettre un seul bouton dans ce cas ?

Je m'arrête là pour l'instant. Bonne continuation à toi Smiley smile
Un grand merci audrasjb pour vos remarques Smiley biggrin

J'ai du être maladroit dans mon premier message mais le nouveau design n'est pas encore activé.
A cette adresse http://www.aquariophilie.org/ c'est l'ancien design qui va être remplacé dans quelques jours par :

http://www.aquariophilie.org/tmp2/
ou
http://www.aquariophilie.org/tmp/

Si j'ai bien compris, vos remarques concernent surtout le site actuel.
Je vais réduire la meta description, pour les keywords, j'ai lu dans un article récent que cela pouvait être encore interprété par certain moteurs de recherche / annuaires. Mais comme vous le suggérez, je vais la supprimer.

Pour la position géographique, vous pouvez la tester. Si vous l'activez, la liste des magasins et événements proche de chez vous apparait ... le contenu est personnalisé par rapport à votre position géographique. Si vous n'activez pas la géo, il y a un contenu de remplacement qui apparait. (qui sera également interprété par les moteurs de recherche)

Dans la futur version, j'ai essayé de hiérarchiser les balises H1 (titre du site), H2 (phrase slogan avec mots clefs important), H3 (titre avec mots clefs de nos articles les + lu), H4 (titre de section dans le sitemap du footer).

J'ai supprimé les collapses pour les remplacer par des blocs (tuiles à la mode "métro") qui réagissent de 2 façons :
1 - soit on voit l'image avec sa description et au survol c'est un Glyphicons qui apparait.
2 - soit c'est l'inverse ; le Glyphicons puis au survol apparait les informations de la box.

J'ai essayé de créer un parcours visuel en forme de spiral comme sur ce schéma :
upload/32293-aquariophi.jpg
J'ai joué sur la largeur des blocs et leur couleur, le but est que si le visiteur n'a pas cliqué dans l'un des blocs, les yeux se fixent au final sur la case "Jeux Concours" ... qui devrait attirer n'importe quel visiteur Smiley rolleyes

J'hésite beaucoup entre les 2 versions (sidebar ou menu fixed quand on scrolle vers le bas), n'hésitez pas à redimensionner ou essayer/simuler avec smartphone ou tablette Smiley cligne

Merci pour toutes vos remarques !
Modifié par Nicolas-Asso (21 Feb 2014 - 17:18)
Oups, désolé ! Quel boulet… mes remarques portent effectivement sur l'ancien site Smiley kc Smiley lol
Bon, ben j'essayerais de revenir dès que possible avec un point de vue sur les deux interfaces pressenties pour remplacer l'actuelle Smiley cligne
Bonjour,

Tout comme marc.suisse ! Smiley smile

En revanche ce site ressemble trop à la charte de Windows (carrés, couleurs… ). Même si cette structure est efficace. Il serait intéressant de revoir le code couleur avec une palette moins bariolée, plus "aquatique" et légère (plus clair ?).

Il y a aussi trop de bandes de couleurs dans les fonds, ça alourdit. Peut-être qu'un fond blanc avec des carrés plus légers serait plus agréable à l'œil et plus en accord avec le thème "fluide". Toutes ces bandes et ces carrés vifs sont un peu durs. Pourquoi pas des carrés transparents, avec votre fond aquatique qui transparait ? Quitte à passer les textes en foncé ?

Attention aux camaïeux de couleurs, le texte et les icônes du footer sont carrément violets, c'est trop rouge.

Il y a beaucoup de rubriques et de sous rubriques. Peut-être une simplification est-elle possible ?

La maison pour la home, pourquoi pas un aquarium (rond avec un poisson dedans pour être identifiable) ?

Je préfère les pages intérieures moins bariolées et plus claires que la home, pas exemple la page "Articles". Dont le fond bleu clair sur blanc s'harmonise mieux avec le header bleu. Les contours "fluides verts" au survol sont sympas. Mais pourquoi en vert ? Je simplifierait au niveau des couleurs, moins il y en aura, plus ce site gagnera en simplicité, en lisibilité et en clarté.

Bravo en tout cas pour tout le travail accompli. C'est pas des feignasses les aquariophiles ! Smiley lol
Modifié par spongebrain (23 Feb 2014 - 22:38)
Bonjour,

Merci spongebrain et marc.suisse pour vos derniers commentaires !

J'ai eu quelques retour sur notre association et eux aussi préfère la version sans sidebar. Je vais retenir ce thème (avec menu fixed en haut quand on scroll) : http://www.aquariophilie.org/tmp/

Lorsque j'ai utilisé une simple combinaison de bleu et vert, j'ai eu plein de retour m'indiquant que le site était "froid" voir "glacial" Smiley confus Pour la nouvelle palette des couleurs :

- notre thème est aquatique, la couleur principal est naturellement le bleu Smiley biggrin .
- j'ai ajouté le vert (repris également dans notre logo) car dans les aquariums d'eau douce nous mettons des plantes et le vert représente la nature.
- Je me demande si il ne faut pas ajouter le marron ? associé au vert, ca semble être les couleurs des sites sur la protection de l’environnement. (notre éthique -> la protection des zones aquatiques et leur habitants)

Il faut également ajouter à ces remarques que dans notre rubrique "articles", nous avons 237 pages constitué de textes avec quelques illustrations. Je crois que pour lire des textes, le mieux est d'avoir un fond blanc avec une typo simple et noir (comme pour les livres) ?
Mais ce point est moins important car c'est surtout la nouvelle présentation de la page d'accueil qui m’intéresse (j'ajouterai une DIV avec background blanc pour les articles)

C'est un vrai casse tête en couleur Smiley smile
Est ce que je reste fidèle à l'idée de base : le "Flat UI" et les couleurs "métro" de windows 8 (la futur home est surtout orienté pour les nouveaux arrivants et débutants) ou je personnalise mais risque d'avoir du mal à trouver une unité avec le bleu-vert-marron-blanc-noir Smiley lol

spongebrain, l'idée de la boule-aqua pour le link de la home est super intéressant mais ca n'existe pas dans la webfont glyphicons et je veux faire au plus simple ne pas charger de nouvelle image ou webfont ... vu la petite taille de l'icone, la boule-aqua va ressembler à un p'tit rond Smiley cligne
Modifié par Nicolas-Asso (24 Feb 2014 - 09:44)
Bonjour,

Nicolas-Asso a écrit :
C'est un vrai casse tête en couleur Smiley smile
Est ce que je reste fidèle à l'idée de base : le "Flat UI"et les couleurs "métro" de windows 8 (la futur home est surtout orienté pour les nouveaux arrivants et débutants) ou je personnalise mais risque d'avoir du mal à trouver une unité avec le bleu-vert-marron-blanc-noir Smiley lol

C'est justement de ça qu'il faut sortir, en voyant la home, je ne me suis pas dis « Tiens, ils ont un design aquatique et léger façon flat design », mais plutôt « On reconnait trop le thème Windows copié ».

Mettre au point une gamme de couleur est une des choses les plus difficile en design. Il ne suffit pas de récupérer une palette existante. Là il faut redonner de la cohérence et de l'harmonie à votre site. Les couleurs Windows de la home agressent trop.

Plutôt que d'ajouter du marron à une palette déjà trop chargée, j'en enlèverai (je virerais les gris, le violet, tout ce qui fait Windows, et retravaillerais les autres couleurs en donnant la priorité sur une base blanc/bleu). Pour me limiter à 3 ou 4 couleurs maxi, dont 2 dominantes (le blanc et un bleu aqua ? ). Si vous ajoutez la transparence, la clarté avec le texte en foncé (sauf sur certaines cases ? ) vous retrouverez un style qui vous est propre et non plus une simple copie d'un thème trop connu. Le style Windows 8 fonctionne quand il est interprété. Pas quand il est copié.

En effet, le texte noir/gris foncé sur blanc est plus lisible que le blanc sur fond couleur qui doit être utilisé en touches. Il vous faut trouver une logique dans votre code couleur qui aide l'utilisateur à se retrouver. Si vous avez une dominante aqua et des touches un peu plus vives, moins transparentes ou foncées pour les principaux repères, ça peut aider.
Plutôt que de surcharger en couleurs, il faut en enlever. En l'état je virerai le fond bleu foncé pour du blanc, et je virerai aussi les carrés trop vert golf ou violet et orange.
Attention de ne pas trop coller les textes sur les bords, ce n'est pas agréable sur un plan typographique. Il faut mettre un padding plus important, ça sera tout de suite plus aéré, ou pour reprendre votre thématique plus "aquatique". Smiley lol

Je reviens sur l'idée de transparence des blocs carrés, elle collerait parfaitement à votre thème et nous sortirait de cet ambiance bureautique Windows. Pour le moment les deux univers luttent sur la page d'accueil, alors ajouter en plus du marron ne ferait qu'alourdir quand il faut au contraire alléger.

Si vous éprouvez des difficultés à choisir une jolie palette pour l'ensemble du site et de la home (visiblement c'est le cas), il existe des outils en ligne pour vous aider. Vous pouvez choisir le nombre de couleurs, l'harmonie, une couleur de complément…

http://colorschemedesigner.com/

http://images.jupload.fr/1393242996.png
(hébergé chez jupload)

Vous pouvez aussi vous aider avec les sites d'aquariums publics (qui souvent ont un fond blanc avec une palette de bleus verts avec une couleurs de complément en touche mais rarement plus (orange ou un vert plus vif), ou bien avec un fond aquarium (uniquement sur la home) :
http://www.aquarium-portedoree.fr/
http://www.aquariumlyon.fr/
http://www.aquarium-st-malo.com/
http://www.visitsealife.com/paris/
http://www.montereybayaquarium.org/

Des logos que j'ai trouvé par hasard sur google avec du bleu aqua ou vert et éventuellement du beige en touche, c'est joli aussi, surtout sur fond blanc :
http://static2.wikia.nocookie.net/__cb20110327041040/logopedia/images/5/53/Tsa20logo.jpg
http://shawndrawn.blogspot.fr/2011/07/best-logo-ever.html

Une idée de palette peut aussi êtr inspirée par un site sans rapport avec l'aquariophilie, comme ici par exemple :
http://wistia.com/
...
Attention de ne pas copier, juste s'inspirer, sinon vous êtes sûr de vous planter, comme avec votre gamme Windows 8.

Voilà pour moi. Je pense que la première chose à résoudre au niveau du design, c'est la palette de couleurs, ça demande un peu de temps, de réflexion et de tests. En l'état vous ne pouvez pas rester sur cette palette Windows qui est à l'opposé de l'univers aquatique.

Une dernière chose, je vous ai fait le picto aquarium rapidement dans un style "Flat design" (qui peut éventuellement être utilisé comme logo et pour la home ?) :
Version texte sur fond bleu (police de caractère : Myriad Pro) :
http://images.jupload.fr/1393246205.gif
Version texte sur fond transparent (en grand format) :
http://images.jupload.fr/1393246225.png
Picto bleu :
http://images.jupload.fr/1393246273.png
Picto blanc :
http://images.jupload.fr/1393246252.png

Si vous aimez, je peux vous envoyer les fichiers vectoriel en message perso.

Attention, vos textes sur fond couleur et vos pictos ont un contour fin grisâtre qui ne fait pas propre, peut-être un mauvais paramétrage quelque part ?

À vous de jouer ! Smiley smile
Modifié par spongebrain (24 Feb 2014 - 14:19)
Merci spongebrain pour votre aide et vos conseils Smiley cligne

Je suis en train de chercher une palette de couleur plus simple. J'ai déjà fait quelques essais mais je vais continuer à chercher.
1 - http://img15.hostingpics.net/thumbs/mini_573219421.png
2 - http://img11.hostingpics.net/thumbs/mini_975015472.png
3 - http://img11.hostingpics.net/thumbs/mini_652761563.png
4 - http://img15.hostingpics.net/thumbs/mini_759300244.png
Je vais aussi faire des tests avec la transparence.

Désormais mes tests sont ici : http://www.aquariophilie.org/tmp3/

Pour le logo, je trouve votre idée génial mais notre logo à une histoire :
Le poisson (un scalaire) est une idée de l'un des membres fondateur de notre association (Michel) qui l'avait pris en photo dans son aquarium. En mémoire à Michel, je souhaite conserver l'idée de base du logo.
Je ne suis pas doué mais voici nos logo au format vectoriel : SVG, AI
Modifié par Nicolas-Asso (24 Feb 2014 - 20:09)
Re,

J'ai créé un picto pour remplacer la "maison" pas très "aquarium". Histoire de rester dans le thème. Là on dirait une niche. Puis j'ai ajouté le texte, mais vous pouvez utiliser juste le picto si vous le souhaitez. C'est gratuit.

Pour la palette de couleurs je trouve ces premiers essais déjà plus intéressants et en accord avec votre thème (limitez vous à 4 couleurs maxi, blanc inclus. Et éventuellement des petites touches d'orange ou de vert vif comme sur les sites dans mon premier message ?). Avec le fond blanc c'est tout de suite moins lourd. Si d'autres personnes souhaitent donner leur avis ? Smiley cligne
Prenez votre temps car ensuite c'est sur cette base que tout le site sera réalisé.

Concernant votre test de maquette avec un fond blanc et des carrés bleus, franchement, je trouve ça déjà nettement plus joli, léger et adapté que la palette agressive Microsoft 8 ! En plus ça s'accorde mieux avec les pages suivantes sur fond blanc. Avec cette palette de bleus les couleurs des photos sont mieux mises en valeur et on lit d'avantage le texte (attention à ces contours gris autour des textes et pictos, on dirait qu'il y a un contour sale et que la police de caractère est trop graissée (voir zoom capture en fin de commentaire*)).

Petite astuce : pour les tests, faites en 2 en même temps, et à chaque fois ne gardez que le meilleur, comparer 2 templates est très efficace pour avancer plutôt que de tâtonner à l'aveugle en essayant de se rappeler la précédente maquette.

Vous pouvez essayer avec une palette encore plus claire, en réduisant le nombre de couleurs (par exemple le bleu foncé peut être le même dans le header et dans les cases. Testez aussi avec des cases semi transparentes (éventuellement avec votre fond aquatique bleuté en arrière plan ?), et/ou avec des bleus in poil plus vert, mais pas trop.

Quelques petites maladresses graphiques (probablement lié au fait qu'il s'agit de tests), comme le filet noir qui apparait sous le header avec le scroll (faites le blanc). Le texte du footer est toujours en violet, reprenez les couleurs de votre nuancier quand il sera au point. Au survol, les pavés de textes sont toujours trop collés au bords des cases, ajoutez une marge autour de 10/15 pixels supplémentaires, quitte à écrire plus petit.

La bande noire en haut est trop dure et ajoute une bande supplémentaire qui plombe le header. Supprimez là ou donnez lui la teinte du header ou proche, il ne faut pas que les bandes et les cadres bouffent tout le site. Les 3 champs de formulaire d'inscription peuvent s'intégrer dans un carré et les icônes de navigation prendre leur place sur le fond du header. Ce qui simplifierait la maquette.
La pub carrée s'intègre mal dans cette grosse bande blanche en bas. Le footer est trop sombre. Il doit s'intégrer à l'ensemble.

Il manque des majuscules sur certains mots, il y a des lettrines inutiles (à éviter sauf cas particulier), des accents manquent, y compris sur les majuscules (c'est une faute pour l'Académie Française).

En tout cas pour moi ça avance dans le bon sens. Ce n'est pas encore tout à fait ça, mais vous êtes en bonne voie. Une palette de couleur s'obtient rarement en 1 heure, ça nécessite de faire des tests, de laisser reposer, d'y revenir, jusqu'à la bonne formule. Si d'autres avis peuvent vous aider ?

Voilà pour le moment. Smiley smile

*
http://images.jupload.fr/1393269358.jpg
(hébergé sur jupload.fr)
Modifié par spongebrain (24 Feb 2014 - 21:52)
Bonjour,

En l'état la dernière gamme que je vois est moins jolie que vos premiers tests sur fond blanc. Là l'azur un peu violet, l'indigo et le vert golf luttent énormément. C'est agressif, surtout qu'aucune couleur ne s'accorde et qu'aucune de domine.

Osez franchement un bleu aqua (un bleu un poil vert) clair et le même en moins clair + un bleu plus foncé + vert (mais seulement en petites touches, jamais en aplat). Là les couleurs sont beaucoup trop foncées, il ne faut en laisser qu'une foncée, pour les autres testez des teintes claires. En vous aidant de l'outil de nuanciers si nécessaire.
Essayez aussi de reprendre le même nuancier que les carrés pour le header et le footer pour unifier quand vous serez OK.

Le bandeau du haut passe mieux en bleu qu'en noir, mais avez vous essayé d'intégrer les éléments directement sur le header comme dans l'une de vos premières template ?

J'aurai tendance à caler les petits rectanghles du menu sur le bord gauche des carrés de contenu, et les icônes des réseaux sociaux sur le bord droit du contenu. Histoire de bien caler la structure de la mise en page.

Il y a toujours ce problème de contours inexistants dans les blocs textes. Il faut toujours laisser un "blanc tournant" pour laisser respirer, c'est obligatoire dans toutes mises en page :

http://images.jupload.fr/1393435234.jpg

Voilà pour le moment. Smiley smile
Bonjour,

J'ai fais quelques tests en reprenant le bleu et vert du logo, la palette :
5 - http://img11.hostingpics.net/thumbs/mini_530604palettecouleursaquariophilieorg.png
Mais je suis d'accord avec vous, c'est pas très jolie ... et le gros truc vert fait mal aux yeux ! Smiley biggrin Je vais essayer avec une autre palette Smiley cligne comme celle-ci :
6 - http://img15.hostingpics.net/thumbs/mini_705410palettecouleursaquariophilieorg2.png

Je vais ajouter un padding dans la box des messages du forum et agrandir celui de l'edito. J'ai retiré tous les text-shadow et j'utilise un SVG pour l'image de lien vers la home.

Il y a encore du boulot Smiley lol
Modifié par Nicolas-Asso (26 Feb 2014 - 20:01)
La palette 1 sur vos premiers essais peut peu être donner un début de piste ? J'aime bien un bleu un peu vert car il exprime l'univers aquatique, plus qu'un bleu azur ou un peu rouge qui nous ramène dans une palette froide. Entre les deux premiers bleux trop verts et les deux suivants trop rouges de la palette 1, il y a peut être une alternative. En plus clair. Le bleu plus foncé en troisième couleur peut être moins vert, ou pas. À tester en tout cas.

Ça avance avec des pas en avant et parfois un pas en arrière. Le principal est d'aller dans la bonne direction. Smiley lol
Merci pour tous vos conseils !

Après 2 semaines d'arrêt du développement à cause de projets personnel, je recommence avec de nouvelles couleurs et quelques arrangements !
http://www.aquariophilie.org/tmp3/

J'ai de nouveau sombré dans le verdâtre avec la box "Jeux Concours" ! Smiley lol ... j'y tiens au vert de nos plantes aquatiques Smiley biggrin

Je me suis aidé des outils de couleurs complémentaire pour ajouter une couleur "orange" au survol de plusieurs box.
J'ai supprimé une box inutile pour mieux intégrer la pub google.

Avez-vous d'autres avis ?
Salut,

Je trouve le bleu clair encore un peu "Windows", surtout avec le vert. Avez-vous testé bien plus clair ? Un bleur un peu plus vert ? Il ne faut pas hésiter à y aller. Regardez par exemple les couleurs du formulaire de réponse d'Alsacreations (boutons envoyer, prévisualiserf, bandes… ) pour vous donner une idée). Des couleurs trop foncées, c'est moins léger, moins fuide, moins aquatique. Vous pouvez garder un bleu foncé indigo, mais pour le reste je choisirait des teintes plus claires et moins brutes.

Le orange en hover, pourquoi pas, mais je trouve pas ça indispensable. Trop d'effet tue l'effet, surtout si cela semble un peu gratuit et agressif. Je laisserais dans la couleur du cadre. Attention, le bord tournant a été oublié dans les bas des cases. Le texte ne doit pas être coupé ou toucher, même en bas. En responsive, la dernière ligne toute collée en bas des cases, ça ne passe pas.

J'aime bien les photos quand elles occupent tout le cadre (diaporama). C'est plus moderne. Les coins arrondis, bof. Les photos de présentations (poisson, CO2 artisanal… ) peuvent occuper toute la case, en faisant des concessions pour la partie responsive. Des cadres dans des cadres, ça enferme un peu trop.

J'aime bien la petite icône avec les 2 poissons pour la home. Dommage de ne pas retrouver des icônes sympas dans les grandes cases, là encore c'est très "Windows". Notamment le paquet cadeau, la punaise, la terre…

Quand je survole "Chelmon rostatus" la typo change, d'ailleurs on a des typos différentes d'une case à l'autre (taille graisse… ). Certaines polices sont trop grasses (CO2, Chelmon… ). L'icône au survol de "Chelmon rostatus" n'exprime rien et fait là aussi très Windows. Sert-elle à quelque chose ?

On a encore une sorte de "rupture" entre le header/footer et le contenu. Avez vous testé en ajustant la même largeur du header/footer su le contenu ?
On a beaucoup de lignes horizontales et de cases. Faut-il encore en ajouter (trop d'effet… ) ?
Je testerai la bande bleue indigo du haut dans le même bleu que la partie basse du header. Et pourquoi pas le header et le footer sur fond blanc ?

Quand je scroll, la page saute brusquement pour se caler au niveau du menu du header. Cet effet est désagréable intégré de façon aussi brutale. On est à l'opposé de l'univers aquatique, fluide…

La bande verte sur le footer, pourquoi pas. Mais n'y a t-il pas déjà assez de lignes géométriques horizontales pour ne pas en ajouter d'inutiles?

Le code couleur du footer est moyennement cohérent avec celui du header. Même s'il n'est pas identique, il faut qu'ils se répondent.

En responsive, la seconde ligne du menu se place bizarrement. Les cases très foncées pour le menu, est-ce indispensable ?

Il reste des lettrines (Notre association à caractère… ). C'est aussi inutile que vilain. La lettrine doit être utilisée dans des cas bien précis, oubliez.

Voilà pour moi, un peu dans le désordre et sans être exhaustif.
En attendant la suite ? Smiley cligne
Bonjour,

trop de Bootstrap tue le Bootstrap, tu pourrais au moins changer les couleurs du thème par défaut quand on survole un lien histoire de ne pas avoir l'impression que tu as fait un simple copier coller d'un menu standard...
Bonjour,

J'ai suivi presque tous vos conseils Smiley biggrin

J'utilise une nouvelle palette de couleur, inspiré par kuler.adobe.com et spongebrain Smiley cligne
J'ai basculé dans le bleu clair qui penche du coté du vert, supprimé pas mal d'effets visuel et uniformisé la taille des caractères pour simplifier et alléger l'ensemble visuel de la page.

Je trouve que le texte blanc sur fond de couleur bleue clair n'est pas très visible, je vais peut-être modifier ce bleu Smiley rolleyes
upload/32293-Image2.jpg
Idem pour le texte blanc sur fond vert :
http://img15.hostingpics.net/thumbs/mini_659358Image2.jpg

Je suis aussi en train de mettre les photos en responsive avec les media-queries.

spongebrain a écrit :
J'aime bien les photos quand elles occupent tout le cadre (diaporama). C'est plus moderne.

Mais pourquoi je n'y ai pas pensé plus tôt Smiley langue ... merci !
spongebrain a écrit :
Quand je scroll, la page saute brusquement pour se caler au niveau du menu du header. Cet effet est désagréable intégré de façon aussi brutale.

Bug corrigé Smiley cligne

Comme il y a pas mal de modifications, j'ai créé une nouvelle page de tests ... la numéro 4 :

http://www.aquariophilie.org/tmp4/

A bientôt,
Modifié par Nicolas-Asso (31 Mar 2014 - 16:09)
Bonjour,

Tout d'abords, bravo pour ce travail !! Smiley smile
Je viens de tomber sur un petit soucis, j'ai cliquer sur la petite flèche bleu de la publicité Google et cela m'amène sur cette page => ici

Ce qui serais pas mal, ce serais de faire des pages qui gèrent les erreurs, genre la 404 pour celle-ci.
De plus, cela me dit ceci : "Apache/2.2.22 (Debian) Server at reef-ocean.com Port 80". Une personne malveillante irais chercher des informations sur les failles possible sur cette version. Pour cela, il faut changer la valeur de l'attribut "server" de la méthode GET.
Modifié par Dragoos (17 Apr 2014 - 14:43)
Pages :