Heavy responsive

L’année 2012 marque clairement l’essor de la mise en page adaptative dans le web. Cette technique qui vient des US est plus simplement baptisée Responsive Design ou RWD (Responsive Web Design).

Le responsive design chez Mozilla

Pour tout projet nouveau ou de refonte il est très judicieux d’y songer plutôt que de maintenir plusieurs front-ends avec des maillages différents et des contenus tronqués pour certaines interfaces…
On a tous à y gagner à passer au Responsive Design pour garantir un seul web c’est à dire l’égalité d’accès au contenu quelque soit votre téléphone, votre tablette ou votre ordinateur.

Pas si simple

Seulement voilà, le Responsive Design ce n’est pas juste du web classique où on a ajouté quelques media queries en CSS3 pour adapter notre maquette de 1280 pixels de large à votre iBidulle.
Voilà ce que donne un site en RWD quand la conception dérape :

Exemple de mise en page trop lourde : plus de 9 Mo pour la page auditée

9.1 Mo sur l’une des pages intérieures, presque autant pour la page d’accueil (8.9 Mo) et ce,  quelque soit votre terminal ! Ce site a reçu une récompense pour son design. Pourtant il est inutilisable sur un smartphone d’entrée de gamme avec une connexion 2G ou 3G. Il ne s’agit malheureusement pas d’un cas isolé, de nombreux sites récents frôlent les 10 Mo en page d’accueil ou sur certaines pages intérieures.

Vaincre l’obésité

Entre les équipes de conception, de design et de développeurs, il sera facile de renvoyer la faute à l’autre mais finalement tout le monde va devoir remettre en question ses habitudes et en adopter de nouvelles (ou anciennes, certaines me rappelant cruellement le web des années 90)

  • Organisation du contenu :  aller à l’essentiel, oublier les pages d’accueil fourre-tout de 3 scrolls de haut, éviter la répétition des liens entre la navigation, la barre de liens contextuels et le footer. En bref, éviter la surabondance d’info.
  • Design : gérer l’air car l’espace vide n’est pas forcément le néant, travailler la typographie ne pèse pas plus lourd si on ne multiplie pas excessivement les web fonts ! On sait qu’on peut mettre un fond plein écran avec une image de 3 Mo ou faire des carrousels en pleine largeur, mais est-ce bien nécessaire ? En tous cas il faudra prévoir des alternatives pour les plus petits terminaux.
  • Intégration : il va falloir faire le tri dans les librairies JavaScript ! Oublier les librairies qui sont remplaçables par du CSS3 ou qui sont simplement obsolètes : gestion des fonds de champs avec des sprites de 800 pixels de haut, personnalisation des scrollpanes (inutilisables sur les interfaces tactiles), plugins pour les bords arrondis… il est même possible que votre site puisse se passer de JQuery ou de Prototype. Côté CSS, le layout devra être fluide donc avec des largeurs en % et éventuellement des valeurs max-width en pixels.
  • Développement : côté serveur on pourra participer à l’effort d’amaigrissement en gérant la densité de pixel des images de contenu et en ajoutant des process Ajax là où il faut.

C’est loin d’être exhaustif mais surtout, faites des tests réguliers même en tout début de projet sur des vieux mobiles, des tablettes, des vieux navigateurs desktop, sans wifi, en 2G, en 3G etc.

Responsive et accessible ?

En principe les 2 sont compatibles mais un bon travail d’intégration qui respecte les standards n’est pas forcément accessible. Donc un montage en responsive design devra valider les mêmes critères qu’un montage classique avec une vigilance particulière sur les points suivants :

  • Contenu caché avec display:none selon la taille d’écran.
  • Respect de l’ordre logique de lecture dans le DOM.
  • Pas de hauteur ni de fonts en pixels dans vos blocs contenant du texte.
  • Gestion des modules spécifiques pour les interfaces tactiles : menu de navigation, accordéons…

Donc en plus des critères qu’on applique à l’intégration pour desktop il faudra ajouter la bonne restitution des éléments spécifiques pour mobiles et tablettes en vous aidant d’ARIA et en testant avec les aides techniques pour ces terminaux : Voice Over sur iOS et Eyes Free sur Android. Même si l’usage desktop devient minoritaire, ne pas oublier pour autant ceux qui utilisent leur ordinateur de bureau avec des aides techniques pas toutes neuves qui gèrent souvent moins bien l’ARIA que Voice Over.

Pour conclure

Si le résultat sur mobile ou tablette d’un site web peut vous sembler moins fluide que dans une app native, le passage au responsive design est pourtant à encourager pour assurer l’interopérabilité et le libre accès.

A mon avis, il vaut mieux donner la priorité à un site accessible, totalement interopérable et adapté aux pires conditions de mobilité que de se lancer en priorité sur des applications natives. Dans un second temps, libre à vous de travailler sur des applis natives complémentaires et offrir ces services avec une expérience utilisateur augmentée. J’ai l’impression que la plupart des éditeurs ont fait l’inverse jusqu’à maintenant, l’application native faisant bien plus rêver que le site mobile.

La tendance risque de s’inverser car le responsive design bien optimisé et pensé « mobile first » a de beaux jours devant lui !

Une réflexion sur “ Heavy responsive ”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *