Adaptative Layout ou la fin du design « Pixel Perfect »

Il fut un temps où la vie de développeur iOS était simple. Au lancement de l’Apple Store, il n’y avait qu’une seule taille d’écran iPhone et une seule résolution. Aujourd’hui les choses ont bien changé, et on retrouve sur le marché des appareils aux tailles différentes : iPhone 4, iPhone 5, iPhone 7, iPhone 7 Plus, iPad mini, iPad Air, iPad Pro…

Si en terme de version iOS, le marché n’est pas aussi fragmenté que pour Android, on ne peut pas en dire autant lorsqu’il s’agit de supporter les différentes tailles d’écrans. Cela est encore plus vrai, lorsque votre application est universelle, c’est à dire, qu’elle doit fonctionner sur iPhone et iPad. Et avec l’introduction du multitasking, les choses se sont encore compliquées puisqu’une application sur iPad, peut se retrouver à devoir partager l’écran (donc réduire sa taille d’écran) avec une autre application.

Voici une image (source Apple) qui résume bien la situation:

capture-decran-2016-12-13-a-12-41-33

Selon Apple, il y’a plus de 300 combinaisons possibles. Pour faire face à ce dilemme, avec iOS 8, Apple a introduit la notion de size classes et de traits collection. Dorénavant il ne s’agit plus de raisonner en taille d’écrans, avec un design au pixel près, ce qui devenait impossible au vu des éléments précédents, mais en terme de layout, c’est à dire de bloc d’affichage (pour faire simple).

Voici ce que cela donne:

size_classes

Il existe deux notions de bloc Compact (réduit) ou Regular (normal) sur la largeur/hauteur permettant de caractériser un appareil. Ce changement est fondamental, car il ne faut plus raisonner en terme de Device (je développe pour un iPhone 5, un iPhone 6…) et donc j’établis un design pour ce device, mais en terme de layout : que donne mon design dans une vue compact/compact, compact/regular (cf image précédente)…

D’ailleurs pour une application, il n’est plus possible de savoir sur quel appareil, elle s’exécute (en terme de design) mais uniquement quelle est la configuration de size class. L’exemple le plus parlant est celui des iPads, qui fonctionne en Regular/Regular. Or un iPad PRO et un iPad Retina, n’ont pas la même taille d’écran (en terme de résolution). Si vous souhaitez concevoir un design différent (ou au pixel prés) pour un iPad Pro et un iPad Retina, ce n’est tout simplement pas envisageable, puisqu’il est impossible pour le développeur de les différencier.

Bien entendu certains diront qu’il est possible de récupérer dans le code, le type d’appareil et de faire des traitements appropriés spécifique (par exemple charger un storyboard (interface dans laquelle on crée le design de l’application)), ou pire encore de modifier des propriétés dans le code à coup de if…then…else. Je vous laisse imaginer la maintenabilité et le coût…

Voilà donc pourquoi il est temps de passer à ce que l’on appelle l’adaptative design.

Voici quelques articles (en anglais) pour approfondir le sujet:
Article
Article
 

Christophe, Freelance iOS