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

  • 456 views
Uploaded on

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

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

More in: Social Media
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
456
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Adapter contenus ne veut pas dire suppression de contenus : ajouter des foncitonnalités
  • Et le trigger, on le met où ?
  • Le site doitetre capable de se débrouiller tout seul

Transcript

  • 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