DERNIERS

C’est un constat qui se confirme d’années en années : Si le nombre d’internautes continue à croître (43,8 millions, +1,5% en un an), ce sont les populations mobinautes et tablonautes qui enregistrent les plus fortes progressions : 55,7% des Français sont aujourd’hui mobinautes (+6 points vs 2013) et 29,1% des internautes sont tablonautes (+7,2 points).

Avec 18.2 millions de smartphones et 6.2 millions de tablettes vendus en France en 2014, il est fort à parier que le trafic internet en provenance de ces terminaux mobiles devrait encore fortement progresser cette année.

C’est pour cette raison qu’il est nécessaire d’anticiper et de prévoir ce trafic dans la réalisation de vos sites web.
Mais entre ordinateurs, smartphones, tablettes aux résolutions de plus en plus variées, comment créer un site qui s’adapte et évolue au mieux sur tous ces supports ?
La solution qui ressort et qui semble se confirmer depuis 2-3 ans maintenant c’est le responsive design.

Qu’est-ce que le Responsive Design ?

Le responsive Design est une technique de développement qui va permettre à votre site web d’adapter sa mise en forme et son contenu à l’espace disponible sur l’écran, et cela de façon automatique. Ainsi, pour un même site, l’internaute peut le consulter de manière optimale quel que soit sa résolution d’écran (ordinateur, tablette, smartphone, TV connecté), l’orientation de son terminal (portrait ou paysage) ou son mode de navigation (pointeur ou tactile).

Contrairement à un site dédié mobile ou tablette, le développement d’un seul et unique site en responsive design présente quelques avantages :

• URL unique: c’est un élément primordial pour le bon référencement de votre site. En effet, Google a annoncé préférer les sites utilisant un design responsive ce qui signifie donc un meilleur positionnement dans les moteurs de recherche. De plus, l’accès au site est facilité et votre communication externe s’en trouve clarifiée (contrairement au fait d’avoir une URL différente pour chaque résolution).
• Diminution des coûts: avoir un seul site, cela représente donc moins de temps passé dans sa conception mais surtout sa maintenance. Et qui dit moins de temps, dis moins d’argent !
• Contenu unique: Une seule interface, un seul contenu à gérer, c’est donc moins de temps passé dans la gestion au quotidien. De plus, cela évite les « duplicate content » qui sont eux aussi pénalisants pour votre référencement.
• Optimisation de l’expérience utilisateur : Les internautes peuvent commencer la visite de votre site sur leur ordinateur et la terminer sur leur smartphone en toute fluidité. Ils retrouveront le même contenu, la même mise en page et la même navigation et poursuivront leur visite de façon très intuitive.
• Anticipation: Aujourd’hui, vous maîtrisez les différentes résolutions présentes sur le marché, et même si ces derniers sont déjà nombreuses ! Mais demain, qui sait quel autre appareil va sortir ? En utilisant le responsive design vous vous assurez une adaptation plus facile aux futures innovations technologiques et aux nouveaux modes de consommation de l’internet

Le responsive design, comment cela fonctionne ?

Mettre en place un site en responsive design nécessite une véritable réflexion en amont. Il s’agit de penser en profondeur la conception du site et d’anticiper les contraintes d’utilisabilité quel que soit le support de navigation choisi : un vrai jeu de stratège !

Il faut penser que chaque contenu de votre site web est contenu dans des blocs.
Ces blocs vont bouger, se redimensionner, s’afficher ou non en fonction de la largeur de l’écran.

Pour faire simple, dans une grande largeur correspondant par exemple à la résolution d’un ordinateur de bureau, vos blocs vont être les uns à côté des autres. Au fur et à mesure que la largeur de l’écran diminue, les blocs vont passer les uns en dessous des autres.
Mais attention, cela n’est qu’un exemple. Il est possible aussi que certains blocs soient moins importants que d’autres et qu’on souhaite les faire disparaître sur des mobiles ou tablettes. On peut aussi à l’inverse faire apparaître de nouveaux blocs ou outils sur mobile pour apporter une fonctionnalité.

Une très grande flexibilité est permise, le tout est d’y penser en amont pour faciliter la mise en place.
Il faut également réaliser de nombreux tests au fur et à mesure du graphisme et du développement pour vérifier la bonne compréhension de la page sous les différentes résolutions.

Afin de répondre à cette problématique, la plateforme Preview a incorporé sans sa plateforme la fonctionnalité « Appareil(s) ».

Cette fonctionnalité permet de tester l’ensemble de votre site selon ses différentes versions responsive. Elle comprend les résolutions suivantes :

• Desktop : Large (1680 x 1050), Small (1280 x 1080) et Netbook (1280 x 800)
• Tablette : Paysage (1366 x 768), Portrait (768 x 1366), Ipad portrait (768 x 1024) et Ipad Paysage (1024 x 768)
• Mobile : Iphone paysage et portrait, Iphone Retina paysage et portrait, windows phone 7.x paysage et portrait, Windows phone 8.x paysage et portrait

Ainsi d’un simple clic, vous pouvez vérifier le bon rendu de vos pages sur les différents appareils afin d’être sûr de l’expérience que vous allez proposer à vos internautes.