Sites Responsifs et Mobile-First : Décryptage

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

La navigation sur mobile représente 50% de tout le trafic internet

Marginal il y a seulement 10 ans (même si 10 ans, sur Internet, c’est une éternité !), l’usage des téléphones mobiles pour accéder à internet est devenu écrasant, rivalisant avec les ordinateurs portables et de salon, jusqu’alors maîtres incontestés de l’accès à internet.

Source: StatCounter Global Stats – Platform Comparison Market Share


Comme nous pouvons le voir ci-dessus, nous avons atteint un équilibre qui se stabilise depuis peu dans l’usage des appareils pour l’accès à internet.

En 2020, l’internet est donc tout aussi bien “fixe” que “mobile”.

En conséquence, pour s’adapter à ce nouvel environnement, il faut accorder au moins autant d’attention à la version mobile de votre site qu’à sa version PC pour obtenir les meilleurs résultats !

 

LES navigations mobiles

Nous y reviendrons plus tard, mais l’un des points principaux à retenir s’agissant de navigation mobile, c’est qu’il ne s’agit pas de quelque chose d’uniforme, dans la mesure où les appareils permettant un accès à internet sont en constante évolution. 

Avec des technologies qui changent à vitesse grand V et une durée de vie de téléphones portables n’excédant pas 5 ans, cela veut dire que les plateformes web doivent autant s’adapter à ces changements matériels que l’inverse. Cela signifie aussi que plusieurs générations de téléphones portables se chevauchent, et qu’il faut toujours avoir en tête d’être accessible au plus grand nombre.

Entre 2019 et 2020, voici quelles étaient les résolutions les plus souvent utilisées pour le design sur mobile :

  • 360×640 (18.7%)
  • 375×667 (7.34%)
  • 414×896 (6.76%)
  • 360×780 (5.31%)
  • 375×812 (5.01%)
  • ….

Sans compter toutes les autres ! On peut ainsi se rendre compte de la très grande variété de résolutions mais aussi de ratios d’écrans (16:10, 16:9, 5:3, 2:1, …), des critères qui viendront impacter le design sur mobile.

A noter aussi que ces résolutions ne correspondent pas du tout aux résolutions des derniers écrans sortis sur mobiles, qui peuvent afficher des résolutions HD parfois même supérieures à certains ordinateurs. Ainsi, l’iPhone X aura une résolution de 1125 x 2436, et autre exemple, le Samsung Galaxy S10E aura une résolution de 1080×2280.

 

Pourquoi avoir un site adapté pour mobile est incontournable ?

mobile users

 

Raison #1 : Ne pas se priver de la moitié de la population !

Comme nous l’avons vu précédemment, de fait, autour du monde, 50% des visites des contenus sur internet se font via un terminal mobile. Et parmi les raisons qui poussent un internaute à quitter un site internet, le manque d’une version mobile (ou une version insuffisamment optimisée) apparaît comme l’un des premiers facteurs déterminants.

Avoir un site irréprochable sur mobile, c’est donc avant tout s’adresser au plus grand nombre.

 

Raison #2 : Soigner votre image de marque

En 2020, les attentes d’un internaute sont formatées et strictes, avec un niveau d’exigence qui va de pair avec l’amélioration des technologies mobiles. Au fur et à mesure que les téléphones portables deviennent de vrais mini ordinateurs et concentrent de plus en plus d’outils incroyables, leurs utilisateurs espèrent avoir affaire à des plateformes optimisées pour leurs petits bijoux. 

Un site qui n’est pas Mobile Friendly sera perçu par les moins tolérants comme une véritable faute de goût, un frein à votre activité, et pourra ressurgir de manière négative sur la vision qu’une personne se fera de votre entreprise. Si bien sûr un internaute pourra excuser cela chez une très petite entreprise ou une entreprise dont il connaît déjà les services, il faut considérer que dans une ère ou le client est roi, et que le client est de plus en plus un internaute, ne pas le mettre dans les meilleures dispositions, avec des images et des textes à la bonne taille, une navigation adaptée, etc. vous privera d’un potentiel énorme.

 

Raison #3 : Plaire à Google et améliorer son référencement

Comme nous l’avons abordé dans notre article “SEO : Comment Référencer Votre Site Web“, Google a dans son algorithme une palette de critères très variés lui permettant de jauger la qualité d’un résultat de recherche. Parmi ceux-ci, le caractère responsif ou mobile-friendly d’un site est tout à fait déterminant, autant que sa vitesse ou que la pertinence de son contenu et de ses mots-clés.

Avoir un site qui s’affiche et répond parfaitement sur mobile est ainsi primordial pour votre placement dans les classements des moteurs de recherche, et vous permettra d’engranger plus de visites !

 

Raison #4 : Payer moins cher vos campagnes de publicités !

Ce que Google applique sur les résultats naturels de son moteur de recherche, il l’applique aussi sur Google Ads (anciennement Adwords). En effet, lorsqu’un site paraît ne pas être suffisamment adapté sur mobile, vos annonces payantes vont recevoir une “mauvaise note” (score de qualité). En ayant un score de qualité inférieur à vos concurrents, vous devrez alors payer votre placement publicitaire plus cher que ceux-ci ! Voilà pourquoi si vous réalisez des campagnes Google Ads, avoir un site irréprochable sur mobile vous fera faire des économies sur le long terme, en plus de favoriser vos taux de conversions !

Et Google n’est pas seul ! Récemment, Facebook, deuxième “Géant” de la publicité en ligne, a lui aussi annoncé que les entreprises ne bénéficiant pas de sites adaptés pour les mobiles verraient leurs publicités pénalisées.

 

Raison #5 : Etre deux fois plus créatif !

Avec une version PC ET une version mobile, vous avez l’occasion d’explorer deux façons de faire du design, et deux façons de naviguer, en misant sur les forces de chacun des supports pour mieux faire passer votre message.

Pour tous les métiers ou industries de la création, avoir une version dédiée sur mobile qui soit différente de la version “Desktop”, c’est affirmer son savoir-faire, son souci du détail et son originalité. 

 


En savoir plus sur le développement de sites responsifs au Vietnam avec LesMichels.fr


 

Les questions à résoudre

UI UX mobile

 

Tout d’abord, comment savoir si son site est “Mobile-Friendly” ?

Pour cela, rien de plus simple ! En effet, Google a lancé un outil spécifique afin de savoir si votre site internet correspond à leurs attentes et à celles des internautes, disponible sur ce lien.

Il vous suffit de saisir l’URL (adresse) de votre site internet et de cliquer sur “Tester l’URL”, et vous serez fixés en quelques secondes !

Plus globalement, c’est une question de proportions et d’accessibilité.

Si un site est difficile à naviguer, que vous devez zoomer ou dézoomer, que les textes sont peu lisibles, que les photos sont pixellisées ou coupées, ou que certaines fonctionnalités ne marchent tout simplement pas, c’est qu’il y a du travail à faire !

 

Que faire si mon site n’est pas “Mobile-Friendly” ?

En fonction de la technologie utilisée lors de la création de votre site et de son âge, deux solutions sont possibles.

Dans un premier cas, si le site original le permet et possède une structure résolument simple, vous pourrez tout simplement faire appel à une Agence Web ou à un Codeur / Webdesigner qui réadaptera le design pour mobile.

Dans un second cas, si le site est complexe ou par exemple utilise des technologies dépassées ou des éléments qui ne s’affichent pas sur mobile, le mieux est de recréer entièrement le site web. En fonction de votre industrie, si votre site internet est plus vieux que 3 ou 5 ans, il est de toute manière bon de songer à une refonte graphique. 

En récréant entièrement votre site web (tout en gardant le plus gros de son contenu si vous le souhaitez), vous vous adapterez à l’ère du temps et passerez pour une entreprise dynamique et moderne. Si votre site internet capitalise sur des visites récurrentes, ce sera aussi l’occasion d’offrir de la nouveauté à vos visiteurs habituels. Sans nécessairement perturber leurs habitudes, la nouveauté sera majoritairement perçue de manière positive.

mobileoptimized

 

Que choisir ? Mobile-Responsive ou Mobile-First ?

Tout d’abord, il faut comprendre que les usages d’internet sur mobile ou sur PC traditionnels ne sont pas les mêmes. Et la première raison pour laquelle ces usages sont différents, c’est la durée (ou les conditions) de navigation.

Dans tous les cas, l’expérience de navigation et de recherche sur un PC sera supérieure, de part le confort qu’apporte la présence d’un écran plus grand, d’une souris, ainsi que d’un environnement plus apte (un bureau par exemple, l’absence de réflexion des rayons du soleil, etc.).

En conséquence, on a moins de temps à consacrer aux visites sur mobile, surtout dans un processus de recherche précis, que sur PC. Et qui dit moins de temps passé dit moins de chances d’interactions.

Il est toujours plus confortable de faire son shopping en ligne ou de rédiger un formulaire de contact sur PC, et les taux de conversions ne mentent pas : une visite sur PC transforme toujours environ 2 à 3 fois plus que sur mobile. 

Sites Responsifs et Mobile-First : Décryptage 1

Voilà pourquoi, pour rétablir l’équilibre Mobile Vs PC, certains acteurs tels que Agoda (réservations d’hôtels en ligne) proposent des offres marketing et des réductions de prix spécifiques aux utilisateurs mobiles !

Une autre raison pour laquelle ce taux de conversion est moins élevé, hormis le temps passé, c’est encore et toujours le design. En effet, à mesure que les années passent, ce taux de conversion augmente, grâce sans doute à la meilleure qualité des connections internet (4G et +), des appareils … mais aussi car les sites font plus d’efforts sur le design de leurs versions mobiles.

Enfin, il faut songer que dans de nombreux cas, le visiteur mobile et le visiteur PC sont en réalité la même personne ! En effet, dans un premier temps, il peut se rendre sur la version mobile de votre site, et, séduit par votre offre globale sans avoir le temps de regarder en détail, l’internaute va reporter sa 2ème visite à un peu plus tard, lorsqu’il pourra se rendre sur son PC, et c’est alors au calme qu’il effectuera son acte d’achat ou vous contactera !

Voilà donc pourquoi les chiffres de conversion peuvent être biaisés : les conversions sur PC sont supérieures car elles bénéficient de visites antérieures sur mobile !

 

Maintenant que ce point est éclairci, deux solutions s’offrent à vous quant à la philosophie de votre site internet sur mobile.

1. La solution “Mobile-Responsive”.

Un site est dit “Mobile-Responsive” lorsqu’il a été pensé pour être utilisé d’abord sur un ordinateur, mais que les proportions et / ou l’organisation sont revues pour “rentrer” dans un écran de téléphone portable.

C’est la solution la plus employée, car souvent la plus économique.

2. La solution “Mobile-First”. 

Un site est dit “Mobile-First” lorsqu’il a été pensé pour être utilisé d’abord sur téléphone mobile, ou bien, sur un pied d’égalité avec un ordinateur. Cela nécessite donc de travailler sur des designs et navigations bien différentes.

C’est la solution la plus optimisée, car ainsi, vous vous assurez d’avoir une version parfaite sur tous les supports.

 

Pour choisir entre l’un et l’autre, il vous faudra connaître au mieux les habitudes de navigation de votre cible, leur origine, mais également connaître les standards de votre industrie. 

Les populations les plus jeunes utiliseront davantage leur téléphone portable et les réseaux sociaux / messageries, alors, si vous vous adressez principalement à eux, l’accent devra probablement être mis sur une solution Mobile-First. Si en revanche, votre cœur de cible est (par exemple, mais ce n’est pas le seul critère différenciant) plus âgé, il est plus probable qu’il utilise des formats de type PC (ou tablettes).

En fonction du pays dans lequel vous êtes et en fonction du degré d’équipement de sa population, la réponse variera également. Les pays en développement auront parmi leur population plus d’utilisateurs mobile que PC, ceux-ci étant moins couteux, et car parfois les réseaux mobiles sont tout simplement meilleurs en l’absence d’accès à la fibre dans les habitations ! Ce n’est en revanche pas systématique, aussi, renseignez-vous bien là-dessus. Par exemple, dans le cas du Vietnam, seuls 45% des possesseurs de téléphones bénéficient d’accès 3G et 4G, voilà pourquoi l’accès à internet ne peut se faire pour certains qu’avec un ordinateur.

Autre fait notable, si par nature, votre site nécessite qu’on y passe beaucoup de temps (documentation, administration, produits complexes ou personnalisables…), investissez en priorité dans la version PC de votre site. A l’inverse, si votre site est simple et que l’on y passe peu de temps, optez Mobile-First ! Cela est également lié à la notion d’urgence ou d’envie compulsive.

Un utilisateur qui recherche une voiture, une maison ou un appartement privilégiera une navigation sur PC pour ses recherches : c’est une décision importante à prendre, il faut donc prendre le temps de regarder avec attention les descriptifs, les offres, les visuels, etc.

mobile shopping app

En revanche, pour des informations rapides, des petites courses ou livraisons ponctuelles, des services à la personne (coiffeurs, serruriers, restaurants…), les recherches de votre cible se font plus dans “l’instant”, et l’outil le plus facilement à portée de main sera le téléphone mobile, surtout si vous misez beaucoup sur le téléphone lui-même comme moyen de contact ! Alors, avoir un site mobile-first sera le plus pertinent.

En conclusion, entre Mobile-Responsive et Mobile-First, la réponse est … Consumer First ! Pensez d’abord à lui, à ses habitudes et à ses attentes pour envisager votre plateforme digitale.

 

Cela coûte-t-il cher d’avoir un site Responsif ou Mobile-First ?

Pas nécessairement ! A nouveau, retenez que le plus grand coût pour vous serait de vous priver de 50% de votre clientèle potentielle. Dès lors, investir dans un site responsif est une véritable nécessité, et la question ne se pose plus vraiment, au même titre que : “Faut-il avoir une porte à votre magasin ?“. La réponse est évidemment oui !

Aussi, d’un côté, les technologies actuelles permettent de faire des sites responsifs plus rapidement qu’auparavant, avec des meilleurs résultats, et donc, les coûts s’en ressentent.

Cependant, d’un autre côté, il faut comprendre que de nos jours, les designers et les développeurs doivent composer avec un environnement très complexe. Si il y a 10 ou 20 ans, les usages d’internet étaient globalement tous les mêmes, aujourd’hui, le nombre d’appareils connectés a explosé, avec tous leurs propres spécificités.

Comme vu précédemment, aujourd’hui, les résolutions et ratios d’écrans sont extrêmement différents, de même que les systèmes d’exploitations (Windows, Mac, Android, iOS iPhone … le tout dans des versions différentes !) et les navigateurs (navigateurs mobiles propriétaires, Chrome, Edge, Firefox, et plus). En conséquence de quoi avoir un site qui s’affiche à la perfection avec un design cohérent d’un écran à l’autre peut devenir un véritable casse-tête. Cela implique plus d’efforts de réflexion dans le design, et surtout, beaucoup, beaucoup plus de tests. Et qui dit plus de temps passé à parfaire ces détails dit nécessairement coûts à prévoir.

Ainsi, lorsqu’un designer planche sur un tout nouveau template de page pour votre site web, et que le développeur l’intègre, il faut considérer que le travail est double : 1 version PC, 1 version mobile. Sans forcément doubler tout à fait le coût ou les efforts, nul doute que les exigences d’aujourd’hui se paient !

 

Aller plus loin : le développement d’applications mobiles

Enfin, après avoir traité des sites responsifs et des sites Mobile-First, une autre option est également disponible, celle de l’application mobile dédiée.

Echappant aux navigateurs internet, les applications mobiles permettent une plus grande flexibilité dans leur processus créatif et de développement. Cela les rend aussi plus complexes, ce qui signifie que le choix de développer une application mobile sera le bon pour les projets beaucoup plus interactifs.

Là où un site est souvent avant tout un “présentoir” avec quelques fonctionnalités d’interactions (Chat, Contact, Achat, etc.), l’application mobile permettra de tirer parti de plus des spécificités de vos téléphones : caméra, géolocalisation, messagerie, notifications, empreinte digitale, accéléromètre, 3D interactive, historique interne, etc.

 


En savoir plus sur le développement d’application mobile au Vietnam avec LesMichels.fr


Notre 

 Blog 

* A survécu au bug de l’an 2000

* Qu’il est bien pour le lire

* Lutte contre l’indigence intellectuelle sur les sujets du :

  • Business
  • Marketing
  • Design
  • Web
  • Vietnam
  • LOL

Articles 

 Recents 

Suivez 

 Nous 

Proposé par LesMichels.fr, offres limitées dans le temps.

Besoin de renseignements ?

Nous sommes là pour vous aider !

Starter Pack

Page Vitrine Thème Wordpress
449
  • 1 Thème Wordpress Personnalisé
  • 1 vague de modifications
  • Support Hébergement et Email Pro
  • Plugin Cookies RGPD
  • Compte Google Analytics
  • Optimisation de la Vitesse
  • Tests Responsifs PC, Tablette, Mobile
  • 1 Sauvegarde en Ligne

Shop Pack

Site E-Commerce Thème WooCommerce
999
  • 1 Thème Wordpress Personnalisé
  • 1 vague de modifications
  • 6 Pages Web
  • 10 Fiches Produits
  • Configuration de la Boutique
  • Intégration Paiements (Stripe, Paypal)
  • Support Hébergement et Email Pro
  • Plugin Cookies RGPD
  • Compte Google Analytics
  • Optimisation de la Vitesse
  • Tests Responsifs PC, Tablette, Mobile
  • 1 Sauvegarde en Ligne

Identity Pack

Site Wordpress Sur Mesure et Branding
1,399
  • 1 Design unique
  • 2 vagues de modifications
  • 3 Pages Web
  • 1 Logo (3 propositions)
  • Support Hébergement et Email Pro
  • Plugin Cookies RGPD
  • Compte Google Analytics
  • Optimisation SEO de base
  • Optimisation de la Vitesse
  • Tests Responsifs PC, Tablette, Mobile
  • 1 Sauvegarde en Ligne

App Pack

Maquette interactive à présenter
2,999
  • 1 Maquette Invision ou Adobe XD
  • Jusqu'à 30 écrans mobiles
  • 1 Chef de projet à disposition
  • Mise en contact avec notre partenaire développement

信息

查询

您慢慢来最好地回应这个表格,以便我们创建一个符合您期望的网站。

About you ...

About your company ...

DEVIS

EN LIGNE

Estimez en quelques clics le coût de votre projet de site internet. Contactez nous pour établir un devis plus précis.

Hébergement


Design


Architecture


Fonctionnalités


E-Commerce


Services Additionnels (non-estimé)

yêu cầu

Làm web

Hãy dành thời gian của bạn hoàn thành tốt nhất với biểu mẫu này để chúng tôi tạo một trang web đáp ứng mong đợi của bạn.

Thông tin về bạn...

Thông tin về công ty bạn...

INFORMATION

INQUIRY

Take your time to best respond to this form so that we create a website that meets your expectations.

About you ...

About your company ...

DEMANDE

D'INFORMATIONS

Prenez le temps de répondre au mieux à ce formulaire de sorte à que nous créions un site internet fidèle à vos attentes.

À propos de vous ...

À propos de votre entreprise ...