28 mars 2024

Mon site web mobile ? best practices (iPhone, iPad, android etc.)

Approche du web mobile – best practices (enfin d’après moi…)

Lors de discussions passionnantes du type « on refait le monde » on m’a plusieurs fois posé la question « mais alors… site web mobile ? une application ? hein ? », mais aussi parce que c’est un domaine auquel je m’intéresse : bref quelle stratégie adopter pour un site/service web pour passer sur mobile.

Ma réponse de base (enfin j’y ai un peu réfléchi quand même) :

  • RIEN, simple hein (enfin presque) : depuis 3 ans, Apple a bouleversé le monde du mobile avec un navigateur qui permet d’utiliser le web (html/css/images/javascript – bien conçu sans trop d’usages de joyeusetés nécessitant des plug-ins ou Internet explorer spécifiquement) pratiquement comme un « pc/mac/ce que vous voulez ». On tape une url, on clique sur un lien, on recherche via google (ou yahoo mais c’est caché) et hop ça roule. D’ailleurs Apple n’a PAS modifié ses propres sites apple.com. J’ajouterai une nuance (de taille) : si vous souhaitez proposer un service actif commercial de biens électroniques dématérialisés (vous me suivez ?), regardez ce qu’a fait Apple : Apple Store pas optimisé et 3 applis iPhone/iPad : iTunes pour la musique/vidéos/podcast, iBooks pour les livres et AppStore pour les applications. Et les 3 n’ont rien à voir. Bien sûr si votre site diffuse des vidéos comme youtube, passez à l’étape d’après, il faut tout revoir.
    Pensez bien votre site, that’s all folks (en clair, virez le flash par du javascript, gif animé et des vidéos sur youtube (encore un autre sujet ça).
  • Une « petite » optimisation web (même si cela peut aller loin) : Ensuite, oui il faut une version « mobile » optionnelle. La « best pratice » est d’avoir un site « normal » optimisé en fonction des navigateurs, rapide, coder léger, un peu de javascript bien pensé (jquery) css optimisées etc. Mais c’est mieux d’avoir un message au chargement « voulez vous accéder à une version mobile » pour accéder à une version vraiment optimisée qui se chargera vraiment plus vite et avoir un bouton pour voir la version normale ou switcher de l’un à l’autre. L’erreur est d’avoir moins de mises en avant sur la version iPhone, moins de choses, pourquoi « diminuer », en fait il faut revoir la taille des graphismes et une partie de l’ergonomie. Des templates sont accessibles pour des applications web, je pense qu’à peu de frais on a ainsi une bonne approche du web mobile et faciliter l’usage de votre site aux visiteurs mobiles.
    Avantages, on reste sur du code de surface (html, css, javascript ou pas) et optimisation/réencodage de médias (mise à la taille d’images, ré-encodage/dimensionnement des vidéos – H264 et 3gp, exit le fl(ash)v(ideo)), on est très proche de l’époque « podcast » qui a préparé le terrain (rss/mp3/mp4) et cela me rappelle l’époque du wap/wml.
    Cela ne vous dispense pas de votre marketing pour avoir du trafic qualifié, mais des sites référencent les web mobiles.
    Pour travailler son site, une bonne base est le site d’Apple sur Safari/dev.
  • Un bon (re)développement d’application mobile (comme avant) : Enfin le top est une application mobile, sur iPhone en priorité mais sur 3 plate-formes si vous voyez grand (iPhone, Android et blackberry) et une 4ème à aborder autrement : iPad (interface plus grande et nouvelles possibilités). Pourquoi, quels sont les avantages (et inconvénients) – avant de se plonger dans du code genre c/c++ ?
    • Vous êtes diffusés par Apple (par exemple) : Présence dans AppStore (web et application) qui est une place de marché avec son fonctionnement (notes des utilisateurs, classement, parfois une application est mise en avant par les équipes d’Apple et même dans les pubs papiers/web). Une fois trouvée, votre application est disponible en 1 click. Un regret coté éditeur (je m’avance) : vous ne savez pas précisément qui « vous a acheté », et vous vendez « Store par Store » (pays par pays).
      Cela ne vous dispense pas de votre marketing, mais cela peut aider (Apple attire du monde sur ses sites…)
      Vous aurez aussi la possibilité de prendre contact avec tous les sites parlant d’applications (et il y en a !!) et offrez là, faites gagner l’application ou des choses dans l’application, etc. N’oubliez pas votre site (votre site renvoit vers l’appli mais avant il en a parlé et démontré les vertues).
    • Vous garantissez un bon téléchargement de l’application à vos utilisateurs. Vous êtes à coté des applications les plus connues, vous êtes sur le passage obligé. Votre site est le relais de vidéos de démonstration (Apple ne fournit que des images pour l’apperçu de l’application) et éventuellement du push ou une base de données pour les données des utilisateurs.
    • Mieux : Une application permet d’interagir avec le mobile sous plusieurs formes et encore plus avec iPhone OS 4 (photos, calendriers, mails), mais une toute simple est que « votre serveur » peut pousser de l’information à ceux qui auront « acheté » votre application (une application pouvant être gratuite) via le système de push d’Apple, ceci sans que vous ayez eu besoin de demander à l’utilisateur de s’enregistrer chez vous. Une application peut également interagir avec le hardware de l’iPhone (capteurs) mais aussi d’accessoires (même si pour le moment c’est une voie peu utilisée).
    • Vous pouvez vendre des choses dans votre application ! Soit par le système d’Apple, in app purchases, pour que l’application s’enrichisse et re-télécharge une extension (par exemple un niveau de jeu), mais votre application peut souscrire un abonnement (par exemple ou faire un achat) à un système externe, puisque l’application peut intégrer un navigateur, une adresse, poster sur un formulaire etc… comme par exemple un système de paiement. (beaucoup de choses à dire là aussi). Pensez bien les formulaires, intégrez si nécessaire… la version mobile optimisée.
    • Vous n’aurez plus d’url : Pensez donc bien l’icône (beau), pensez bien les icônes dans l’application (l’interface) et les images de démos sur AppStore, il faut que ça donne envie, encouragez les utilisateurs à donner leur avis sur iTunes.
    • Remplissez l’application pour la rendre « prêt  l’usage » et qu’elle prenne par la main l’utilisateur. Vous le plongez dans de nouvelles interfaces, de nouveaux usages, et cela nécessitera une concentration de l’utilisateur. Car attention, une application « chasse » l’autre, votre application doit apporter quelque chose à l’utilisateur, j’ai plein d’applis téléchargées dont je ne me sers jamais, au bout d’un moment je les efface. Considérer qu’une application est pendant un certain temps un bookmark et que la première impression est la bonne. J’ai constaté que les développeurs de jeu recréent des interfaces dingues dans les jeux vidéos, mais que les applications font rarement autant d’effort, c’est dommage car autant on passe dans les jeux vidéos sur ces efforts car les joueurs ont l’habitude, autant sur les applications le moindre effort est remarquable (en comparaison d’un site). Une bonne ergonomie et un bel habillage font la différence (tweetie m’a eu comme ça par le look and feel).
    • Simplifiez les usages mais ne mettez pas à la poubelle votre contenu. Une application mobile ne doit pas être un mini site ou un site réduit. Si vous avez du merchandising sur votre site, retrouvons le dans l’appli, au bon endroit.
    • L’interface réduite favorise la concentration de l’utilisateur, par exemple une vidéo n’est plus un élément composite d’une page ou d’une url parmi d’autres, mais une étape à part entière. Vous n’êtes cependant pas à l’abri d’un clic de bouton home (qui sous entend quitter et… risque d’oublier). Attention à la vidéo, utilisée sur un réseau 3g ça rame un peu et ça prend du forfait data/quota. A utiliser intelligemment.
    • Très récemment Apple a annoncé iAds, une plate-forme de publicité, c’est encore un autre point intéressant (monétiser un service ou assurer une visibilité différente) mais qui nécessite un article à part entière. Juste une remarque, ce serait intéressant de pousser un usage d’auto promo.
    • Inconvénients des développements : on passe à carrément autre chose, il s’agit de développement informatique (code, interface(s) d’utilisation, base de données, optimisation, sécurité, etc…), il vous faut des pros qui ont des premières expériences réussies ou alors vous avez du temps (lucky you).
    • Avantage majeur : On peut carrément imaginer des choses qui dépassent le simple fait de surfer sur un site puis de passer à un autre, donc de vraies interactions (truc tout bête sur l’appli pages jaunes, le bouton rechercher autour de moi) et iPad en a rajouté une couche (interfaces plus riches/complexes).
    • J’avais déjà commencé à parler du développement sur iPhone ici, et j’avoue n’avoir regardé que cette approche.

Donc vous l’aurez compris, la réponse est à étages et la réponse la plus complète est « tout », d’ailleurs certains, poussés par le temps, ont intégré tant bien que mal du web mobile dans l’appli mobile, histoire de sortir, puis optimisent l’application et travaillent l’ergonomie. LEs 2 premières approches sont simples (d’ailleurs Apple avait poussé pour que les développeurs travaillent dans ce sens : pas de sdk (kit de développement) au début (2007) et encouragements à faire du web 2.0, résultat en quelques semaines  les développeurs ont développé un kit non officiel, des magasins et outils de distribution et bien sûr des applications payantes/gratuites) puis Apple a tout refait.

L’approche application mobile est un projet à part entière, plus contraignant, mais permet de revoir de fond en comble vos projets et approches de votre marché, voir de l’étendre. Et comme d’habitude avec le web, pas de réponse universelle, rien ne marche de la même manière partout, il faut toujours penser « cross platform », dès que quelque chose commence à marcher des concurrents font la même chose mais autre chose :-)

Excitant.

5 réflexions sur « Mon site web mobile ? best practices (iPhone, iPad, android etc.) »

  1. Merci pour cette excellente synthèses des différentes pistes à suivre. Pour être tout à fait complet, il faudrait encore mentionner l’aspect des ressources (temps et surtout $) nécessaires pour mener chaque projets à bien.

    J’ai, par exemple, entendu articuler des chiffres d’environ 20 K€ pour la création de l’Appli CFF (trains suisses). Tu as un retour à faire sur ce point-là ?

    Encore merci pour cet article.
    David

  2. Le projet le plus simple est de faire une web app (donc la deuxième solution) optimisée car si le site est bien conçu il suffit « juste » de travailler la css et les templates du cms utilisé ou l’application. A minima une application mobile pourra utiliser soit tout ou partie de la web app, soit les flux de consultation, ce sont les projets les moins couteux en temps.
    Sur l’aspect tarifaire des applications, je pense qu’il n’y en a pas une qui se ressemble et que le tarif que tu mentionnes correspond à des projets où beaucoup d’acteurs peuvent être sollicités, donc du temps, sans compter que partir sur des kits de développements qui n’existaient pas il y a quelques années nécessite de trouver des ressources, sans compter que les applications doivent dialoguer de façon sécurisée via internet avec des existants (soit le site web, soit une base). D’une certaine manière tout ce que je mentionne sont des freins, pourtant il y a un boom qui correspond aussi à l’explosion des usages et des besoins. Lundi j’ai regretté de ne pas avoir une appli mobile airfrance relationnelle (j’insiste,c ‘est la clé), pas qu’une copie du site qui lui fonctionne à peu près bien sur iPhone.

  3. L’iPhone restera le terminal le plus vendu, mais ANdroid sera le systeme d’exploitation des smartphones le plus utilis?…

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *