image

L’intégration, une phase clé à ne pas négliger pour la bonne réalisation d’un site web RWD

image
Jason Dejaégère
25 juin 2020

Le processus de réalisation d’un site Internet RWD (Responsive Web Design) obéit à un enchaînement précis de procédures bien connu des professionnels du web. En synthèse, tout commence par la conception des écrans et se termine par la mise en ligne du projet. La procédure d’intégration est une étape moins connue. Elle assure pourtant la transition entre les maquettes préalablement élaborées et les développements informatiques. La qualité finale de l’expérience utilisateur va donc en grande partie reposer sur l’importance accordée à l’intégration.

Pourquoi l’intégrateur est un expert du web RWD et dans quelle mesure est-il indispensable à la réalisation d’un site Internet de dernière génération ?

Bien que son importance n’a eu cesse de croître au cours des 20 dernières années, l’intégration web (plus communément appelée intégration) demeure une expertise peu connue.

L’intégration consiste, en substance, à réaliser la mise en page du site web. Pour donner vie aux écrans, l’intégrateur mobilise ses compétences afin de mettre au point des fichiers HTML et CSS qui vont reproduire le plus précisément possible des maquettes graphiques. L’intégrateur est donc le premier garant du respect final et de la fidélité des jolies maquettes préalablement validées par le client.

C’est encore lui qui met au point les animations et interactions particulièrement appréciées par les internautes. Il assure également la cohérence des écrans lorsque ces derniers s’affichent sur un smartphone, une tablette ou un desktop.

C’est enfin, un acteur clef dans les domaines de la conformité et de l’Accessibilité web. Autant d’expertises indispensables qui entrent en jeu dans l’appréciation finale d’un site web RWD , d’une web application ou d’une PWA.

La maîtrise du mobile-first garantit un RWD de haute qualité

Aujourd’hui, l’internaute souhaite vivre une expérience consistante, cohérente et confortable lorsqu’il navigue sur un même site depuis son smartphone, sa tablette ou son ordinateur. On ne devrait donc plus avoir à insister sur la nécessaire dimension responsive d’un projet web. Pour atteindre cet objectif, les intégrateurs ont le choix entre deux méthodes : la dégradation élégante ou l’amélioration progressive.

La première méthode est la plus ancienne. Elle est encore très populaire de nos jours. En procédant de la sorte, l’intégrateur va tout d’abord privilégier la création des écrans pour desktop. Il va ensuite partir de cette base pour réaliser les écrans des tablettes puis des smartphones.

La seconde méthode propose une démarche un peu plus exigeante et un niveau d’expertise un peu plus pointu. Elle consiste à débuter l’intégration par les écrans d’une version de base, en l’occurrence les appareils mobiles (c’est pour ça qu’on la connait également sous le terme anglo-saxon de mobile-first) puis à continuer progressivement en apportant des améliorations à destination des navigateurs en capacité de les interpréter.

Sans revenir ici en détail sur toutes les vertus du mobile-first, il convient néanmoins de préciser que cette méthode permet d’une part, de proposer une expérience utilisateur globalement de meilleure qualité et d’autre part comme nous allons le voir ensuite, de gérer convenablement les évolutions futures qui seront nécessairement apportées à l’interface.

Définir des breakpoints pertinents pour optimiser les performances d’affichage d’un site web RWD

Pour que l’interface d’un site RWD s’adapte aussi bien aux écrans des smartphones qu’à ceux des ordinateurs portables, il convient tout d’abord de définir des points de bascule.

Ces paramètres sont également appelés breakpoints dans notre jargon. Ils vont détecter les dimensions de l’écran utilisé pour afficher le site web et déclencher une série d’actions permettant d’adapter l’interface de ce dernier.

Mobile-first oblige, l’intégration commence par la définition des propriétés CSS de l’écran le plus petit. Elles seront ensuite modifiées pour les écrans plus grands lorsque nécessaire. Comme le navigateur se référence uniquement aux propriétés des breakpoints, le chargement de la mise en page (et par extension de la page elle-même) est plus performant.

L’emploi de composants permet de gagner en temps et en cohérence

À l’instar du design graphique, l’intégration recourt désormais à l’utilisation massive des composants. Comme son nom l’indique, le composant est un élément qui entre dans la composition de l’interface. Il peut s’agir d’un bouton, d’un bandeau d’alerte, ou bien d’un produit au sein d’une liste, etc. Les composants peuvent s’imbriquer les uns dans les autres (un composant peut-être constitué de plusieurs autres composants).

Grâce à leur faculté d’adaptation, il n’est plus nécessaire de concevoir des blocs spécifiques en fonction des caractéristiques des différents écrans. L’emploi de composants demande expérience, méthode et rigueur. Il permet néanmoins de gagner en temps et en cohérence sur le long terme. En effet, les modifications apportées au site sont répercutés en masse sur les composants concernés. Il n’est plus nécessaire de les modifier un par un. C’est une vraie valeur ajoutée pour la maintenance et la pérennité du projet.

Prévoir certains comportements pour mieux anticiper les évolutions futures du site web

Quelque soit la nature du projet, nous savons qu’à l’avenir des modifications, des améliorations ou de nouvelles fonctionnalités vont être nécessaires. Même si l’exercice est complexe, le fait d’anticiper ces changements amène à concevoir des composants performants dès le début du projet. Une sage précaution qui permettra de gagner de précieuses minutes voire des heures entières par la suite. Avec l’expérience, ça devient une habitude.

Pour conclure

Le processus d’intégration n’a cesse de se perfectionner au fil des années. Pour garantir une expérience utilisateur satisfaisante, il met désormais à contribution des expertises pointues et des techniques complexes qui entrent nécessairement en jeu lors de la réalisation d’un site web RWD de qualité.

Toutes ces raisons justifie la présence d’un intégrateur au sein d’une équipe web. Nous en sommes convaincus. L’êtes-vous également ? N’hésitez pas à nous contacter pour toutes informations concernant vos projets web RWD.

image
image
Carl-Stephan Parent
24 septembre 2020
UX design

Transformation digitale, amélioration continue et application mobile

Le précédent numéro d’Ikonnect, la newsletter mensuelle d’Ikomobi, vous a donné l’opportunité de découvrir une nouvelle application mobile conçue et réalisée par les pôles Design UX et Android. Le succès rencontré par cette app, dont la vocation principale est de faciliter la gestion des rayons de magasins, a encouragé la direction de Cora à poursuivre […]
image
image
Carl-Stephan Parent
27 août 2020
IKOMOBI

Une app pour donner un vrai coup de pouce aux collaborateurs et mieux gérer les rayons du magasin. Vous êtes un retailer et vous en rêvez ? Cora et Ikomobi l’ont fait !

Pour faire face aux services popularisés par les géants du e-commerce (on pense à Amazon notamment avec Amazon Fresh ou Prime Now) ou les nouvelles enseignes spécialisées, le magasin traditionnel n’a pas d’autres choix que de se réinventer pour proposer une expérience fortement teintée de digital en phase avec les attentes des consommateurs d’aujourd’hui. Un […]
image
image
Équipe Android
16 juillet 2020
Développement application mobile

Faut-il migrer vers Jetpack / Android X ?

Pour assurer la rétrocompatibilité des applications mobiles avec le système Android, Google s’appuyait sur une bibliothèque de composants intitulée Android Support. La firme de Mountain View invite désormais à migrer les applications mobiles Android vers Jetpack et ses bibliothèques Android X.  Pourquoi faut-il procéder à cette migration dans les meilleurs délais ? À compter de […]
image
image
Équipe iOS
16 juillet 2020
Développement application mobile

TechnIKO #3 : Comment tester les push iOS simplement ?

Tester les notifications push sur iOS peut être un exercice très fastidieux : Configurer l’application pour qu’elle accepte les push Créer les certificats de push en conséquence Les uploader sur la plateforme utilisée pour gérer l’envoi des push (par exemple Accengage) Trouver le token de son device et créer un segment avec Configurer la push […]
image
image
Carl-Stephan Parent
16 juillet 2020
UX design

Le pôle Design UX d’Ikomobi imagine les nouveaux parcours de souscription online pour une enseigne spécialiste du crédit à la consommation

Proposer des parcours clients efficaces pour se distinguer au sein d’un marché très concurrentiel  Le crédit à la consommation est un marché fortement concurrentiel en France et à l’international. Il est constitué des banques de détail traditionnelles, de leurs filiales spécialisées (BNP Paribas Personal Finance, BPCE financement, Franfinance…) et des banques en ligne qui se […]
image
image
IKOMOBI
25 juin 2020
Développement application mobile

Click and collect : Ikomobi conçoit et réalise en un temps record, une application mobile pour l’enseigne de restauration Fée maison

Comme vous le savez, le click and collect (ou retrait sur point de vente) c’est ce nouveau parcours malin qui permet de passer commande depuis un site e-commerce, un e-shop dédié ou bien depuis une application mobile, puis de récupérer ses achats à un créneau horaire donné. L’intérêt suscité par ce nouveau service a été […]
image
image
Jason Dejaégère
25 juin 2020
Développement site web

L’intégration, une phase clé à ne pas négliger pour la bonne réalisation d’un site web RWD

Le processus de réalisation d’un site Internet RWD (Responsive Web Design) obéit à un enchaînement précis de procédures bien connu des professionnels du web. En synthèse, tout commence par la conception des écrans et se termine par la mise en ligne du projet. La procédure d’intégration est une étape moins connue. Elle assure pourtant la […]
image
image
Équipe iOS
23 juin 2020
Développement application mobile

Les 7 points clefs à retenir de la WWDC 2020

Compte tenu des contraintes imposées par la Covid-19, Apple a présenté sa très attendue conférence annuelle dans un format totalement inédit et 100% numérique. L’enseigne de Cupertino a notamment profité de cette nouvelle édition de la Worldwide Developers Conference pour présenter une série de nouveautés pour iOS 14 dont nous vous proposons ci-après une synthèse. […]
image
image
IKOMOBI
4 juin 2020
Développement application mobile . UX design

Ce que nous a enseigné la mise en pratique du neumorphisme en terme d’UX design et de développement lors de la réalisation d’une application mobile Android

La popularité croissante du neumorphisme nous a amené, chez IKOMOBI, à expérimenter son implémentation au sein d’une application Android et le proposer à nos clients. Voici le retour d’expérience de nos pôles d’experts UX Design et Android. Skeuomorphisme : dès l’origine, les UX designers cherchent à rendre l’expérience utilisateur plus intuitive Le Skeuomorphisme est une […]
image
image
Bérengère Noël
28 mai 2020
Développement application mobile . UX design

Marketing #1 Comment augmenter l’engagement de vos clients et de vos utilisateurs grâce aux mécanismes de gamification ?

Dans le domaine du web et des applications mobiles, la gamification, consiste à exploiter des mécanismes issus de l’univers du jeu dans d’autres domaines, comme des applications ou des sites internet. Elle vise à capter l’attention de l’utilisateur dans un processus de récompenses lui donnant envie de continuer et d’y revenir régulièrement. Le jeu et […]
image
image
IKOMOBI
26 mai 2020
Transformation digitale

Après le confinement : comment faire pour réussir sa transformation digitale ?

La mise en quarantaine d’une large partie de nos entreprises et services publics, bien que imprévisible, raisonne comme un coup de semonce pour chaque dirigeant, notamment vis à vis du niveau de “digitalisation” de son entreprise. Pour les entreprises à maturité digitale plutôt élevée, cette situation s’est transformée en stress test impromptu, impitoyable révélateur des dysfonctionnements […]