Responsive Web Design: télécharge-t-il la même quantité de données sur chaque appareil?
Je souhaite repenser mon blog et mon site Web sur wordpress pour répondre aux besoins croissants des utilisateurs mobiles et des utilisateurs de tablettes.
J'entends aussi parler de design réactif. Je souhaite savoir si une conception Web réactive télécharge la même quantité de données sur un écran d'ordinateur et sur un appareil mobile.
J'ai également constaté que de nombreuses grandes entreprises de marketing n'avaient pas investi dans la conception Web réactive et optaient toujours pour un site Web séparé optimisé pour le mobile. Alors, que dois-je choisir, un design Web réactif ou un site Web séparé optimisé pour le mobile?
Comme défini par Ethan Marcotte dans ALA 306 , le terme "conception sensible" fait référence à la technique consistant à appliquer différentes règles de style à votre code HTML en fonction de la taille de l'écran de l'utilisateur. Pour plus d'explications sur le design réactif, voici un Beau deck de Mike Bollinger .
Dans ce modèle, , vous envoyez exactement le même code HTML au client , que l'écran soit petit ou grand. Cependant, si les ressources (images principalement) référencées dans le CSS ne sont pas affichées pour certaines résolutions d'écran, elles peut pas être téléchargées. Par exemple, pour les grands écrans, vous pouvez utiliser high-res.png dans votre CSS et pour les petits écrans low-res.png - le client Web peut choisir de ne télécharger que l'image dans le style actif. (Voir le commentaire de @ DBUK pour au moins un client important qui télécharge actuellement les deux! J'espère que les clients se débrouilleront!)
Cette technique peut avoir un sens dans votre cas, ou il peut être plus judicieux de créer un site mobile séparé.
Différents appareils peuvent impliquer différents contextes d'utilisation. Les téléphones mobiles sont toujours dans votre poche. Comment l’utilisateur utilisera-t-il votre site dans le secteur des achats en ligne? Voudriez-vous leur envoyer tout le site? Ou juste quelques fonctionnalités? Ou des fonctionnalités totalement différentes? Et si ils sont sur le canapé avec la télévision allumant leur iPad avec désinvolture?
Les appareils mobiles ont généralement des processeurs plus lents, moins de mémoire et des vitesses de connexion plus lentes (toutes ces "vérités" deviennent de moins en moins vraies chaque année, d'ailleurs) - vous pouvez envoyer un site mobile séparé uniquement pour des raisons de performances.
J'oserais dire qu'en général, plus le site est statique, textuel et axé sur le contenu (c'est-à-dire un blog), meilleures sont les chances d'utiliser le code HTML existant et le design responsive. Plus le site est interactif, multimédia et piloté par les utilisateurs (c'est-à-dire un magasin), plus vous aurez de chances de personnaliser des sites distincts pour des types de périphériques individuels.
De plus, n'oubliez pas qu'à notre époque, il faut aussi se demander si l'expérience mobile doit être un site ou un app .
Responsive design ne devrait pas télécharger la même quantité de données sur tous les appareils, car tous les appareils n’ont pas les mêmes exigences multimédia. Les sites mobiles doivent utiliser des images en basse résolution et être de nature moins graphique que les sites pour ordinateurs de bureau/ordinateurs portables/tablettes. Et si vous souhaitez associer votre site mobile à votre site habituel, vous devez en tenir compte, sinon votre site n’est pas très réactif, n’est-ce pas?
Le slidedeck peteorpeter fait référence au script Responsive Images par le groupe de filaments, ce qui vous permet de servir la bonne image pour le périphérique approprié en utilisant JavaScript, idéalement sans télécharger plus d'une version. Pour les ressources d'image de présentation, cela se fait normalement via des requêtes multimédia spécifiant différents styles pour différentes résolutions d'écran.