Profweb

Accueil » Publications » Articles » Le « design adapté »

Publications

Articles

Publié le 8 avril 2012 | Multidisciplinaire

Le « design adapté »

Le Centre collégial de développement de matériel didactique (CCDMD) vient de mettre en ligne une nouvelle version de son site Internet. Le Bulletin Clic d'avril 2012 vous donne un bon aperçu de tout le cheminement qui a été effectué pour en arriver à cette mise en ligne.

L’utilisabilité et l'accessibilité nous ont guidés dans la construction du nouveau site. Bien qu'il soit déjà accessible sur les appareils mobiles (tablettes et téléphones intelligents), que son design soit clair, épuré et attrayant, il n'est pas pour autant « adapté ».

Qu’est-ce que le design adapté?

Le design adapté (ou comme le disent les Français « le responsive design »), c'est ce qu'il nous faut mettre en place dans nos prochains projets. Le concept est simple, il suffit de construire un site qui s'adapte aux dimensions des différents appareils. Ainsi, les sites web présentant des vidéos, comme celui de l'Activité-projet que nous sommes à réaliser, s'adapteront aux divers formats d’écrans d’ordinateurs, de tablettes comme le iPad et de téléphones intelligents comme le iPhone.

Différents formats d’écrans auxquels peut s’adapter un site web

Différents formats d’écrans auxquels peut s’adapter un site web

On pourrait penser que cela nécessite une programmation complexe, mais ce n'est absolument pas le cas. Le plus difficile, c'est de concevoir une interface pour que le site puisse s'adapter. Voici pour mieux visualiser le concept, quelques pages-écrans du produit Activité-projet qui devrait paraître à l'automne 2012.

4 déclinaisons en pixels pour le site Activité-projet (iPhone-320, iPad-420, Portatif-1024, grand écran-2200)

4 déclinaisons en pixels pour le site Activité-projet (iPhone-320, iPad-420, Portatif-1024, grand écran-2200)

C’est là que le concept du « design adapté » intervient : il faut permettre à chaque appareil d’avoir le design qui lui est le plus adapté. Pour y arriver, on utilise les Media Queries : propriétés CSS permettant d'adapter une page HTML à différents types d'écrans et résolutions. Pour les mordus de la programmation web, on retrouve une excellente description de la programmation fort simple à appliquer pour y arriver à l'adresse suivante : http://blog.loriskumo.com/2011/08/responsive-web-design-un-webdesign-adaptatif/

Principes à mettre en pratique

Au fond, le plus complexe, c'est de penser le design. Pour ce faire, il est recommandé de mettre en pratique certains principes.

  1. Repenser la densité informationnelle d'un site en donnant plus de place et en priorisant les contenus. Dans un site comme l'Activité-projet, ce sont les vidéos qui forment l'essence du site.
  2. Mettre en place une interaction simplifiée (nombre de menus réduit).
  3. Permettre une meilleure visibilité des outils d'aide à la recherche (toujours accessible).
  4. Offrir une taille des éléments cliquables adaptée (boutons et espaces ajustés au type d'écran).
  5. Créer une meilleure utilisation du pied de page.

Concrètement, cela implique une bonne réflexion lors de la réalisation du site. Par exemple, le nombre de menus principaux qui s'affiche est réduit à 3 ou 4 items qui pourront se placer de différentes façons selon les tailles des écrans. Les espaces entre les boutons et les menus ainsi que leurs grosseurs pourront varier pour permettre une meilleure utilisation sur les écrans tactiles qui n’utilisent pas de souris. Bien que cela semble simple, c'est par une conception fluide d'un site que cela doit s'effectuer.

En utilisant un design adapté, on peut donc arriver à un site qui s’ajustera parfaitement à n’importe quelle taille d’écran. Vous remarquerez qu'à partir de maintenant, de plus en plus de sites web posséderont, tout comme le site du CCDMD, un « design adapté ». Pour ceux qui veulent avoir une idée concrète du fonctionnement de ce concept et en attendant la publication par le CCDMD de sites « adaptés », on peut consulter l'excellent site http://mediaqueri.es/ qui présente quelques-uns des meilleurs sites avec « design adapté ». Vous pourrez alors visiter ces sites et vous amuser à redimensionner la fenêtre de votre fureteur pour voir le résultat.

Si vous connaissez d’autres sites web qui traitent du « design adapté », n’hésitez pas à nous les présenter.

3 commentaire(s)

  1. Pour afficher votre avatar dans vos commentaires utilisez le services Gravatar.
    Pour des explications techniques, consultez notre article « Afficher un avatar avec le service Gravatar ».

    Avatar default

    Robert Poulin a écrit le 9 avril 2012 à 21h09

    Bonjour, Je félicite l'équipe du CCDMD pour son nouveau site. Elle a fait de l'excellent travail. Robert Poulin

  2. Pour afficher votre avatar dans vos commentaires utilisez le services Gravatar.
    Pour des explications techniques, consultez notre article « Afficher un avatar avec le service Gravatar ».

    C85afaaad9a45c376661a94cc28716eb

    Nicole Perreault a écrit le 11 avril 2012 à 15h04

    Bonjour Réjean, Tout comme Robert Poulin, je tiens à féliciter le CCDMD pour son nouveau site : le "maximum trois clics" pour trouver ce qu'on cherche est réussi. Je tiens aussi à te remercier pour toute l'information que comporte ta chronique à propos du design adapté. En cette ère d'intégration du iPad et autres appareils mobiles dans la pédagogie collégiale, ce sera utile à beaucoup de gens.

  3. Pour afficher votre avatar dans vos commentaires utilisez le services Gravatar.
    Pour des explications techniques, consultez notre article « Afficher un avatar avec le service Gravatar ».

    Avatar default

    Émilie Lavery a écrit le 12 avril 2012 à 13h59

    Bravo pour cette performance optimisée du site du CCDMD! Cette nouvelle version facilite la tâche des étudiants, et celle des profs! Grâce à son nouveau moteur de recherche intégrant tout le catalogue du centre, il n’est plus nécessaire d’expliquer à nos étudiants où dénicher le matériel ou comment utiliser la requête auparavant alphabétique. On peut préciser sa requête, cerner de plus près une notion (l’accent aigu par exemple) et trouver même davantage d’exercices sur celle-ci!

Commenter

* champs obligatoires
Type d'intervention*