1. Webdesign
~ Les bonnes pratiques ~
07/04/2013 1

2. Définition
● Organisation d’un site
 Architecture générale
 Organisation des pages (arborescence / navigation)
● Remarques
 Ne pas chercher l’originalité
 Attention aux différents navigateurs !
 Attention aux bugs ! (http://autun.catholique.fr/actualite.html)
 Simplifier au maximum la navigation
Introduction
07/04/2013 2

3. Introduction
07/04/2013 3

4. Textes
● Police
 Usuelle (reconnue par tous les ordinateurs)
 Assez grande pour être lisible
● Textes
 Fond clair, lettre foncées (blanc et noir / gris foncé)
 Ne pas souligner (pour les liens)
● Paragraphes
 Largeur : 10-15 cm (trop long sur une ligne = non lisible)
I. Eléments de base
07/04/2013 4

5. Contenus
● Images
 A utiliser (mais pas seule ; au moins une image par article)
 Pour attirer l’œil, aiguiser la curiosité
● Vidéos
 Peuvent être publiées seules
 En page d’accueil (http://www.diocese-saintetienne.fr/)
 Elles attirent !
 N’hésitez pas à reprendre les vidéos KTO !
● Utiliser les supports connus
 YouTube et Dailymotion pour les vidéos (ex. KTO : YouTube, gros
avantage pour le référencement et le nombre de vues)
 Flickr pour les images
I. Eléments de base
07/04/2013 5

6. Couleurs (1/4)
● Ne pas multiplier les couleurs !
 Importance de la charte graphique
● Les utiliser de façon logique
 Liens / titres
 Couleur de fond correspond à un contenu
(≠ http://gve.cef.fr)
 Une couleur par catégorie : ok, mais les parties
doivent être bien différentes
I. Eléments de base
07/04/2013 6

7. Couleurs (1/3)
I. Eléments de base
07/04/2013 7

8. I. Eléments de base
07/04/2013 8

9. Couleurs (2/4)
● Outils
 Couleurs : http://www.code-couleur.com/
 Complémentaires : http://pourpre.com/colordb
 Associations « en direct » :
http://www.yoyodesign.org/outils/ncolor/ncolor.php?langue=fr
 Contrastes :
http://www.snook.ca/technical/colour_contrast/colour.html
 Tester : http://colorschemedesigner.com
I. Eléments de base
07/04/2013 9

10. Couleurs (3/4)
● http://pourpre.com/colordb
I. Eléments de base
07/04/2013 10

11. Couleurs (4/4)
● http://colorschemedesigner.com
I. Eléments de base
07/04/2013 11

12. Ce qui se fait en matière de design
● Textes
 Par blocs (≠ http://www.corse.catholique.fr/spip.php)
● Bordures
 Peu utilisées (datées)
 Même couleur que le fond, en + clair ou +
foncé, bords arrondis (≠ http://polefontainebleau.catholique.fr/)
● Ombres
 Très utilisées, font modernes !
 Doivent être discrètes, dans les gris sans tirer vers le
noir (http://www.diocese-saintetienne.fr/)
I. Eléments de base
07/04/2013 12

13. I. Eléments de base
07/04/2013 13

14. I. Eléments de base
07/04/2013 14

15. I. Eléments de base
07/04/2013 15

16. Présentation d’une page (1/3)
● Toujours la même présentation
 Bandeau (Image avec logo, catégories. Pas
trop grand !)
 Barre(s) latérale(s) (une ou deux, avec les
widgets)
 Pied de page (entrées transversales, plan du
site…)
● Exception possible pour la page d’accueil
 Mais elle doit reprendre le design général
II. Organisation d’une page
07/04/2013 16

17. Présentation d’une page (2/3)
● Balayage
 L’internaute s’arrête sur les éléments qui attirent
l’œil (images, titres)
 Ne lit pas un long texte
 Importance des titres (pertinents / précis)
 Utilisation d’images / schémas
 Paragraphes à puces
II. Organisation d’une page
07/04/2013 17

18. Présentation d’une page (3/3)
● Eye tracking
 Comment l’internaute lit une page
II. Organisation d’une page
07/04/2013 18

19. Gadgets et widgets
● Bien les sélectionner, surabondance nuisible
● A garder :
 Barres de recherche
 Boutons réseaux sociaux
● A oublier :
 Compteurs
 Animations
II. Organisation d’une page
07/04/2013 19

20. Arborescence
● Règle des trois clics
 Pas plus de trois clics pour arriver quelque part
 Plus considérée comme une règle absolue
● Limiter les choix
 Eviter la surabondance de liens
 Trop de choix nuit à la lisibilité
 Menus déroulant avec les sous-catégories
 Orienter le choix de l’internaute, pas le complexifier
 L’internaute doit avoir l’impression de s’y retrouver
facilement !
III. Organisation du site
07/04/2013 20

21. Catégories ou pages ?
● Catégories
 Regroupent des articles appelés à se renouveler
 Date de publication importante
 De type blogs : rangés par date, mise à jour
régulière, sous-catégories possibles
 Exemples : Actualités, Editoriaux…
● Pages
 Indépendantes
 Changent peu
 Souvent entrées transversales
III. Organisation du site
07/04/2013 21

22. Catégories et pages
● Importance des titres
● Pages : les incontournables
 A propos (l’internaute doit savoir qui fait ce site, son but)
 Contact
 Recherche
 Horaires (pour une paroisse, un sanctuaire…)
 Venir (pour une paroisse, un sanctuaire…)
● En pied de page
 Mentions légales
 Éventuellement Presse
III. Organisation du site
07/04/2013 22

23. Référencement
● Important dès le Webdesign !
● Ecriture d’URL
 Avec les titres des articles / pages, mots-clés
 Exemple : KTO (http://www.ktotv.com/videos-
chretiennes/emissions/a-la-source-loi-taubira,-allocations-familiales,-et-l-
actu-de-la-semaine/00075141)
● Lier les articles entre eux
 Onglet + sur les vidéos KTO
● Lier à d’autres sites
III. Organisation du site
07/04/2013 23

24. Contact
● Jean-Bastien Prévots
 Webmestre
 webmestre@ktotv.com
 01 73 02 22 45
07/04/2013