Le Responsive Design, c’est bien simple à comprendre

Site responsive designLe Salon de Barcelone, le Mobile World Congress, s’est ouvert le lundi 24 Février 2014 pour s’achever le jeudi de la même semaine en Espagne. Les échos qui nous sont parvenus nous confirment qu’Internet est de plus en plus « Mobile ». En dehors des petits objets connectés, les tablettes et les smartphones se définissent dorénavant dans tous les gabarits. Des mini pouces aux écrans extra larges, le choix est vaste. Les industriels du secteur n’ont jamais été aussi prolifiques.

Le constat est frappant, on note dans tous les pays du monde une croissance exponentielle du nombre de mobinautes, ces internautes qui consultent le Web via des périphériques mobiles. Pour capter ces derniers, les professionnels d’Internet ont déployé de nouveaux programmes informatiques permettant de leur proposer l’essentiel du Web sur leurs smartphones et tablettes. Les géants du Web comme Facebook, Google, Amazon proposent des applications mobiles de leurs plateformes à leurs utilisateurs. Le blogueur, lui aussi, peut, par exemple, à partir des programmes informatiques, créer un blog avec une version pour mobile pour les mobinautes qui le suivent. Ce type de blog est appelé Site dédié. Le blogueur peut également créer un blog unique qui s’adapte  aux différents périphériques à partir desquels il est consulté : on parle alors de Site Responsive Design. C’est cette notion que nous allons découvrir dans ce billet.

Un site/blog responsive design, c’est quoi ?

Un blog responsive design se définit simplement comme un site qui s’adapte parfaitement au format et à la résolution de l’écran sur lequel il s’affiche, quelque soit le périphérique de navigation (ordinateur de bureau, tablette, smartphone). La structure (le header, le conteneur, le footer), les images, les liens, les titres et tous les composants du site se redimensionnent allègrement pour s’adapter avec transparence à la taille du périphérique de navigation de l’internaute.

L’avantage de posséder un site ou de muter vers un site responsive design, c’est que toutes les ressources (contenus) de la plateforme sont liées à une seule et unique URL, ce qui en facilite l’indexation par Googlebot et leur référencement optimal. C’est d’ailleurs la recommandation faite par Google aux concepteurs de sites Web.

Pour se déployer de la façon la plus impeccable possible, un site responsive design s’appuie sur des ressources techniques diverses parmi lesquelles le CSS3. Le CSS est le langage informatique que les navigateurs Web interprètent pour décrire l’affichage d’une page HTML. Un site responsive design aura donc une feuille de style construite en CSS3.

Si le Webmaster a des compétences techniques avancées, le développement d’un site responsive design peut s’avérer moins laborieux. Toutefois, pour tous ceux qui n’auraient pas ces compétences, ils pourront trouver sur le Web de très beaux thèmes développés à partir de HTML5 et CSS3 pour adapter leurs sites à tous les supports de navigation.

D’autres alternatives…

Comme évoqué plus haut, d’autres alternatives sont possibles pour déployer un site sur smartphone et tablette. Il s’agit de développer une version pour mobile d’un site dédié. Dans ce cas, nous aurons à coté du site dédié à l’ordinateur de bureau, une version dédiée aux smartphones, une autre pour tablettes, etc. Dans ce cas, en plus d’avoir une URL chaque fois différente pour chacune des versions, celle-ci devra indiquer qu’il s’agit d’une version mobile quand c’est le cas et s’écrire comme cette structure : m.version_site_mobile.com, m. spécifiant mobile. L’inconvénient ici serait que, du fait de la multiplicité des URL pour un même contenu, Google qualifie l’une des versions du site comme contenant des ressources dupliquées et les déclasse de ses résultats. Ce qui est très mauvais pour le référencement (SEO) des données. L’autre inconvénient non moins important est l’administration et la maintenance de plusieurs plateformes. Ce n’est pas très pratique avec cette méthode.

Une dernière solution, plus onéreuse celle-là, est de créer une application native pour les versions mobiles du site et en fonction des systèmes des différents périphériques de navigation Web qu’ils exploitent.

Concluons

On le voit, bien que comportant quelques inconvénients minimes relatifs entre autres à la lenteur supposée lors du chargement du site responsive design sur les périphériques mobiles, celui-ci se présente comme la solution la plus pratique pour aborder le Web Mobile de notre époque.

Le responsive design permet une formidable expérience utilisateur et il assure à l’éditeur du site un résultat de performance avérée sur le Web.

Enfin, si vous ne l’aviez pas remarqué, ce blog est responsive web design. Il est consultable sur n’importe quel support et se veut votre partenaire pour vous accompagner dans le blogging professionnel.

Antoine BLAGNON est graphiste et professionnel de la communication. Éditeur de ce blog, il vous propose de partager des trucs et astuces pour communiquer efficacement via le Blog.