Responsive design, site mobile, Applications : comment faire le bon choix ? Présentation par Couleur Citron

1. WEBCONFERENCE
RESPONSIVE DESIGN, SITE MOBILE, APPLICATIONS :
COMMENT FAIRE LE BON CHOIX ?
Agence de communication
PARIS
09 75 75 25 76
28 rue Danès de Montardat
78100 Saint-Germain-en-Laye
TOULOUSE
09 75 75 25 76
14 avenue de l’Europe
Parc Technologique du Canal
31520 Ramonville-St-Agne
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

2. Sommaire
1. Les différentes options avec leurs
avantages et leurs inconvénients
2. Comment faire des choix pour servir
une stratégie
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

3. Sommaire
1. Les différentes options avec leurs
avantages et leurs inconvénients
2. Comment faire des choix pour servir
une stratégie
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

4. Site mobile : responsive design
LE RESPONSIVE DESIGN
C’EST LA FORME D’UN SITE
WEB SELON LES RÉSOLUTIONS
 Adapter la manière dont les pages d’un site sont affichées
pour que l’utilisation du site soit ergonomique, quelle que soit la
résolution du terminal avec lequel ce site est consulté.
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

5. Site mobile : responsive design
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

6. Site mobile : responsive design
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

7. Responsive design : Mairie du 1er
Tous les contenus du site web
sont affichés, mais ils s’adaptent
en fonction du terminal utilisé.
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

8. Site responsive : avantages et inconvénients
AVANTAGES
INCONVENIENTS
 Bonne expérience utilisateur quelle
que soit la résolution d’écran
 Peut tirer vers le bas le design
pour répondre aux contraintes de
tous les terminaux (smartphones
en particulier)
 Déploiement simplifié : on adapte
uniquement la forme et pas le fond
 Communication sur une adresse
internet unique
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B
 Ne tient pas compte du contexte
de « mobilité », avec ses besoins
particuliers et ses contraintes

9. Site mix : responsive et adapté
UNE APPROCHE MIX
C’EST ADAPTER L’AFFICHAGE
ET LES CONTENUS D’UN SITE WEB
POUR UN SITE MOBILE
 Capitaliser sur un site web mais adapter l’affichage et le contenu :
- N’afficher que les contenus du site utiles à l’utilisateur mobile
- Créer du contenu spécifique au mobile
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

10. Responsive design adapté : Elior évènements
Le code source du site est
identique mais l’affichage
est spécifique à l’utilisation
mobile. Seuls les éléments
pertinents par rapport à un
contexte d’utilisation
mobile sont conservés, la
recherche d’un lieu est
mise au premier plan.
Le formulaire de contact
est adressé à une adresse
mail différente pour plus
de réactivité sur le mobile.
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

11. Responsive design adapté : avantages et inconvénients
AVANTAGES
INCONVENIENTS
 Bonne expérience utilisateur quelle
que soit la résolution d’écran
 Nécessite de faire des choix sur
les contenus
 Capitalisation sur des
développements mutualisés entre
les versions
 Peut tirer vers le bas le design
pour répondre aux contraintes
d’affichage
 Réponse directe à un besoin
identifié, par terminal
 Communication sur une adresse
internet unique
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

12. Site mobile : Adaptation dédiée
SITES DÉDIÉS
UNE APPROCHE SPÉCIFIQUE À
CHAQUE TERMINAL
 Etudier le graphisme, l’ergonomie et le contenu de manière spécifique pour
apporter une expérience optimale sur chaque terminal.
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

13. Site mobile adapté : Météo France
L’interface graphique et
l’ergonomie sont adaptées aux
petits écrans.
La navigation s’effectue via des
flèches (vs menu), la localisation
peut s’effectuer par détection
GPS, l’interface du calendrier a
été revue et les entrées de type
portail ont toutes été retirées.
L’adresse du site est différente
mais à l’arrivée sur le site il nous
est proposé de choisir entre site
classique ou mobile (et
sauvegarder son choix).
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

14. Site mobile adapté : avantages et inconvénients
AVANTAGES
 Liberté technique, graphique et
ergonomique pour apporter la
meilleure réponse aux besoins
identifiés, par terminal
COULEUR-CITRON.COM
INCONVENIENTS
 Nécessite des développements
spécifiques par version
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

15. Application qu’est ce que c’est ?
 J’installe l’application, qui est une forme de logiciel
 Je peux donc la configurer selon les choix qui me
sont donnés
 L’icône de l’application est tout le temps présente et
je peux donc l’ouvrir facilement
 L’accès à l’application ne nécessite pas
obligatoirement une connexion internet
 Comme ce logiciel est « connecté » au système
d’exploitation de mon appareil, je peux recevoir des
alertes, notifications, etc.
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

16. Application mobile: Télé Loisirs
L’application permet, en
plus de visualiser le
programme TV de façon
classique, de sélectionner
ses chaînes favorites pour
constituer un guide TV
personnalisé, accessible
en deux clics via le menu.
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

17. Application : avantages et inconvénients
AVANTAGES
INCONVENIENTS
 Interface plus fluide et agréable qu’un site
HTML
 Adaptation de l’application pour les
tablettes et les smartphones
 Personnalisation plus importante de la
relation : possibilité de géolocalisation, de
personnalisation du contenu, etc
 Nécessite une action plus « impliquante »
que la simple consultation d’une page.
Donc éventuellement plus d’abandons si la
« promesse » n’est pas suffisamment
valorisée par les destinataires
 Facilite le « retour » des personnes (un simple
bouton vs se souvenir de l’URL)
 Nécessite une communication dédiée
 Moyen plus efficace/intrusif de se rappeler
aux clients : push / notifications
 Contenu visible hors ligne, les actions se
déclenchent automatiquement lors d’une
connexion internet
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

18. Sommaire
1. Les différentes options avec leurs
avantages et leurs inconvénients
2. Comment faire des choix pour servir
une stratégie
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

19. Approche dispositif
LA PERSONNE CONSULTE VOTRE SITE VIA
(recherche Google, réseaux sociaux, site web tiers, publicité,…)
SITE WEB ET MOBILE
 Il faut lui proposer une bonne expérience de
consultation sur l’ensemble de ces écrans :
c’est le principe du responsive
Push depuis
le(s) site(s)
APPLICATION
LA PERSONNE TÉLÉCHARGE ET INSTALLE VOTRE APPLICATION
(Publicités, technique de positionnement via l’App store)
 Il faut lui proposer des avantages qu’elle valorise
suffisamment pour qu’elle l’installe
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

20. Exemple d’utilisation combinée
Le joueur doit défendre la dent en luttant contre les
attaques acides à travers 5 univers de consommation
produit
En cas de difficulté, le joueur pourra « tricher » et
passer des niveaux difficiles en scannant un code
barre produit (Drive to store)
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

21. Application vs site mobile ?
La question : « faut-il un site mobile ou une application ? »
est une mauvaise question pour démarrer une réflexion sur la mobilité.
Il faut se demander :
Comment vais-je être le plus efficace pour atteindre mes objectifs en
fonction de l’utilisation des différents terminaux par mes cibles ?
C’est en fonction des réponses que je pourrai prendre les bonnes
décisions :
application, adaptation du site, responsive, dispositif mix,…
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

22. Les bonnes questions
► Quelle est ma cible et quels sont mes objectifs ?
► Dans quel contexte ma cible utilise-t-elle différents
terminaux ?
► Qu’attend-t-elle / Qu’est ce qui la séduirait, par
rapport à chaque terminal ?
► Comment ma marque peut traduire ces attentes
pour servir mes objectifs ?
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

23. Conclusion : notre approche
► La consommation est plutôt comparable en terme de contenu sur un écran
bureau et une tablette : une réponse responsive pour traiter ces 2
terminaux est donc intéressante.
► Le smartphone suscite des besoins particuliers. Une version responsive
adaptée ou un site dédié sont très souvent pertinents.
► Une personne vous trouvant via Google doit être bien accueillie, qu’elle
soit équipée d’un PC, d’une tablette ou d’un smartphone. Une approche
application est donc complémentaire.
► L’application est un levier très puissant de relation client si les
fonctionnalités CRM sont exploitées. C’est aussi un outil qu’il faut
promouvoir. Il faut penser à sa diffusion et en intégrer les coûts inhérents.
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B

24. MERCI DE VOTRE ATTENTION
Agence de communication
PARIS
09 75 75 25 76
28 rue Danès de Montardat
78100 Saint-Germain-en-Laye
TOULOUSE
09 75 75 25 76
14 avenue de l’Europe
Parc Technologique du Canal
31520 Ramonville-St-Agne
COULEUR-CITRON.COM
Société au capital de 115 000 € • TVA no FR 08381813468 • SIREN no 381 813 468 000 75 • Code APE 5911 B