web-dev-qa-db-fra.com

Comment présenter le contenu d'un curseur Image sur des appareils mobiles?

Je soupçonne les curseurs image + texte comme celui-ci ne sont pas la chose la plus utilisable sur les appareils mobiles, mais alors comment présenter leur contenu? L'empilement statique des curseurs vient à l'esprit, mais cela prendrait beaucoup de place s'il y a plus de deux diapositives. Toute suggestion?

3
drake035

Quelques choses me viennent à l'esprit dans la mesure où une solution possible. L'empilement prendra beaucoup d'espace sur un écran mobile, alors peut-être:

  1. Échangez l'image pour une image beaucoup plus simple sur mobile, presque comme des infographies. Laissez l'image faire la communication, supprimant ainsi le besoin de texte.

2. Présentez le contenu sous le curseur en petit texte, qui se rapporte à la diapositive actuelle.

2
David Sheridan

Oui, l'empilement n'est pas du tout une bonne solution.

Ma suggestion pour la vue mobile serait de conserver le texte et de déposer l'image. J'ai vu plusieurs sites faire cela. En effet, la plupart du temps, l'image seule ne peut pas transmettre le message sans son texte d'accompagnement. Cependant, le texte peut transmettre le message même sans l'image jumelée, en supposant que c'est le cas pour vous.

0
Liv Beng

Empilez-les.

Oui, le texte prend de la place, ce qui est très cher sur les mobiles ... mais que vous retrouvez-vous lorsque vous supprimez le texte?

enter image description here

Une image d'un moniteur. Qu'est-ce que ça me dit? Rien.


Parfois, il est correct de supprimer du contenu à des tailles d'écran inférieures, mais assurez-vous que l'utilisateur peut toujours tout comprendre.

Par exemple, sur mon propre site, j'énumère les deux derniers articles que j'ai écrits. Sur un écran suffisamment grand, cela ressemble à ceci:

TITRE DU PREMIER ARTICLE

Quelques textes introductifs de l'article le plus récent. Pas trop, juste un paragraphe, quelques courtes phrases pour saisir le lecteur et introduire le sujet. J'appellerais cela une lede (ou lead), mais c'est en fait un peu long pour cela car c'est environ 50 mots au lieu de 20 à 25.

TITRE DU DEUXIÈME ARTICLE

TITRE TROISIÈME ET DERNIER ARTICLE

Mais sur un petit écran je retire la lede du premier article, donc c'est juste des titres:

TITRE DU PREMIER ARTICLE

TITRE DU DEUXIÈME ARTICLE

TITRE TROISIÈME ET DERNIER ARTICLE

Ce qui me fait économiser environ la moitié de l'espace, mais le contenu restant est toujours utilisable.


À moins que vous ne puissiez prédire avec précision le type de contenu et son importance, ne supprimez rien.

S'il s'agit simplement d'un navigateur de photos avec des paramètres de localisation et de caméra, ce texte peut peut-être être considéré comme du contenu de deuxième niveau. (mais pourquoi n'utilisez-vous pas une image en taille réelle alors?) S'il s'agit d'un curseur montrant différentes options PC, la fiche technique est probablement plus importante.


Dans ce cas, combinez peut-être ma solution d'article avec un seul onglet accordéon ou un autre type d'élément pliable/masquable. De cette façon, vous pourriez avoir l'image + le titre toujours visible, et n'afficher que le texte `` détail '' sur de grands écrans ou après avoir cliqué sur: enter image description here

Ce sera un peu plus grand que la version côte à côte, mais il sera toujours considérablement plus petit que cela. Et bien sûr, c'est plus petit que d'empiler les boîtes verticalement.

0
PixelSnader