Avec plus de la moitié des utilisateurs naviguant sur le web depuis leur mobile, la frontière entre site et application devient de plus en plus floue ; les usages et les attentes se fondent et les sites internet se doivent d’évoluer pour proposer une expérience utilisateur adaptée.

Chez ikomobi, nous accompagnons nos clients dans le relationnel avec leurs utilisateurs en construisant la plateforme web la plus adaptée à leurs besoins. Pour ce faire, notre équipe de développeurs web perfectionne en continu son expertise pour mettre en œuvre la solution technique adéquate et ce sont cinq de ces solutions que nous avons choisi de développer dans cet article. 

(Si vous souhaitez en apprendre plus sur le web design en complément de cet article plus technique, n’hésitez pas à consulter celui-ci).

1 – Proposer une expérience utilisateur fluide et améliorée : les SPA et App isomorphic

Pour l’utilisateur mobile, naviguer de page en page sur un site internet sous-entend devoir attendre que chacune des pages se charge, plus ou moins rapidement selon sa connexion. Ce temps d’attente, s’il est long, devient particulièrement frustrant si l’on doit recharger la totalité d’une page, avec ses menus, ses images, alors que seule une petite partie des informations a changé.

De plus, lorsque le site est utilisé en mobilité dans une démarche précise (acheter, consulter son compte, obtenir des informations…), l’utilisateur s’attend désormais à vivre la même expérience que dans une application native.

C’est là qu’une solution s’impose : la SPA (Single Page Application), qui consiste à créer une véritable application web permettant d’obtenir un ressenti similaire à celui d’une application native, alors même que l’utilisateur navigue sur un site.

Quelle est la mise en œuvre requise ? En temps normal, chaque page d’un site internet est générée dans sa globalité, lorsque l’utilisateur en fait la demande, par un moteur (à l’aide de langages tels que PHP, ASP, etc) qui réunit des modèles de pages, des images et des données qu’il va chercher dans une base de données. Le temps de calcul et d’affichage de cette fameuse page peut demander plusieurs secondes et ce temps se multiplie à chaque nouvelle demande.

Dans le cas d’une Single Page Application, l’utilisateur reçoit une première fois tous les éléments qui constituent l’interface, que nous appellons le Front End. Puis, ce sont uniquement les données, fournies par un moteur spécifique, le Back End, qui transitent à chaque demande.

Développé en Javascript, le front-end fonctionne quasiment comme une application mobile autonome au sein du navigateur web, propose des comportements très proches d’une application native et réduit drastiquement les temps de chargement.

Mais les avantages de cette solution ne s’arrêtent pas là. JavaScript permet également l’utilisation hors-connexion (offline) et la synchronisation des données qui

permettent aux applications de ne pas interrompre l’expérience, où que soient les utilisateurs (métro, tunnel…).

Autre avantage : en séparant les responsabilités (au front-end l’affichage et l’expérience utilisateur, au back-end la gestion des données), le back-end peut ainsi être utilisé pour d’autres interfaces. Il permet dans ce cas d’optimiser les coûts et le temps de développement de cette interface et de mutualiser son usage à plusieurs plateformes.

Seul mise en garde : la SPA est plus lourde en contenu qu’une page HTML statique. De ce fait, elle nécessite tout de même, à sa première utilisation, un temps de chargement non négligeable pour des utilisateurs possédant une connexion internet ralentie.

Pour remédier à ce problème, l’App Isomorphic a vu le jour. Version évoluée de la Single Page Application, l’App Isomorphic se base sur l’utilisation d’un seul langage commun pour le développement du front et du back-end. Elle délègue au back-end la responsabilité de préparer le travail de rendu avant que le front-end ne prenne le relais une fois que la SPA est complètement chargée par le front-end. Elle apporte ainsi une fluidité totale entre back-end et front-end et supprime les problèmes de performance et de référencement rencontrés avec la SPA. On obtient alors un résultat optimal pour le visiteur en garantissant un temps de chargement acceptable et une expérience ergonomique supérieure à celle d’un site web classique.

2 – Anticiper l’évolution et la maintenabilité de votre site

Victimes de leurs succès, certains sites souffrent parfois de lenteurs voire même d’indisponibilité totale de service. Temps de calculs trop longs, base de données grandissantes et non-optimisées, entre autres, sont autant de raisons pour ces ralentissements lorsque le trafic et le volume des données augmentent. S’il est possible de corriger à posteriori ces symptômes, il s’avère bien plus économique et efficace de prendre en compte cette montée en charge en amont, lors de la conception même du site ou de l’application web.

Ce concept est celui de la scalabilité, terme venant de l’anglais “to scale”, qui signifie “dimensionner, mettre à l’échelle”. Une application scalable a ainsi la capacité de s’adapter à une forte augmentation de la demande sans que son niveau de performances n’en soit impacté. La scalabilité permet, par exemple, de faire évoluer facilement la capacité d’un serveur pour une plus grande montée en charge.

Comment cela se traduit-il concrètement ?

Lors de sa conception, un site ou une application web doit être imaginé de manière à ce que chaque partie ait une seule responsabilité (gérer les données, générer les pages, servir les contenus). Chaque partie doit vivre séparément et indépendamment  des autres. Ainsi, même s’ils sont initialement hébergés sur un même serveur, le moteur du site, la base de données, les vues et les contenus statiques peuvent, lors de la montée en trafic, être facilement déplacés sur des serveurs spécifiques. La charge étant ainsi répartie, le site ne souffre pas de lenteurs. Dans un second temps, si le trafic l’exige, chacun de ces serveurs peut être également dupliqué de manière à répartir à nouveau la charge.

Si la scalabilité nécessite un temps de développement et un coût légèrement supérieur, cette architecture logicielle et matérielle permet de faciliter les variations de trafic d’un site web, notamment lorsqu’il s’agit d’un site e-commerce soumis à la saisonnalité. Elle est également recommandée pour des applications nécessitant un espace de stockage de données pouvant grandir avec le temps.

Ainsi, si vous disposez d’un site e-commerce de taille initiale raisonnable mais croissante, ou si vous souhaitez développer un intranet pour vos collaborateurs, prenez la scalabilité en compte dès le commencement de votre projet !

3 – Développer votre site de manière modulaire avec les microservices

Les microservices sont un style d’architecture dans lequel des applications sont composées de processus indépendants qui communiquent les uns avec les autres via des APIs ou tout autre flux de données.

Le fonctionnement est similaire à celui d’un lego : front-end et back-end doivent être séparés et scindés chacun en plusieurs briques logiques ayant chacune une seule responsabilité.

Ces briques permettent de faire évoluer une application web plus facilement :  chaque brique peut évoluer indépendemment et il est également plus simple d’ajouter de nouvelles briques (et donc des nouveaux services ou de nouvelles fonctionnalités).

Si une telle architecture logicielle est plus coûteuse initialement car plus complexe à concevoir et à développer, elle est adaptée à toute application métier dont les fonctionnalités évoluent et s’enrichissent au fil de l’eau. Les microservices peuvent donc représenter un investissement important, mais ils offrent sur le moyen à long terme un ROI élevé.

4 –  Améliorer les performances de votre site pour optimiser votre image : AMP Project

De plus en plus, les acteurs du web poussent à améliorer leurs performances de chargement de site via l’optimisation d’images, de fichiers css, javacripts et récemment via les Accelerated Mobile Pages.

Cette quête de performance est liée au Responsive Design : elle a pour but de rendre la lecture plus lisible en adaptant les images dans plusieurs tailles pour optimiser la présentation du contenu sur des écrans de tailles différentes

L’amélioration des performances joue aussi un rôle majeur dans l’optimisation du référencement d’un site web.

Dans cet objectif, Google a mis en place en Février 2016 les Accelerated Mobile Pages ou AMP. Le projet AMP a pour but de donner la possibilité aux éditeurs de fournir du contenu chargeant rapidement à leurs utilisateurs mobiles, dans le même esprit que la fonctionnalité Instant Articles de Facebook.

screen_fast_mobile

Les Accelerated Mobile Pages chargent environ quatre fois plus vite, tout en utilisant huit fois moins de données que les pages mobiles traditionnelles.

Les AMP sont particulièrement utiles aux éditeurs dont la fonction principale est de fournir du contenu à leurs utilisateurs.

Néanmoins, pour bénéficier de ces pages, il est nécessaire re-construire ces pages dans leur intégrité, en HTML.

5 – Créer un lien fort entre votre site et votre application pour fluidifier l’expérience utilisateur : Universal Linking et App Linking  

Les Universal Links sur iOS et les App Links sur Android permettent le référencement du contenu d’une application en cohérence avec le référencement des pages d’un site web. Ces liens facilitent l’ouverture d’une application plutôt que d’un site web lorsqu’un utilisateur navigue sur le site d’une marque dont il possède l’application.

Prenons par exemple la marque Auchan Drive (qui dispose d’un site et d’une application native) et le cas d’un utilisateur qui recherche “Crackers aux fromages” sur son navigateur préféré :

  • Du côté de l’application, un développeur a référencé le contenu des recettes (les mots clefs qui lui sont associés) et a ajouté un deep link lié à ce contenu vers l’application Auchan Drive.
  • Du côté du site web, un développeur a lié l’identifiant de l’application avec le contenu équivalent sur le site.
  • La recette “Crackers aux fromages” apparaît alors dans les résultats du moteur de recherche du navigateur web lors d’une recherche. Le moteur de recherche a référencé le lien du site web comme étant une réponse adaptée à la recherche et, via l’universal link ou le app linking, le navigateur comprend que le lien est compatible avec une application.
  • Si l’application est disponible sur l’appareil de l’utilisateur, alors ce sera l’application qui sera lancée et non le site web.
  • Si l’application n’est pas disponible, le moteur de recherche pourra promouvoir l’application. Le site web pourra faire de même via une Smart App Banner. La Smart App Banner est une bannière placée sur le site web qui fait référence à l’application et qui facilite son téléchargement depuis l’app store du smartphone ou de la tablette.

Les sites Web qui mettent en œuvre le nouveau protocole des Universal Links d’Apple dans iOS9 et le protocole Android App Links pour Android M peuvent spécifier qu’un lien Web (http et https) ouvre directement un écran spécifique d’ une application au lieu d’ouvrir un navigateur Web. Cette fonction devrait considérablement augmenter le nombre de personnes qui utilise vos applications mobiles : elle est un avantage non négligeable pour acquérir de nouveaux utilisateurs. Ainsi, vous pourrez inciter les utilisateurs à télécharger votre application lorsqu’ils ont un besoin concret.

Conclusion

En conclusion, les 5 solutions présentées dans cet article ne sont qu’un échantillon des nombreuses possibilités offertes par les dispositifs web. Ceux-ci se développent en continu et à une vitesse non-négligeable qui incite nos développeurs à être à l’écoute et réactif vis-à-vis des nouveautés. La question que l’on peut se poser aujourd’hui reste : quelles prochaines innovations viendront secouer les technologies web ? Restez attentifs !