1.
#DIGITALBREAKFAST
Face aux apps,
quelles opportunités en Web Mobile ?
Conférence NiceToMeetYou + La Revanche des Sites
Paris, Palais de Tokyo + Lille, Hermitage Gantois – Juin 2015

2.
Tendances d’usages
Mobile Web Design
Possibilités techniques
Mobile SEO
Email Responsive
Let’s talk about...

3.
NiceToMeetYou est une agence
digitale full-services dotée d’une
forte sensibilité utilisateur / client.
Nous concentrons les expertises
stratégiques, créatives et technologiques
au service des principaux challenges
digitaux des marques :
+ réinventer l’expérience de marque
+ développer une audience
+ booster la visibilité
+ maîtriser l’e-réputation
+ engager une clientèle
+ générer des leads ou des ventes
STRATÉGIE
CODE
CRÉATION RELATION

4.
La Revanche des Sites est une agence
experte en référencement naturel,
avec une vision internationale.
L’agence propose ses expertises sur
plusieurs leviers :
+ Audit SEO
+ Backlinks Building
+ Transfert SEO
+ Géolocalisation
+ Bombing Antidot
+ Ajax Optimization

5.
Les intervenants
Ange POZZO DI BORGO
Planneur Digital – Associé
Agence NiceToMeetYou
Chargé de cours Skema BS / Iscom
Olivier COULON
DC Digital – Associé
Agence NiceToMeetYou
Benoît DUGAST
Directeur Technique
Agence NiceToMeetYou
Sylvain GARIN
Consultant SEO – Associé
Agence LRDS
Avec l’appui de Solon COSTOPOULOS Krystel ROBERT
Directeur de Clientèle Directrice Commerciale

6.
STATE OF
WEB MOBILE
Où en est-on en France ?

7.
2014 2015 2016 2017
1H20
1H40
1H50
2H10
UNE QUESTION DE TEMPS D’USAGE

8.
Soit environ 15 minutes par jour
dans le navigateur...

9.
FAIBLE ?
En termes de croissance,
NON.
PROPORTIONNELLEMENT, OUI.

10.
+400%
de trafic mobile

11.
Sans oublier les préférences
liées au contexte !

12.
Et de l’âge
dépend aussi l’usage

13.
« Mobile UX will be a
ranking signal »
SearchEngine Land, 11/14
Des utilisateurs qui privilégient forcément
une expérience mobile-friendly

14.
Dans un écosystème fragmenté
et en évolution constante...
Source : Kerensen (2015)

15.
Le Web Mobile est la voie du bon sens
pour une large majorité de marques !
Coût de déploiement mutualisé
Code universel
Leviers de trafic habituels
Responsive ou Adaptive Design
Fonctionnalités « app-like »

16.
EN BREF
1. Jetez d’abord un œil à vos analytics sur la partie mobile
2. Réfléchissez bien à votre valeur ajoutée pour l’utilisateur sur mobile
3. Tenez compte des usages, dans votre contexte
4. Comparez les coûts de production et d’évolution !

17.
WEB MOBILE
Le futur est dans nos mains
DESIGN

18.
Est-ce une app ?
Un site web ?
Superman ?
Applification

19.
http://www.transpole.fr
Context is king

20.
Un site web qui
ressemble à une app
http://www.my7up.com/

21.
Un site web qui s’adapte
http://www.citedeleconomie.fr/

22.
http://www.sauve-qui-pique.fr/
Serious Gaming

23.
https://youtube10.withgoogle.com/
Drag n drop + Touch

24.
Mais jusqu’où ?
Allons un peu plus loin…

25.
Can I (really) use ?

26.
Hardware + Software

27.
Scalable Vector Graphics
Dessin vectoriel dans le navigateur
Svg
Software

28.
https://awwapp.com/
Touch + SVG

29.
Capteur qui permet de mesurer l’angle d’inclinaison (x,y,z)
Le gyroscope donne la position angulaire (selon un, deux ou les trois axes)
Gyroscope
Hardware

30.
http://graphics.wsj.com/3d-nasdaq/
Web GL + Gyroscope

31.
http://hexgl.bkcore.com/
Web GL + Drag

32.
Communication bidirectionnelle
WebSocket est une technologie évoluée qui permet d'ouvrir un canal de communication interactif entre
un navigateur (côté client) et un serveur. Avec cette API vous pouvez
- envoyer des messages à un serveur
- recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir
une réponse.
Websocket

33.
http://flight.iberia.com/desktop/
Web Socket + Web GL

34.
Capteur qui permet de mesurer l'accélération linéaire de ce dernier.
On parle encore d'accéléromètre même s'il s'agit en fait de 3 accéléromètres qui calculent les 3
accélérations linéaires selon 3 axes orthogonaux.
Accéléromètre
Hardware

35.
http://branlettedenoel.com/
Accéléromètre + Web Socket

36.
Chiche !
Et si on mélange tout ?

37.
http://www.mountainsofmouthness.com/
Web GL + Gyroscope +
Twitter + Voice Synth

38.
http://sakuradream.lux.co.jp/
Web GL + Gyroscope + Geolocation
+ Google Street View

39.
https://www.chrome.com/racer
WebSockets + Chrome + Canvas +
Paper.js + Web Audio API

40.
Full Screen API :
Pas de barre d’URL. API qui autorise le contenu (video ou canvas) à prendre l'intégralité de l'écran
File Api :
Permet d’uploader des fichier présents sur son mobile
HTML Media Capture :
Enregistrement de photo, video et son pour envoi au travers d’un input files (formulaire)
Web Speech API :
Reconnaissance vocale, permet a la page web d’écouter l’utilisateur. (ios)
Autres fonctions créatives

41.
Quelques ressources

42.
Chrome to
Phone
Must have

43.
http://uiohmy.com/
Comparatif d’apps par OS

44.
http://capptivate.co/category/patterns/instructional/
UI Motion Galerie

45.
https://fr.pinterest.com/pausegraphik/ui-motion/
Share the love, merci Jérôme

46.
http://1000.chromeexperiments.com/
History of Web Experiences

47.
EN BREF
1. Selon les cas : pensez App, produisez web
2. Identifiez les « instants de mobilité » entre votre public cible et votre projet
3. Explorez les features qui ont du sens pour votre site / marque / OP / communauté
VS vos analytics
4. Profitez de l’impact de cette technologie facile à intégrer, et (encore) innovante
5. Le gaming : une première étape simple et rapide à mettre en place

48.
A vivre uniquement sur
tablette ou mobile !
Petit bonus

49.
WEB MOBILE
Mobilegeddon Google
SEO

50.
Ce qu’il faut savoir :
• Algorithme fonctionnant page par page
• La compatibilité mobile n’est qu’un des nombreux critères de l’algorithme
• Plus la concurrence est mobile-friendly, plus le la perte est importante
• L’impact dépend du taux de compatibilité (score entre 0 et 100)
• En temps réel : remontée de la page presque « automatique »
Avril 2015
Google change les résultats du SERP sur smartphones en
privilégiant les sites dits « Mobile Friendly ».

51.
• Pas de révolution mais juste un ajustement
• Forte corrélation entre l’impact et la compatibilité mobile des concurrents
• Impact uniquement sur les SERP mobile
• En moyenne -5,3% de perte de visibilité sur mobile (sites non adaptés)
Cas spécifique : sous domaine dédié mobile
Pour quels impacts ?

52.
Bing = follower

53.
•Un site est considéré MOBILE-FRIENDLY par Google lorsque :
• Le contenu peut être intégralement affiché sur un téléphone
• Il n’est pas nécessaire de réduire ou zoomer pour afficher le site correctement
• Le contenu est lisible sur des petits écrans
• Il est possible de naviguer simplement avec un doigt
• Bouton de 48px min
• Écart de 32px entre 2 boutons
• Le site est compréhensible par les robots Google
Un peu de technique…

54.
RESPONSIVE WEB DESIGN : même URL, même code HTML, affichage différent en fonction de
la taille de l’écran
DYNAMIC SERVING : L’URL est identique quelque soit le support mais une version spécifique
du code HTML est chargée selon le type d’appareil
URL DISTINCTES : les versions sont accessibles depuis des URL distinctes
(m.monsite.fr/content-1 vs monsite.fr/content-1), le code est aussi différent sur chacune des
versions.
URL IDENTIQUES
?
CODE SOURCE
IDENTIQUE ?
Mobile Friendly : 3 options

55.
Temps de
chargement
réduit : pas de
redirection pour
accéder aux
contenus
optimisés
Evite la possibilité de
duplicate content
entre site web et site
mobile. Pas besoin
d’utiliser de canonical
ou de balises
rel=alternate.
Crawl plus efficace :
Les bots ne crawl
qu’un seul et unique
site. Votre site est de
ce fait mieux compris
par les robots,
l’indexation est plus
pertinente et à jour.
Vos
utilisateurs
partagent vos
contenus plus
facilement :
URL unique Réduit les
possibilités
d’erreurs entre
m-site et site
web
Google ♥ Responsive
Moins de
temps
d’intégration
pour les mises
à jour >> 1 seul
et unique

56.
• Compresser le contenu
• Prioriser le contenu au-dessus de la ligne
de flottaison
• Mettre en cache le contenu
• Éviter les nombreuses redirections
• Optimiser votre serveur Web
La vitesse ça compte

57.
EN BREF
1. Ne plus négliger la version mobile (si ce n’est déjà fait)
2. Privilégier le Responsive, dans la plupart des cas
3. Respectez quelques règles simples d’ergonomie
4. Ne négligez pas la technique
5. …jusqu’à la prochaine évolution

58.
EMAIL
ET MOBILE
Une update bien utile ;)

59.
En France, l’email est lu sur mobile
dans plus de 36% des cas...
Source : ReturnPath (2014)

60.
Source : Litmus (mai 2015)
#1 Apple iPhone 28% +0.55
#2 Gmail 18% +1.28
#3 Apple iPad 11% -0.21
#4 Apple Mail 8% -0.29
#5 Google Android 8% +0.16
#6 Outlook 8% -0.86
#7 Outlook.com 5% +0.41
#8 Yahoo! Mail 4% -0.28
#9 Windows Live Mail 2% -0.09
#10 AOL Mail 1% -0.11
Les clients mails
les plus utilisés au monde sont...

61.
Mais de nombreux clients mail
ne supportent toujours pas
les media queries !
Source : Litmus (2014)

62.
2012
2015
Tri Consultation et action
Consultation et action

63.
Dream land

64.
Dans la réalité…

65.
Responsive ?

66.
Context is king

67.
Success !
Source : http://blog.movableink.com/clients-corner-best-western/
Device Targeting
+143%
App Download
Geolocation
+12%
Taux de clic

68.
Solution #1 : CSS

69.
Solution #2 : One Column

70.
Solution #3 : Get Help

71.
Et vos clients dans tout ça ?
Source : http://zurb.com/playground/responsive-email-templates

72.
Welcome

73.
Inspiration

74.
EN BREF
1. Vous DEVEZ avoir une vision mobile
2. La technologie n’évolue presque pas, à l’inverse des usages
3. Vérifiez la manière dont vos utilisateurs consomment vos emails (stats + parcours)
4. Concevez mobile first, ou profitez des outils aujourd’hui peu coûteux et performants
5. Adaptez (si possible) vos contenus au contexte de consultation

75.
Merci :)
NiceToMeetYou / Agence Digitale « Full-Services »
www.ntmy.fr & @ntmy_fr
La Revanche des Sites / Agence SEO
www.la-revanche-des-sites.fr & @RevancheSites