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
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 […]
image
image
Bérengère Noël
5 mai 2020
UX design

Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d’un formulaire en ligne ?

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun […]
image
image
Bérengère Noël
28 avril 2020
Développement application mobile . UX design

Design #1 En e-commerce, quelles bonnes pratiques faut-il adopter sur mobile pour proposer des fiches produits qui vont déclencher l’acte d’achat ?

Le mobile est définitivement devenu le point central de la relation client. Il répond aux besoins d’immédiateté des consommateurs. Ces derniers veulent être en mesure de vivre une expérience d’achat sans couture autrement dit sans frein ni obstacle, quelque soit le lieu ou le moment. Dans ce contexte, la fiche produit est l’élément central de […]
image
image
Équipe iOS
23 avril 2020
Développement application mobile

TechnIKO #2 Migration UIWebview vers WKWebview

UIWebview vs WKWebview UIWebview est un composant d’interface permettant d’afficher du contenu HTML directement dans une application. C’est un composant déjà ancien puisqu’il est apparu avec iOS 2. Il est fortement présent au sein de nos applications pour, par exemple, afficher le contenu des FAQ, des CGV, le tunnel de commande, la création de compte […]
image
image
Équipe Android
20 avril 2020
Développement application mobile

TechnIKO #1 Appeler une méthode Javascript dans une Webview via Kotlin

Le TechnIKO, c’est quoi ? Chez IKOMOBI, nos experts sont tous les jours confrontés à des problématiques nouvelles qui les amènent à concevoir des solutions innovantes pour nos clients. Grâce à TechnIKO nous allons vous faire découvrir les coulisses de ces différentes innovations, au travers notamment la diffusion des techniques et méthodes de développements chères […]
image
image
Florian Hureau
23 décembre 2019
Actualités

IKOMOBI News #6 : Spotify, Youtube Ads, 5G, voice, Dior, mèmes et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « 圣诞老人到了! » D’où vient cette citation ? Scrollez au bas de l’article pour voir la source 😉 2019 Wrapped : Spotify donne un aperçu de l’usage des données personnelles pour les années à venir La fin […]
image
image
Florian Hureau
3 décembre 2019
Actualités

IKOMOBI News #5 : Tesla, Black Friday, TikTok et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. “La reconnaissance faciale va protéger les droits et intérêts légitimes des citoyens contre les escroqueries et les inscriptions frauduleuses.” D’où vient la citation de la semaine ? Scrollez au bas de l’article pour voir […]