communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  Dernières imagesDernières images  RechercherRechercher  
Le Deal du moment :
Xiaomi Mi Smart Camera 2K Standard Edition (design ...
Voir le deal
11.39 €

Partagez
 

 [Fiche] Bien réussir son site. Astuces

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Poseur d'avant-garde
Illendel
Illendel
Poseur d'avant-garde
Féminin Date d'inscription : 16/10/2009
Age : 33
Localisation : Lyon

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptyVen 22 Juil 2011, 23:27

Comment réussir son site ? Astuces. À faire et ne pas faire.

Bonjour, amis simeurs, chroniqueurs et créateurs. Ce tutoriel s'adresse aux amateurs en programmation web qui veulent faire un site, voire un blog, pour leur chronique ou pour nous exposer leurs créations.
C'est en parcourant des sites dont j'ai trouvé les liens sur le forum que j'ai eu l'idée de ce tutoriel et de son contenu. J'ai vu des très beaux sites et d'autres comportant des défauts. Donc voici des petits conseils, à faire et ne pas faire, pour bien réussir votre site. Pour les détails de programmation, n'hésitez pas à poser une question voire à demander une aide personnalisée, je me ferais une joie de répondre.
Ce tuto pourra être progressivement complété, en fonction de vos questions et remarques (j'aurais du mal à le faire exhaustif du premier coup, soyons honnêtes ^^)

Tout d'abord, il vous faut choisir sous quelle forme vous allez présenter votre contenu. Si c'est pour une chronique, un blog est plutôt adapté. Plusieurs chroniques avec quelques autres bidules (les sims à télécharger...) peuvent mériter un site plus structuré. De même pour les créations. Si vous avez beaucoup de catégories, un site sera peut-être plus chouette. À vous de définir vos besoins, et ce que vous avez envie de faire.

1°) Un élément très important du site, c'est la navigation. Le menu, les liens, doivent être clairement identifiables et lisibles. L'ensemble doit être limpide, si l'utilisateur éprouve une quelconque difficulté de lisibilité ou de compréhension, il aura tendance à quitter le site.

2°) Les couleurs. Ce n'est pas parce-que vous aimez une couleur qu'elle rendra bien dans le navigateur. Il faut impérativement éviter les couleurs criardes sur les grandes surfaces (épargnez nos yeux pitié ** ). Accorder les couleurs est très important. Les pros créent un nuancier avant de commencer leur site (ce n'est pas ce que je vous demande hein, ce serait nawak, mais c'est pour vous en faire comprendre l'importance). Par exemple, on n'écrit pas en rose sur du rouge, c'est pas joli et en plus illisible. (c'est un ignoble exemple, j'ai jamais vu ça... j'ai déjà vu du jaune canari sur du bleu électrique... aïe)
Bref, vous m'avez comprise ^^

3°) Ensuite, pour les textes, et je pense particulièrement aux chroniques, on fait attention à la lisibilité. On évite les images de fonds, car les motifs entravent la lecture. C'est là que le choix des couleurs est primordial. Là, je n'ai pas de recette miracle, il faut tester, et il est évident que la couleur de fond et celle du texte doivent être suffisamment contrastées.

4°) Les images. Attention à la qualité. Maintenant, toutes les images sur le web sont en .png, c'est bien meilleur que le .jpg et comme ce format gère la transparence, il offre plus de possibilités. Il ne faut pas que les images soient trop grandes, à cause de leur poids, qui augmente le temps de chargement, mais aussi pour une questions d'esthétique. Il ne faut pas non plus qu'elles soient trop petites, pour d'évidentes raisons de visibilité. Ou alors faites des vignettes, quand on clique, on a l'image plus grande. A vous de trouver un juste milieu. Et faites également attention aux retouches des images. Certains effets peuvent être très chouettes, mais attention à ne pas rendre vos captures floues, surtout quand vous souhaitez présenter une création. D'ailleurs, pour les créas, les photos brutes sont souvent la meilleure solution (on ne triche pas sur le produit ^^).

5°) Les clignotements. Ça va peut-être déplaire à certain(e)s, mais c'est à bannir. C'est anti-ergonomique. Les textes, défilants, clignotants et pailletés, c'est pas super. À la rigueur, une petite icône animée pour mettre en lumière la publication d'un nouvel article peut passer. Mais il faut que ça reste discret.

6°) Les polices de caractères. C'est très important pour la lisibilité. Et les vrais geeks comprendront, mais si vous pouvez éviter le Comic Sans MS, c'est aussi bien. Ce n'est pas vraiment une police appréciée, et sur le web elle a une mauvaise image (bref ! Pas super simple à expliquer ça, je pourrais donner des détails si certains sont intéressés par le sujet). Préférez Verdana, Tahoma, Helvetica .. à la rigueur Arial pour faire classique. Pensez joli, mais pensez aussi lisibilité ^^(j'aime bien ces deux mots oui oui 8D )

7°) Les tailles des pages. Le truc auquel il faut faire très attention, c'est le scroll horizontal. Si on a besoin de se déplacer horizontalement dans le site pour voir du contenu, c'est qu'il y a un truc qui ne va pas. Soit vos blocs sont trop larges, soit votre fond est trop grand ou mal ajusté.
Là je vais vous donner une petite astuce de code pour ceux qui connaissent un peu. Si c'est le fond qui pose problème, il faut qu'il soit déclaré dans votre feuille CSS comme suit (dans le body en général) :
Code:

background : url('chemindelimage.png') top center no-repeat ;
Il sera centré et s'il est trop large, le trop sera masqué. Et hop, plus de scroll ! (Non non ce n'est pas magique). Après si vous avez un motif d'angle, vous pouvez mettre left ou right à la place de center, bottom à la place de top si c'est en bas...

8°) Les arrondis. Alors personnellement, j'adore les arrondis. Ça adoucis les blocs et c'est joli. En plus avec les nouvelles propriétés CSS3, c'est du gâteau (s'il y a des intéressés, cela pourrait faire l'objet d'un autre tuto). Par contre, il faut bien faire attention à ce que ça ne pixelise pas, sinon c'est pire que si vous laissiez les angles droits.

9°) Les effets de survol. Ils sont indispensables à l'ergonomie pour bien distinguer les liens. Mais attention à faire des choses légères, les gros trucs clignotants et roses à contour jaune, on évite ^^

10°) Les débordements. Ajustez bien vos textes et les blocs qui les contiennent. Si ça dépasse, c'est pas joli et pas ergonomique. Une partie du texte peut être masquée, on risque les chevauchements de liens et ainsi de suite. Là il faut y passer du temps et faire des essais.

Voilà, pour l'instant j'ai 10 astuces à vous offrir (même pas fait exprès), j'espère qu'elles vous seront utiles. N'hésitez à me donner matière à compléter et à exposer vos soucis.

MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Dernière édition par Fuyaya le Mar 07 Jan 2014, 19:53, édité 5 fois (Raison : édition titre et mise en valeur des astuces)
Revenir en haut Aller en bas
Ange gardien
Bettyboopjade
Bettyboopjade
Ange gardien
Féminin Date d'inscription : 25/03/2011
Age : 41
Localisation : Mons (Belgique)

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptyVen 22 Juil 2011, 23:30

Merci pour ce tuto Ill ! [Fiche] Bien réussir son site. Astuces 822878
Revenir en haut Aller en bas
http://bettyboopjade.canalblog.com/
Maitre en Création de CC
Maman Gateau
Maman Gateau
Maitre en Création de CC
Féminin Date d'inscription : 25/04/2010
Age : 52
Localisation : Nord

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptySam 23 Juil 2011, 08:44

Merci pour le tuto ! [Fiche] Bien réussir son site. Astuces 571125
Revenir en haut Aller en bas
http://www.choco-lova-sims.com/
Grand artiste du pinceau
Maripiou
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 36
Localisation : Au Sud

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptySam 23 Juil 2011, 08:53

Merci pour ce tuto. Very Happy
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Ange gardien
pomme-kiwi
pomme-kiwi
Ange gardien
Féminin Date d'inscription : 27/09/2009
Age : 37

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptySam 23 Juil 2011, 09:51

Merci Illou! Ce sera très utile vu le nombre de sites qui ne respectent pas ces critères!
Revenir en haut Aller en bas
http://www.dressingresponsable.com
Grand artiste du pinceau
Camelya
Camelya
Grand artiste du pinceau
Féminin Date d'inscription : 06/05/2011
Age : 32
Localisation : Dans mon lit.

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptySam 23 Juil 2011, 09:53

Ah oui merci pour le tuto ! Very Happy
Revenir en haut Aller en bas
http://legrenierdetatacamy.jimdo.com/
Ange gardien
idjya
idjya
Ange gardien
Féminin Date d'inscription : 05/10/2009
Age : 45
Localisation : Cholet

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptyDim 24 Juil 2011, 06:26

C'est con, je l'aime bien beaucoup moi la Comic Sans MS... Pas grave. (je sais, je suis pas une vraie geek! Wink)

Merci pour le tuto! Wink
Revenir en haut Aller en bas
http://idjya.eklablog.com
Peintre prestigieux
charlene27player
charlene27player
Peintre prestigieux
Féminin Date d'inscription : 11/02/2011
Age : 38

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptyDim 24 Juil 2011, 14:36

Merci pour le tuto ^^
Revenir en haut Aller en bas
http://lovasims3.jimdo.com/
Grand artiste du pinceau
tchoutchou7
tchoutchou7
Grand artiste du pinceau
Masculin Date d'inscription : 27/09/2009
Age : 33
Localisation : Canada

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptyDim 24 Juil 2011, 20:13

Merci pour le tuto Illou !
Revenir en haut Aller en bas
http://changementdetrain.wordpress.com
As de l'acrylique
Sucréomiel
Sucréomiel
As de l'acrylique
Féminin Date d'inscription : 03/01/2010
Age : 29
Localisation : Imaginarium

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptyDim 24 Juil 2011, 22:28

Un bon tuto: clair et efficace. Merci Illendel !
Tu parles de la possibilité de créer un tuto pour les bords arrondis (via le CSS). Ça m'intéresserait vraiment Smile
Revenir en haut Aller en bas
Boulet de la toile
Inasims3
Inasims3
Boulet de la toile
Féminin Date d'inscription : 29/07/2015
Age : 21

[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces EmptyJeu 30 Juil 2015, 10:23

Merci pour le tuto!
Revenir en haut Aller en bas
Contenu sponsorisé


[Fiche] Bien réussir son site. Astuces Empty
MessageSujet: Re: [Fiche] Bien réussir son site. Astuces   [Fiche] Bien réussir son site. Astuces Empty

Revenir en haut Aller en bas
 
[Fiche] Bien réussir son site. Astuces
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Fiche] Free : 10Go de stockage pour votre site !
» [Fiche] Comment mettre des accents dans le titre et la description de vos créations envoyées dans l'échange (site officiel Sims 3)
» [Photoshop] Atelier n°5 - Réussir une incrustation
» Atelier Photoshop n°2 - Réussir une incrustation
» [CLOSES] Inscription à l'atelier Photoshop : réussir une incrustation

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: Logiciels, applications et informations-
Sauter vers: