Discussion :

[rodolphebrd]

Le breadcrumb est un fil d’Ariane qui permet de savoir exactement où l'internaute se trouve dans l'arborescence du site.

Le favicon est une petite icône qui se trouve à côté de l'URL du site affiché.

Concernant le menu je verrais quelque chose de très simple comme cela :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
nav .M li a:hover {
   background: orange;
   color: white;
}

Le orange étant une couleur qui s'adapte bien avec les tonalités de gris et le vert.

[RicardoBxl]

Ok je suis en train de regarder sur le net comment ça marche et ce que cela apporte.

Lol à force je vais devenir un expert avec vous

D'ailleurs cela me plairait bien héhéhéhéhé.

Je viens de changer le code au passage de la souris. Mais je suis perplexe.

Va voir et donne-moi ton avis. C'est pas too much ????

[rodolphebrd]

Il ne se passe rien.

Attention, mon conseil à une valeur indicative et doit être adapté.

[RicardoBxl]

Oui je comprends que ce sont toujours des propositions. Ne t'inquiète pas.

Je voulais dire que j'avais fait l'essai avec l'orange et que j'étais perplexe.

A propos je suis occupé avec le favicon.

Voilà j'ai crée une favicon qui est la reproduction de mon logo.

T'en penses quoi ? C'est tellement petit qu'on voit pas très bien. Mais peut-être que le but n'est pas là.

[rodolphebrd]

Le favicon devrait ne conserver que les lettres AR en enlevant le fond vert.

Concernant le menu la couleur orange (essayez #ff6f00) est plutôt bien mais il faut la nuancer.
Des outils sont disponibles en ligne comme celui-ci : http://colorschemedesigner.com
Ne jamais oublier que l'internaute est TRES impatient et que chacune de ces actions doit être parfaitement simplifiée grâce à une interface intuitive.

Si la couleur orange est choisie alors par harmonie les textes surlignés devront adopter la même couleur pour éviter d'avoir un nuancier confus.

[RicardoBxl]

Re,

Ok je vois tout çà.

A propos dis-moi "tu". Pareil pour les autres. On va pas se formaliser ici

Je vous le demande, poussez-moi dans mes retranchements. Obligez-moi à aller de l'avant .

Je suis passionné et j'ai un énorme plaisir à apprendre et donc évoluer.

Serais-je un informatique geek maso ???

Je me lance dans les tests

Voila j'ai retravaillé le a:hover.

J'ai appliqué un linear gradient tout en conservant une des couleurs.

Mintenant cela me plaît beaucoup.

Ton avis ?

Ricardo

[rodolphebrd]

Ça à le mérite d'être clair.

Je suis un partisan du flat design et de l'approche mobile first, donc j'utilise les dégradés avec parcimonie et je privilégie la clarté du contenu en premier lieu.

[RicardoBxl]

Et ce sera ma dernière modification ce jour. Je suis sur les rotules lol.

Voilà on disait que mes boutons étaient pas facilement cliquables....

Alors voilà j'ai changé les flèches par un bouton read more.

Votre avis ?

Perso j'aime bien ces boutons mais l'espace des News s'est allongé.

Mais avant que je retravaille la place prise par chaque News, donnez-moi votre avis sur les boutons (je les ai trouvés sur Internet et les ai détourés moi-même en Gimp) et sur le fait que la partie News s'est allongé.

Ca choque ou non ? Ca vous plait ?

Changement des boutons pour la langue FR dans la partie Latest News
Lol pour être honnête c'est surtout parce que j'en ai marre pour aujourd'hui sinon évidemment que j'aurais bien positionné tout çà.

Alors soyez indulgent ouinnnnnnnnnnnnn

Et ne vous étonnez pas que le bouton soit différent au click et que ce ne soit pas read more qui revienne. J'ai pas eu non plus le courage de me plonger dans mon code JS.

[rodolphebrd]

Le bouton est bien.

Par contre quand on ouvre toutes les news le footer descend, donc à voir.

[RicardoBxl]

Mais quel suivi !!! Cela me fait énormément plaisir

Effectivement mais comme dit dans un des posts précédent je n'ai plus le courage ce soir de faire quoi que ce soit.

La suite pour demain lol.

Tient je pense à çà. Bien que je sais que l'on trouve tout ce que l'on veut sur le net aurais-tu par hasard un site à me conseiller pour apprendre le Web Design ?

C'est vraiment mon point faible...

Bonne soirée à toi,

Ricardo

[rodolphebrd]

Je t'envoie cela demain.

Bonne soirée.

[RicardoBxl]

Bonsoir les amis,

Avant tout n'oubliez pas que c'est l'adresse de tests ci-dessous qu'il faut visiter:

http://myspace.voo.be/rarrabito/

Voilà un nouveau paquet de changements pour le mieux j'espère:

Section droite:

- Icône flèche modifiée

Section Centre:

- Caractères modifiés en 14px Helvetica
- Texte d'accueil:

-> Repensé selon remarques de Muchos (PS le reste suivra dès que j'aurais mangé lol et pour l'instant que en FR !!!!)
-> J'ai employé la balise strong pour accentuer les mots clés

Logo

- J'ai détouré la bande noire qui apparaissait à sa droite

Section gauche:

- Icônes réseaux sociaux ont été agrandis à 40px par 40px

Menu

- Au passage de la souris un orange dégradée fait ressortir là ou pointe la souris.

Ce qui compte surtout c'est que l'on trouve enfin la lecture de mes textes facile et que l'on ait envie de les lire et suivre les liens.

Alors j'attends vos remarques.

Design remis à jour
Etant donné que beaucoup d'entre vous trouvait le design de mon site assez moche et sombre (et j'étais d'accord avec vous) j'ai finalement décidé de le retravailler.

Après la visite de pas mal de site et l'analyse de leur charte graphique j'ai opté pour un fond blanc. Cette couleur allie à la fois sobriété et sérieux. En outre elle fait mieux ressortir les textes. Ceux-ci pour rappel sont à présent en Helvetica 14px.

Oui je sais je dois mettre des pourcentages. Mais vu que je ne maîtrise pas ce point j'attendrais d'avoir le tuto sur le Responsive Web Design pour m'y mettre.

Le logo a été retravaillé sur Gimp. Je crois être arrivé à ce qu'il soit bien découpé.

Le footer a été fixé. Donc à présent il ne descend plus quand on lit les news.

Etant donné ce grand nombre de modifications certaines choses doivent être modifiées pour s'insérer dans le tout (ex les CV qui déborde du footer)... Mais j'y travaillerai dans la semaine.

Pouvez-vous me dire si ce ravalement de façade, la police utilisée et la manière dont j'ai écrit mon texte d'accueil vous plaisent enfin sans ... mais lol

Outils pour les Webmasters de google
J'ai récemment installé cet outil. Mais il y a peu j'ai retravaillé tous mes titles et balises meta. Chaque title est différent et pareil pour les balises meta.

Pourtant il m'indique toujours la même erreur que j'avais avant de les changer.

Balise META description en double
Balise Titel en double

Comment se fait il alors que j'ai mis les pages de mon site à jour il y a 1 semaine ?

Faut-il un certain temps pour qu'il en tienne compte ou dois-je faire quelque chose de précis ?

Merci

[Muchos]

Attention:

• Il y a beaucoup d'erreurs HTML (notamment un commentaire mal fermé, ligne 375-387).
• Vos déclarations de polices sont:

  Code css :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  html, body{ 
  	font-family: Helvetica, "Times New Roman", Arial, Times, "Times New Roman", vera serif, Georgia, fantasy, sans-serif, Times, "Liberation Serif", serif;
  }
  h1,h2,h3,h4,h5,h6{
  	font-family: helvetica;
  }

  Lorsqu'on déclare des polices, il faut:
  
  • Mettre entre guillemets tous les noms de polices contenant des espaces;
  • Citer une famille de polices par déclaration — c'est-à-dire ou sans-serif, ou serif, ou une autre, mais pas les deux ni aucune.

[RicardoBxl]

Coucou Muchos,

Merci pour les infos.

Pour les lignes dont tu parles elles ne sont pas prises en compte.

J'ai tout mis entre <!-- et -->

Bon et ton avis sur la refonte du site sinon et sois critique

[Muchos]

J'ai tout mis entre <!-- et -->

Non. Il y a 2 commentaires d'ouverts (lignes 1 et 14) et seul le dernier est fermé:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
	<!--
 
	<span class="HLTitres">Logo <img src="Images/icon_flechebasIV.png" name="fleche5" onclick="ChangeImage('Afficher5','fleche5')"/ >
	</span>
 
	<article Class="HLAfficherArticle" id="Afficher5">
	<p>There is now a logo ;-). This logo has been created by Laurence Maes. She works as a graphics designer. </p>
	<p>If you are interested in knowing more about her you can take contact with her at laurence_maes@hotmail.com </p>	
	</article>
 
	<br>
 
 
	<!--
	<span class="HLTitres">July 28th - Translations <img src="Images/icon_flechebasIV.png" name="fleche6" onclick="ChangeImage('Afficher6','fleche6')"/ >
	</span>
 
	<article class="HLAfficherArticle" id="Afficher6">
	<p>Since this website is made in three languages, it requires much time for the translations and corrections.</p>
	<p>Consequently some pages in one or another language are not on line yet. Please forgive me.</p>
	<p>As mentioned above I intend to resume the making of the website. Therefore I hope to be able to make thoses pages very soon.</p>
	</article>
 
	<br>
 
	-->

Si vous utilisez Firefox, le code source non-valide est généralement en gras et rouge.

[RicardoBxl]

Ah eh bien tu as l'oeil lol.


Je corrigerai çà demain. J'ai plus la force de bosser la dessus ce soir.

Merci de ton temps.

[ABCIWEB]

Bonjour,

Et tu n'as toujours pas mis un bout de code pour détecter la langue du navigateur ?
Quand cela sera fait, tu pourras peut-être diminuer un peu la taille de tes drapeaux que je trouve un peu gros (ils pèsent un peu trop à mon goût sur le design global).

[RicardoBxl]

Bonsoir à tous,

Cela fait longtemps que vous me faites tous la remarque sur mon design.
Caractères trop petits; couleurs pas harmonieuses; trop sombres; etc etc.

A présent que je me sens plus à l'aise avec cet aspect, j'ai repensé le design.

Concrètement voici ce que j'ai fait:

- Logo: j'ai détouré les lettres et ai mis en transparent le contour du R ainsi que l'intérieur des des deux lettres. Je sais que ce n'est pas détouré au millimètre près mais je crois que je m'en suis bien sorti quand même. Voit-on les bavures ?

- Couleur de fonds: c'était là une de vos remarques récurrentes. Trop sombre.
Alors j'ai visité pas mal de sites ces derniers mois pour avoir une idée globale. Et en fin de compte ce qui ressort de mes visites est que le blanc est une couleur souvent reprise. D'où le blanc.

- Font family utilisé pour l'ensemble du site: Voici aussi un de vos griefs récurrent. Trop petit !!! Alors j'ai d'une part agrandi la taille et j'ai opté pour le Helvetica aussi bien pour les titres que pour le texte des paragraphes d'autre part.

- Le footer: Je l'ai fixé de sorte qu'il ne bouge plus. Oui je sais c'est un truc que j'aurais du faire depuis longtemps....

- La page CV: J'ai opté pour un overflow:auto. C'est un choix délibéré. Est-ce que cela vous perturbe ? Est-ce choquant d'avoir une barre de défilement ?

- Les flèches pour parcourir le CV: Je sais que l'on m'a fait la remarque que ce n'est pas intuitif. En outre le fait qu'elles ne sont pas visibles en haut peut perturber. J'y travaille.

- Texte d'accueil du site: Mucho, je crois que tu seras heureux car j'ai adopté ce que tu m'avais conseillé. Ton conseil était des plus pertinents.

Voila c'est tout pffff Je dois bien entendu encore bosser sur le formulaire de contact ainsi que sur le texte d'accueil en néerlandais. Quant à allemand cela suivra.

Alors je vous implore de me dire que ENFIN le site vous paraît agréable lol

Bonne soirée à tous,

Ricardo

[Muchos]

Le footer: Je l'ai fixé de sorte qu'il ne bouge plus. Oui je sais c'est un truc que j'aurais du faire depuis longtemps....

Mais maintenant, le footer chevauche une partie du contenu. Certains textes sont illisibles!
En fait, on colle souvent le footer en bas de la page en ABSOLUTE.

Le site continue de s'améliorer. Bravo!

[RicardoBxl]

Hello Mucho,

Peux-tu me dire quels textes ?

Parce que j'ai mis un overflow:auto qui permet de parcourir la suite en cliquant sur les barres de défilement.

Merci