Le scénario doit-il être écrit en suivant le concept de Mobile First ?

Dans un monde où les usages mobiles ont dépassé les consultations sur desktop, il est essentiel de se poser la question du Mobile First lors de la conception d’un site ou d’une application web. Le principe du Mobile First, popularisé par Luke Wroblewski dans son livre éponyme, propose de commencer par penser la conception d’un site pour les appareils mobiles avant d’étendre progressivement les fonctionnalités et les contenus pour les écrans plus grands, tels que les tablettes ou les ordinateurs de bureau.

Mais pourquoi ce choix est-il pertinent ? Simplement parce qu’il répond aux besoins actuels des utilisateurs, dont la majorité accède désormais au web depuis un smartphone. Si l’on suit cette logique, il est impératif de réfléchir d’abord à ce qu’un utilisateur mobile recherche, et d’adapter le contenu et l’interface pour une expérience optimale sur des petits écrans, avec des contraintes de bande passante, de taille d’écran, et de performance.

Desktop vs Mobile Market Share Worldwide – September 2024

Comment adapter le contenu aux différents écrans ?

Un point crucial dans l’approche Mobile First est de s’assurer que les contenus visibles sur un grand écran diffèrent le moins possible de ceux proposés sur mobile. Cependant, il ne s’agit pas uniquement de réduire le contenu. Il est aussi question de prioriser l’essentiel et d’adapter la manière dont ce contenu est présenté selon le contexte.

La solution évidente serait-elle de créer un contenu unique et de simplement masquer certaines sections en fonction du support ? En théorie, cette approche pourrait sembler efficace. Mais, en pratique, il est essentiel de se rappeler que charger des éléments inutiles et les masquer ensuite pénaliserait la bande passante, notamment sur un réseau mobile. Les éléments non visibles ne devraient pas être téléchargés à moins qu’ils ne soient nécessaires. Il faut donc repenser l’architecture de l’information et la technique utilisée pour servir ce contenu.

L’alternative serait-elle alors de créer différentes versions du site pour chaque type de terminal (smartphone, tablette, ordinateur) ? Bien que cela semble une solution personnalisée, elle devient rapidement chronophage et coûteuse à maintenir. De plus, multiplier les versions peut créer des incohérences dans l’expérience utilisateur entre les supports.

La force du Mobile First : un design progressif et adaptable

Revenons donc à l’essence du Mobile First, telle que décrite par Luke Wroblewski. Cette approche ne consiste pas seulement à concevoir pour le mobile, mais à prioriser les fonctionnalités et les contenus essentiels pour offrir une expérience fluide, rapide et centrée sur l’utilisateur, surtout dans des conditions où la connexion Internet peut être limitée.

Le design Mobile First commence donc par une version du site optimisée pour les appareils mobiles. On se concentre sur l’essentiel : une interface claire, intuitive, rapide, avec un contenu concis qui répond aux besoins de l’utilisateur en déplacement. Cette version mobile devient la base, sur laquelle des fonctionnalités supplémentaires peuvent être progressivement ajoutées pour enrichir l’expérience sur des appareils plus puissants ou des écrans plus grands, où les utilisateurs sont susceptibles d’avoir plus de temps et une meilleure connexion.

Mais ces ajouts doivent-ils être chargés automatiquement, au risque de gaspiller de la bande passante pour un utilisateur qui ne les verra peut-être jamais ? Ou peuvent-ils être chargés de manière asynchrone, uniquement quand nécessaire, en fonction du contexte (par exemple, la taille de l’écran ou la qualité de la connexion) ou d’une action explicite de l’utilisateur (comme un clic ou un défilement) ?

Les défis du contenu supplémentaire : performance et pertinence

Cette question du contenu supplémentaire est cruciale dans l’approche Mobile First. Il est évident qu’il est contre-productif de charger tous les éléments de la version desktop sur mobile. Cependant, il est tout aussi indispensable de garantir une cohérence entre les deux versions, sans pour autant sacrifier la performance mobile. Le contenu supplémentaire doit être pertinent et ajouter de la valeur à l’expérience utilisateur, mais il ne doit pas alourdir inutilement l’interface mobile.

Les solutions techniques telles que le lazy loading ou le content delivery adaptatif permettent de charger ces éléments seulement lorsque l’utilisateur en a besoin. Par exemple, une image haute résolution ne sera téléchargée que si l’utilisateur consulte le site sur un grand écran ou effectue une action spécifique qui la rend nécessaire.

Lazy Loading des Images

Le lazy loading permet de ne charger une image que lorsqu’elle entre dans le champ de vision de l’utilisateur, ce qui optimise la performance et réduit la consommation de bande passante.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Lazy Loading</title>
</head>
<body>
    <h1>Lazy Loading des Images</h1>

    <p>Faites défiler pour voir les images se charger uniquement lorsque nécessaire.</p>

    <img class="lazy" data-src="https://via.placeholder.com/600" alt="Image 1" width="600" height="400">
    <img class="lazy" data-src="https://via.placeholder.com/600" alt="Image 2" width="600" height="400">
    <img class="lazy" data-src="https://via.placeholder.com/600" alt="Image 3" width="600" height="400">

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = document.querySelectorAll('img.lazy');

            if ('IntersectionObserver' in window) {
                const lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.getAttribute('data-src');
                            lazyImage.classList.remove('lazy');
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            } else {
                // Fallback pour les anciens navigateurs sans IntersectionObserver
                let lazyLoadThrottleTimeout;
                const lazyLoad = function() {
                    if (lazyLoadThrottleTimeout) {
                        clearTimeout(lazyLoadThrottleTimeout);
                    }

                    lazyLoadThrottleTimeout = setTimeout(function() {
                        let scrollTop = window.pageYOffset;
                        lazyImages.forEach(function(img) {
                            if (img.offsetTop < (window.innerHeight + scrollTop)) {
                                img.src = img.getAttribute('data-src');
                                img.classList.remove('lazy');
                            }
                        });
                        if (lazyImages.length == 0) {
                            document.removeEventListener("scroll", lazyLoad);
                            window.removeEventListener("resize", lazyLoad);
                            window.removeEventListener("orientationchange", lazyLoad);
                        }
                    }, 20);
                };

                document.addEventListener("scroll", lazyLoad);
                window.addEventListener("resize", lazyLoad);
                window.addEventListener("orientationchange", lazyLoad);
            }
        });
    </script>
</body>
</html>

Explication

• IntersectionObserver est utilisé pour observer si les images entrent dans la zone visible de l’utilisateur.
• Lorsque l’image entre dans la zone visible (isIntersecting est true), l’image est chargée en modifiant l’attribut src avec l’URL réelle stockée dans data-src.
• Un fallback est prévu pour les anciens navigateurs qui ne supportent pas IntersectionObserver, avec une fonction qui vérifie la position de l’image par rapport à la zone visible.

Content Delivery Adaptatif (Adaptation au Contexte)

Le content delivery adaptatif consiste à ajuster le contenu (comme la taille des images ou des sections spécifiques) selon le contexte (ex : la taille de l’écran). Voici un exemple où une image différente est chargée selon la taille de l’écran.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Content Delivery Adaptatif</title>
</head>
<body>
    <h1>Adaptation du contenu en fonction de la taille de l'écran</h1>

    <div id="responsive-content">
        <img id="responsive-image" alt="Image adaptative">
    </div>

    <script>
        function loadResponsiveImage() {
            const img = document.getElementById('responsive-image');
            const screenWidth = window.innerWidth;

            if (screenWidth <= 600) {
                img.src = "https://via.placeholder.com/400x300";
                img.alt = "Petite image pour mobile";
            } else if (screenWidth <= 1024) {
                img.src = "https://via.placeholder.com/800x600";
                img.alt = "Image moyenne pour tablette";
            } else {
                img.src = "https://via.placeholder.com/1200x800";
                img.alt = "Grande image pour desktop";
            }
        }

        // Charger l'image au chargement de la page
        window.addEventListener('load', loadResponsiveImage);

        // Mettre à jour l'image en cas de redimensionnement de la fenêtre
        window.addEventListener('resize', loadResponsiveImage);
    </script>
</body>
</html>

Explication

• La fonction loadResponsiveImage() adapte l’image affichée selon la largeur de l’écran (window.innerWidth).
• Si l’écran fait 600 pixels ou moins de largeur, une image adaptée pour mobile est chargée. Si l’écran est plus large (tablette ou desktop), des images de meilleure qualité sont chargées.
• Cette technique permet d’optimiser les ressources pour chaque type d’appareil en fournissant des fichiers plus petits pour les mobiles et des fichiers plus volumineux et détaillés pour les écrans plus grands.
• L’image est mise à jour aussi bien lors du chargement de la page que lors du redimensionnement de la fenêtre (resize).

Conclusion

Ces deux exemples montrent comment, avec lazy loading, vous pouvez optimiser la consommation de bande passante et améliorer les performances de votre site, tandis que le content delivery adaptatif vous permet de fournir le contenu le plus adapté selon la taille de l’écran ou d’autres contextes, garantissant ainsi une expérience utilisateur optimale quel que soit l’appareil.

La puissance du Mobile First pour l’avenir du web

En conclusion, l’idée clé du Mobile First est simple mais puissante : en commençant par concevoir une version allégée, mais complète et fonctionnelle, pour les appareils mobiles, vous vous assurez que le site reste performant, accessible et utile dans toutes les conditions. En évitant de concevoir d’abord une version desktop pour ensuite la restreindre, souvent de manière maladroite, au mobile, vous garantissez une expérience fluide et une gestion efficace des ressources, aussi bien pour l’utilisateur que pour le développeur.

Cette approche met en avant une vision centrée sur l’utilisateur et s’adapte à la réalité actuelle : la majorité des internautes navigue d’abord sur leur mobile. C’est cette philosophie qui fait du Mobile First un concept fondamental à adopter dans toute démarche de création web moderne.