sh_129038348_Kostenko Maxim_Smartphone_800x462

Pourquoi développer son site e-commerce en Mobile First

Le m-commerce s’accélère et promet un bel avenir aux achats sur mobiles. À la question, « Faut-il une version mobile pour son site marchand ? » Oui, les chiffres parlent d’eux-mêmes. Et le must, est de développer sa boutique en ligne en version Mobile First pour améliorer l’expérience e-shopper. Vous vous concentrez sur l’essentiel : un design minimaliste, une architecture épurée, un contenu centré sur les mobinautes et un code simplifié pour un site encore plus rapide.

 

Le m-commerce est au beau fixe

Les mobinautes ont une relation toute particulière avec leur smartphone. Ils ne peuvent plus s’en séparer, même en mode vacances sauf, lors d’un acte manqué en le mettant dans la machine à laver par inadvertance.

Quelques chiffres pour commencer sur le m-commerce en France :

Année 2014

  • +105 % de croissance du CA 2013-2014,
  • 2 milliards d’euros de CA en 2014
  • 29,4 millions de mobinautes en France en 2014
  • 57 % des mobinautes ont déjà acheté via mobile

Année 2015

  • 89 % d’achats sur mobiles prévu en 2015 en France
  • 55 % des Français possèdent un mobile
  • 7 milliards d’euros de ventes via mobiles prévu pour 2015

retailmenot.fr : Infographie: Le shopping mobile en Europe et en Amérique du Nord

 

Les mobinautes et les achats impulsifs

Les mobinautes aiment les petites attentions. Si vous savez trouver les mots qui font sourire les gens, alors ils vous seront fidèles.
Pour ce faire, faut-il connaître leurs usages actuels et ceux de demain et surtout ce que vous cherchez auprès d’eux.

Les mobinautes sont des nomades impulsifs. Ils consultent les moteurs de recherche, les réseaux sociaux, leurs mails, leurs commandes, les produits, les cartes pour connaître l’adresse des bons petits plans… et achètent de plus en plus. Ils aiment les contenus faciles à consulter sur mobile comme les contenus vidéos qui peuvent raconter l’histoire de l’entreprise, des produits, des services…

Ils aiment aussi être rassurés avec des contenus rationnels clairs, pertinents, précis et dans un style simple.

Toujours en poche, les mobiles favorisent les achats impulsifs. Et pour fidéliser les mobinautes, rien de mieux que les petites attentions, comme des suggestions personnalisées ou des promotions géolocalisées.

Pour les e-marchands les mobiles sont un atout majeur pour optimiser leur catalogue produits : plus de lisibilité, plus de trafic et plus de mobinautes fidèles. Aujourd’hui développer son site e-commerce pour les mobiles est devenu une réalité. La méthode la plus efficace est celle que l’on nomme Mobile First , celle où il faut penser à l’envers.

 

 

D’abord, parlons responsive design

Google recommande le responsive design, un design optimisé pour les mobiles, pour obtenir son label Mobile friendly et être mieux référencé sur son moteur de recherche via mobile.

Le responsive design n’est pas chose aisée. Il faut que le site s’adapte à tous les supports et tailles d’écrans existants : mobile, tablette, en mode paysage, portrait… penser aux grilles flexibles, gérer les points de rupture (passage d’une taille d’écran à un autre), les medias-queries, les médias flexibles, le poids des images… C’est fini le bon vieux site avec une seule version.

> alsacreations.com : C’est quoi le Responsive Web Design ?
> emmanuelgeorjon.com : Responsive design: retour d’experience

 

1 – Les grilles fluides

Les grilles fluides permettent de structurer votre site avec des colonnes et des gouttières pour mieux organiser votre contenu. Leur largeur est notée en pourcentage. Ainsi les blocks de contenus se placent les uns en dessous des autres au fur et à mesure que l’écran diminue.
Mais parfois certains éléments ne sont pas nécessaires pour les écrans de smartphones (informations secondaires, image…). Les animations des menus avec le pseudo élément hover n’a pas lieu d’être sur mobile. Interviennent alors les medias-queries pour modifier les règles.

En savoir plus sur les grilles
> openclassrooms.com : La grille fluide

 

2 – Les medias queries

Les medias queries donnent la possibilité d’appliquer des règles de styles CSS en fonction des caractéristiques de l’écran. Ils permettent de gérer les points de rupture lorsque le design casse.

 

Exemple simple d’utilisation des medias queries : une image et un texte sur deux colonnes


.image {
  width : 40%

}

.texte {
  width : 60%;
  background color : white;
}

@media only screen and (max-width: 640px) {
.image, .texte {

  float: none; width: 100%;
}
}

/ Le media-queries indique que si la largeur de l’écran est supérieure à 640 px alors nous appliquons les règles qui suivent : les éléments image et texte se placent sur une seule colonne /

 

3 – Les médias flexibles 

Les images, les vidéos… doivent s’adapter aux différents types d’écran. Pour cela il suffit d’indiquer une largeur maximum de 100 % :

img, video {
  max-width: 100%;
}

/ Avec cette règle CSS, l’image s’adapte aux dimensions de l’écran./

 

C’est bien joli, mais reste à gérer le poids de l’image. Car charger une grande image sur un smartphone avec un processeur et une bande passante faibles, n’est pas très efficace. Question rapidité et expérience utilisateur, on peut mieux faire. Surtout que le point noir de la navigation sur mobile est la lenteur. Combien de mobinautes s’en plaignent. Cela ne les incite pas à poursuivre leurs achats.

Quand il s’agit d’une image de fond, le CSS3 avec ses media-queries permet de charger telle image pour tel type d’écran comme l’exemple qui suit :

header {
  height: 200px;
  width: 100%;
background: url(images/large-header.jpg) center;
}
 
@media all and (max-width: 480px){
header {
  background: url(images/small-header.jpg) center;
}
}
 
/Le media-queries indique que si la largeur de l’écran ne dépasse pas 480px, c’est la petite image qui se charge. /

 

Pour les <img> html, l’histoire est encore en cours d’écriture.

De nouvelles normes sont en discussion. L’élément<picture> reprend le même principe que celui des éléments <vidéos> et <audio> comme suit :

 

 

Exemple de flexibilité des éléments <vidéo>.

Comme certains navigateurs ne savent pas lire tous les formats vidéos, alors il faut coder et surtout sourcer. Avec la balise <source>, nous indiquons les différents types de format vidéo. Mais il est possible aussi de s’adapter aux différents types d’écrans avec l’attribut media :

<video controls>
<source src=”videos/sv.mp4″ type=”video/mp4″ media=”all and (min-width: 480px)”>
<source src=”videos/sv.webm” type=”video/webm” media=”all and (max-width: 480px)”>
><source src=”videos/sv.webm” type=”video/webm” media=”all and (max-width: 480px)”>
</video>

/ L ‘élément <source> indique quel type de format vidéo pour tel type d’écran./

 

 

Pour l’élément <picture> c’est le même esprit :

<picture>

<source srcset=”yo-big.jpg” media=”(min-width: 1200px)”>
<source srcset=”yo-small.jpg” media=”(min-width: 480px)”>
<img src=”yo.jpg” alt=”Yo “la mascotte de STUDIO VITAMINE “>
</picture>

/ La première ligne spécifie qu’il faut charger l’image yo-big.jpg pour les écrans d’une largeur au-delà de 1200px.
La deuxième ligne, idem pour les écrans de largeur maxi de 480px.
L’élément <img> est là au cas où les navigateurs ne comprennent pas l’élément<picture>./

 

L’élément <picture> est cours d’expérimentation, donc tous les navigateurs ne sont pas encore open. Avouons que cela présente un certain désavantage.

Un autre soucis non négligeable, l’img est toujours chargée même si le navigateur reconnaît le bon sens de l’élément <picture>. Ici l’optimisation de la bande passante est à revoir.
Il est toujours possible de jouer avec l’élément <picture> en attendant que les débats se finalisent

> Lire developer.mozilla.org : élément <picture>

 

 

Une approche Mobile First, ça ne s’improvise pas. Il faut savoir penser à l’envers.

Concevoir un site responsive est une approche intéressante pour enrichir l’expérience des mobinautes, mais cela ne suffit pas. Pour être plus efficace il faut aussi penser Mobile First, c’est-à-dire penser à l’envers. Vous devez d’abord imaginer la version mobile avec la taille d’écran la plus petite. Ensuite, vous imaginez les versions plus grandes : smartphones , ordinateurs portables et ordinateurs fixes.

Ainsi, vous vous concentrez sur l’essentiel. Les pages se construisent par couches et s’enrichissent au fur et mesure que les tailles d’écrans s’agrandissent : téléphones mobiles, smartphones, ordinateurs portables, ordinateurs fixes.

Le code est simplifié et les pages sont plus légères. Au final, le contenu se charge plus rapidement, un bel atout pour l’expérience des mobinautes et leurs achats compulsifs.

 

Côté code, développer en Mobile First est plus efficace

L’avantage de coder en Mobile First, c’est la simplification du code. En développant d’abord pour les ordinateurs de bureau, la structure du site s’épure au fur et à mesure que l’écran diminue et le code avec. Mais c’est assez pénible de supprimer les règles ou des éléments qui n’ont aucune utilité sur mobile : float : none ; display : none ; widht : auto ; … et il est bon de savoir que même si un élément est dit “display: none”, il est toujours présent donc chargé.

L’approche Mobile First consiste à développer d’abord une structure de site simple sur une seule colonne avec un design minimaliste et une architecture épurée. Plus l’écran s’agrandit, plus le code s’enrichit.

 

Exemple de code avec une approche Destock First et Mobile First

Nous avons toujours notre image et notre texte

> Destok First, pensons d’abord le design pour l’ordinateur de bureau

.image {
  width : 40%
}
 
.texte {
  width : 60% ;
  background color : white ;
}
 
/on passe aux écrans ayant une taille maxi de 640 px /
@media only screen and (max-width: 640px){
.image, .texte {
  float: none;
  width: 100%;
}
}
 
/ En gros nous écrasons le code initial pour reprendre les valeurs par défaut, une perte de temps./

 

> Mobile First, maintenant pensons d’abord le design pour mobile

 


.texte {
  background color: white ;
}
 
/on passe aux écrans ayant une taille mini de 640 px /
@media only screen and (min-width: 640px){
.image {
  width : 40%

}
 
.texte {
  width : 60%;
  background color : white;
}

/ L’avantage de développer en Mobile First est de pas revenir sur le comportement par défaut des éléments./

Le temps de chargement et balise <link>

En pensant d’abord Mobile First, nous allégeons la structure du site initial et améliorons ainsi le temps de chargement en évitant d’inclure des éléments ou des animations (le cas du pseudo élément hover) qui ne sont pas nécessaires pour petits écrans.

Pour optimiser encore plus le temps de chargement, il est préférable de charger une feuille de style CSS par type d’écran dans la balise <link> dans le head de votre document html.

 
<!DOCTYPE html>
<html>

<head>

 
<meta charset=”utf-8″ />
 
<link rel=”stylesheet” href=”style.css” />
<!– feuille de style CSS par défaut celle destinée aux mobiles et aux autres supports–>
 

<link rel=”stylesheet” media=”screen and (max-width: 480px)” href=”petite_resolution.css” />
<!– feuilles de style pour les écrans d’une largeur maxi de 640px –>

<link rel=”stylesheet” media=”screen and (max-width: 1199px)” href=”petite_resolution.css” />
<!– feuilles de style pour les écrans d’une largeur maxi de 1199px –>
 
<!– ect. –>

</head>

 

 

 

 

Aujourd’hui sur eBay, une transaction sur deux passe par mobile. Selon comScore MMX, en mars 2015, 61 % des Français se sont connectés sur mobile.
Alors, un site e-commerce Mobile First est un atout supplémentaire pour optimiser le catalogue produits des e-marchands et l’expérience d’utilisation des mobinautes, plus rapide et plus efficace.

Alors oui n’hésitez pas à développer votre site en Mobile First : une stratégie de contenu orientée mobinaute, chargement plus rapide des pages, code simplifié…

Sachez que les sites non optimisés pour mobile et qui n’ont pas le label Mobile Friendly de Google, voient leur référencement se dégrader sur Google mobile.
> Lire : arobasenet.com : Les sites non-Mobile-Friendly disparaissent de plus en plus des pages de résultats de Google

 

 

Sources :
>  grafikart.fr : Responsive, Mobile First
> journaldunet.com : Mobile First : les grandes opportunités du mobile
> ladn.eu : Pourquoi vous allez adorer le mobile first
> journaldunet.com : Mobile First : une nouvelle façon de concevoir un projet digital
> smart-seven.fr : Définition et stratégie digitale du mobile first et web design
> openclassrooms.com : Qu’est-ce que le Responsive Web Design ?
> davidl.fr : Webdesign orienté mobile
frenchweb.fr : M-commerce, bientôt le grand saut ?
lentreprise.lexpress.fr : Le m-commerce en 2015 en 5 chiffres
wdfriday.com : Css et mobile first : procéder par amélioration progressive
alsacreations.com : Responsive Webdesign – présent et futur de l’adaptation mobile
blog.lesieur.name : Conserver un affichage Desktop sur mobile avec une version Responsive Web Design
iandevlin.com : Responsive HTML5 video

developer.mozilla.org : The building blocks of responsive design
openclassrooms.com : Mise en page adaptative avec les media queries
responsiveimages.org : Responsive image
html5hub.com : Html5 <picture> element
developer.mozilla.org : <source>
e-marketing.fr : Digitalisation des points de ventes : une approche “mobile first”
> ecommercemag.fr :Audience : les 50 premiers retailers en France
emmanuelgeorjon.com : Responsive design: retour d’experience
> developer.mozilla.org : Media queries

Auteur : Hélène Guérin

Hélène Guérin
Rédactrice, j'aime m'amuser avec les mots. C'est sûrement dû à ma dyslexie. Pourquoi écrire pour le Web ? Je baigne dedans au quotidien (webdesigner - ergonome) alors je veille sur les dernières technologies.

Commentaires Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *