Design web & mobile

Codex

Articles du Codex

Le Codex désigne et rassemble une série de bonnes pratiques communes à la majorité des sites internet et transformées en règles à observer rigoureusement dans le cadre de la formation en Design Web & Mobile.

Dans le cadre de l’évaluation du TFA et du TFE, l’absence ou la non conformité de chaque règle se verra sanctionnée de la sorte:

  • Échec et ajournement (e);
  • Faute grave (g);
  • Dommage (d).

Télécharger la check-list du Codex

HTML, CSS

  1. Vos documents HTML doivent être sémantiquement corrects et valide W3C (e).
  2. Les url utilisées dans le projet sont bien conçues:
    • pas de majuscule, caractères spéciaux ou espaces (e);
    • la page d’accueil est soit: index.html ou index.php (e);
    • url sémantiques, faciles à mémoriser pour l’utilisateur (d).
  3. Les balises <title> de vos pages html sont uniques (chaque url a un title différent), descriptives et organisées de la façon suivante: information changeante – séparateur – information fixe (ex: Codex | Design Web & Multimédia | Haute École Albert Jacquard) (g).
  4. Les méta tag sont présents et soignés sur chaque page: au minimum charset, title, description et les balises OpenGraph (partage sur les réseaux sociaux ) (g).
  5. L’interface est responsive et réagit correctement pour l’utilisateur sur navigateur desktop, smartphone et tablette. Il a été testé sur des plates-formes Mac / Windows, sur différents navigateurs (FF+, IE10+, Chrome et Safari) et sur différents smartphone/tablette iOS, android (e).
  6. L’utilisation des images est optimale, prenant en compte les facteurs suivants:
    • raster ou SVG (g);
    • utilisation des images sprites (g);
    • optimisation pour écran retina @2x @3x (g);
    • poids des images (d);
    • optimisation du chargement des images en fonction de la taille d’affichage de l’image (responsive) (d);
    • utilisation des attributs alt descriptifs et appropriés (g).
  7. Les formulaires doivent être sémantiques et correctement intégrés (label, input, balise html5) (g).
  8. Le fichier html ne fait pas plus d’une fois appel au même objet javascript (jquery.js, etc.) (e).
  9. Si le javascript est désactivé, le contenu reste accessible (e).
  10. Document.ready ne s’utilise qu’une fois (d).
  11. Pas d’erreurs javascript dans la console(e).
  12. Pas de console.log() dans la console (d).
  13. Si du code javascript est mis en place, il doit fonctionner (d).

Javascript, jQuery

  1. Le fichier html ne fait pas plus d’une fois appel au même objet javascript (jquery.js, etc.). (e)
  2. Si le javascript est désactivé, le contenu reste accessible. (e)
  3. Document.ready ne s’utilise qu’une fois. (d)
  4. Pas d’erreurs javascript dans la console. (e)
  5. Pas de console.log(). (d)
  6. Si du code javascript est mis en place, il doit fonctionner. (d)

Optimisation

  1. Vos documents HTML, CSS, JAVASCRIPT ou
    autres sont rédigés de façon claire, structurée et commentée. Ils ont également été nettoyés de tout code temporaire ou super u (d)
  2. L’utilisation des images est optimale, prenant en compte les facteurs suivants:
    1. raster ou SVG; (g)
    2. utilisation des images sprites; (g)
    3. optimisation pour écran retina @2x @3x; (g)
    4. poids des images; (d)
    5. optimisation du chargement des images en fonction de la taille d’affichage de l’image (responsive); (d)
    6. utilisation des attributs alt descriptifs et appropriés. (g)
  3. La taille et le poids de vos pages et des différentes ressources sont optimisés. Concrètement, la page d’accueil ne prend pas plus de 10 secondes à s’af cher complètement. (e)

Ergonomie

  1. Les formulaires doivent être ergonomiques et comporter une validation javascript. Par sécurité, une validation serverside est recommandée (en php, source disponible ici) (g).
  2. Les informations présentes sur le site doivent être pertinentes à l’objectif du site, que ce soit du texte, des liens vers des sites ou des réseaux extérieurs, des pdf téléchargeables, etc. Par exemple, ne mettre un lien vers un compte twitter que s’il est activement utilisé. (d).
  3. Aucun lien ne mène à une erreur 404, sauf celui servant à montrer la page 404. (g)
  4. Votre projet doit comporter une navigation claire pour chaque utilisateur potentiel. (g)
    1. Indication de la page actuelle
    2. Logo cliquable et ramenant sur la page d’accueil
  5. Attention aux faux boutons, la zone active est la zone de clic (g)

Visual Design

  1. Si un plugin jquery ou autre est utilisé, ses éléments visibles (images et styles CSS) ont été complètement redessinés (g).
  2. Le projet est construit sur base d’une grille comportant colonnes, ligne de base, bloc et zone. Un élément cliquable (lien, bouton) permet d’afficher la grille en superposition (e).
  3. Cohérence stylistique et qualité du dessin de l’interface graphique et de ses composants (UI) – typographie, couleurs, traits et formes, luminosité et contraste. (e)
  4. Le favicon doit avoir été mis en place et s’afficher correctement (g).

Divers, éthique, citoyenneté

  1. Crédits, ressources et éventuelles contributions sont mentionnés là où ils doivent l’être et sous la forme que tu estimes la plus adéquate (e)
  2. Il n’y a plus de fautes d’orthographe, le projet ayant été lu et relu plusieurs fois:
    1. « Accueil » et non « Acceuil »; (e)
    2. plus de cinq fautes sur un écran; (e)
    3. pas de Google Translate. (e)
  3. Ajouter une page « politique de con dentialité »: si l’étudiant utilise google analytics et/ou des cookie et/ ou html5 LocalStorage, il est obligatoire de le spéci er aux visiteurs (GA Terms of services + European E-Privacy Directive). (g)