Améliorer la conception Web réactive avec Ress

Ce message a été parrainé par Netbiscuits. Merci de soutenir les sponsors qui rendent le point de point possible! En moyenne, plus d'un visiteur sur trois de votre site Web utilise un appareil mobile. Au cours de la dernière année, l'utilisation mobile a augmenté de plus de 20%. Alors, comment pouvons-nous répondre à ce marché?

Les plats clés

• RESS, ou des composants de conception Web réactifs, améliore la conception Web réactive traditionnelle en incorporant l'intelligence côté serveur. Ce composant côté serveur détecte les capacités d'un appareil et fournit une version optimisée du site Web, conduisant à une expérience utilisateur plus efficace et personnalisée.
• RESS peut améliorer les performances du site Web en n'envoyant que des données pertinentes pour le périphérique spécifique, en réduisant les temps de chargement et en améliorant les performances globales. Il peut également ajuster la livraison d'images et d'autres fichiers multimédias en fonction des capacités de l'appareil, empêchant ces fichiers de ralentir inutilement le temps de chargement du site Web.
• Bien que la mise en œuvre de RESS nécessite un niveau d'expertise technique plus élevé et peut être plus à forte intensité de ressources en raison de la nécessité de programmation côté serveur et de détection des appareils, cela peut finalement conduire à un engagement plus élevé des utilisateurs et à une augmentation des revenus potentiellement. RESS peut être utilisé conjointement avec d'autres techniques de conception Web et peut être implémenté sur les sites Web existants et nouveaux.

sites Web mobiles séparés

Si votre temps, votre budget et votre santé mentale ne sont pas importants, vous pouvez créer des sites séparés pour les utilisateurs mobiles et de bureau. Le contenu peut être reconditionné et rationalisé pour l'appareil. Malheureusement…

1. Les jours de bureau ou de mobile sont partis depuis longtemps. Il existe une grande variété d'appareils avec des tailles d'écran différentes, des densités de pixels, des vitesses de traitement, des capacités de réseau et des fonctionnalités HTML5. Et peu d'entre nous ont même encore considéré les appareils portables! Les marques devraient créer de nombreux sites pour répondre à chaque éventualité?
2. L'identification de l'appareil de l'utilisateur est difficile. Les chaînes d'agent utilisateur sont notoirement difficiles à analyser et ne vous diront rien sur les dimensions de l'écran, la vitesse du réseau ou d'autres fonctionnalités.
3. Vous avez normalement besoin d'URL distinctes pour chaque site, par ex. www.site.com et m.site.com. Les utilisateurs peuvent se retrouver sur le mauvais site pour leur appareil et, si vous ne faites pas attention, les moteurs de recherche vous pénaliseront pour du contenu en double.
4. Gérer un site Web est difficile. Vous devez maintenant construire et déployer plusieurs sites et vous assurer qu'ils sont mis à jour simultanément. Peut-être que vos développeurs survivront à l'épreuve, mais les éditeurs de contenu feront-ils face à plusieurs actifs qui ciblent les vues différentes?

Cela dit, des sites séparés restent une option attrayante pour des entreprises telles qu'Amazon et eBay car elle offre une expérience ciblée.

Conception Web réactive

Alternativement, les concepteurs et les développeurs peuvent utiliser des conceptions qui réagissent aux dimensions de la fenêtre du navigateur (généralement, l'écran entier sur des appareils plus petits). En utilisant une approche mobile axée sur le mobile, le site implémente une disposition linéaire par défaut peut-être avec un texte et des menus plus petits accessibles à partir des icônes de hamburger. À mesure que les dimensions augmentent, la conception peut être refondée pour afficher des colonnes supplémentaires, des polices plus grandes, plus d'espacement, des menus toujours visibles, etc. RWD résout de nombreux problèmes rencontrés avec des vues distinctes. Nous avons un seul site avec un ensemble de contenu qui peut répondre à une variété infinie de tailles d'écran. Malheureusement…

1. La taille de l'écran est une indication brute des capacités de l'appareil et ne nous dit rien sur la vitesse du processeur, la bande passante réseau ou le niveau de support HTML5. Un utilisateur avec un grand moniteur pourrait encore utiliser un PC vieux de vingt ans sur une connexion par rapport.
2. La même page et les actifs sont (principalement) livrés à tous les appareils. Il est possible de limiter le chargement de l'image à l'aide d'images d'arrière-plan CSS dans les requêtes multimédias, l'attribut Element et SRCSET, mais le support reste inégal et ne résout pas tous les problèmes. Les techniques d'adaptation côté client peuvent également ralentir le rendu de la page, et cela doit être traité. Par exemple, une grande image pourrait être livrée à un écran de rétine haute densité même si l'utilisateur est sur une connexion lente.
3. Certaines options ne sont pas faciles à implémenter sur le client seul. Il est difficile de re-facturer le contenu, par exemple Divisez un long article sur plusieurs pages. Tous les appareils reçoivent la même page même s'il n'est pas pratique de lire sur un petit écran.
4. La page Web moyenne dépasse 2 Mo. Beaucoup utilisent une conception Web réactive, mais il ne s'ensuit pas que le site est réactif sur un appareil de faible puissance. La création d'un site Web rapide et réactif est devenu plus impératif maintenant des sites de taux Google basés sur les performances.

Les sites Web séparés sont donc des conceptions difficiles et réactives ne peuvent pas résoudre tous les problèmes. Y a-t-il une troisième façon que nous pourrions considérer?

RESS: Composants de la conception Web réactive des serveurs

RESS a été proposé par Luke Wroblewski en 2011. Le concept utilise la conception Web réactive mais le complète avec la détection des fonctionnalités pour servir du contenu modifié en cas de besoin. Par exemple, vous pourriez:

• servir des images plus petites sur des écrans plus petits ou lorsque la bande passante est limitée.
• ne servir un élément vidéo que lorsque l'appareil a une prise en charge HTML5 sur une connexion rapide.
• Évitez de servir des jeux ou des publicités Flash sur iOS et des appareils de plus en plus Android.
• Passez à des images en niveaux de gris sur les lecteurs de livres électroniques.
• Réduisez la fréquence des demandes de sondage Ajax sur les connexions plus lentes.
• supprimer les effets CSS3 inutiles lorsque l'appareil ne prend pas en charge les animations.
• Remplir des images PNG lorsque SVG n'est pas disponible.
• Fournir des informations supplémentaires lorsque l'utilisateur est dans un emplacement ou un pays spécifique.

Ress n'est jamais devenu une technique largement utilisée car la détection des fonctionnalités est difficile - en particulier sur le serveur. Votre code de détection doit être vérifié, mis à jour et maintenu chaque fois qu'un nouveau navigateur ou une fonction est publié. Heureusement, il existe des services tiers tels que Netbiscuits qui font le travail acharné pour vous et sont constamment mis à jour avec les dernières informations de l'appareil. La première étape: inscrivez-vous à un compte Netbiscuits - il y a un essai gratuit de 30 jours pour évaluer le service. Collez le code de suivi des NetBiscuits dans le modèle de votre site Web, attendez quelques secondes et affichez les graphiques d'analyse des flux de dispositif et des visiteurs:

API de détection du périphérique côté client

Le code de suivi définit également un objet JavaScript global nommé DCS qui expose plus de 650 matériel, navigateur, système d'exploitation et paramètres de détection de réseau. Exemples: Évaluez le score de bande passante - un rang de zéro (très lent) à 20 (généralement Edge / HSPA) à 60 (3G) à 120 (4G / WiFi):

<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>

Identifiez si l'appareil a un écran tactile:

<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>

avec un rapport pixel à haute densité:

<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>

L'appareil a-t-il des installations téléphoniques?

<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>

SVG est-il pris en charge? Les animations SMIL sont-elles disponibles?

<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>

Découvrez où se trouve l'utilisateur:

<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>

Suggérez un format vidéo HTML5 compatible:

<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>

Détecter quel navigateur est utilisé:

<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>

Et si c'est la dernière version:

<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

API de détection des périphériques côté serveur

La détection des périphériques est la plus utile sur le serveur où vous pouvez modifier la réponse avant son envoi. Le code est fourni pour PHP, Java et .NET. Exemples PHP… L'appareil prend-il en charge la vidéo H264 HTML5 et a une connexion raisonnable?

<span><span><?php </span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span></span>

L'appareil prend-il en charge Ajax et a des performances JavaScript meilleures que l'iPhone 5 (un périphérique de référence avec un score de 100)?

<span><span><?php </span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span></span>

Nous n'avons peut-être jamais de solution facile à développer et fonctionne parfaitement sur tous les appareils, mais Ress offre un bon compromis qui résout de nombreux problèmes de performances rencontrés avec la conception Web réactive. Un bon service de détection d'appareils est tout ce dont vous avez besoin.

Les questions fréquemment posées sur l'amélioration de la conception Web réactive avec Ress

Quelle est la principale différence entre RESS et la conception Web réactive traditionnelle?

La conception Web réactive traditionnelle (RWD) s'appuie uniquement sur le côté client (navigateur) pour adapter la disposition du site Web en fonction de la taille de l'écran de l'appareil . D'un autre côté, RESS (conception Web réactive avec composants côté serveur) combine la réactivité côté client avec l'intelligence côté serveur. Cela signifie que le serveur détecte les capacités de l'appareil et envoie une version optimisée du site Web, résultant en une expérience utilisateur plus efficace et sur mesure.

Comment RESS améliore-t-il les performances du site Web?

Ress améliore les performances du site Web en réduisant la quantité de données inutiles envoyées à l'appareil. Avec la RWD traditionnelle, toutes les données, y compris les données pour les éléments non visibles sur l'appareil, sont envoyées. Cependant, avec RESS, le serveur n'envoie que des données pertinentes pour le périphérique spécifique, réduisant les temps de chargement et améliorant les performances globales.

RESS est-il compatible avec tous les types de périphériques?

Oui, RESS est conçu pour être compatible avec tous les types d'appareils. Le composant côté serveur de RESS peut détecter les capacités de l'appareil demandant la page Web et livrer une version optimisée du site en conséquence. Cela garantit une expérience utilisateur transparente sur tous les appareils, des ordinateurs de bureau aux smartphones.

Comment le RESS affecte-t-il le référence Des temps de chargement plus rapides et une expérience utilisateur améliorée peuvent entraîner une baisse des taux de rebond et un engagement des utilisateurs plus élevé, qui sont des facteurs que les moteurs de recherche envisagent lors du classement des sites Web. De plus, Ress permet un rampage et une indexation plus efficaces du contenu par les bots de moteur de recherche.

Quels sont les défis de la mise en œuvre de RESS?

La mise en œuvre de RESS nécessite un niveau plus élevé d'expertise technique par rapport à la RWD traditionnelle . Il implique la programmation côté serveur et la détection des appareils, qui peuvent être complexes. De plus, le maintien d'un site Web RESS peut être plus à forte intensité de ressources car il nécessite des mises à jour régulières de la base de données de détection des périphériques pour accueillir de nouveaux appareils et navigateurs.

Peut être utilisé avec des sites Web existants ou est-ce que pour de nouveaux?

RESS peut être implémenté sur les sites Web existants et nouveaux. Cependant, l'intégration de RESS dans un site Web existant peut nécessiter des modifications importantes de l'architecture et du code du site, ce qui peut prendre du temps et complexe.

Comment RESS gére les images et autres fichiers multimédias?

RESS peut optimiser la livraison d'images et d'autres fichiers multimédias en fonction des capacités de l'appareil. Le serveur peut redimensionner les images, les convertir en un format plus efficace, ou même les omettre entièrement pour les appareils avec des capacités limitées. Cela garantit que les fichiers médiatiques ne ralentissent pas inutilement le temps de chargement du site Web.

RESS est-il plus coûteux à mettre en œuvre que les RWD traditionnels?

Le coût de la mise en œuvre de RESS peut varier en fonction de la complexité de la Site Web et les ressources disponibles. Bien que l'implémentation initiale puisse être plus coûteuse en raison du besoin de programmation côté serveur et de détection des appareils, les performances et l'expérience utilisateur améliorées peuvent entraîner un engagement plus élevé des utilisateurs et des revenus potentiellement plus élevés à long terme.

peut être utilisé en conjonction avec d'autres techniques de conception Web?

Oui, RESS peut être utilisé en conjonction avec d'autres techniques de conception Web telles que l'amélioration progressive et la conception adaptative. Ces techniques peuvent compléter RESS en fournissant une solution de conception Web plus robuste et plus flexible.

Comment RESS a-t-il un impact sur l'avenir de la conception Web?

RESS représente un pas en avant significatif dans la conception Web. En combinant la flexibilité de RWD avec l'efficacité des composants côté serveur, RESS offre une expérience utilisateur plus personnalisée et efficace. Alors que de plus en plus d'appareils avec des capacités variables continuent d'émerger, le besoin de techniques comme RESS qui peuvent s'adapter à ces appareils n'augmentera.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!