DERNIERS

L’explosion de l’utilisation des smartphones pour surfer sur le Web depuis 2013 a mis le responsive Web design au cœur des stratégies et des pratiques des développeurs.

Si vous avez un site ou que vous prévoyez d’en faire un vous devez absolument vous demander comment faire en sorte qu’il soit adapté aux mobiles, au risque de perdre un grand nombre (voire une majorité) d’utilisateurs.

Alors qu’est-ce que le responsive Web design ? Comment fait-on un site adapté ? Peut-on le faire pour tous les sites ? Voilà tout ce que vous devez savoir.

En savoir plus sur le responsive Web design (RWD)

Le mot « Responsive » a été introduit par le Web designer Ethan Marcotte dans un article de blog de « A List Apart » en mai 2010.
Il développera en 2011 sa théorie du responsive dans un ouvrage intitulé « Responsive Web Design ».

Le responsive Web design, ou RWD est donc une approche de conception des sites Web permettant une expérience de lecture et de navigation optimales quel que soit le support utilisé (téléphones mobiles, tablettes, ordinateur de bureau).

A un certain moment de l’évolution d’internet, de nouveaux types de terminaux on fait leur apparition. Tablettes et smartphones ont fait changer nos habitudes en matière de consultation Internet. Ceux-ci ont donc dû s’adapter à une multitude de tailles d’écrans comme le téléphone portable qui après quelques années d’évolution à amener le smartphone et ses nombreuses tailles dans notre quotidien.

Fort de ce constat il fallait faire en sorte qu’un site internet puisse être visualisé facilement sur n’importe quel téléphone ou tablette et les webdesigners ont donc naturellement décidé d’adapter leurs sites internet à ces nouvelles et nombreuses résolutions.

A cette époque il n’était pas encore question de CSS ou autres @media queries. Les webdesigners devaient donc créer deux sites internet distincts avec les mêmes contenus :

– Un site principal destiné aux ordinateurs

– Un site mobile destiné aux appareils mobiles

Mais n’est-ce pas un peu fastidieux de devoir créer 2 sites ?

Ce que nous voulons c’est créer un seul site mais que tout le monde pourra visiter, aussi bien ceux qui se connectent depuis un ordinateur que ceux qui se connectent avec leur mobile, tablette ou autre écran.

Faire un site dédié aux mobiles ne convient pas, il y a trop d’appareils mobiles avec des tailles différentes et il faudrait faire un site pour chaque taille d’écran. Donc pour pallier à ce problème les développeurs ont pensé à une solution qui permette de s’adapter à tous les appareils en même temps.

L’arrivée de Google Panda

Le jour où Google a décidé de mettre à jour son algorithme de gestion de résultat de recherche SEO la question de faire deux sites distinct a vite été obsolète.

La mise à jour nommée  » PANDA  » portait, entre autre, sur le duplicate content et avec le système de double site vous avez plusieurs adresses web pour un même contenu. Le contenu identique se trouvant sur vos deux versions de site est identifié par Google comme une mauvaise pratique et vous êtes sanctionnés.
De plus, si un de vos utilisateurs partage le lien d’un article de votre site mobile, les gens qui cliqueront sur ce lien le verront en version mobile même s’ils sont sur un ordinateur et le résultat est franchement mauvais.

Le principe du responsive Web design (RWD)

Le responsive design va justement solutionner le problème cité plus haut. Plus besoin de faire deux sites, cette technique de réalisation, va permettre à chaque site de s’adapter automatiquement à l’espace disponible sur l’écran. On développe donc un seul site, conçu pour s’adapter  à toutes les tailles d’écrans. L’utilisateur peut ainsi consulter le même site web auto-adapté à travers une large gamme d’appareils et avec le même confort visuel.

Les sites sont généralement conçus sur la base de la largeur de l’écran, Cette largeur va déterminer la façon dont les éléments vont s’afficher.

Forcément quand la taille de l’écran est réduite on peut placer moins de blocs côte à côte. Dans ce cas, il faut les placer de haut en bas là où la place est illimitée ou même supprimer certains blocs qui auraient moins d’utilité sur une version mobile.

Niveau technique

Avant toute chose et notamment à penser au développement du site en lui-même il va falloir penser votre site.

Un site responsive ne se conçoit pas comme un site classique et nécessite de maitriser cette nouvelle technique et d’adapter son organisation en amont.

Aujourd’hui il faut anticiper comment les éléments des pages de votre site vont se mettre en place dans toutes les résolutions.

Il ne suffit pas de faire un design version desktop et version mobile car en fonction de la taille de l’écran du mobile ou de la façon dont on le tient (horizontalement ou verticalement) votre design ne tiendrait plus la route.

Il faut faire en sorte que chacun des blocs des pages de votre site s’adapte dans la largeur, si ce n’est pas possible car il n’y a pas assez de place, il faut réorganiser les blocs de votre page ou les supprimer si ils ne sont pas essentiels à une lecture sur mobile.

Les éléments d’un site responsive doivent se réorganiser en fonction des points de rupture.

Créer par le web designer qui aura pensé le site ils indiqueront à quel moment les blocs passeront les uns en dessous des autres au lieu d’être les uns à cote des autres.

Le CSS s’imposa comme l’acteur majeur du RWD afin de permettre la réalisation d’un seul site internet adapté à tous les écrans.

En effet, un site Web pensé en responsive utilise le langage CSS et plus précisément les média queries avec une extension de la règle @média pour adapter la mise en page.

Techniquement le principe de RWD s’appuie sur les trois éléments techniques ci-dessous :

• Les media queries, module de spécification CSS 3 qui permet de mettre en page les sites Web et de cibler la largeur, la hauteur ou l’orientation d’une page avec une unique feuille de style
• Des images et des médias flexibles
• Une grille de mise en page flexible.

 

Les avantages du responsive Web design (RWD)

Comme pour toute chose, le responsive Web design a ses avantages et ses inconvénients.

Son premier avantage (et c’est le but) concerne les internautes. Grâce au responsive Web design ils bénéficient d’une utilisation et d’une navigation agréables quel que soit l’appareil utilisé.

Mais heureusement pour les professionnels du Web cette technologie est aussi avantageuse pour eux ! Elle simplifie en quelque sorte leur travail en leur évitant de devoir développer, en plus, des versions du site destinées aux smartphones et aux tablettes.
Et bien sûr les coûts de développement sont moins élevés car un seul site est nécessaire.

 

Les inconvénients du responsive Web design (RWD)

Oui, malheureusement rien n’est parfait, il faut bien qu’il y ait aussi des inconvénients.

Tout d’abord, des pages créées en responsive Web design sont souvent plus longues à charger qu’avec une version mobile dédiée.

Il vous faudra aussi travailler plus que sur un site classique. Comptez environ 25% de temps supplémentaire pour développer les techniques nécessaires à la mise en place du responsive Web design et réaliser les tests nécessaires tout au long du projet.

Les images volumineuses poseront problème car le responsive Web design ne permet pas de régler les problèmes de bande passante liés à leur téléchargement. Si votre connexion n’est pas en 4G cela peut vraiment se ressentir.

 

L’apparition du mobile first

Voici la nouvelle tendance et elle n’est pas prête de disparaitre. Toujours face à l’augmentation de la consultation d’internet via des appareils mobiles certains moteurs de recherche et notamment Google ont décidé de privilégier les sites optimisés pour mobile dans leurs résultats de recherche.

Les sites pour mobile sont dons mieux référencés que les sites qui ne sont pas optimisés.

Une raison de plus pour commencer à penser à l’envers et donc à penser à votre site mobile avant même de penser à votre site desktop.

De plus on se rend compte que penser son site dans ce sens et plus facile. On part d’une petite résolution et on l’adapte vers une plus grande.

Techniquement il y a un gros avantage également car les navigateurs mobiles récupèreront directement les règles CSS destinées au mobile mais pas celles destinées au desktop alors que sans le mobile first les navigateurs doivent récupérer les règles du site desktop et supprimer ou adapter les éléments. Du coup un site mobile first se chargera plus rapidement et donnera le même résultat visuel sur un écran de bureau.

Les  dernières versions des CMS (Drupal, WordPress, …) et des Frameworks CSS tel que boostrap sont d’ailleurs directement pensés en mobile first aujourd’hui.

 

La solution PWA (Progressive Web App)

Les PWA se présentent comme un site internet mais intègrent quelques fonctionnalités natives aux applications mobiles comme la notification push par exemple.

Elles se situent à mi-chemin entre la webapp et un site Web mobile classique et ressemble aux applications natives et hybrides sauf qu’elles sont accessibles depuis un navigateur et non téléchargeables sur un store.

Leur mode de fonctionnement

La PWA est tout simplement un site internet développé spécifiquement pour les mobiles. Elles sont développées avec une architecture de type Application Shell qui rend possible son utilisation également en mode hors-ligne.

Elle s’appuie également sur les Service Workers, scripts qui vont fonctionner en parallèle de la page Web et permettre le mode hors-ligne, l’envoi de notifications ou la mise à jour de contenus en arrière-plan.

Pour finir, l’utilisation d’un fichier .manifest permet de lui donner un rendu plus naturel avec un affichage en plein écran ou une orientation de l’écran différente possible ou autre présentation typique d’une application pure.

Elle permet donc en somme de proposer aux utilisateurs une expérience mobile complète quels que soient le navigateur utilisé ou l’état de leur connexion.

Les avantages des PWA

Les PWA ont l’avantage de combiner le meilleur parti des sites mobiles et des applications web. Elles reprennent les fonctionnalités les plus pertinentes et permettent ainsi :

• Une amélioration de l’expérience utilisateur globale
• Une amélioration du temps de chargement des pages
• La consultation du site sans connexion Internet
• La compatibilité avec n’importe quel système d’exploitation et n’importe quel support
• De ne pas effectuer d’installation en amont comme pour une application et donc n’utilisent pas d’espace de stockage dans la mémoire de l’appareil mobile
• Un accès simple depuis une URL ou depuis une icône sur l’écran d’accueil de l’appareil mobile
• Une sécurisation de la navigation grâce au protocole HTTPS

PWA une solution à long terme ?

Les PWA ne peuvent pas complètement remplacer les applications ou le web mobile. Voyez-les comme une technique complémentaire ou alternative qui facilitera l’expérience de vos utilisateurs grâce à une interface mobile claire, une rapidité de chargement et une interactivité et ce sans payer le prix fort pour faire développer une appli.

La PWA peut être un bon compromis qui offrira des fonctionnalités supplémentaires que ne fournira pas votre site Web mobile. Mais pour fidéliser vos clients par la suite le développement d’une application sera à un moment ou un autre un passage obligé.

Le responsive Web design est apparu comme une solution à l’évolution de notre technologie et de nos habitudes.

Il nous a permis de nous adapter. Mais comme toute solution d’adaptation elles sont souvent temporaires. L’apparition du mobile first, les impératifs de Google Panda, les changements d’algorithmes qui veulent placer les sites mobiles en priorité, toutes ces nouvelles données qui évoluent et changent sans cesse vous encore nous pousser à évoluer vers autre chose.

En attendant le responsive Web design est incontournable lors de la création de votre site. Aujourd’hui un site Web qui ne serait pas responsive passera à la trappe de toutes les consultations via mobiles, autant dire de la majorité des consultations Internet…