1.
- Table ronde –
Mobilité et Responsive
design : Définitions et enjeux
Club des Community Managers de Lyon

2.
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

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

4.
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

5.
Connaissez votre cible : quelques chiffres
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

6.
Connaissez votre cible : quelques chiffres
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

7.
Connaissez votre cible : quelques chiffres
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

8.
Connaissez votre cible : quelques chiffres
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

9.
Connaissez votre cible : quelques chiffres
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

10.
Connaissez votre cible : quelques chiffres
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

11.
Connaissez votre cible : quelques chiffres
Lieux d’utilisation d’un appareil mobile (en %)
Ecole
Aéroport
Transports publics
Restaurant
Magasins
En déplacement
Travail
Domicile
0
Source : Our mobileplanet by Google
20
40
60
80
100
11
120

12.
Connaissez votre cible : quelques chiffres
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
Source : Our mobileplanet by Google
10
20
30
40
50
60
12
70
80
90

13.
Connaissez votre cible : quelques chiffres
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
Source : Our mobileplanet by Google
5
10
15
20
25
30
13
35
40
45
50

14.
Connaissez votre cible : quelques chiffres
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

15.
Je veux être présent sur
mobile, quels sont mes choix ?
Table ronde – Mobilité et responsive : définitions et enjeux
15

16.
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

17.
Application générée
-
Peut être native ou hybride
-
Une application web convertie en application par un logiciel (phonegap par exemple)
17

18.
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

19.
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

20.
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

21.
Comment choisir une solution?
Table ronde – Mobilité et responsive : définitions et enjeux
21

22.
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

23.
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

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

25.
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

26.
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

27.
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

28.
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

29.
Le responsive de-quoi ?
Table ronde – Mobilité et responsive : définitions et enjeux
29

30.
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

31.
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

32.
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

33.
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

34.
Adapter les contenus
-
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 ?

35.
Adapter les contenus
-
Contre exemple du site
alsacreations, trop long en
version smartphone

36.
Adapter les contenus
-
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

37.
Adapter les contenus
-
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)

38.
Adapter les contenus
-
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)

39.
Adapter les contenus
De nouvelles fonctionnalités sont rendues possible sur mobile :
-
Géolocalisation
-
Téléphonie

40.
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é

41.
Les menus, qu’en faisons-nous?
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é

42.
Les menus, qu’en faisons-nous?
Est-ce bien raisonnable ? Toutes les zones ne sont pas accessibles de la même manière :
Source : Luke Wroblewski.

43.
Les menus, qu’en faisons-nous?
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.

44.
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%

45.
Et mes images, alors ?
-
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

46.
Et mes images, alors ?
-
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

47.
Et mes images, alors ?
-
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

48.
Quel impact sur les formulaires ?
-
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

49.
Quel impact sur les formulaires ?
-
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 :

50.
Pourquoi en tirer parti ?
Table ronde – Mobilité et responsive : définitions et enjeux
50

51.
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

52.
Et le SEO dans tout ça ?
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.

53.
Et le SEO dans tout ça ?
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

54.
Et le SEO dans tout ça ?
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…

55.
Et le SEO dans tout ça ?
Que voient les moteurs ?
Depuis une recherche mobile, Google propose une prévisualisation qui sera basée
sur la version intermédiaire :

56.
Et le SEO dans tout ça ?
Que voient les moteurs ?
Depuis une recherche desktop, Google propose une prévisualisation qui sera basée
sur la version standard:

57.
Et le SEO dans tout ça ?
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é

58.
Etude de cas par Altima
Table ronde – Mobilité et responsive : définitions et enjeux
58

59.
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

60.
Etude de cas par l’agence Altima
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

61.
Etude de cas par l’agence Altima
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

62.
Intervenants
Table ronde – Mobilité et responsive : définitions et enjeux
62

63.
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