in responsive web design adaptive web design ~ de lecture.

Adaptive Web Design, une alternative sérieuse au Responsive Web Design

Si vous cherchez à créer un site web qui s'adapte automatiquement en terme d'affichage au device utilisé par l'internaute, sachez que le Responsive Web Design (RWD) n'est pas la seule réponse qui s'offre à vous, il existe un autre concept appelé Adaptive Web Design (AWD) qui permet d'offrir le même confort de navigation à vos internautes mais avec quelques nuances majeurs qui font toute la différence d'après moi.

Définition

Garret Goodman du site The Huffington Post a su résumer assez bien la différence entre ces deux techniques :

"Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window."

"Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features."

RWD vs AWD

Différences majeures

RWD

site web unique, non optimisé, à moindre coût et proposant du contenu identique sur chaque device.

  • Charge côté navigateur
    • utilisation de JavaScript/CSS pour modifier l'affichage (Modernizr, @media)
    • prise à chaud du changement de taille de la fenêtre du navigateur
  • Template unique
    • une seule version de page pour tous les devices
    • chargement de toutes les ressources (HTML/CSS/JS) pour servir la page quelque soit le device
    • coût de développement abordable
  • Impacts importants
    • une correction pour la version mobile peut affecter la version desktop
    • une dépendance rajouter pour la version desktop sera chargée aussi pour la version tablette
    • une unique URL pour une même page peu importe la version à afficher

AWD

plusieurs sites web, chacun optimisé et indépendant, coût de départ plus important, maintenance maitrisée, expérience utilisateur différente selon les devices, stratégie de contenu mis en avant.

  • Charge côté serveur
    • détection du device en amont
    • récupération de la donnée selon la version détectée
  • Template multiple
    • une version de page par device
    • un design/contenu potentiellement totalement différent par device
    • chargement optimisé des ressources utiles à la page consultée
  • Impacts maitrisés
    • seule la page de la version à corriger est modifiée
    • possibilité de servir chaque version du site avec une URL différente (Separate URLs) ou par le biais d'une unique URL (Dynamic serving)

A noter qu'il est possible d'allier les deux techniques à la fois sur un même site web, imaginer par exemple :

  • AWD pour rediriger l'internaute vers le site mobile/tablette/desktop optimisé
  • RWD pour les pages desktop afin d'exploiter la taille de l'écran au maximum : large, xlarge, xxlarge, xxxlarge

Dans la pratique

De nombreux poids lourds prédominent déjà le monde du RWD au niveau des frameworks CSS, que ce soit Bootstrap ou Foundation pour ne citer qu'eux, pourtant il existe de belles alternatives plus légères ou différentes comme par exemple Materialize, PureCSS ou Semantic UI.

Avec ce genre d'outils la vie est plus simple, le travail est prémâché, il n'y a qu'à suivre les "guidelines" et le tour est joué.


A l'inverse il n'existe aucun outil permettant de réaliser un site en AWD car vous l'avez bien compris à présent, il faut soit créer plusieurs sites (avec des URLs différentes) soit faire en sorte de servir les bons templates de pages en détectant en amont le device de l'internaute.

La redirection se fait en lisant les entêtes de la requête HTTP, comme par exemple le User-Agent qui nous informe sur le navigateur, le système d'exploitation, la langue, etc.

    -> window.navigator.userAgent
    -> "Mozilla/5.0 (X11; Linux i686 (x86_64)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36"

La bibliothèque UADetector extrait ce genre d'informations pour vous et met à disposition rapidement tout ce dont vous avez besoin pour rediriger vos internautes vers le bon contenu.

SEO

Quelque soit votre choix, les moteurs de recherche (Google ?) ne vous pénaliseront pas, bien au contraire, car la notion de "responsive design" rentre en considération dans le calcul du PageRank de votre site web.

Why Google Recommends Responsive Web Design

Je suis personnellement persuadé que AWD reste la meilleure option afin de satisfaire au mieux les mises à jour récente du moteur d'indexation Google qui met l'accent sur les critères mobile tels l'expérience utilisateur, la fluidité ou la rapidité d'affichage des pages.

Finding more mobile-friendly search results

Choisir la configuration de votre site mobile