WdStr

Apéro #14 – Analyse : choix des sites et critères

Nous avons le plaisir de vous annoncer les 3 sites retenus pour notre soirée d’analyse de lundi. La soirée est complète pour le moment, mais n’oubliez pas de vous désinscrire si vous ne venez pas pour laisser la place.

Vous trouverez à chaque fois le site, ainsi qu’une courte description du contexte. Nous vous proposons également une liste de critères non exhaustifs pour vous aider à “préparer” la soirée.

Les 3 sites :

Seicgland.com

seicgland

Le contexte donné par l’auteur:

  • départ à  partir de la maquette du site en desktop sans aucune indication
  • temps d’intégration limité à moins de 3 jours
  • Version responsive : liberté d’adaptation pour le responsive
  • Vu le temps limité le choix a été fait de cibler expressément l’iPad en portrait et l’iPhone (par exemple, à 900 px, le menu semble un peu vide, même s’il est fonctionnel)
  • Propulsé par un CMS : choix de garder la nav principale et de transformer la nav secondaire (comme sur cette page ) en champ select car impossible de compacter navigation autrement sur mobile (à l’époque). Les retours sur la navigation secondaire sont donc les bienvenus !
  • Côté contenus : breakpoints mineurs pour arranger autant que possible les box de la colonne de droite, mais c’est loin d’être parfait.
  • Par contre, ils ont bien accepté les choix que j’ai fait pour le rythme vertical, et pour la dégradation gracieuse itou, j’ai mis peu de fallbacks.

 Guide-artisan.fr

guide-artisan

Le contexte donné par l’auteur :

  • Site Responsive
  • Maquettes réalisées par une autre agence (qui fait plutôt du print)
  • Maquettes différentes pour chacune des résolutions (1280/1024/768/568/320), pour chacune des pages du site (une dizaine)
  • Alignements horizontaux entre des blocs au contenu dynamique
  • Changement de l’ordre des blocs dans le flux entre les différentes résolutions
  • Carte dynamique responsive
  • Skin des différents formulaires
  • Et différents JS tels que : fenêtre modale, info bulle, slider

Agglo-limoges.fr

Limoges

Le contexte donné par l’auteur :

  • Refonte du site existant
  • Déclinaison en 3 versions : desktop, tablette et mobile
  • Maquettes réalisées par une agence de communication
  • Intégration sur Drupal par une autre société
  • Volonté de répondre au mieux aux critères d’accessibilité du RGAA
  • Carte interactive

Un peu d’aide

Salle “Ergonomie / Design”

Ce à quoi vous pouvez faire attention en observant les sites :

  • Répartition des blocs, organisation des pages
  • Cohérence globale
  • Les contrastes sont-ils suffisants (conforme au RGAA s’il s’applique ?)
  • Navigation (Est-elle facile à trouver, à utiliser. Se repère-t’on facilement dans le site).
  • Interaction (liens identifiables, interactions avec l’utilisateur)
  • Formulaires (information à l’utilisateur, formulation des messages, …)

Salle “HTML/CSS/perf”

Ce à quoi vous pouvez faire attention en observant les sites :

  • Poids du site temps de chargement (pur, répartition des chargements)
  • Optimisation du code (minification, emplacement des scripts, …)
  • Organisation du code
  • Accessibilité
  • Validation W3C
  • Le site s’affiche-t-il correctement sur différents navigateurs ?

Salle “Stratégie mobile”

Ce à quoi vous pouvez faire attention en observant les sites :

  • Est-ce un site mobile “Responsive Web Design” (le site s’adapte tout seul à la taille du navigateur) ou un site dédié (le site détecte le mobile et renvoie une version spécifique) ?
  • Le site met il beaucoup de temps à charger sur mobile ?
  • Quelle meta viewport est utilisée ? Bloque-t-elle le zoom ?
  • Comment la navigation est-elle adaptée ? Est-ce utilisable ? Pourrait-on l’améliorer ?
  • Le site est-il correctement utilisable au “touch” (au doigts). Les liens ont-ils suffisamment d’espacement entre eux pour qu’on puisse en cliquer un sans cliquer sur un autre ?
  • Les boutons et liens sont-ils clairement identifiés comme tel, malgré la non présence du survol ?
  • La version mobile propose-elle les mêmes contenus que la version desktop ?
  • Si des contenus sont manquants, est-ce selon vous pertinent de les avoir retiré sur mobile ?
  • Les contenus multimédias (vidéos, images) sont-ils adaptés ?
  • Est-ce que certaines parties “sortent” ou dépassent de l’écran ?

 

Laisser une réponse

Your email address will not be published. Required fields are marked *

*

*