Site de Tango à critiquer !

[Galpamare]

Bonjour,

J'ai avancé sur l'amélioration de mon site concernant un choix de contenue stratégique par rapport au mots-clés, créer un contenu adapté à chaque page et essayer d'avoir des liens cohérent par rapport à la page pointée. J'ai remplacé un maximum de tableau pour améliorer le référencement, essayé au maximum de respecter l'ordre H1,H2,H3. Bon j'ai pas encore réussi à mettre en place mes lien horizontaux sans tableaux mais ce sera bientôt le cas en css.

Mon site : http://www.artango.ch/

J'attends avec impatience vos commentaire et amélioration possible !

La difficulté que je rencontre maintenant c'est de gagner en visibilité par rapport à une population qui n'est pas encore au courant qu'il y a une offre dans sa zone géographique. Je lance des cours début février et je dois trouver des moyens pour créé de la visibilité. Peut-être avec des liens venant d'autres sites web aussi.

Merci de votre aide.

[reglisse]

bonjour,
je trouve que c'et écrit petit enfin le contraste j'aime pas bien que les couleurs soient sympa

cette n'existe pas http://www.artango.ch/stages.html

[psykoko]

Salut,
Rapidement, pourquoi tu ne personnalises pas tes balises h1, h2, h3... au lieu de faire :
<h1><strong>ton texte</strong></h1>
ou
<h2><span class='xx'>ton text</h2> ?
De plus, sors ton code CSS de la page et met le dans un .css externe.
Et pourquoi tu mets ton contenu dans des balises h3 ?? Y en a partout ! Fais plutot h1 (1 par page), h2 (deux-trois max) et h3 vraiment à la marge... le reste c'est du contenu. Pas du titre.
Tu as un title mais rien d'autre pas de balise description ça serait un plus pour l'affichage de ta page... Et le titre est très réducteur...


Ensuite, sur le fond, l'info est là. On distingue bien les lien... j'aurais mis un surlignement sur le hover...

Pour la forme... quel dommage de ne pas avoir plus de photos, d'illustration et de couleur... C'est du tango, que diable

[Anto1982]

Tu devrais mettre plus de photos.. C'est toujours la même en haut à gauche... Surtout qu'en plus, c'est une danse très visuelle...

[Galpamare]

Bonjour Reglisse et merci,

Concernant le lien stage, c'est très bizard car je l'ai corrigé ce matin avant de poster sur le forum et je l'ai testé, je comprends pas là... Oui le contraste est un peut trop fort n'est ce pas ? je vais le baisser pour voir.

Salut Psykoko, merci,
Heu... là tu me parle en des terme qui me dépasse, que veux tu dire par "spanclass"... Je fais tout avec Dreamweaver, oui je sais c'est pas bien, il faudrait tout faire à la main etc... Mais étant indépendant et comme c'est pas mon métier et que je fais tout moi-m'eme je peux pas, en tous cas pour le moment changer radicalement ma façon de faire. Oui et le CSS dans un fichier séparé, j'aimerais bien mais voilà je sais pas faire sa non plus.
Tu parle de balise description, tu veux dire des METAdescriptions ?
Tus dis mettre un surlignement sur le Hover, c'est quoi sa ??

Salut Anto,
Comme j'ai dit plus haut, il devrait bientôt en avoir plus.

Concernant les marges, j'ai eu toutes les peines du monde à faire déjà comme sa, et puis il y a certain titre que quand je les changes de palce, sa faut tout ce qui à dessou en bordel.
Je cherche actuellement qqun pour m'en faire, il y aura du contenu multimédia bientôt.

Et concernant le référencement, qu'en pensez-vous ?

[ap34df]

Le tango, c'est pour les enterrements ?
Non, parce que pour une danse enjoué et enlevé, c'est mortel comme design...

[Galpamare]

Salut Ehplod merci pour ta réponse,

Oui je sais c'est pas très moderne, grand manque en images mais encore une fois sa ne saurait tarder.
Est-ce que tu peux préciser ce qui te dérange au niveau design ?
Et que penses-tu du référencement ?

Merci à toi aussi !

[ap34df]

Les couleurs que diables, les couleurs...
La danse, slow, rap, ou tango, c'est festif, non ?

[Galpamare]

Je ne veux pas surcharger et rester sur trois couleurs max 4. Mais tu n'aime pas ces couleurs c'est sa ?

Mais...Et que penses-tu du référencement ?

[Madrileño]

Artango ressemble beaucoup à la marque Artengo, possible confusion des utilisateurs.

[psykoko]

Pour le css :
tu copies toute la partie CSS de ta page

Code: Tout sélectionner

.Style163 {color: #B99C66}
.Style163 {color: #B99C66}
body  {
   font: 100% Verdana, Arial, Helvetica, sans-serif;
   background: #666666;
   padding: 0;
   text-align: center;
   color: #000000;
   background-color: #251B1B;
   margin-left: 5%;
   margin-right: 5%;
}
    /* Conseils pour cette mise en page hybride
    1. La dimension de base (indiquée en ems) des colonnes latérales est basée sur la taille de police par défaut de l'utilisateur. Il est donc important de veiller à ce que les graphismes d'arrière-plan des colonnes en tiennent compte. Avec un codage correct, l'accessibilité est meilleure pour les utilisateurs ayant besoin de polices de grande taille, puisque la largeur des colonnes reste proportionnelle. Si ce choix est incompatible avec la mise en page voulue, il suffit d'indiquer la largeur en pixels et de modifier en conséquence la taille des marges du div #mainContent.
    2. La taille des colonnes latérales de cette disposition étant basée sur la taille à 100 % du texte dans l'élément body, si vous diminuez globalement la taille du texte en utilisant la propriété font-size: 80% pour l'élément body ou l'élément #container, n'oubliez pas que la largeur des colonnes sera proportionnellement réduite. Pour compenser cette réduction, il est conseillé d'augmenter leur largeur, ainsi que la taille des marges latérales de l'élément div #mainContent.
    3. Si la taille de police est modifiée individuellement dans chaque élément div au lieu d'une modification globale (par ex. : la taille de police de #sidebar1 est réduite à 70 % et celle de #mainContent à 85 %), ce choix modifiera proportionnellement la taille globale de chaque élément div. Il est conseillé de modifier la taille de police en fonction de la taille de police finale.
    4. L'élément div #container n'est pas nécessaire pour cette disposition avec la largeur 100 %. Toutefois, vous pouvez l'utiliser pour créer de fausses colonnes ou limiter la largeur de la mise en page.
    5. Il n'est pas nécessaire de définir une largeur de 100 % pour l'élément div #container puisque, par définition, un élément div utilise 100 % de l'espace disponible. Toutefois, sa présence ici permet si nécessaire de réduire plus aisément la taille du conteneur global (en laissant un peu de marge de part et d'autre).
    */
    .thrColHybHdr #container {
   width: 100%;
   text-align: left;
   background-color: #251B1B;
}
    .thrColHybHdr #header {
   padding: 0 10px;
   background-color: #251B1B;
}
    .thrColHybHdr #header h1 {padding: 10px 0;}
    /* Conseils pour sidebar1 :
    1. si vous définissez une valeur de taille de police pour cet élément div, la largeur totale de ce dernier sera ajustée en conséquence.
    2. Comme nous travaillons en ems, il est préférable de ne pas utiliser de remplissage pour l'encadré même. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue.
    3. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".thrColHybHdr #sidebar1 p".
    */
    .thrColHybHdr #sidebar1 {
   float: left;
   width: 17em;
   padding-top: 0px;
   padding-right: 0;
   padding-bottom: 15px;
   padding-left: 0;
   background-color: #251B1B;
   margin-right: 5em;
}
    .thrColHybHdr #sidebar2 {
   float: right;
   width: 21em;
   padding-top: 0px;
   padding-right: 0;
   padding-bottom: 15px;
   padding-left: 0;
   background-color: #251B1B;
   border-left-style: solid;
   border-left-color: #352626;
   border-left-width: thin;
   text-indent: 10px;
}
    .thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {}
    /* Conseils pour mainContent :
    1. Si vous attribuez à cet élément div #mainContent une valeur de police différente de celle utilisée pour l'élément div #sidebar1, les marges de l'élément div #mainContent seront basées sur la taille de sa police, et la largeur de l'élément div #sidebar1 sera basée sur la taille de sa police. Il peut être utile de modifier les valeurs de ces éléments div.
    2. L'espace compris entre les éléments mainContent et sidebar1 est créé avec la marge gauche de l'élément div mainContent.  Quelle que soit la taille du contenu dans l'élément div sidebar1, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine.
    3. Pour éviter une perte de l'élément flottant, il peut être nécessaire de faire des tests pour déterminer la taille maximale approximative de l'image ou de l'élément, car cette disposition est basée sur une combinaison de la taille de police par défaut de l'utilisateur et des valeurs que vous définissez. Toutefois, si la taille de police d'un utilisateur est inférieure à la taille normale, l'espace disponible dans le div #mainContent sera moins important que celui que vous verrez lors de vos tests.
    4. Dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    .thrColHybHdr #mainContent {
   width: 50%;
   padding-top: 0;
   padding-right: 0em;
   padding-bottom: 0;
   padding-left: 5em;
   float: none;
   margin-right: 5%;
   margin-left: 15%;
}
    .thrColHybHdr #footer {
   padding: 0 10px;
   background-color: #251B1B;
}
    .thrColHybHdr #footer p {padding: 10px 0;}
    .fltrt {float: right;}
    .fltlft {float: left;}
    .clearfloat {clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;}
body,td,th {
   font-size: 90%;
   color: #CDC2C2;
   font-family: Arial, Helvetica, sans-serif;
}
a:link {
   color: #C66300;
   text-decoration: none;
}
a:visited {
   color: #C66300;
   text-decoration: none;
}
a:active {
   color: #C66300;
   text-decoration: none;
}
a:hover {text-decoration: none;
   color: #F07800;}
h1 {
   font-size: 120%;
   color: #B99C66;
}
h2 {
   font-size: 95%;
   color: #B99C66;
}
.style88 {font-size: 70%; color: #9C8787;}
.Style145 {font-size: 80%}
h3 {
   font-size: 85%;
   color: #CFC5C5;
}
.Style158 {font-size: 85%}
.Style161 {
   font-size: 130%
}
.Style162 {color: #B99C66}
.Style164 {color: #4D3E3E}
h1,h2,h3,h4,h5,h6 {
   font-family: Arial, Helvetica, sans-serif;
}

dans un fichier que tu nommes mon_style.css (qu'importe)
Puis dans ta page tu l'appelles comme ça : (à mettre entre les balises <header></header> de ta page :

Code: Tout sélectionner

<link rel=stylesheet type="text/css" href="../_css/mon_style.css">

Le chemin _css c'est libre à toi.

Deuxièmement, pour le a:hover, que tu retrouveras dans ton css, il suffit de le modifier pour avoir un surlignement quand on passe la souris dessus : c'est plus clair pour indiquer que c'est un lien:

Code: Tout sélectionner

a:hover {text-decoration: underline;
   color: #F07800;}

Ensuite, pour le titre de ta page, comme le dit Madrileño, pour éviter la confusion, mets quelque chose comme : Artango Lausane - Cours de danse Tango Argentin... Déjà, tu as des mots clés dans ton titre danse, tango, argentin... puis change le titre des autres pages pour être plus parlant. N'hésite pas à faire des phrases : Stage de danse Tango sur Lausanne, Pascal - Professeur de Tango à Lausanne...

Pour les couleurs, essaie un tryptique plus gaie. En gardant la base marron (#251B1B), tente deux couleurs plus gaies : #E30B73 pour un rose flashy et un rouge sang #D61E00. Tu auras en couleur complémentaire deux oranges #ED4B0C et #E3660B.

[Galpamare]

Salut Madrileño et merci pour ta réponse,

Effectivement c'est très proche mais les produit proposés sont diamètralement différents ! J'ai regardé sur Analytics et pas une seul fois l'expression "Artengo" n'a été tapé me concernant et donc pas de taux de rebond à cause de sa.

Psykoko merci pour ton aide en code !
Concernant la séparation du CSS et du HTML, est ce que sa va pas posé de blem à Dreamweaver pour gérer ces deux fichiers ? Comme toutes mes pages sont généré d'après un modèle j'aimerais pas qu'il y ai des interactions ? Le problème c'est que je suis dépendant de Dreamweaver pour le moment donc je dois faire en fonction de ce logiciel.

Concernant le a:hover, je trouve cool si c'est que quand on passe le pointeur de la souris dessus autrement j'ai pas envis de sous lignement.

Merci pour l'aide précieuse, c'est cool !

[psykoko]

oui, ton lien ne sera souligné que si tu passes dessus.
Pour dream, je ne sais pas comment il gère... en tout cas, tu peux le faire après Dreamwewer...
Mais bon, c'est pas non plus comme si tu en étais à l'optimisation du site

[Galpamare]

Merci..

Sa fait ch..... j'ai vraiment l'impression d'être handicapé avec tous sa, de pas pouvoir faire comme je veux, c'est vraiment difficile ! Déjà pour mettre un site merdique comme celui ci en place il m'a fallu des heures et des jours ! Pffffffffff.....
Et là j'ai l'impression qu'il faut tout reprendre encore une fois à zéro et que sans maitriser le code on fait rien de bon.

Je vois que je peux créer un fichier uniquement CSS sur DW, je vais essayer de mettre en place les lignes de codes que tu m'a donné encore merci !

[psykoko]

Ah le grand problème des outils de ce type...
Tu peux faire quelque chose de bien, mais à un moment tu es coincé !
Question : pourquoi tu n'utilises pas Wordpress comme un CMS par exemple?
Pourquoi partir de Zéro ?