Pourquoi la conception Web «réactive» ne devrait-elle pas être prise en considération?

Cela peut sembler être plus une question de conception graphique qu'une question de programmation, mais je pense que cela a beaucoup plus de mérite technique / de programmation que la conception graphique réelle.

Le concept de conception Web «réactive» s'articule autour de l'utilisation de requêtes multimédias dans CSS3 pour détecter la taille du périphérique de visualisation et ajuster les règles CSS en conséquence - essentiellement, CSS dynamique. Cela comble le vide sur de nombreux cas de déploiement - mobiles, en particulier.

Je pense que l'utilisation des requêtes médiatiques fait surface lentement (j'ai constaté que beaucoup de gens ne le savent pas vraiment), mais je me demande s'il y a une raison pour une adoption lente. Est-ce peu pratique pour les applications Web? Y a-t-il quelque chose qui me manque qui pourrait être un écueil fondamental?

— Nic
source

Beaucoup de gens sont simplement ignorants et n'apprennent pas de nouvelles méthodes.

— Raynos

@Raynos mais l'apprentissage est tellement amusant!

— Nic

C'est parce que les vitesses Internet augmentent avec le temps et que le responsive n'est plus un vrai problème, et l'effort n'est plus justifié? Peut-être que je me trompe, car cette idée a l'air cool!

— WinW

Migrer vers les webmasters.SE?

— Peter Taylor

Réponses:

Vous devez sauter à travers des cerceaux pour que cela fonctionne réellement. Pour un site que je développe, j'ai utilisé @media (max-width:800px)pour définir une feuille de style pour les téléphones et autres écrans plus petits. Mais il n'était pas utilisé par exemple par l'iPhone.

Il s'avère que les développeurs de navigateurs téléphoniques supposent que les gens ne prendront pas en compte les petits écrans, ils mentent donc au moteur de rendu (l'iPhone prétend avoir une largeur supérieure à 900 px, par exemple), sauf si vous insérez une balise Meta supplémentaire pour lui dire de ne pas mentir. Quand vous arrivez au point de vous battre contre les implémenteurs de navigateur, vous commencez à vous demander si cela en vaut la peine.

— Peter Taylor
source

Donc, Zurb Foundation et Twitter Bootstrap gèrent assez bien cela. Il nécessite un peu de JavaScript pour gérer la commutation à la demande. Il y a aussi des paramètres DPI, etc. L'utilisation de ces cadres CSS rend les choses très faciles. Ou au moins une partie d'entre eux.

— Berin Loritsch,

Il convient de noter que cette question et cette réponse datent d'il y a 6 ans et peuvent ne pas refléter les taux d'adoption actuels.

— Peter Taylor

Ah désolé. C'était dans le flux principal hier pour une raison quelconque. Je n'ai pas pensé à vérifier la date.

— Berin Loritsch

Je ne peux pas parler pour tout le monde, mais d'après ma propre expérience, le temps et l'argent ont été le facteur décisif. Mes collègues et moi regardons toujours les dernières nouveautés, mais concevoir et implémenter différentes dispositions pour des appareils de tailles différentes est un gros problème. Surtout si l'on considère que sur mon nokia 5800 de 3 ans, tous nos sites Web ont l'air bien - barre que je dois faire défiler pour obtenir le contenu de la barre latérale. Nous concevons et mettons en œuvre des sites Web pour les petites entreprises et les travailleurs indépendants.

Une autre raison qui peut être valable est que la diffusion d'un site Web complètement distinct pour les versions mobiles, avec son propre plan du site distinct ( http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=34648 ), est un moyen facile et d'entrée de gamme de maintenir le site.

— Pelshoff
source

Eh bien, je pense qu'il est vraiment difficile d'introduire une conception réactive sur un site qui est déployé ou en milieu de cycle, mais je pense qu'il serait beaucoup plus facile d'implémenter quelque chose comme ça au lieu d'avoir un tout autre sous-domaine mobile. Heureusement, Rails résume un peu cette tâche avec des modèles hérités.

— Nic

Eh bien, je dois ajouter que dans notre cas, le client a en fait externalisé la version mobile à un concurrent :(

— J'irais

Si vous pouvez garantir une récupération fiable des données, tout va bien.

Mais imaginez, quelqu'un charge une page Web dans un navigateur Windows d'un ordinateur de bureau. Les forcez-vous à ouvrir en plein écran pour tout lire, ou adaptez-vous la taille à la fenêtre réduite et présentez-vous beaucoup d'espace vide au fur et à mesure qu'ils la maximisent? Vous servez le CSS une fois, au chargement de la page!

Qu'en est-il d'un navigateur de téléphone qui change les modes paysage / portrait lorsque vous faites pivoter le téléphone? Qu'en est-il d'un navigateur qui a simplement une résolution trop petite et que les gens utilisent normalement le zoom avant, mais vous vous êtes déjà adapté à la résolution signalée, bien trop petite et la page devient illisible?

Suivez simplement les directives standard pour créer un CSS universel et évolutif décent et laissez le navigateur gérer la mise à l'échelle de la page à la bonne résolution.

— SF.
source

Il y a une nouvelle fonctionnalité dans CSS3 qui permet des règles dynamiques pour différentes tailles d'écran, qui changent automatiquement.

— Steffan Donal

@Ruirize Exactement - utilisez du CSS statique qui a des règles qui adaptent le contenu dynamiquement - d'accord. Demander un CSS généré dynamiquement qui a des règles définissant statiquement le contenu pour la taille de votre écran - non.

— SF.

L'OP parle d'utiliser des requêtes multimédias, qui ajustent dynamiquement les choses en fonction (entre autres) de la taille de l'écran. Aucun fichier supplémentaire chargé.

— Travis Northcutt

@SF .: essayez de redimensionner une fenêtre de Google Agenda (le nouveau thème rouge, pas l'ancien bleu), c'est effrayant de voir comment ils le gèrent.

— Lie Ryan

@SF: Le message original parlait de requêtes multimédias, ne servant pas de CSS différent en fonction des en-têtes ou w / e.

— Pewpewarrows