[new:15/10/2015]Après avoir présenter la plateforme Universal Windows Platform (UWP) et avoir montré un Hello World classique puis en MVVM il est temps de parler du Reactive Design !
Le Reactive Design : Concept, technique ou méthode ?
Le Reactive Design c’est tout cela à la fois selon comment on l’observe. C’est un concept, celui d’une UI réactive s’adaptant aux différents form factors. C’est aussi une technique, Microsoft donnant des moyens techniques pour appliquer le Reactive Design en UWP. Et c’est aussi une méthode à suivre car le succès ne peut s’atteindre sans réflexion ni planification.
Par où commencer ?
Il existe un article fort intéressant de Microsoft à ce sujet en français. Je ne vais donc pas le reprendre ici cela n’apporterait aucune plus value. Je vous conseille donc la lecture de ce papier d’autant que pour le moment les documentations sur UWP sont assez légères, même en anglais.
“Conception dynamique des applications UWP”
Une réflexion sur les images …
Je lisais dernièrement un papier très intéressant sur le concept d’images réactives et comme cela cadre parfaitement avec le sujet c’est l’occasion de vous en parler !
Il s’agit d’une étude en plusieurs parties très complète et bien menée d’un certain Jason Grigsby sur le concept des “responsives images”. Même si tout cela est envisagé sous l’angle du Web, la problématique concerne directement tous ceux qui doivent concevoir des UI “responsive” et “reactive”.
Si cette série d’articles est intéressante c’est parce qu’elle est la première que je lis sur le sujet, celui des images en tant que telles et le respect de leur signifié.
Quand on parle d’UI réactive et flexibles on parle systématiquement de mise en page. Vous mettez une grille ici ou là, on vous conseille de faire des placements relatifs par là, voire de déplacer des objets ici selon la résolution (barre de commande en haut pour un PC, en bas pour un téléphone par exemple), etc.
Aussi nécessaire que soit cette approche de la mise en page et du placement des contrôles on zappe totalement le problème des images…
Et détrompez-vous, c’est bien plus sioux que de fournir une image en plusieurs tailles/résolutions !
On vous aurait menti ? Par omission oui !
L’intelligence du travail de Jason est de montrer deux choses : d’une part que les images elles-mêmes doivent être travaillées dans un mode “responsive” et d’autre part qu’il y a une sémantique à respecter, des choix à faire, un véritable travail de directeur artistique derrière tout cela et pas seulement un bidouillage de changement de taille ou de DPI…
J’aime bien quand je lis un truc qui aborde les choses de façons “fraiche”, nouvelle, qui ne redit pas les mêmes choses qu’on voit partout.
Vous forcer à réfléchir sur le fait que mêmes les images que vous utilisez méritent d’être traitées de façon bien plus sophistiquée que vous ne le pensez est à mon sens un véritable apport. Et puis vous saurez aussi quoi répondre quand on vous dira “pour les images pas de problème hein, vous passez tout en 300 DPI il vous faut 2 minutes avec Photoshop…”.
Non il ne faut pas 2 minutes, non ce n’est pas un travail d’informaticien mais d’infographiste, voire donc de directeur artistique avec des choix qui doivent se justifier dans le contexte de l’information véhiculée. Qu’il s’agisse comme l’envisage Jason d’une page Web ou bien de l’UI d’une App tel que moi je transpose ici le discours.
Voici les liens vers la série originale :
Il existe une traduction française très partielle mais centrée sur l’une des parties les plus intéressantes, idem, je vous renvoie au site du traducteur :
“Introduction aux images responsives”
C’est court et cela pose le décor. Vous comprendrez assez rapidement l’enjeu et pourquoi adapter des images à différents form factors ne se résume pas et ne peut pas se résumer à un simple changement d’échelle avec Photoshop.
Conclusion
Le Reactive Design est un truc bien particulier qui profite à tous les développements, UWP ou non, dès lors qu’on désire offrir une UI digne de ce nom. Par exemple même si personne ne l’a envisagé dans ce contexte, reprendre le concept pour une application WPF est parfaitement justifié. Selon la taille de la fenêtre dimensionnée par l’utilisateur l’affichage ne fait pas que s’agrandir ou diminuer, il change de configuration, radicalement s’il le faut, pour offrir une UX pro.
Donc quel que soit vos objectifs de développement sur telle ou telle autre plateforme dans les semaines et mois à venir, vous pourrez tirer grand enseignement de l’esprit même du Reactive Design !
Stay Tuned !