web and fun webdesign auto-adaptableUn site c’est bien plus que des pages reliées les unes aux autres, c’est aussi une identité visuelle. Mais pas seulement. Un site qui se remarque (et donc qui marquera les esprits) c’est aussi un site capable de s’adapter aux differents supports modernes  : smartphones, tablettes. On parle alors de site web «adaptatif».

 

web and fun webdesign navigateurs web

 

Si les inévitables Internet Explorer de Microsoft, Firefox de Mozilla ou Chrome de Google occupent encore une place importante sur le marché des navigateurs internet, il existe d’autres navigateurs (Safari ou Opéra, notamment) et chacun utilisant un moteur de rendu plus ou moins différents, il n’est pas rare de constater que les pages s’affichent différemment d’un logiciel à l’autre. Notre rôle est donc d’adapter notre code pour que ces différences ne soient pas une gêne pour vos futurs visiteurs.

Qu'est ce qu'un site web 'adaptatif' ?

On appelle site web « adaptatif » (ou « responsive web design », en anglais) un site internet qui regroupe des techniques et technologies permettant une adaptation aux différents supports de lecture. Ainsi, un site web dit « adaptatif » aura la capacité d’être lisible aussi bien sur un ordinateur de bureau (fixe ou portable), une tablette et un smartphone sans avoir recours à une version spécialement optimisée suivant le type de support.

Cette interface auto-adaptable permet non seulement d’avoir une lecture du site agréable et fluide, mais également une facilité et un coût de maintenance optimisé.

Un exemple de site web adaptatif, celui du chanteur-compositeur français Emmanuel Weil (www.emmanuelweil.com).
Comparez les versions tablette et smartphone en testant le site sur votre smartphone.

web and fun tablette

La lecture s’adapte parfaitement à la largeur de la tablette.

Pas de scroll superflu, le confort est parfait et pourtant les dimensions du site restent les même que sur un écran d’un ordinateur portable ou sur un écran plat 19 pouces !

On constate que le menu qui était horizontal a maintenant changé d’aspect: il est maintenant vertical et s’adapte à la largeur du smartphone. Pas de scroll vertical du site, seul le scroll horizontal demeure mais le contenu est intégralement lisible dans l’écran de l’appareil. Faites un essai en flashant le code ci-dessous avec votre smartphone !

Site d'Emmanuel Weil sur un smartphone
web and fun smartphone webdesign