Faire de l'adaptive design avec Fasterize

L'adaptive design est la technique qui consiste à générer différents templates de pages pour des écrans de tailles différentes (mobile, tablet, desktop). Cette technique est différente du responsive design dans la mesure où le template est choisi au niveau du serveur en fonction de l'entête HTTP User-Agent.

La difficulté liée à l'adaptive design consiste à classer l'ensemble des navigateurs par type. Cela implique de maintenir et interroger une base de données contenant la correspondance entre l'entête User-Agent et son type (mobile, desktop, tablet).

Fasterize gère la classification des User-Agents

Chaque requête envoyée au serveur d'origine contient un entête X-User-Agent-Class. Cet entête HTTP contient une des valeurs suivantes :

• mobile : la requête provient d'un navigateur sur smartphone
• tablet : la requête provient d'un navigateur sur tablette
• desktop_recent : la requête provient d'un navigateur sur bureau
• old : la requête provient d'un vieux navigateur desktop (Internet Explorer en dessous de la version 10). Cette classe n'est pas mise en cache au niveau de Fasterize.
• bot : la requête provient d'un bot (d'un moteur de recherche ou d'un outil de monitoring)

Par ailleurs, Fasterize segmente automatiquement son cache en intégrant cette catégorisation dans la clé de cache. Cela veut dire qu'il est possible de mettre en cache les différentes versions d'une même page sans risque de servir une page mobile à un client desktop.

La règle à suivre : ne pas cumuler les bases de données

Au niveau du serveur d'origine, il est impératif d'utiliser l'entête X-User-Agent-Class pour générer le template. En effet, cela permet d'aligner la génération des templates avec le paramétrage du cache Fasterize. Si vous utilisez votre propre base de données de User-Agent (comme avec Sparkow), il y aura un risque que certains user-agents ne se retrouvent pas dans la même classe ce qui corromprait le cache.