Conception Web réactive: télécharge-t-elle 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 toujours croissants des utilisateurs mobiles et des utilisateurs de tablettes.

J'entends également parler de responsive design. Je veux savoir si une conception Web réactive télécharge la même quantité de données sur un écran d'ordinateur et un appareil mobile?

J'ai également vu de nombreuses grandes entreprises de marketing n'ont pas investi dans la conception de sites Web réactifs et optent toujours pour un site Web séparé optimisé pour les mobiles. Alors, que dois-je choisir, une conception Web réactive ou un site Web distinct optimisé pour les mobiles?

Tel que défini par Ethan Marcotte dans ALA 306 , le terme «conception réactive» fait référence à la technique d'application de règles de style différentes à votre code HTML en fonction de la taille de l'écran de l'utilisateur. Pour plus d'explications sur la conception réactive, voici un joli deck de Mike Bollinger .

Dans ce modèle, vous envoyez exactement le même 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 ne peuvent pas être téléchargées. Par exemple, pour les grands écrans que vous pouvez utiliser high-res.pngdans votre CSS et pour les petits écrans low-res.png- le client Web peut choisir de télécharger uniquement l'image dans le style actif. (Voir le commentaire de @ DBUK pour au moins un client important qui télécharge actuellement les deux! Espérons que les clients seront plus intelligents!)

Cette technique peut avoir du sens dans votre cas, ou il peut être plus judicieux de créer un site mobile distinct.

Différents appareils peuvent impliquer différents contextes d'utilisation. Les téléphones portables sont toujours dans votre poche - comment l'utilisateur utiliserait-il votre site dans la ligne d'épicerie? Souhaitez-vous leur envoyer l'intégralité du site? Ou juste quelques fonctionnalités? Ou des fonctionnalités totalement différentes? Et s'ils sont sur le canapé avec le téléviseur en train de parcourir leur iPad avec désinvolture?

Les appareils mobiles ont tendance à avoir des processeurs plus lents, moins de mémoire et des taux de connexion plus lents (toutes ces "vérités" deviennent moins vraies chaque année, entre autres) - vous voudrez peut-être envoyer un site mobile distinct strictement pour des raisons de performances.

Je me risquerais à dire qu'en général, plus le site est statique, textuel et axé sur le contenu (c'est-à-dire un blog), plus il y a de chances d'utiliser le HTML existant et le design réactif. Plus le site est interactif, multimédia et axé sur l'utilisateur (c'est-à-dire un magasin), plus vous avez de chances de personnaliser des sites distincts pour des types d'appareils individuels.

N'oubliez pas non plus qu'à l'heure actuelle, la question se pose également de savoir si l'expérience mobile doit être un site ou une application .

La conception réactive ne doit pas télécharger la même quantité de données sur chaque appareil, car tous les appareils n'ont pas les mêmes exigences multimédias. 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 voulez combiner vos sites mobiles et réguliers, vous devez en tenir compte, sinon votre site n'est pas très réactif, n'est-ce pas?

Le peteorpeter de slidedeck liens vers mentionne le script Images Responsive par le Filament Group, qui vous permet de servir l'image de bonne taille pour l'appareil approprié en utilisant JavaScript, idéalement sans télécharger plus d'une version. Pour les éléments d'image de mise en page, cela se fait normalement via des requêtes multimédias spécifiant différents styles pour différentes résolutions d'écran.

Je pense que beaucoup d'entreprises mettront beaucoup de temps à mettre à jour leurs sites, bon sang, il y en a encore là-bas en utilisant des tableaux. Réactif, et la première approche mobile, sont définitivement les mots à la mode du moment.

Comme l'affiche ci-dessus mentionnée, vous devez utiliser des images en basse résolution pour votre téléphone portable / appareils de résolution inférieure. Les requêtes multimédias vous aideront à cibler toutes les résolutions inférieures. Cependant, j'ai entendu dire que le safari mobile ignorera l'affichage: aucune règle et téléchargera également les versions de bureau des images. De plus, si vous descendez la route des images réactives, cela met beaucoup de pression sur le processeur mobile - 3 octets par 1 pixel ... je pense. Il existe de nombreuses solutions pour contourner le téléchargement de contenu supplémentaire - certains assez hacky - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0

Pour plus d'informations sur les inconvénients de la conception de sites Web réactifs, consultez http://www.webdesignshock.com/responsive-design-problems/ . Ne vous laissez pas rebuter par ce billet de blog. A Book Apart a écrit un livre fantastique sur le sujet - http://www.abookapart.com/products/responsive-web-design . Il vaut vraiment la peine de saisir la version e-book.