SlideShare une entreprise Scribd logo
- 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
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
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
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
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
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
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
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
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
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
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
Je veux être présent sur
mobile, quels sont mes choix ?
Table ronde – Mobilité et responsive : définitions et enjeux

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?
Table ronde – Mobilité et responsive : définitions et enjeux

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 ?
Table ronde – Mobilité et responsive : définitions et enjeux

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

Contre exemple du site
alsacreations, trop long en
version smartphone
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
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)
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)
Adapter les contenus
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é
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é
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.
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.
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%
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
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
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
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
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 :
Pourquoi en tirer parti ?
Table ronde – Mobilité et responsive : définitions et enjeux

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
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.
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
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…
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 :
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:
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é
Etude de cas par Altima
Table ronde – Mobilité et responsive : définitions et enjeux

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
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
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
Intervenants
Table ronde – Mobilité et responsive : définitions et enjeux

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

Contenu connexe

Tendances

Journée e-tourisme 2014 : Bases etourisme
 Journée e-tourisme 2014 : Bases etourisme Journée e-tourisme 2014 : Bases etourisme
Journée e-tourisme 2014 : Bases etourisme
Lozere Développement
 
Histoire du webdesign
Histoire du webdesignHistoire du webdesign
Histoire du webdesign
Olivier Dommange
 
RDV TIC en partenariat avec Google
RDV TIC en partenariat avec GoogleRDV TIC en partenariat avec Google
RDV TIC en partenariat avec Google
COMPETITIC
 
Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010
Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010
Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010
Franck Dasilva
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
Olivier Soros
 
6 1-ergonomie du web
6 1-ergonomie du web6 1-ergonomie du web
6 1-ergonomie du webRYMAA
 

Tendances (6)

Journée e-tourisme 2014 : Bases etourisme
 Journée e-tourisme 2014 : Bases etourisme Journée e-tourisme 2014 : Bases etourisme
Journée e-tourisme 2014 : Bases etourisme
 
Histoire du webdesign
Histoire du webdesignHistoire du webdesign
Histoire du webdesign
 
RDV TIC en partenariat avec Google
RDV TIC en partenariat avec GoogleRDV TIC en partenariat avec Google
RDV TIC en partenariat avec Google
 
Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010
Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010
Seminaire Sensibilisation au eTourisme - ETOURISM OI - Decembre 2010
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
6 1-ergonomie du web
6 1-ergonomie du web6 1-ergonomie du web
6 1-ergonomie du web
 

En vedette

L'entomologie moléculaire et l'étude de la structuration génétique des anophèles
L'entomologie moléculaire et l'étude de la structuration génétique des anophèlesL'entomologie moléculaire et l'étude de la structuration génétique des anophèles
L'entomologie moléculaire et l'étude de la structuration génétique des anophèles
Institut Pasteur de Madagascar
 
Le projet : Garki, historique et conséquences
Le projet : Garki, historique et conséquencesLe projet : Garki, historique et conséquences
Le projet : Garki, historique et conséquences
Institut Pasteur de Madagascar
 
E bulletin (vol1 - no. 22)
E bulletin (vol1 - no. 22)E bulletin (vol1 - no. 22)
E bulletin (vol1 - no. 22)Communication_HT
 
Guide du sur-titrage au théâtre
Guide du sur-titrage au théâtreGuide du sur-titrage au théâtre
Guide du sur-titrage au théâtre
La French Team
 
Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...
Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...
Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...
Institut Pasteur de Madagascar
 
E bulletin (vol1 - no. 19)
E bulletin (vol1 - no. 19)E bulletin (vol1 - no. 19)
E bulletin (vol1 - no. 19)Communication_HT
 
Sortir actualités artistiques des expositions
Sortir actualités artistiques des expositionsSortir actualités artistiques des expositions
Sortir actualités artistiques des expositions
Maorie
 
Pieces Remorque, Remorques Montreal - Remorque Sylmar
Pieces Remorque, Remorques Montreal - Remorque SylmarPieces Remorque, Remorques Montreal - Remorque Sylmar
Pieces Remorque, Remorques Montreal - Remorque Sylmar
Remorques Sylmar
 
Synthèse des Grilles Evaluations 2003
Synthèse des Grilles Evaluations 2003Synthèse des Grilles Evaluations 2003
Synthèse des Grilles Evaluations 2003
Institut Pasteur de Madagascar
 
La lutte contre le paludisme - De la politique nationale à la mise en œuvre
La lutte contre le paludisme - De la politique nationale à la mise en œuvreLa lutte contre le paludisme - De la politique nationale à la mise en œuvre
La lutte contre le paludisme - De la politique nationale à la mise en œuvre
Institut Pasteur de Madagascar
 
Le Cloud ULg-CHU
Le Cloud ULg-CHULe Cloud ULg-CHU
Le Cloud ULg-CHU
Geeks Anonymes
 
Les indices paludométriques
Les indices paludométriquesLes indices paludométriques
Les indices paludométriques
Institut Pasteur de Madagascar
 
Lutte antipaludique: les patients doivent-ils payer pour les antipaludiques
Lutte antipaludique: les patients doivent-ils payer pour les antipaludiquesLutte antipaludique: les patients doivent-ils payer pour les antipaludiques
Lutte antipaludique: les patients doivent-ils payer pour les antipaludiques
Institut Pasteur de Madagascar
 
L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?
L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?
L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?
Institut Pasteur de Madagascar
 
De l'ADN à la protéine
De l'ADN à la protéineDe l'ADN à la protéine
De l'ADN à la protéine
Institut Pasteur de Madagascar
 
Quand et comment changer de politique de traitement aux antipaludiques ?
Quand et comment changer de politique de traitement aux antipaludiques ?Quand et comment changer de politique de traitement aux antipaludiques ?
Quand et comment changer de politique de traitement aux antipaludiques ?
Institut Pasteur de Madagascar
 
Le contenu pour generer des leads
Le contenu pour generer des leadsLe contenu pour generer des leads
Le contenu pour generer des leads
Online Marketing Institute
 
Données actuelles sur la physiopathologie du paludisme à Plasmodium falciparum
Données actuelles sur la physiopathologie du paludisme à Plasmodium falciparumDonnées actuelles sur la physiopathologie du paludisme à Plasmodium falciparum
Données actuelles sur la physiopathologie du paludisme à Plasmodium falciparum
Institut Pasteur de Madagascar
 
Hack le droid
Hack le droidHack le droid
Hack le droid
While42
 

En vedette (20)

L'entomologie moléculaire et l'étude de la structuration génétique des anophèles
L'entomologie moléculaire et l'étude de la structuration génétique des anophèlesL'entomologie moléculaire et l'étude de la structuration génétique des anophèles
L'entomologie moléculaire et l'étude de la structuration génétique des anophèles
 
Le projet : Garki, historique et conséquences
Le projet : Garki, historique et conséquencesLe projet : Garki, historique et conséquences
Le projet : Garki, historique et conséquences
 
E bulletin (vol1 - no. 22)
E bulletin (vol1 - no. 22)E bulletin (vol1 - no. 22)
E bulletin (vol1 - no. 22)
 
Guide du sur-titrage au théâtre
Guide du sur-titrage au théâtreGuide du sur-titrage au théâtre
Guide du sur-titrage au théâtre
 
Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...
Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...
Plasmodium vivax en fin d’épidémie de paludisme à Madagascar : fait ou artefa...
 
E bulletin (vol1 - no. 19)
E bulletin (vol1 - no. 19)E bulletin (vol1 - no. 19)
E bulletin (vol1 - no. 19)
 
Sortir actualités artistiques des expositions
Sortir actualités artistiques des expositionsSortir actualités artistiques des expositions
Sortir actualités artistiques des expositions
 
Pieces Remorque, Remorques Montreal - Remorque Sylmar
Pieces Remorque, Remorques Montreal - Remorque SylmarPieces Remorque, Remorques Montreal - Remorque Sylmar
Pieces Remorque, Remorques Montreal - Remorque Sylmar
 
Synthèse des Grilles Evaluations 2003
Synthèse des Grilles Evaluations 2003Synthèse des Grilles Evaluations 2003
Synthèse des Grilles Evaluations 2003
 
La lutte contre le paludisme - De la politique nationale à la mise en œuvre
La lutte contre le paludisme - De la politique nationale à la mise en œuvreLa lutte contre le paludisme - De la politique nationale à la mise en œuvre
La lutte contre le paludisme - De la politique nationale à la mise en œuvre
 
Le Cloud ULg-CHU
Le Cloud ULg-CHULe Cloud ULg-CHU
Le Cloud ULg-CHU
 
Les indices paludométriques
Les indices paludométriquesLes indices paludométriques
Les indices paludométriques
 
Lutte antipaludique: les patients doivent-ils payer pour les antipaludiques
Lutte antipaludique: les patients doivent-ils payer pour les antipaludiquesLutte antipaludique: les patients doivent-ils payer pour les antipaludiques
Lutte antipaludique: les patients doivent-ils payer pour les antipaludiques
 
L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?
L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?
L'anémie sévère palustre: ou en est-on en ce debut du 21è sicle?
 
De l'ADN à la protéine
De l'ADN à la protéineDe l'ADN à la protéine
De l'ADN à la protéine
 
Quand et comment changer de politique de traitement aux antipaludiques ?
Quand et comment changer de politique de traitement aux antipaludiques ?Quand et comment changer de politique de traitement aux antipaludiques ?
Quand et comment changer de politique de traitement aux antipaludiques ?
 
Le contenu pour generer des leads
Le contenu pour generer des leadsLe contenu pour generer des leads
Le contenu pour generer des leads
 
Journal6
Journal6Journal6
Journal6
 
Données actuelles sur la physiopathologie du paludisme à Plasmodium falciparum
Données actuelles sur la physiopathologie du paludisme à Plasmodium falciparumDonnées actuelles sur la physiopathologie du paludisme à Plasmodium falciparum
Données actuelles sur la physiopathologie du paludisme à Plasmodium falciparum
 
Hack le droid
Hack le droidHack le droid
Hack le droid
 

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

SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
One Clic Conseil
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
NiceToMeetYou
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
Intuitiv Technology
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Brioude Internet
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
Actency
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
defimedia
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
altima°
 
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
Conférence SEO mobile –  mobile first - 10 ans  CyberCité NantesConférence SEO mobile –  mobile first - 10 ans  CyberCité Nantes
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
CyberCité
 
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
Peak Ace
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
maclic
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
Brioude Internet
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
BEIJAFLORE
 
Pixmobi - Guide agences
Pixmobi - Guide agencesPixmobi - Guide agences
Pixmobi - Guide agences
COWEMO
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
WSI France
 
Atelier pratique : CR Mobile - Webassoc 14 avril 2015
Atelier pratique : CR Mobile - Webassoc 14 avril 2015Atelier pratique : CR Mobile - Webassoc 14 avril 2015
Atelier pratique : CR Mobile - Webassoc 14 avril 2015
webassoc .fr
 
Cms big data Rubedo, au delà des performances
Cms big data Rubedo, au delà des performancesCms big data Rubedo, au delà des performances
Cms big data Rubedo, au delà des performances
Rubedo, a WebTales solution
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Salon e-tourisme #VeM
 
SEO mobile en 2014
SEO mobile en 2014SEO mobile en 2014
SEO mobile en 2014
David Eichholtzer
 
Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012
CCI Yonne
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
MBA Multimedia
 

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

SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
Conférence SEO mobile –  mobile first - 10 ans  CyberCité NantesConférence SEO mobile –  mobile first - 10 ans  CyberCité Nantes
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
 
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
 
Pixmobi - Guide agences
Pixmobi - Guide agencesPixmobi - Guide agences
Pixmobi - Guide agences
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
 
Atelier pratique : CR Mobile - Webassoc 14 avril 2015
Atelier pratique : CR Mobile - Webassoc 14 avril 2015Atelier pratique : CR Mobile - Webassoc 14 avril 2015
Atelier pratique : CR Mobile - Webassoc 14 avril 2015
 
Cms big data Rubedo, au delà des performances
Cms big data Rubedo, au delà des performancesCms big data Rubedo, au delà des performances
Cms big data Rubedo, au delà des performances
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
SEO mobile en 2014
SEO mobile en 2014SEO mobile en 2014
SEO mobile en 2014
 
Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 

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

  • 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

Notes de l'éditeur

  1. Adapter contenus ne veut pas dire suppression de contenus : ajouter des foncitonnalités
  2. Et le trigger, on le met où ?
  3. Le site doitetre capable de se débrouiller tout seul