Responsive Web Design - que doit-il se passer lorsque l'appareil mobile pivote?
Actuellement, le comportement standard pour l'affichage des pages Web sur un mobile est le suivant:
- S'il est affiché en mode portrait, le texte est plus petit car la largeur de l'appareil est petite et la largeur de la page entière doit tenir en vue.
- Si elle est vue en paysage, la vue "zoom avant" car la largeur est maintenant plus large afin que le texte soit plus grand et plus lisible, mais avec moins de contenu à l'écran en conséquence.
Donc, cela pose un dilemme. Lors de la création d'un site Web réactif, que devrait-il se passer lors de la rotation de l'appareil? (Pas lors du chargement initial de la page, je fais référence à ce qui devrait se produire une fois le site chargé et vous décidez ensuite de faire pivoter l'écran)
Lorsque vous passez du mode portrait au mode paysage, devez-vous:
a) Détectez à nouveau les largeurs de l'appareil et mappez le contenu en fonction des nouvelles dimensions (en conservant ainsi les mêmes polices/tailles d'images que lors de la visualisation de portrait).
b) Gardez les mêmes dimensions et en rotation, amenez simplement le contenu à la fenêtre (zoomant ainsi sur le contenu pour le rendre plus lisible pour les téléspectateurs si le le texte d'orientation du portrait est trop petit).
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Gardez à l'esprit qu'avec une page Web traditionnelle affichée dans le mobile, vous avez la possibilité de pincer pour zoomer le texte, donc s'il est trop petit, vous pouvez zoomer. Avec un site réactif, ce n'est pas une option parce que le site s'adaptera aux dimensions donc il n'y a rien à zoomer.
(Je suppose qu'il y a aussi une troisième option - utilisez des polices réactives pour que les tailles de police changent en fonction de la largeur de l'écran. Mais c'est probablement une question complètement différente).
Permettez-moi d'ajouter une réponse tardive: ne fois le contenu chargé, ne laissez pas les rotations déclencher des points d'arrêt.
Si l'utilisateur fait tourner l'appareil accidentellement, sa tâche la plus immédiate est de se réorienter et de retrouver le contenu qu'il regardait ou lisait au moment de la rotation. Mais un déclencheur de point d'arrêt, l'utilisateur est soudainement présenté avec une interface qu'il ne reconnaît pas (ce qui le fait se demander si quelque chose s'est produit), et avec un contenu supplémentaire qui brise toutes les ancres qu'il utiliserait pour retrouver sa position initiale. Pire, si le point d'arrêt supprime le matériel, il y a une chance que le contenu que l'utilisateur veut retrouver ait été complètement supprimé. Découvrir que cela s'est produit est une opération très coûteuse.
Mais que se passe-t-il si l'utilisateur fait tourner l'appareil délibérément? Eh bien, la même chose. Soit l'utilisateur souhaite regarder de plus près un certain contenu en passant du portrait au paysage (auquel cas, l'ajout de contenu annule simplement l'effet), soit l'utilisateur souhaite afficher le même contenu mais avec un meilleur confort (c'est-à-dire qu'ils sont tournant pour des raisons d’ergonomie).
tl; dr - ne modifiez pas le contenu après le chargement de la page.
Personnellement, je suis un partisan des sites avec un mélange des deux.
- Les polices doivent conserver la même taille en mode paysage et portrait. Il doit simplement être distribué différemment selon la largeur d'écran actuelle. Comme vous l'avez également montré dans la maquette pour A.
Je pense que redimensionner le texte, c'est comme s’abandonner à une idée que " - ok, nous savons que le texte est très petit en mode portrait. Mais si vous retournez le téléphone, il devrait être facile à lire ! ". Si telle est votre position, redimensionnez le texte en mode portrait! Le seul réel avantage à avoir un texte plus petit en mode portrait est que l'utilisateur peut voir plus de la page en même temps. Mais cela peut également être réalisé en réfléchissant soigneusement aux aspects de la découvrabilité lors de la conception.
- Les images peuvent et doivent cependant être évolutives, comme indiqué dans l'option B.
Il est difficile d'avoir une taille d'image qui s'intégrera parfaitement dans votre mise en page quelle que soit la taille de l'écran, attendez de rendre cela impossible . Je trouve qu'une petite image aura l'air chétive sur un grand écran et qu'une grande image sera intrusive sur un petit écran. De plus, si vous trouvez des seuils qui correspondent à chaque intervalle de taille d'écran, vous pouvez avoir une disposition qui s'adapte parfaitement à chaque largeur d'écran.
Je vous recommande de jeter un coup d'œil à sens de la nourriture qui a un site Web réactif qui fonctionne vraiment bien et qui a l'air bien avec cinq dispositions différentes en fonction de la largeur. Une caractéristique amusante est qu'ils permettent à certaines images de s'agrandir dans les petits écrans, car cela s'adapte mieux à la disposition plus étroite.
C'est délicat et devrait être un bon jugement par le concepteur. Il n'y a pas de bien ou de mal, ni de convention (encore) sur laquelle s'appuyer. Mais il y a quelques choses à considérer, comme un zoom avant en élargissant simplement la page, ce qui me semble inutile. Si je veux zoomer, je peux insérer le texte sous une forme plus lisible (en mode Paysage et Portrait). Cette option est donc désactivée.
Au lieu de cela, j'aime les pages (ou applications) qui s'affichent davantage en mode paysage qu'en mode portrait. Sur une page Web qui pourrait être une image, des liens connexes ou même une "boîte à faits". Sur une application native, le contrôle est meilleur et vous pouvez fournir plus d'options, comme la calculatrice Windows Phone 7.
Le problème est que l'utilisateur ne sait pas s'il y a plus à voir en mode paysage - ce qui est mauvais pour l'expérience utilisateur, mais très amusant lorsque vous le découvrez. Ma réponse serait en bref, ajoutez plus de choses à la vue en mode paysage, ne zoomez pas.
Il existe différentes approches de la conception orientée appareil, et vous pouvez mettre en œuvre l'un des nombreux modèles de conception à choisir. Le premier qui me vient à l'esprit est la conception fluide , qui (simplement) réorganise simplement les éléments pour une meilleure vue. Certains éléments, moins importants, sont masqués à mesure que la largeur de l'écran se rétrécit et vice versa.
Vient ensuite la conception étendue qui ajoute un élément, peut ou non de navigation, à l'écran existant en orientation verticale. L'écran d'origine reste intact et le retournement horizontal de l'appareil fait apparaître l'élément étendu.
Il existe également la conception complémentaire qui ajoute plus d'informations allant de l'orientation verticale à l'orientation horizontale. Cela pourrait être une vue en grille de données verticales devenant un graphique en orientation horizontale.
Si vous voulez être chauve, vous pouvez également opter pour la conception continue , qui montre un écran complètement différent dans une orientation différente. Aujourd'hui, on ne sait pas comment les utilisateurs réagissent à cette conception, mais il est possible que les utilisateurs âgés aient du mal avec cette conception.
La conception pour l'orientation de l'appareil n'est pas nouvelle. Par exemple, lorsqu'ils sont tournés en mode paysage, les smartphones ouvrent un clavier virtuel plus grand et les applications de messagerie des tablettes passent à une interface maître-détails. Cependant, la conception de l'orientation du périphérique est largement considérée comme secondaire par rapport à l'interface principale car elle est souvent manquée par les utilisateurs qui s'en tiennent à l'orientation par défaut, principalement parce qu'ils ne sont pas conscients de sa disponibilité. En ajoutant des indices visuels simples à l'interface, les professionnels de l'expérience utilisateur peuvent plaider en faveur de l'orientation de l'appareil pour améliorer leurs produits et, en fin de compte, pour offrir des expériences plus engageantes et conviviales.
Référence: X DESIGN FOR MOBILE Designing For Device Orientation: From Portrait To Landscape
Concevez pour que le contenu s'intègre parfaitement dans une plage de largeurs, mais ne supposez aucune largeur de fenêtre spécifique. Le contenu devrait déterminer les points d'arrêt pour le réarrangement et l'ajustement, pas les tailles d'appareils actuellement populaires (qui changent constamment).
Pour certains contenus/applications, la structure de mise en page changera (et les éléments ajoutés/supprimés comme dans l'exemple de calculatrice ci-dessus), et pour d'autres contenus/applications (comme ceux orientés texte), la structure de mise en page ne changera pas lorsque la largeur change.
D'après mon expérience, en ce qui concerne les sites orientés texte, j'ai presque toujours besoin de réduire la taille des polices d'en-tête (h1, etc.) pour les fenêtres étroites, mais je m'efforce de conserver la police de contenu principale de la même taille et de réduire les marges latérales.
Mais tout dépend du contenu.
Par souci de cohérence, je m'assurerais que la page sur un appareil qui a commencé en mode portrait et qui est tournée en paysage est la même que si j'avais commencé en mode paysage en premier lieu. Si un utilisateur visite votre site à deux reprises et que c'est différent en raison de l'orientation avec laquelle il a commencé, il va être confus.
À ce stade, je dirais que je veux la meilleure expérience quel que soit mon facteur de forme "actuel". Une navigation à gauche serait très pauvre en portrait, mais beaucoup plus bienvenue en paysage.
Je considérerais la racine du problème. Si le texte plus grand est plus facile à lire, faites en sorte que le texte dans les deux vues soit de la même taille plus grande et plus facile à lire. La taille de l'écran, la densité de pixels et la distance des yeux de l'utilisateur ne changent pas lorsque vous faites pivoter, juste l'orientation. Par conséquent, la mise en page peut changer mais pas quelque chose d'aussi granulaire que la taille de la police. Il existe d'autres méthodes plus directes pour affecter la taille de la police, comme le pincement pour zoomer, auxquelles un utilisateur peut accéder dans l'une ou l'autre vue.
Nous sommes donc en janvier 2017. C'était une bonne question en 2012, mais je pense que notre expérience a peut-être changé notre opinion maintenant. Le mouvement de réactivité semble largement préférer suivre une règle de
utiliser l'espace disponible
en réorganisant la mise en page sur le changement d'orientation. Cela semble être devenu une pratique acceptée et attendue.
OTOH, parlant comme un `` vieil homme '' de 50 ans et plus avec une réduction naturelle de la vue, je trouve le manque de pincement sur certains sites Web pénible et j'ai une certaine sympathie pour la réponse acceptée de 2012 qui suggère de garder la mise en page la même mais juste en augmentant la taille de la police.
Quoi qu'il en soit, assez de ma propre réflexion - les autres conviennent-ils que le monde a évolué et que cette question a besoin d'une nouvelle réponse?