La conception Web réactive est le mot à la mode de la décennie et est idéale pour le monde connecté multi-écrans dans lequel nous vivons. Cependant, le compromis réside dans les performances en raison de la taille plus importante des fichiers.
Cela a incité certains experts à dire que, tout comme les débuts de Flash, le design réactif était quelque chose dont nous pourrions tous nous passionner sans raison valable. Cependant, même s’il ya actuellement des problèmes de performances, ceux-ci peuvent être résolus dans une certaine mesure avec quelques petits ajustements, compression et redimensionnement de l’image.
La conception adaptative charge tous les mêmes éléments HTML pour chaque périphérique, y compris ceux destinés à la distribution sur tablette et sur bureau. Cela signifie que tous les contenus sont souvent livrés, y compris les images et les scripts, quel que soit l'appareil sur lequel ils sont affichés.
Une étude L'année dernière, 86% des sites réactifs en ligne livrent une page de bureau complète à des appareils mobiles. Ceci est clairement une tendance à la technique de conception qui doit être abordée, si nous voulons arrêter le progrès des pages Web gonflées dans ses voies.
À l'heure actuelle, la conception adaptative fait monter la taille des pages et c'est la tendance à prendre en compte, surtout si l'on considère que 57% des utilisateurs mobiles partiront si le site ne se charge pas. dans les 3 secondes.
Pour ceux qui ont déjà un design en place et veulent maintenant optimiser, Mobitest peut être utilisé pour mesurer les performances afin de continuer et de le résoudre. Bien entendu, lors de la planification d'une conception, l'optimisation sera plus simple à réaliser à ce stade et la performance devrait toujours être considérée comme une partie essentielle de la conception, plutôt qu'une réflexion après coup.
Afin d'améliorer les performances, la taille des pages et des ressources chargées doit être réduite. Cela peut être réalisé en utilisant diverses techniques, sans modifier sérieusement l'apparence du site.
La première chose à considérer est de savoir comment garantir que seules les ressources nécessaires sont envoyées au périphérique cible. Cela peut être fait en minimisant le nombre de requêtes HTTP, de sorte que l'utilisateur passe moins de temps à attendre le chargement du DOM. Cela peut être fait en compressant les ressources CSS et Javascript, pour lesquelles des outils tels que Boussole - un cadre de création CSS open source - peut être utilisé. Cela permet aux développeurs de créer des balises plus propres et de créer des sprites et des extensions avec un minimum de bruit.
En ce qui concerne JavaScript, des outils tels que UglifyJS peut être utilisé, ce qui compresse le code.
Cela peut être considéré comme une technique importante en matière de conception adaptative, car il peut être utilisé pour s'assurer que les utilisateurs de téléphones mobiles et de smartphones ne téléchargent pas les aspects du site qui le ralentissent ou qu'ils n'utiliseront pas.
Le chargement conditionnel peut être utilisé pour empêcher le chargement de tout type de contenu, y compris les widgets sociaux, les images, les cartes et bien plus encore. Il est important de noter à ce stade que le site doit faire l’objet de tests approfondis à chaque étape de l’optimisation, de façon à ce qu’il soit facile de voir ce qui a fait la différence au fur et à mesure.
Nous savons tous que les images sont généralement responsables de la plus grande quantité de kilo-octets dans une page Web. Il est également prudent de dire que les images conçues pour un navigateur de bureau vont être moins performantes lorsqu’elles sont livrées à un appareil mobile.
Si un site possède également beaucoup de contenu hérité, cela affectera encore plus les performances et il faudra mettre en place un moyen d'empêcher le chargement de ce contenu. Bien que cela puisse être fait en modifiant le balisage en modifiant les éléments src ou img, la solution PHP Images adaptatives est probablement plus facile. Le logiciel détecte la taille de l’écran et crée, met en cache et diffuse automatiquement les images HTML intégrées réduites appropriées, sans avoir à modifier le balisage. Pour être utilisé conjointement avec les techniques Fluid Image, il s'agit d'une solution pratique qui vous fera gagner beaucoup de temps. Adaptive Images utilise un fichier htaccess, un fichier php et une seule ligne de Javascript afin de déterminer la taille de l'écran des visiteurs du site.
Cela vaut également la peine de penser au texte, car celui-ci s’emboîte naturellement lorsque l’appareil est rétréci et risque de provoquer des problèmes d’affichage. FitText est un outil qui peut aider à résoudre ce problème, un plugin jQuery qui met à jour automatiquement la taille de la police, avec des options pour les tailles minimum et maximum qui seront autorisées.
Ceci est idéal pour les titres qui peuvent être mal affichés sur un appareil mobile et permet à la taille de police spécifiée CSS3 d'être ignorée. Toutefois, FitText est uniquement destiné aux titres et ne doit pas être utilisé dans le texte du paragraphe.
Bien que le responsive design ait ses problèmes, tout comme toute technologie ou technique relativement nouvelle, il vaut toujours la peine de choisir de construire un site de cette manière. Personne ne veut revenir en arrière et s'il est plus facile de créer un site Web mobile, il vaut mieux être aussi innovant que possible.
Google accepte, leurs conseils est d'utiliser le design réactif comme la meilleure façon de concevoir pour mobile. Bien sûr, pour les géants de la recherche, cela signifie qu’ils n’ont qu’une seule URL à explorer, plutôt que de nombreuses URL pour ce qui est essentiellement le même site.
Cependant, en cette période de manie du partage social, il est également logique que les utilisateurs mobiles puissent partager une page avec une personne utilisant un ordinateur de bureau. Afin de créer une expérience uniforme, cela devrait fournir le même contenu.
De plus, un site réactif améliore la productivité de la main-d'œuvre, car il y a beaucoup moins à faire. Cela s'applique au contenu, aux mises à jour et au référencement, car cela devra être effectué séparément si différents sites sont construits.
Les appareils mobiles et les tablettes deviennent la norme pour se connecter à Internet et surfer dans cette ère post-PC. Les ventes de tablettes dans le monde entier ont augmenté en seulement un an, ayant plus que doublé au cours de cette période et de nombreux consommateurs optant désormais pour différents appareils fonctionnant sous Android, ainsi que iOS.
Il ne fait aucun doute que le design réactif a un impact positif, malgré les problèmes de performance. Selon un rapport , qui demandait à certaines des plus grandes marques mondiales comment un site réactif avait un impact sur le trafic, les visites sur tous les appareils étaient considérablement accrues.
Cela incluait une augmentation moyenne de 23% pour les visiteurs mobiles, ainsi qu'un taux de rebond réduit de 26%, les visiteurs ayant passé environ 7,5% de plus de temps sur les sites.
O'Neill, le détaillant de vêtements de surf à la mode, rapporte un taux de conversion de 65,7% supérieur sur iPad et iPhone grâce au développement d'un site réactif. Cela représente une croissance de 101,2% des revenus sur ces seuls appareils.
En ce qui concerne les appareils Android, le taux de conversion était encore meilleur, atteignant 407,3%, ce qui représente une énorme croissance des revenus de 591,4%. Un taux de conversion plus faible a été observé sur les appareils non mobiles, même si une croissance a encore été observée.
Ce n’est là qu’une des marques qui publient leurs chiffres et il est très difficile d’obtenir les données des autres en ce moment, tout comme l’impact des médias sociaux il ya quelques années. Cependant, cela prouve que la conception d’un site Web réactif peut avoir des retombées substantielles.
Compte tenu de ce qui précède, quelle autre raison un concepteur at-il besoin de commencer à concevoir de manière réactive pour ses clients et à s’assurer qu’ils fonctionnent aussi bien que possible? Il n'y en a pas un, et les concepteurs qui ne veulent pas apprendre à concevoir, construire et optimiser un site en utilisant des techniques réactives peuvent se retrouver dans la poussière.
67% des utilisateurs déclarent avoir acheté via un site mobile et on pense que l’utilisation de l’Internet mobile dépassera celle des ordinateurs de bureau d’ici l’année prochaine. Compte tenu de tout cela, il est facile de voir pourquoi les entreprises seront de plus en plus intéressées par les meilleures solutions Web mobiles qu’elles peuvent offrir.
Le design réactif en est peut-être encore à ses balbutiements pour le moment, mais il semble clair que la demande du marché le fera grandir rapidement. Il est donc utile d'apprendre autant d'aspects que possible à la discipline.
Quelles techniques avez-vous utilisées pour optimiser les sites réactifs? La fourniture de contenu alternatif annule-t-elle les avantages du design réactif? Faites le nous savoir dans les commentaires.