Pages :
(reprise du message précédent)

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

Ça avance lentement mais sûrement.

Attention à laisser de la marge même dans les bas des blocs. Dans le bloc en bas à gauche (bonjour, ce jeudi… ) c'est écrit trop gros (pourquoi ne pas reprendre le texte en hover de "Forum ? Voir même plus petit pour les textes de contenus dans les cases : 2 tailles : titres et texte courant ? ) et le texte est tronché en bas, on dirait un bug (la marge doit être appliquée sur tout le tour des cases). Un lien du style "Lire la suite…" serait utile en dernière ligne.
La photo des deux internautes est un peu étriquée avec cette découpe pas propre (traces blanches), ce logo minuscule qui ressemble à une tache à cette taille, la forme tarabiscotée se l'image (coins carrés, arrondis… ).
Le titre "Édito" devrait rester affiché au dessus du texte sans avoir besoin de faire un hover avec la souris. Idem pour les cases dont le titre disparait avec le hover (Forum… ).

La pub est bien intégrée dans une case spéciale, c'est une très bonne idée.

Je préfère avec le header et le footer de la même largeur que le site, avec ce design, ça passe mieux.

Une idée au passage, la bulle style BD dans la case "Forum eau douce et récifal" (supprimer le "&" qui est ici une faute de typo à remplacer par "et") pourrait avoir une forme ovale plutôt que rectangulaire, pour un style plus "aquarium", avec un poisson dedans en défonce (reprendre le design des petits poissons du menu en haut à gauche ? ).

Pour ce qui est des couleurs, c'est encore à optimiser (surtout le header). Si j'ai le temps, je ferais un rapide test avec un rendu encore plus simple… La couleur est quelque chose de très difficile à mettre au point dès qu'ont sort d'un gris + une couleur vive. La couleur qui me gêne le plus est ce bleu "bureautique" en fond dans le footer, et qu'on retrouve un peu partout. Trop agressif. Les couleurs manquent globalement de subtilité et de contrastes (elles ont toutes un rendu proche en niveaux de gris). Ne pas hésiter de choisir des couleurs plus douces et délavées et un bleu indigo bien contrasté. Rester pêchu et vif, sans trop saturer les couleurs…

Une bande apparait "aquariophilie souhaite avoir accès à la position de votre ordinateur…". C'est un avis perso, mais je trouve ces bandes trop intrusives. Même si c'est de plus en plus courant. Surtout qu'on a encore des bandes dans le header… ça fait beaucoup.

En attendant la suite ? Smiley cligne
Modifié par spongebrain (17 Apr 2014 - 23:08)
Bonjour,

Merci pour vos derniers commentaires Smiley biggrin

Comme vous l'avez peut-être vu, j'ai commencé à mettre en service le nouveau design du site, donc maintenant les tests sont en réelle sur http://www.aquariophilie.org/

J'ai beaucoup de taf car il y a eu des modifications sur les noms des class lors du passage de bootstrap 2 à 3, des problèmes de conflits sur des class qui ont le même nom sur notre forum phpBB, etc.

Je me suis aidé du tuto de Stéphanie W pour trouver le bon contraste sur les textes. Je ne connaissais pas la spécifications WCAG. Dès que j'aurai un peu plus de temps, je testerai avec d'autres couleurs.

Pour l'édito :
- si un membre de l'équipe à posté un message, il s'affiche par défaut et pendant 1 semaine
- au-delà d'1 semaine, c'est un message "standard" de présentation de l'asso qui apparait en inverse avec le hover.
L'avatar des 2 internautes correspond à l'ancien design, ils serons prochainement tous refait Smiley cligne

Pour la localisation, je ferai un sondage pour savoir si les visiteurs préfère voir des infos proche de chez eux ou un truc qui affiche un magasins ou un événements à des centaines de km ... Si besoin je supprimerai cette fonction.
En attendant, votre navigateur doit vous proposer de toujours transmettre votre position à notre site ou jamais : il suffit de cocher la case pour ne plus voir apparaitre la question Smiley cligne

P.S. : pour Dragoos, je ne peu pas intervenir sur les liens de google adsense ... je ne connais pas le site reef-ocean.com qui semble avoir des problèmes avec ses pages.
Modifié par Nicolas-Asso (17 Apr 2014 - 20:06)
Et hop !
Dans le feu de l'action, j'ai finalement pris le temps de simplifier la palette couleurs. Moins fluo/agressive, avec de l'espace blanc en haut pour faire respirer le site et aérer le header. Le header est simplifié pour faire moins "usine à gaz" (le menu doit rester sur une ligne pour ne pas compliquer le header (pour écrire plus gros, regrouper/retirer des rubriques ou simplifier le texte ? ), sauf smartphone ? (à simplifier pour rester sur une ligne sur les tablettes ?). Les bandes du haut gagneraient à avoir la même hauteur ? C'est vraiment du très rapide que j'ai fait, les fignolages demanderaient trop de temps. Le texte du logo passe en gris (police : Myriad pro avec un espacement dans le logo, qui peut être reprise pour les titres et peut être tout le site ?).

Attention, ce test "à la truelle" ne corrige pas de nombreux points énumérés ci-dessus et les couleurs peuvent peut être encore êtres affinées/optimisées ? C'est ce qu'il y a de plus difficile à mettre au point pour ce site. Les tests d'icônes (bulle avec les poissons… ) sont à redessiner au propre si vous les choisissez. Peut être que le bleu très foncé des textes dans les cases peut passer en gris comme le logo, je n'ai pas eu le temps de faire le test. À vous de voir et si d'autres alsanautes ont un avis, ça pourrait aider. Smiley cligne

Voili :

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

voilou :

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

Images hébergées sur jupload.fr. Vous pouvez faire une sauvegarde.
En attendant la suite ? Smiley smile


Edit : excellent le lien de Stéphanie pour les palettes de couleurs, voilà qui va m'être utile ! Smiley smile
Modifié par spongebrain (17 Apr 2014 - 19:24)
Super idées Smiley biggrin

Je crois que je préfère avec le texte bleu plutôt que gris.

J'adore l'idée des 2 bandeaux du haut espacé par un vide blanc qui contient le logo + nom, ca donne une impression plus légère et aéré Smiley ravi

C'est aussi une très bonne idée que le 2ème bandeau soit de couleur vert
Je pense aussi que les 2 bandeaux devrait avoir toujours la même hauteur : je vais essayer avec les media queries pour supprimer une partie du menu "non indispensable" quand il s'affiche sur tablette de manière à rester sur 1 seul ligne.

La bulle avec les poissons dans la box du forum est génial. Si je savais comment faire, je devrai éditer la police de caractère glyphicons pour y ajouter des icones perso Smiley lol
Je veux éviter d'alourdir la page avec plein de logos / icones. Smiley langue

Je vais tester tout ca .... j'aurai du poser plusieurs jours de vacances pour avoir le temps de tout mettre en place Smiley lol
Modifié par Nicolas-Asso (17 Apr 2014 - 20:07)
Cool !! Smiley lol

Prenez votre temps, le principal est d'aller dans la bonne direction.
Pour la couleur des textes foncés, moi j'avais une petite préférence en gris. Ça donne un peu de cohésion à la couleur des textes foncés et ça s'harmonise mieux avec le logo ? Si quelqu'un peut donner son avis histoire d'aider à trancher, voilà qui pourrait aider. Smiley cligne

Pour le picto de la bulle avec les poissons, c'est un montage rapide sur photoshop, moi même je n'ai pas de version propre en PNG ou en vectoriel. Si vous n'arrivez pas à le refaire (illustrator, logiciel de dessin, photoshop… ) je pourrai vous le fournir dès que j'aurai un peu de temps. Il faudra aussi que le choix des couleurs soit arrêté pour éviter de le refaire dans différentes couleurs. Sauf si vous arrivez à bidouiller un peu sur Illustrator ou un logiciel de dessin vectoriel (il en existe plusieurs, plus ou moins accessibles et bon marché, par exemple sur mac : http://www.pixelmator.com/ [logiciel pixel et vectoriel disponible en version d'essai ou à 13,99€, plus abordable qu'Illustrator ^^ ]). Je ne connais pas les équivalents gratuits ou bons marchés sur Windows, si qq a des suggestions ?

En attendant la suite ! Smiley smile
Modifié par spongebrain (17 Apr 2014 - 20:52)
spongebrain a écrit :
Sauf si vous arrivez à bidouiller un peu sur Illustrator ou un logiciel de dessin vectoriel (il en existe plusieurs, plus ou moins accessibles et bon marché, par exemple sur mac : http://www.pixelmator.com/ [logiciel pixel et vectoriel disponible en version d'essai ou à 13,99€, plus abordable qu'Illustrator ^^ ]). Je ne connais pas les équivalents gratuits ou bons marchés sur Windows, si qq a des suggestions ?
Bonjour,

Sur Windows en équivalent gratuit pour le "pixel", il y a le très bon Gimp qui n'est plus à présenter, en vectoriel une alternative à Illustrator peut être : InkScape http://www.inkscape.org/fr/

En plus accessible en terme de prix, une version light de Photoshop pour 68€ : Photoshop Elements :
http://www.adobe.com/fr/products/photoshop-elements.html

Même si rien ne vaudra jamais une bonne suite Adobe classique selon moi, à noter que la suite creative (Photoshop,Illustrator,Flash,InDesign,Dreamweavbeurk,etc) est à 30 euros par mois avec le statut étudiant ou enseignant...
Modifié par ohweb (18 Apr 2014 - 11:50)
Bonjour,

J'utilise InkScape pour tracer mes SVG ... même si je ne maitrise pas très bien l'outil, j'arrive à faire des choses simple Smiley lol

spongebrain vous utilisez une couleur orange sur la publicité dans vos exemples ... c'est fait exprès !?

J'ai apporté quelques modif pour améliorer le contraste texte/arrière plan, avec une nouvelle palette de couleurs, voici le résultat sur ma page de test n°4 :
http://www.aquariophilie.org/tmp4/
L'alternance de couleur dans les blocs est important car en mode "smartphone vertical" les blocs sont les uns en dessous des autres :
upload/32293-Image7.jpg

J'utilise la police Trebuchet MS car je ne veux pas uploder une police supplémentaire. J'ai ajouté une couleur d'arrière plan (body) légèrement gris à la place du blanc.
Dans le footer vous allez me taper sur les doigts avec ma barre horizontal et les 3 titres de rubrique de couleur ... vert illisible Smiley ravi

En tout cas merci pour votre aide car je préfère cette version à celle que j'ai mis en place il y a quelques jours.

A+
Salut,

En effet, les icônes et textes rendent mieux en gris, ça fait une couleur de moins et ça uniformise le texte avec le logo. De plus le gris est plus facile à reprendre sur le fond blanc, il passe partout et s'harmonisera plus facilement avec les différents éléments.

Rapidement, la Myriad est une police mac. Son équivalent Mac/Windows serait la Lucida (Lucida Grande sur mac, Lucida sans, Lucida sans unicode sur Windows… à vérifier). Cette police est plus élégante et efficace (web) que celle que vous avez appliqué sur le logo (les A trop pointus, le style trop "bureautique", le ORG en majuscule n'est pas beau et trop gros, le texte est trop haut dans la bande blanche et par rapport au dessin, du coup le texte du logo manque d'air [voir mon montage]).
L'idéal serait de se baser sur une police (avec un chargement variable sur mac et PC éventuel) et de l'appliquer partout, avec des variantes bold, italique…

La Myriad est bien adaptée à l'affichage web, aussi bien des titres/logos, que du texte courant. C'est la typo star chez Apple (avec un site web style Windows 8 ça ferait un juste équilibre ? Smiley langue ). La Lucida est très proche de la Myriad et peut s'afficher sur Mac ou PC en prenant soin de bien spécifier les variantes pour chaque plateforme. L'avantage serait d'adopter une seule police moderne, simple et efficace pour tout le site, du logo au mentions légales. L'Arial ou autre peuvent dégager.

Pas mal la bidouille sur la bulle avec les poissons, essayez de le refaire avec la forme de bulles arrondies (sadique inside Smiley lol ). Ça sera plus joli en plus d'être un excellent exercice au dessin vectoriel.

Oui, la case pub en orange est fait exprès. Histoire de mettre un peu de "désordre" ou de vie pour pigmenter la palette couleur par touches et en accentuent l'attention sur le pub ? Ça rend bien aussi en bleu comme vous avez fait. L'idée de cette case orange montre avant tout que cela fonctionne bien dans la palette actuelle et qu'en cas d'événement important sur le site, cette option pourra être utilisées sur une case au choix ou dans le site. Attention à des petits bugs (texte qui dépasse en dessous, en bas, pub mal centrée).



En vrac, dans les bons points ou ceux à améliorer, je note…

• Le menu principal passe bien mieux sur une ligne. Il est plus à sa place en haut, en cas de scroll il reste à sa place simplement. Ça faut le garder. Adieu l'usine à gaz !!
• Le sous menu sur la bande verte passe bien aussi. À tester avec les icônes de gauche un poil moins petits ? Là on est à la limite de la loupe. Sur la partie droite, les icônes sociaux sont un peu trop collés les uns sur les autres (voir mon montage). J'aime l'idée de passer aux couleurs originales des logos en hover, mais ça passerait avec une teinte grise à la base comme sur le logo et les textes. Colorer les pictos sociaux en bleu casse la logique du hover.
• Des gros bugs de textes coupés dans les cases, que ce soit sur les côtés au en bas. Ne jamais perdre de vue le contour tournant obligatoire sur les côtés, en haut et en bas. Non seulement le texte ne doit jamais toucher le bord (ça flingue la lecture), mais il doit respecter un espace de respiration minimum. C'est une des bases de la mise en page. Sans ça, tout le reste du travail tombe à l'eau. Mais il semble que ces mauvais calages soient ici imputables au site en travaux (Forum eau douce : texte tronché en bas, Un aquarium comme cloture : texte tronché sur les côtés, Édito : texte tronché en bas… ). Bref, il y a des calages dans l'air ! Smiley cligne
• Pour vous faciliter la tâche, ne gardez que 2 tailles de typos dans les cases (3 c'est déjà trop), 1 pour les titres (Édito, Forum… ), 1 pour le texte secondaire (présentation des membres… ; Notre association à caractère… ). La seconde taille peut être nettement plus petite, là par exemple dans l'édito le texte est beaucoup trop gros, du coup avec la justification, ça fait des trous entre les mots et c'est pas joli.
• Il manque toujours les accents sur les majuscules : ce sont des fautes ! (Édito… )
• Pas de Grosse capitale en première lettre sur les mots déjà en capitale. C'est inutile et pas moderne.
• Dans les cases avec des photos et le bas en bleu foncé, le texte blanc me semble un peu gros (et gras). Sur la case "Paracheirodon… " le texte sur une ligne n'est pas centré en hauteur", à solutionner.
• Dans la case forum, en hover, certaines lignes ne tiennent pas et les ">>" passent à la ligne du dessous.
• Les titres de cases doivent rester affichés en cas de hover : Forum, Édito… Un peu comme "Aquascaping" ?
• Dans le footer, le texte est déséquilibré sur ces 3 colonnes disproportionnées (attention au "?" qui se retrouve à la ligne). Passer la rubrique "Rubriques" sur 2 colonnes aidera à rééquilibrer tout en réduisant la hauteur du footer (voir mon montage indicatif).
• Je vous le confirme, vous avez raison, les titres du footer en vert sont peu lisibles. En plus ça fait pas très moderne et ça ne se justifie pas. Cette police de caractère passe très moyennement avec le texte tout collé, les grosses capitales pour les premières lettres n'apportent rien, au contraire.
• Le filet vert en haut du footer, bof… Ce site est assez bariolé comme ça ? Inutile d'en rajouter surtout si c'est gratuit et pas cohérent. Il serait plus judicieux de décoller le footer du contenu en marquant un peu plus le blanc (ça aèrerait et serait plus logique avec le header). Aucun artifice n'est nécessaire.
• Les mentions légales en bas pourraient être écrites en regular (ici on dirait du bold), plus petites et décollées des listes du dessus ?


Pour la déclinaison sur smartphones, peut être modifier et simplifier/unifier encore la couleur de fond des blocs ? On peut voir que depuis votre première version web, le nombre de couleurs a été réduit pour plus d'efficacité et d'harmonie. Tout ce qui peut être supprimé ou simplifié sur smartphone doit l'être. Aussi, le footer peut changer de couleur (blanc) ou le filet vert passer en blanc, pour éviter de ne pas trop barioler un site déjà assez chargé. Les titres verts sont confusants sur la version smartphone.


En tout cas, ça avance et on commence à approcher du but. Smiley ravi
En attendant la suite… Smiley smile
Bonjour,

Si le design est moderne, il est vraiment trop bleu / vert à mon goût, au point qu'on pourrait penser que vous avez des actions chez Windows Phone, en effet l'interface ressemble assez à celles-ci.

Le fond gris clair n'arrange rien à l'affaire, un petit gradient ne ferait pas de mal au design, j'ai essayé ça par ex dans firebug : (dégradé bleu clair ici)
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 

Ca rend pas trop mal, de la même manière ce genre de dégradés pourrait être appliqué aux "tuiles" de ton webdesign, je trouve vraiment que le rendu actuel est plat.

Tu pourrais également rajouter un peu de fantaisie sur ton background rappelant le monde aquatique, comme des bulles, un banc de poissons, une tortue ou que sais-je ? Histoire de rendre cela plus sympathique sur la forme car à l'heure actuelle si ton site est probablement intéressant d'un point de vue contenu, il est certainement encore trop fade sur l'apparence graphique.
Modifié par ohweb (23 Apr 2014 - 11:48)
Bonjour,

Je viens "enfin" de mettre à jour la dernière version suivant vos remarques :
http://www.aquariophilie.org
Ca ressemble vraiment à ce que je voulais faire. Un grand merci à tous pour votre aide et en particulier spongebrain.

En bonus, voici l'évolution du design du site Smiley lol

2008 : http://img4.hostingpics.net/thumbs/mini_7473792008.jpg 2010 : http://img4.hostingpics.net/thumbs/mini_3324842010.jpg 2013 : http://img4.hostingpics.net/thumbs/mini_5972822013.png 2014 : http://img4.hostingpics.net/thumbs/mini_88090720141.png 2014 actuel : http://img4.hostingpics.net/thumbs/mini_60068220142.png
Modifié par Nicolas-Asso (05 Sep 2014 - 15:08)
Salut Nicolas,
Bravo pour le travail accompli ! Très sympa ton site, il a pris un coup de jeune et est devenu plus simple à l'utilisation ! J'aime les couleurs plus fraîches et actuelles qui collent bien au sujet. Smiley biggrin
Et merci de nous tenir informé. C'est appréciable.
Très intéressant l'évolution du design du site. Je pense que ce sujet sera utile à d'autres.

Attention cependant, il reste quelques petits bugs.
Quand la fenêtre n'a pas la largeur suffisante (par exemple 1000 pixels de large, ce qui est déjà beaucoup, peu de gens utilisent toute la largeur de l'écran, notamment sur moniteur de bureau), certains textes sont coupés (hover de "Forums eau douce" coupé à droite, "Eaux minérales aquarium" coupé en bas, le titre "COMMUNICATION" coupé à droite… ).
La solution est peut être de faire plus court pour le texte (Forum eau douce), ou/et de réduire un peu la taille de caractère dans les media queries et/ou pour le footer, d'écarter les colonnes, surtout qu'il y a la place. Cela permettrait de rééquilibrer l'espace à droite et à gauche dans le footer (là il y a plus d'espace à droite).

Captures à l'appuis :

http://images.jupload.fr/1410505692.png
http://images.jupload.fr/1410505739.png

Pour les autres pages (par exemple "poissons d'eau douce" ou "Gestion aquariums") le header sobre et structuré passe comme un poisson dans l'eau ! Smiley lol . Je pense que le texte du footer et les mentions légales passeraient mieux un peu plus petit ? À tester en tout cas.
Sur la page "Articles" les hover sur les illustrations avec le vert vif pharmacie ne me semblent pas indispensables. Un hover tout simple en reprenant le vert du site serait plus harmonieux à mon goût.

Pour les petites étoiles, je les ferais façon "flat design" pour rester cohérent avec le site. Donc en aplat et sans filet de contour.

Je rendrais tout le texte du logo cliquable pour revenir à la home, plutôt que seulement le dessin à gauche. Là par réflexe, je clique sur le texte et il ne se passe rien, j'ai le réflexe de recliquer ensuite sur le dessin mais pas sûr que tout le monde en fera de même.

Ceci dit, mis à part ces petites corrections de calage (j'ai pas checké toutes les pages), un très joli site pour une association qui n'a pas les moyens de se payer une agence. Je suis fier de vous.
Si vous me l'autorisez, je serais ravi de pouvoir présenter ma participation à la refonte de votre site en tant qu'aide au redesign.
Cordialement, Philippe Smiley smile
Modifié par spongebrain (12 Sep 2014 - 09:37)
Bonsoir,

Je le confirme, c'est un belle refonte qui a été menée.
Cela étant, et comme spongebrain l'a très bien dit, il y a plein de dépassement de textes sur leurs conteneurs. On sent bien les limites de tels hover sur des blocs responsive avec un contenu dinamique et non maîtrisé…
welcome to hell
AMHA ils ne sont que très peu utiles (ces blocs un peu trop fermés). Ça fonctionne plutôt bien pour ce site web dans l'ensemble, mais dans le cadre d'une refonte d'envergure, je pense qu'il faudrait revoir et simplifier tout ça, et ne pas pas forcément utiliser un type de mise page aussi calé sur le «style metro» pour un site avec un aussi fort contenu, mais plutôt une mise en page type "portail" classique.

En tout cas, les multiples avancées et remises en question du site au fil du thread font plaisir à voir !
Smiley jap
Modifié par audrasjb (12 Sep 2014 - 23:45)
Merci pour vos messages Smiley biggrin

J'ai trouvé une petite astuce pour les derniers sujets du forum : pour les écrans entre 992px et 1200px je supprime le nom de l'auteur du message Smiley lol De toute façon ce nom d'auteur n'est pas trop utile !

Merci pour les autres idées (surtout celle du clique sur le nom du site pour retourner à l'index), je vais me pencher dessus Smiley cligne J'ai prévu de faire des petites améliorations au fil du temps. J'ai eu plein de retour positif de la part de nos membres sur cette nouvelle version ... merci à tous pour votre aide Smiley smile

Philippe vous pouvez bien sur utiliser votre participation à la refonte du site comme exemple. D'ailleur j'ai ajouté un p'tit mot dans notre historique.

A bientôt,
Pages :