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
Jason Dejaégère
27 novembre 2020
UI design

Tendances et inspirations UI du moment dans le monde digital #1

Bien le bonjour ! 🖖 C’est avec grand plaisir qu’IKOMOBI vous présente sa nouvelle série mensuelle. Vous vous demandez de quoi ça parle ? Et bien, c’est tout simple. Cette série est un condensé des sites ou applications qui ont marqué, interpelé voire impressionné les membres du studio design. Une sélection d’une dizaine d’interfaces innovantes, […]
image
image
Carl-Stephan Parent
26 novembre 2020
Marketing digital

3 avantages marketing incontournables qu’offre une application mobile en 2020.

Traditionnelles, ou bien tout ou partie digitales, aucune organisation n’échappe aujourd’hui à la question de la place qu’il convient d’octroyer au mobile au sein de sa stratégie digitale. Depuis maintenant plus de dix ans, le champ des possibles offert par les applications mobiles n’a eu cesse de s’agrandir, offrant toujours plus d’opportunités de créer un […]
image
image
Carl-Stephan Parent
26 novembre 2020
Développement application mobile

Avec MAUI, Microsoft achève l’intégration de son framework de développement d’applications mobiles à la plateforme .NET

Xamarin.Forms évolue en .NET Multi-platform App User Interface (MAUI). Cet article nous donne tout d’abord l’opportunité de revenir sur l’histoire de Xamarin et les principaux points forts du framework mobile de Microsoft. Nous vous présentons les changements prévus prochainement et les raisons de cette évolution stratégique pour l’éditeur de Redmond. De Xamarin à Xamarin.Forms : […]
image
image
Bérengère Noël
20 octobre 2020
UX design

Comment le design UX permet de transformer le parcours client pour répondre aux nouvelles attentes des consommateurs dans le secteur du m-commerce alimentaire ?

Concevoir des parcours clients percutants pour répondre aux nouvelles attentes des consommateurs Un grand groupe européen dans le domaine du retail alimentaire a fait appel au Studio UX Design d’IKOMOBI afin d’être accompagné dans la conception d’une nouvelle application mobile m-commerce. À l’heure du tout digital, les enseignes redoublent d’efforts pour répondre aux nouvelles attentes […]
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 […]
Message bien envoyé !