Réunion Club CML : Mobilité et Responsive design; définitions et enjeux

- Table ronde –

Mobilité et Responsive
design : Définitions et enjeux
Club des Community Managers de Lyon

I.

Sommaire

Dis, c’est quoi la mobilité ?

a)
b)

II.

Pourquoi se poser la question ?
Ce qu’il faut se demander

VI.

La partie émergée de l’iceberg
Penser en blocs
Adapter les contenus
Les menus, qu’en faisons-nous ?
Et mes images alors ?
Quel impact sur les formulaires ?

Pourquoi en tirer parti ?
a)
b)

Rappel des objectifs marketing
Et le SEO dans tout ça ?

VII. Etude de cas par Altima
a)

Relay

b)

Wanimo

c)

Skimium

Petit précis de technique
a)
b)
c)

V.

Application native / hybride
Application générée
Site mobile dédié
Site mobile responsive
On récapitule

Comment choisir ?
a)
b)

IV.

Mobilité n’est pas que responsive design
Connaissez votre cible : quelques chiffres

Je veux être présent sur
mobile, quels sont mes choix ?
a)
b)
c)
d)
e)

III.

b)
c)
d)
e)
f)
g)

Javascript, en deux mots
CSS, en trois mots
Les media queries

Le responsive de-quoi ?
a)

Visuellement, qu’est-ce que c’est ?

2

Dis, c’est quoi la mobilité ?
Table ronde – Mobilité et responsive : définitions et enjeux

3

Mobilité n’est pas que responsive design
Mobilité : nom féminin : (latin mobilitas, -atis) Propriété, caractère de ce qui est susceptible
de produire un mouvement, de ce qui peut se mouvoir ou être mû, changer de place, de
fonction
Application
native

Site web
dédié

Application
hybride
Mobilité

Application
générée

Site web
responsive

4

Population possédant un mobile
90
80
70
60
50
40
30
20
10
0
2000

2001

2002

Source : Eurostat / Médiamétrie

2003

2004

2005

2006

2007

2008

2009

2010

5

2011

2012

Part des smartphones dans le parc mobile
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

0%
4e
1er
2e
3e
4e
1er
2e
3e
4e
Trimestre Trimestre Trimestre Trimestre Trimestre Trimestre Trimestre Trimestre Trimestre
2010
2011
2011
2011
2011
2012
2012
2012
2012

Source : Panels distributeurs / GfK Consumer Choices 2012

6

Part des systèmes d’exploitation mobiles par
rapport aux systèmes d’exploitation fixes (en %)
3

2.5
2
1.5
1
0.5
0

Source : W3 Schools

7

Ventes de tablettes, PC portables et smartphones
16000
14000
12000
10000
8000
6000
4000

2000
0
2010

2011
Tablettes

Source : comScore / groupe GfK / Médiamétrie

PC Portables

2012
Smartphones

8

Répartition des dix tailles d’écran les plus populaires en 2012
320x480
1920x1080

768x1024

1680x1050

1024x768

1600x900

1280x800

1440x900

1280x1024
1366x768

Source : Mobify.com

9

Part des systèmes mobiles en France en 2012
Android

Blackberry OS

iOS

Windows mobile

Symbian

5%
5%
4%

27%

13%
46%

Source : Our mobileplanet by Google

10

Autres

Lieux d’utilisation d’un appareil mobile (en %)
Ecole
Aéroport
Transports publics
Restaurant
Magasins
En déplacement
Travail
Domicile
0


20

40

60

80

100

11

120

Typologie d’utilisation d’un appareil mobile (en %)
Recherche d'emploi
Regarder des séries en ligne
Acheter un produit ou un service
Recherche de voyages / vacances
Télécharger du contenu mobile
Recherche de restaurant / pubs
Lire des magazines et des news
Regarder des vidéos en ligne
Rechercher un produit
Accéder à un réseau social
Utiliser une application
Envoyer ou lire des emails
Naviguer sur internet
0


10

20

30

40

50

60

12

70

80

90

Actions suite à une recherche mobile de proximité (en %)
A recommandé une entreprise ou un service
A lu ou publié des avis
Aucune action
A effectué un achat en ligne
A effectué un achat en magasin
A appelé l'entreprise ou le service
A visité le site web d'une entreprise ou service
S'est rendu dans une entreprise
0


5

10

15

20

25

30

13

35

40

45

50

Prévisions conso mobile mensuelle mondiale
( 1 hexaoctet = 1 milliard de gigaoctets )
12
10
8
6
4
2
0
2012

Source : Cisco

2013

2014

2015

2016

14

2017

Je veux être présent sur
mobile, quels sont mes choix ?

15

Application native ou hybride
Application Native

Application Hybride

Contenus statiques

Contenus dynamiques

Réponse
Téléchargement

Demande
contenus

On peut l’utiliser sans réseau, mais pour que
les données soient mises à jour il faut une
mise à jour de l’application sur le store
(Exemple : Angry Birds)

Les données sont téléchargées à
chaque utilisation de l’application, via
des flux automatiques nécessitant
une connexion internet.
(Exemple : Vie De Merde)

16

Application générée
-

Peut être native ou hybride

-

Une application web convertie en application par un logiciel (phonegap par exemple)

17

Site internet mobile dédié
-

Deux site différents : double gestion, double contribution et double maintenance

-

Deux adresses différentes : attention au duplicate content

-

Permet d’être rapidement présent sur le web mobile sans refonte

-

Exemple : http://www.lemonde.fr et http://mobile.lemonde.fr

-

Sur un site dédié, la différence entre mobile et sédentaire se fait au niveau HTML

18

Site internet adaptable : responsive
-

Un seul site : une seule gestion, une seule contribution et une seule maintenance

-

Une seule adresse à gérer : pas de duplicate content, communication simplifiée

-

Nécessite une adaptation ou une refonte, donc un investissement

-

Exemple : http://www.3200tigres.wwf.fr

-

Sur un site responsive, la différence se fait surtout au niveau du CSS (mais pas que)

19

On récapitule
Application native / hybride
• Interactions utilisateurs avancées
• Coût de développement plus
élevé
• Performances améliorées
• Restriction de diffusion aux
différents stores

Capacités fortes

Application générées
• Compétences de développeur
web
• Développement spécifique par
device réduit mais nécessaire
• Restriction de diffusion aux
différents stores

Multi-plateforme

Mono-plateforme

Capacités réduites

Site mobile
dédié ou responsive
• Compétences de
développeur web
• Mises à jour instantanées
• Pas de restriction de
diffusion

20

Comment choisir une solution?

21

Pourquoi se poser la question ?
La consultation d’un site classique sur un mobile peut être rendue fastidieuse par :
-

Pages trop lourdes par rapport aux réseaux mobiles

-

Caractères souvent illisibles

-

Images dégradées, peu lisibles

 Adapter la présentation à un petit écran est indispensable

Mais cela ne suffit pas toujours, parfois il faut aussi :
-

Adapter les contenus, ne garder que les informations essentielles

-

Fournir une bonne expérience utilisateur à tous en exploitant les forces et faiblesses de
chaque terminal (touch screen, absence de clavier, changement d’orientation…)

22

Ce qu’il faut se demander
-

Comment ma cible utilise mon site web ?

-

Si j’ai des applis, sont-elles complémentaires ? Redondantes ?

-

Quelle information je veux diffuser ?

-

Quel public je vise ? Que recherchent-il ? Avec quoi ?

-

Ai-je vraiment les compétences ? Dois-je faire appel à un expert ?

-

Quel est mon budget ?

Quelles que soient les réponses, je veux
-

Qu’une recherche mobile amène le mobinaute sur mon site optimisé pour mobile

-

Qu’une recherche sédentaire amène l’internaute vers mon site optimisé pour ordinateur

-

Profiter des forces de la mobilité : Géolocalisation, téléphonie…
23

Petit précis de technique
Table ronde – Mobilité et responsive : définition et enjeux

24

Le Javascript, en deux mots
-

AJAX : Asynchronous Javascript And Xml

-

C’est ce qui permet de modifier dynamiquement le contenu d’une page web

-

Utilisé pour dynamiser les pages web : fondus, éléments qui bougent…

-

Peut détecter la résolution d’un écran et mettre à jour une partie du site en fonction

Dynamisme / Ajax

25

Le CSS, en trois mots
-

Permet d’appliquer des styles sur des éléments de votre site web

-

Définition : Cascade Style Sheet, ou Feuille de style en cascade

-

Feuille de style : fichier qui décrit les styles des éléments d’une page web

-

Cascade : Il y a une hiérarchie : si le fond de page est blanc, le fond du menu
le sera aussi si on ne lui dit pas le contraire

-

Une gestion externalisée des styles dans des fichiers « à part »

Styles / Rationnel / Positionnement

26

Les media queries
-

Pas de panique ! C’est juste une propriété CSS

-

Requête média : La page web demande sur quel média il est affiché.

-

Détecter la taille de l’écran, ou son orientation

-

N’appliquer certains styles que dans certains cas

-

Masquer des éléments dans d’autres cas

-

Voire spécialiser des styles pour certaines résolutions ou utilisations d’écran

27

En bref
-

Le Javascript, qui sait détecter la résolution d’un écran, sait mettre des contenus
à la volée en fonction de ce qu’il détecte

-

Le CSS sait détecter l’usage qui est fait du site internet : résolution, orientation…
Et peut spécialiser le style du site en fonction de cela.

If you know

what I mean ?

28

Le responsive de-quoi ?

29

Visuellement, qu’est-ce que c’est ?
-

Une mise en page adaptée aux différentes plateformes

-

Sans nécessité de changement d’adresse ou de redirection

La partie émergée de l’iceberg
-

Bien plus qu’un simple habillage adapté à la taille de l’écran

-

Problématiques : Performance, rédaction, gestion d’images…

-

Le rédacteur qui doit penser à plusieurs cibles à la fois

Penser en blocs
Exemple de blocs identifiables sur un site web :
-

Header : Logo, nom du site et éventuelles interactions annexes

-

Index : Dernières informations ou produits que le site veut mettre en valeur

-

Menu : Permet d’accéder aux pages principales du site

-

Annexe : informations annexes et souvent situé sur le côté gauche ou droit du site
en vue sur ordinateur

-

Produit : pour un site e-commerce, constitué au moins d'une image, d'une

description, d'un prix et d'informations complémentaires
-

Commentaires : commentaires des consommateurs ou des visiteurs

-

Footer: constitué des liens secondaires du site et bien souvent du plan du site

Penser en blocs
-

Cohérence : Ne pas perdre

l’utilisateur, qui doit se sentir au
même endroit, peu importe le
terminal depuis lequel il consulte
le site web

-

Il faut conserver un ordre
logique entre les blocs

-

Anticiper sur le positionnement
de ceux-ci selon la taille de
l’écran ou l’inclinaison

-

Un écran d’ordinateur est plus large, il permet d’afficher plus de colonnes

-

Les blocs doivent être déplacés sur un écran plus petit, mais ça ne suffit pas

-

On réduit la largeur, mais on augmente la hauteur

-

pour une même quantité de contenu, sur un écran mobile, la hauteur sera beaucoup

plus grande.
 Problème d’ergonomie : Tous mes contenus et fonctionnalités sont-ils pertinents ?

-

Contre exemple du site
alsacreations, trop long en
version smartphone

-

Sur un site e-commerce, on

adapte l’affichage des produits

-

Solution possible : sélection de
l’information à afficher en
fonction de la situation de
mobilité

-

Autre solution : On propose une
navigation par catégorie

-

Les commentaires sont longs
sur la version ordinateur

-

En version
smartphone, réduction de
largeur, donc augmentation de
la hauteur

-

Solution : masquer par défaut
les commentaires, et proposer
un bouton pour les afficher
(Css-tricks)

-

Le style aussi doit être adapté

-

La diminution de la largeur des blocs augmente le nombre de retours à la ligne

-

Solution possible : diminuer légèrement la taille de police sur smartphone (Css-tricks)

De nouvelles fonctionnalités sont rendues possible sur mobile :

-

Géolocalisation

-

Téléphonie

Les menus, qu’en faisons-nous?
On peut le gérer avec une simple réorganisation CSS :
Avantages :
-

Facile à mettre en place

-

Facilement identifiable

-

Complètement personnalisable

-

Pas de dépendance à JavaScript

Inconvénients
-

Utilisation de beaucoup d’espace
en hauteur (précieux sur un mobile)

-

Pas extensible

-

Problèmes de compatibilité

Ou on change le mode de navigation avec une liste déroulante, ou un panneau glissant :
Avantages :

Inconvénients

-

Libère de la place dans le header

-

Assez lourd

-

Facilement identifiable

-

Peu être déroutant

-

Elégant et personnalisable

-

Dépendance à Javascript

-

Permet de grands menus

-

Problèmes de compatibilité

Est-ce bien raisonnable ? Toutes les zones ne sont pas accessibles de la même manière :

Source : Luke Wroblewski.

Quel que soit le choix fait, ce qu’il faut garder à l’esprit :

-

La position du menu : fixe en bas, en haut, déroulé avec un slide du doigt …?

-

Sur ordinateur, le menu change d’aspect au survol de la souris

-

Mais en situation de mobilité : pas de curseur ni de survol

-

Le menu doit pouvoir être identifiable

-

Certains mobinautes ont de gros doigts : agrandir les zones d’interactions

Source : Luke Wroblewski.

Et mes images, alors ?
Lorsque l’on présente un contenu par internet, la performance est LE facteur de
réussite dans la communication auprès du public

100ms d’attente = 1% de ventes en moins
Manque à gagner potentiel en 2008 de 191 millions de $
400ms d’attente = 5 à 9% de perte de trafic

500ms d’attente = baisse de trafic de 20%

1s d’attente = baisse des revenus de 4%

-

Une image de 200ko se charge moins vite en 3G qu’en ADSL

-

Oui messieurs : la taille, ça compte !

-

Si on adapte les contenus sur un mobile, il faut aller au bout de la logique

 Prévoir différents formats pour chaque image du site web

-

Comment ça marche ? Grâce aux CSS et au Javascript. Un peu au PHP aussi.

-

Les autres tailles d’images sont générées une seule fois, puis réutilisées au besoin

Depuis
un ordinateur

Smartphone
Depuis

Quelle

un mobile

résolution?
Tablette

-

Pas glop : penser que redimensionner suffit

-

Glop : augmenter le taux de compression des jpg

Basse résolution : 300x200px

Résolution rétina : 600x400px

Compression Jpg 80% : 21ko

Compression Jpg 31% : 16ko
75% du poids de la basse résolution

-

Rentrer dans un champ pour taper du texte va vous faire
zoomer dessus et rogner les noms des champs

-

Le clavier ne laissera que 33% de l’écran disponible

 Attention aux points suivants :
-

Disposer d’un espace d'environ 200 pixels

-

Ne pas placer les libellés à gauche du champ pour un
smartphone (zoom sur le champ de remplissage)

-

Rappeler le libellé dans ou juste au dessus du champ

-

Peut-être que votre CMS vous permet de créer vos formulaires ?

-

La saisie du formulaire par le mobinaute peut être fastidieuse

-

Le smartphone est «smart » : typez les champs et il vous aidera

-

Si vous demandez une adresse mail dans un champs mail, le clavier sera optimisé

-

Idem pour les dates :

Pourquoi en tirer parti ?

50

Rappel des objectifs marketing
-

Les mobinautes font beaucoup de recherche

-

Ils n’aiment pas attendre

-

Une recherche réussie est une transformation

-

Mener à l’achat en ligne ou la visite physique

Responsive : Solution officiellement recommandée par Google… Extrait des
“Recommendations for building smartphone-optimized websites” :

Responsive web design
Responsive web design is a technique to build web pages that alter how they look using
CSS3 media queries. That is, there is one HTML code for the page regardless of the device
accessing it, but its presentation changes using CSS media queries to specify which CSS
rules apply for the browser displaying the page. You can learn more about responsive web
design from this blog post by Google's webmasters and in our recommendations.
Using responsive web design has multiple advantages, including:
-

-

It keeps your desktop and mobile content on a single URL, which is easier for your users
to interact with, share, and link to and for Google’s algorithms to assign the indexing
properties to your content.
Google can discover your content more efficiently as we wouldn't need to crawl a page
with the different Googlebot user agents to retrieve and index all the content.

Les risques d’une version dédiée :
-

Tous les contenus ne sont pas indexés sur les résultats de recherche mobile

-

Arriver sur le site desktop lourd à charger sur un mobile

-

Expérience de navigation dégradée

-

Duplicate content

-

Redirections : rajoute de la lourdeur, et Google n’aime pas ça

Il existe des moyens de contournement :
-

Maîtriser les risques liés à la duplication

-

Au niveau technique, des éléments peuvent être mis en place

Les avantages d’une version responsive :
-

L’ensemble du site sera indexé par les moteurs de recherche

-

Google privilégie les sites en responsive

-

Pas de duplicate content

-

Les ancres de liens, maillage interne, balises meta title et meta description, mots clés
ciblés et surtouts les URLs de pages restent identiques.

-

Tous les liens partagés à partir du site web en version desktop bénéficieront aussi à la
version mobile  Backlinks, réseaux sociaux…

Que voient les moteurs ?
Depuis une recherche mobile, Google propose une prévisualisation qui sera basée

sur la version intermédiaire :

Que voient les moteurs ?
Depuis une recherche desktop, Google propose une prévisualisation qui sera basée

sur la version standard:

Une optimisation reste nécessaire :
-

Les internautes ne recherchent pas toujours de la même façon sur leur PC et leur

smartphone : requêtes plus courtes par exemple
-

Penser à rajouter des mots-clefs optimisé pour la recherche mobile

-

Proximité : Cibler les mots-clefs géolocalisés

 De l’importance d’anticiper les attentes des internautes en matière de mobilité

Etude de cas par Altima

58

Etude de cas par l’agence Altima
Relay : Site web pour inscription
et commande de magazines

-

Possède déjà des applications
pour la consultation

-

95% d’utilisation par tablettes

-

Mais 30% de CA pris par Apple
(abonnements magazines)

59

Wanimo : Pour nos amis les bêtes

-

Après 22 jours d’exploitation

-

Valeur de visite : +12 %

-

Panier moyen : +6,7%

-

Taux de conversion mobile et
tablette : +200%

60

Skimium: Location de matériel de
ski sur internet

-

Un site web pour commander

-

Pas encore de site mobile ni
d’application

-

Un service appelant la mobilité

-

Cible internationale

-

Taux de conversion mobile : +104%

-

Taux de conversion tablette : +90%

-

Augmentation du CA de 30%
61

Intervenants

62

Intervenants
Organisation / Modération
• Alexandra Aslanides – Community Manager

Intervenant
• Patrick Roux – Chef de projet web

Merci à l’espace de coworking l’Atelier des Médias à Lyon de nous avoir accueillis
une nouvelle fois dans leurs locaux.

Merci également à tous les membres du Club des Community Managers de Lyon
pour leur présence, leur écoute et leur partage de connaissances.

63

Réunion Club CML : Mobilité et Responsive design; définitions et enjeux

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (6)

Destacado

Destacado (20)

Similar a Réunion Club CML : Mobilité et Responsive design; définitions et enjeux

Similar a Réunion Club CML : Mobilité et Responsive design; définitions et enjeux (20)

Réunion Club CML : Mobilité et Responsive design; définitions et enjeux

Notas del editor