Conception réactive: dois-je aller au-delà de 1024 pixels?
J'ai 6 variantes réactives pour une application web, de 916px à 320px de large. Lors de l'exécution de certains tests internes, 2 personnes sur 6 ont indiqué qu'elles préféreraient que l'application réponde également à des écrans plus grands, au lieu de s'arrêter à 960 pixels. Ce groupe n'est pas exactement représentatif des futurs utilisateurs, qui auront très probablement des résolutions de 1024 ou 1280 px, mais j'ai bien peur d'appliquer ce que je fais à ce que je pense que la plupart des utilisateurs feront (j'ai un grand écran, mais mon navigateur n'est jamais maximisé).
Dois-je envisager une nouvelle étape sensible, par exemple, 1 260 pixels? Bien que la plupart des gens aient ces résolutions, existe-t-il des données sur le pourcentage d'utilisation du navigateur en "plein écran"?
La réponse courte est la suivante: si vous comptez déjà 6 résolutions d'écran mobiles différentes, vous devez également prendre en compte de nombreuses résolutions d'écran de grande taille - restez cohérent.
La réponse longue: vous compliquez trop cela. Il existe 28 résolutions "standard" et créer une mise en page dédiée pour chacune d'entre elles prend trop de temps. Au lieu de cela, vous devriez suivre ce que l'on appelle The Goldilocks Approach : 3 tailles d'écran de "étroit", "régulier" et "large". Vous pouvez l'augmenter à 4 ou 5 si vous le souhaitez (et avoir les ressources), mais le mélange de points de rupture réactifs avec des sections fluides (c'est-à-dire des largeurs définies en pourcentages) vous couvrira pour presque tous les écrans. Voir nouveau site Web de Microsoft pour un exemple concret (4 points d'arrêt).
Laissez votre contenu dicter votre décision, pas les appareils possibles.
Le site sera-t-il plus facile/meilleur à utiliser si vous avez créé une version plus grande ou sera-t-il simplement plus grand? Si la réponse est oui, alors combien d'efforts sont nécessaires pour le faire et quel pourcentage d'utilisateurs pourra en profiter?
De plus, si vous décidez de faire la version supplémentaire, considérez que la plus grande erreur que je vois dans la conception réactive oublie la résolution verticale. Apple vend beaucoup de MacBook Air 11 "et 13" avec de beaux écrans et un espace immobilier très limité verticalement. Juste parce que vous avez une largeur supplémentaire, ne supposez pas que je veux un héros vraiment large et grand image poussant des tonnes de contenu important loin de l'écran.
Je suis d'accord avec la réponse "acceptée", mais elle ne répond pas exactement à la question mentionnée: "devrais-je aller au-delà de 1024px?".
Disons que nous ne pouvons pas nous permettre de faire un design réactif/fluide sur chaque page. Soyons honnêtes, même Microsoft ne pouvait pas se le permettre. Apparemment, dès que vous quittez leur page d'accueil, cela revient à un 960px. C'est compréhensible. En tant que concepteurs Web, nous sommes parfois obligés de faire le travail le plus tôt possible.
Alors, devrions-nous aller au-delà de 1024px? Je pense qu'il est temps que nous le fassions.
Au cours des 4 dernières années, mon entreprise a créé des sites Web et des ecommerces 960px afin de s'adapter à ce paradigme de la résolution minimale. Cependant, les temps ont changé. Je crois que les résolutions larges de 1024 pixels sont presque mortes.
Je faisais un peu de recherche en lisant les analyses d'un site de commerce électronique qui reçoit une quantité décente de trafic (500 000 visites), de partout dans le monde, et seulement moins de 5% des utilisateurs desktop avait une résolution de 1024px ou moins. Et j'imagine que la probabilité de conversion de ces utilisateurs est étroitement liée au montant d'argent qu'ils dépenseraient sur un moniteur.
Depuis quelques mois, mon équipe et moi avons décidé de passer au niveau supérieur et de laisser derrière moi le mythe. Maintenant pour nous, une résolution minimale raisonnable est de 1280x768. Nos designs ont maintenant une largeur de 1060px ou 1180px et ils nous donnent beaucoup plus d'espace et de flexibilité pour être plus créatifs. Plus d'espace donne plus de souffle au message que nous essayons de communiquer, et en quelque sorte aussi à l'utilisateur d'avoir une meilleure expérience.
Je sais à quoi tu dois penser: ..et qu'en est-il de l'iPad? OK, le support iPad est important dans la vie et en général. Une solution rapide pour nous est le balisage suivant qui rendra votre site Web adapté à la résolution d'écran de l'iPad. C'est assez génial!
<meta name="viewport" content="width=1180">
Tout cela est basé uniquement sur mon opinion. J'aimerais en fait savoir ce que les autres pensent.
Je m'assurerais de ne pas remplir la largeur supplémentaire en augmentant la longueur des lignes de texte, ce qui entraînerait des problèmes de lisibilité.
Remplir astucieusement une large gamme de largeurs, à la Smashing Magazine, est difficile et consommateur de ressources, donc le succès dépend du contenu et des ressources que vous pouvez consacrer au problème. Je ne forcerais pas le problème.