• Thème : erreurs à éviter

    Je vais principalement parler des thèmes sur EklaBlog, parce que 90% des visiteurs sont inscrits sur cette plateforme. Mais cela s'applique à tout site internet.

    Vous venez de créer votre blog, et vous voulez attirer plein de visiteur ? Alors il lui faut un thème fantastique ! Il faut de la couleur, des images, que ça brille, que ça flash... STOP !

    Pardonnez moi cette intro un peu niaise, mais qui n'a jamais hurlé en voyant un blog avec des gif animés de partout, des images plus grandes que l'écran, des couleurs vives de tout les côtés, du texte énorme à toute les sauces... Et j'en passe. Voici donc un petit récapitulatif des choses à faire et à éviter lors de la mise en place de votre thème.

    Les gifs animés : NON


    -> La lecture sur un écran n'est pas forcément agréable. Alors mettez vous à la place de potentiels lecteur qui essaie de s'intéressés à vos articles, mais dont le regard est sans cesse attiré par de nouvelles animation.
    Impossible de se concentrer sur quoi que se soit, et ça fini par donner mal à la tête.

    De plus, on a rapidement une impression de "trop chargé", ce qui est assez désagréable, car on ne sais plus ou regarder. Je pense nottemment à ceux qui mettent des fonds à paillette animés : Le fond bouge, donc on regarde le fond, et on n'arrive pas à se concentrer sur les articles qui sont peut être très intéressant. Résultat, au bout de quelques secondes, voir de quelques minutes pour les plus patient, on clique sur la petit croix rouge qui nous délivre de ce cauchemar épileptique.

    Je ne dis pas qu'il est interdit de mettre des gif, mais si vous n'êtes pas capable de définir quand ils sont utiles (et pas seulement décoratif) évitez, vous garderez des visiteurs. Car l'animation attire le regard. Vous pouvez donc les utilier dans vos article, pour mettre en valeur certaines parties.

    Les couleurs


    Alors, les couleus, c'est super. Même sans aucune image, elles permettent de définir l'ambiance de votre blog. Et c'est justement pour cela qu'il faut savoir les utiliser correctement, et ne pas faire comme un peintre débuttant qui vide tous ses tubes sur une toile, juste pour la colorer. La couleur doit servir à donner un thème, expliquer implicitement de quoi traite votre blog, donner l'ambiance qui vous permettra de garder le type de visiteur voulu.

    Tout comme les gif, les couleurs vives attirent le regard et rendent la lecture pénible, voir impossible. De ce fait, il ne faut jamais les utiliser comme fond de page. Vous pouvez donc bannir immédiatement les couleurs suivantes de vos idées de design :

    couleurs interdites

    J'insiste. Ces couleurs sont très jolies, alors n'écrivez pas dessus, ni en noir, ni en blanc, et encore moins avec autre chose.
    Parlons d'écriture justement. Tout un texte écrit uniquement avec l'une des couleurs ci-dessus est illisible. Les couleurs saturées sont à utiliser avec parcimonie, pour mettre en valeur un élément par exemple. Une phrase ou quelques mots d'un texte écrits avec une couleur vive attirons l'attention du lecteur ;)

    Pour vos fond d'articles, vous pouvez par exemple utiliser des couleurs claires ou désaturées :

    Design d'un Thème

    Design d'un Thème

    Vous pouvez également utiliser des couleurs sombres, mais pensez bien à l'ambiance que vous voulez donner à votre site. En revanche, elles sont souvent très bien en fond de page :

    Design d'un Thème

     

    Largeur du Site


    Pensez aux petits écrans, ne dépassez jamais 1000px de largeur de page. Il n'est jamais agréable de devoir scroller horizontalement sur une page web.
    Toutefois, vous pouvez indiquer la largeur de votre page en % ou en em, ce qui lui permettra de s'adapter à tous les écrans. Notez cependant que si vous choisissez cette unité, vous devrez penser tout le reste de votre design en % pour qu'il ne change pas radicalement d'un écran à l'autre.

    Organisation : les Marges et les Bordures


    Je radote, mais un blog lisible aura plus de chance de garder ses visiteurs. Si l'on ne peut pas différencier vos articles de vos menus, si l'écriture est toute serrée, on ne s'y retrouve plus. Alors aérez.

    La première chose à faire est d'espacer vos éléments des bords de l'écran. Que vous définissiez ensuite deux fond différents pour votre fond de page, et votre contenu, c'est votre choix de design, mais laissez au moins 50px, si ce n'est plus, entre vos articles ou vos menus, et les bords droit et gauche de l'écran.
    De manière général, laissez au moins 10px d'écart entre deux éléments bien distincts. Cela dégagera des blocs et rendra la lecture plus agréable.

    Vous pouvez accentuer cette démarcation grâce à des bordures, mais attention à ne pas en mettre partout, au risque de surcharger le design.

    1 - Sans fond




    Si vos deux éléments ont le même fond, un seul trait de séparation entre eux suffit très bien (si les marges sont assez importante) à les différencier.
    2 - Fonds différents
    Si vous voulez vraiment marquer une différence et que ces deux éléments ont des fond différent, vous être presque obliger de les entourer totalement.

     


    ATTENTION : Si vous utilisez des bordures, vous êtes obligez d'utiliser des marges internes pour "décoler" votre contenu des bordures.

     

    Les musiques


    De nombreuses personnes écoutent de la musique en surfant sur le web. Et vous savez tous qu'il n'y a rien de plus pénible que de se faire soudainement agresser par une page de publicité sonore qui se cache parmis vos nombreuses pages internet...
    La musique qui démarre automatiquement sur les pages de votre site est traitée de la même façon qu'une publicité : on ferme la page.
    Les playlistes automatiques sont donc à proscrire, si vous choisissez de mettre de la musique sur votre site, laissez toujours à votre visiteur le choix de l'activer.


  • Commentaires

    1
    Vendredi 13 Décembre 2013 à 17:42

    Les musiques qui s'activent automatiquement aussi me font fuir (je suis souvent sur internet avec ma propre playlist donc ça m'insupporte d'avoir une autre chanson à côté qui vient de je ne sais où ><)

    2
    Vendredi 13 Décembre 2013 à 20:50

    Moi je trouve que c'est bien les thèmes colorés... 

    Ah et les headers du genre E-Anim ? Ah dans mon cas la mienne fait 1010 px. 

    Ah oui je suis d'accord les musiques qui démarrent sans qu'on est cliqué sur rien c'est vraiment énervant, surtout quand on a plusieurs onglets ouverts...

    3
    Vendredi 13 Décembre 2013 à 21:23

    Moi les playlist qui démare toute seule je doit avouez je n'aime pas ça....

    Cependant si le thème est inspiré d'une musique sa change tous, mais bon la plupart du temps la musique a aucune rapport avec le thème...

    Les couleurs bas sa dépend mais que se soit homogène ...

    Et pour cette histoire de thème je suis d'accord les gens passe la moitié de leurs temps a commenté les thèmes mais ne lissent même pas les articles T^T(C'est a dégouté d'écrire un truc autant mettre rien c'est pareil, les gens diront toujours que se blog est super rien que pour le thème et mêtront ton blog en favoris -_-" la plupart du temps rien que pour se thème si génial)

    Pour la largeur de la page je suis aussi d'accord car l'écrand de mon ordi est tous petit il y a que sur l'ordi de mon père ou je vois les thèmes de taille plus grande

    4
    Vendredi 13 Décembre 2013 à 21:35

    Je n'avais pas pensé aux musiques, mais c'est un bon point :)

    @ Hilarry : Je n'ai pas dit sans couleur, j'ai dit sans couleur fluo à toute les sauces ;) Bien géré, je n'ai rien contre, mais les trois quart du temps, cela signifie un thème bâclé, qui me fait personnellement fermer la page parce que son contenu en devient illisible. ( petit exemple d'un des nombreux blogs dans ce style que l'on peu trouver).

    Header e-anim ?

    On ne va pas chipoter pour quelques px XD
    1000 ou 1100... il n'y a pas de grandes différences. C'est surtout histoire de rappeler que c'est parfois extrêmement énervant d'avoir à faire bouger la page horizontalement pour afficher tout son contenu.

    5
    Vendredi 13 Décembre 2013 à 21:38

    Oh ça dépend, fin après c'est pas faux...

    Oui, dans mon cas j'utilise un header flash (modifié avec e-anim) tout simplement car pour les plagiaires c'est plus difficile à modifier... mais ça m'énerve un peu que ça mette du temps à charger.

    Oui c'est sûr. 

    6
    Vendredi 13 Décembre 2013 à 21:53

    Honnêtement, pour quelqu'un qui tien vraiment à réutiliser ton header, que se soit du swf ou du png ne change pas grand chose. Le temps de chargement peu effectivement être un problème, mais je ne pense pas que ça soit dramatique si le header met plusieurs secondes à charger.

    @ Lunaria : Au moins, s'ils commentent le thème, il ne s'enfuient pas devant le design, et il y a plus de chance que certain reste pour le contenu ;)

    7
    Vendredi 13 Décembre 2013 à 21:56

    Bas en faite non -_-"

    Il on jamais lis du coup j'ai fermé au publique et seule mes amies peuvent y allez et je fait attention a faire un thème sobre pour que elles lisent -_-"

    8
    Vendredi 13 Décembre 2013 à 21:58

    En fait, si un petit peu. Disons que la personne concernée modifiait le titre du blog pour y mettre le sien quand je faisais au format png, au format swf elle est obligée de garder le titre ou de faire une capture d'écran. (je me trompe ?)

    Oui, même si certains m'ont déjà qu'au bout de 5 minutes il n'y avait toujours rien. :/

    9
    Vendredi 13 Décembre 2013 à 22:14

    @ Lunaria : Le thème ne fait pas tout, le contenu aussi est important ;) Ballades toi un peu sur les blogs, et laisses des commentaires sur les blogs qui traitent du même sujet que le tien ( sans faire de la pub ), pour discuter avec les autres visiteurs. C'est un des meilleurs moyen que je connaisse pour amener le bon public à s'intéresser à ton blog ;)

    @ Hilarry : Oh, je pensais que tu faisais juste ça par prévention...
    La capture d'écran reste la seule solution pour modifier le titre ( et effectivement, ça peut dissuader, car le boulot pour détourer le header est plus long que d'en faire un nouveau )

    Cela dit, je pense que tu peux signaler cette personne pour plagiat.

    Mais pour le temps de chargement, je n'ai pas de solution, le flash est long à charger, donc à toi de voir si tu continues en flash, ou repasses en png...

    10
    Vendredi 13 Décembre 2013 à 22:16

    Par prévention ?

    Je l'ai déjà fait, on m'a dit que je plagiais moi aussi vu que je prenais divers éléments sur différents sites, que l'on ignorait qui avait plagié le premier, donc j'ai laissé tombé, mais je crois que l'autre personne concernée a abandonné son compte (enfin je pense).

    Ouais, c'est une bonne question...

    11
    Vendredi 13 Décembre 2013 à 22:17

    Non il y a une autre façon d'obtenir ta création pour moi il suffit de faire clic gauche>inspecté l'élément et j'ai ton header en même pas 5 seconde -_-"(mais en flasch il n'y a plus que effectivement la capture d'écran)

    12
    Vendredi 13 Décembre 2013 à 22:18

    Ah je n'ai pas cette option personnellement. 

    13
    Vendredi 13 Décembre 2013 à 22:25

    Je vais pas faire une démo en plagiant quelqu'un donc je vais me plagier moi même

    après ma manipulation ça m'affiche >ça<(en bas a gauche)

    J'ai l'url de ton image ou il est possible de la téléchargé

     

    14
    Vendredi 13 Décembre 2013 à 22:41

    C'est une option disponible avec google chrome, mais cela revient simplement à afficher le code source de la page. On peut donc bien récupérer un fichier .swf, mais ce format est difficilement modifiable, ce qui nous ramène une nouvelle fois à la capture d'écran ;)

    15
    Vendredi 13 Décembre 2013 à 22:45

    (cette technique d'inspecter l'objet m'aide tellement en projet web pour modifier le CSS du site qu'on doit faire xD)

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    16
    Samedi 14 Décembre 2013 à 22:22

    J'aime beaucoup ton thème car je n'ai pas besoin de dézoomer la page xD (J'ai un ordit portable petit écran) Enfin quand je dézoome je le vois un peu plus grand bien sûr, mais quand je le laisse au niveau de défaut je le voit normalement, donc tu as pensé au petit écran aussi ^^  Et j'adore, c'est pas trop charger dans les menus , les onglet ne nous gêne pas. :) Ah oui, la musique qui débarque quand t'arrive sur un blog.. surtout quand c'est de la musique qui commence forte...

    Enfin bref, merci pour tes conseil ;) Je vais faire attention. ^^

    17
    Lundi 16 Décembre 2013 à 02:09

    J'adore ton nouveau thème *^*

    18
    Lundi 16 Décembre 2013 à 19:28

    Je trouve que tu a raison.

    Hillarry:Meme avec un header flash les Plagieurs font des captures d'ecran et recadre l'header tout simplement.

    19
    Lundi 16 Décembre 2013 à 19:35

    Oui mais ça ne sera pas animé.

    20
    Lundi 16 Décembre 2013 à 19:36

    oui mais il le font quand meme

    21
    Lundi 16 Décembre 2013 à 20:34

    Honnêtement, il n'y a aucun moyen d'empêcher quelqu'un de prendre une image sur internet. On peut essayer de leur compliquer la tâche en désactivant le clique droit, en mettant des fichiers animés... Si une image est posté sur la toile, il y a toujours possibilité de la récupérer.

    On pourrait discuter longtemps sur le plagiat, mais ce n'est pas vraiment le sujet de l'article. Je vous renvoie ici si vous voulez continuer cette discussion ;)

    => http://fanstasy-graph.eklablog.net/blabla-fantasy-graph-a104219874

    22
    Samedi 28 Décembre 2013 à 13:00

    J'aime bien cet article... Seulement, la musique que j'ai mis sur mon blog se démarre automatiquement. Je vais modifier cela en laissant le choix au visiteur c'est mieux !

    23
    Vendredi 17 Janvier 2014 à 07:50

    Bonjour! Je ne voudrais pas t'embêter, mais tu voudrais bien juste jeter un coup d'œil sur l'accueil de mon blog, seule je n'arrive pas à dire s'il y a des gros défauts >.< lien: clona.eklablog.com

    Merci d'avance et je comprendrais que tu ne veuilles pas!

    24
    Samedi 18 Janvier 2014 à 08:58

    Bonjour je viens d'utiliser un code que tu proposes qui me rend beaucoup service (j'ai mis un autre message pour te remercier) et là par contre je fais vraiment tout ce qu'il ne faut pas, en fait à chacune de mes pages je mets de la musique !!! démarrage automatique !!! j'écris des poésies et elles ont été écrites avec les musiques et grâce aux musiques que je glisse dans leur page... pas simple dans ce cas si je dois reprendre toutes mes vidéos et retirer l'autoplay.. je me vois pas le faire je perds donc certainement beaucoup de visiteurs et ça me désole.. merci en tous cas pour le renseignement et le conseil.

    25
    Samedi 8 Février 2014 à 03:39

    Bonjour, tes tutoriels sont super bien expliqués, je viendrais assez souvent te visiter afin de les mettre en pratique, très bon blog merci et à bientôt

    26
    Mercredi 26 Février 2014 à 08:53

    "Toutefois, vous pouvez indiquer la largeur de votre page en % ou en em, ce qui lui permettra de s'adapter à tous les écrans. Notez cepandant que si vous choisissez cette unité, vous devrez penser tout le reste de votre design en % pour qu'il ne change pas radicalement d'un écran à l'autre."

    Hum... Tout tout tout ? Les commentaires, bordures, tout ?! (Y en a qui ne le proposent pas...)

     

    27
    Mercredi 26 Février 2014 à 16:59

    Je retire mon com, le nom du blog a changé et je trouve ça un peu vache ce que je te demande >.<

    28
    Dimanche 18 Mai 2014 à 22:17

    Oh mon dieu le truc des gif et des musique c'est tellement vrai x_x ... Mais le pire c'est peut être les musiques, parce que sois j'écoute déjà de la musique soit je suis en appel, et dans les deux cas c'est super dérangeant x_x (une fois une fille voulait que je fasse son thème, elle m'avait mis une perm 3 sur son blog du coup, et entre temps elle me rajoute une musique qui démarre toute seule, c'était insoutenable, toutes les 3 secondes quand je voulais voir comment ça rendait le truc et que je voulais faire un truc et revenir sur le blog PAF la musique xD [mais je lui ai fait la même remarque, et elle a enlevé la musique x) ) 

    Oui c'était un petit commentaire de racontage de vie e.e... désolé

    29
    Mercredi 21 Mai 2014 à 14:14

    Bonjour

    Juste un petit mot pour te féliciter pour tes bons conseils. Ton Blog est tellement beau, que nous avons tous les goût d'en faire autant.

    30
    Mardi 14 Octobre 2014 à 22:12

    Bref, je dois te remercier pour ces très astucieux conseils.

     

    Tout d'abord je dirais mon point de vue sur les différents trucs à éviter :

    - Les gifs animés, ouais je suis d'accord sur ce point, la lecture sur un écran fait déjà légèrement mal aux yeux, mais avec des animations c'est encore pire. Donc y a rien de mieux que bannir ces choses pour mes prochains thèmes.

    - Les couleurs, en effet peuvent très bien exprimer la personnalité d'un site ou d'un blog. Mais je pense mettre le moins de couleurs possible sur notre blog et de faire en sorte qu'il soit le plus neutre possible, sans en abuser non plus.

    - La largeur du site, pour tout avouer, c'est toujours ce que j'observe en premier quand je vais sur les autres blogs. En effet c'est très chiant de devoir scroller tout une page de gauche à droite. Dés que je dois faire ça, je quitte directement la page parce que j'ai un petit écran (j'utilise 2 ordinateurs, un petit et un grand qui rame). Allez hop, dés que je vois un scrollbar en bas de ma page c'est "ok... c'est trop dommage".

    - L'organisation des menus, oui oui, bordures et marges font l'ensemble, mais c'est ce que je modifie le plus souvent sur notre blog après le CSS et le HTML, alors... Il est important de libérer les différents éléments des pages.

    - La musique, j'insiste sur ce point car c'est ce que je hais entendre lorsque je vais sur un site quelconque. Bref, je n'aime pas quand la musique démarre automatiquement surtout. C'est horrible à entendre surtout que je navigue sur internet avec de la musique dans les oreilles.

     

    Voilà tout mes points de vue constructifs sur cet article, donc je te souhaite une bonne continuation sur Fantasy-Graph !

     

    Liyu

    31
    Lundi 15 Février 2016 à 19:35

    "Pensez aux petits écrans, ne dépassez jamais 1000px de largeur de page. Il n'est jamais agréable de devoir scroller horizontalement sur une page web.
    Toutefois, vous pouvez indiquer la largeur de votre page en % ou en em, ce qui lui permettra de s'adapter à tous les écrans. Notez cependant que si vous choisissez cette unité, vous devrez penser tout le reste de votre design en % pour qu'il ne change pas radicalement d'un écran à l'autre. "

    Tout à fait d'accord !

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :