Share
Soyons sérieux au sujet de la typographie mobile; Nous savons tous que le mobile est énorme et nous pouvons également convenir que la typographie est extrêmement importante dans un design. La typographie est un élément de conception fondamental; Personnellement, je préfère commencer par créer n'importe quel design car cela aide à préparer le terrain pour le reste du design. Parlons donc de la manière dont nous pouvons rendre notre typographie mobile la meilleure possible..
Lors de la conception pour mobile, notre plus grand ennemi est sans doute la taille de l'écran physique. Certains smartphones sont très petits, comme le vieil iPhone 4 / 4S, mais toujours largement utilisé. Selon UNITY, 15,9% des personnes utilisent encore ce modèle désuet. Aux États-Unis, ce chiffre représente près de 24 millions de personnes. Oui, cela fait beaucoup de gens avec des écrans minuscules. Nous avons également des écrans plus grands, comme le nouvel iPhone 6 Plus, le Galaxy Note 4 ou le Nexus 6. Le fait qu’il existe une telle plage de tailles d’écrans est une restriction en soi, car ce qui paraît bien sur un iPhone 4 ne sera pas toujours bien paraître sur iPhone 6 Plus.
Vous voudrez peut-être examiner vos analyses et voir quel est le périphérique le plus populaire de votre site, commencez à l'adapter. Cependant, il est généralement admis qu'une approche agnostique vis-à-vis des périphériques vous servira mieux à long terme..
Examinez l'image ci-dessus pour voir comment le texte de taille égale est rendu sur chaque appareil. Je ne pouvais même pas adapter complètement «Heading 1» sur l'iPhone 5S, démontrant que la typographie réactive commençait par la taille de l'écran.
Parmi les autres obstacles lors de la conception d'un smartphone, citons l'éclairage dans l'environnement de l'utilisateur, ainsi que la proximité du téléphone avec son visage..
Commençons par le latte. Lorsque nous utilisons nos téléphones avec nos mains, nous avons tendance à les tenir à bout de bras ou même plus près de notre visage. Cela signifie que le type peut être plus petit sur un téléphone car la distance entre l'écran et nos yeux est plus courte que celle d'un ordinateur portable ou d'un moniteur de bureau.
Avoir la possibilité de réduire la taille de la police signifie également que nous pouvons inclure plus de texte dans le même espace, ce qui nous donne des «mesures» plus apaisantes. À son tour, cela permet de réduire la taille de l'écran, mais légèrement. Vous pouvez voir cela en action dans l'image ci-dessous.
Type plus petit pour les écrans plus petitsLes gens utilisent leur smartphone tout le temps, partout. Dans le métro, dans le parc, sur leurs divans ou leur lit. Votre application ou votre site Web peut être utilisé dans différents environnements avec un éclairage différent, ce qui signifie que vous devez également connaître le contraste. Lire dans le parc est possible, même en plein soleil, si le contraste du texte est suffisamment élevé par rapport à l'arrière-plan. Dans ce scénario, avoir un texte plus gros aide également. Il est moins nécessaire de se concentrer sur le contraste si la lecture est effectuée dans un métro où l'éclairage est moins éblouissant, ou la nuit dans son lit.
Gizmodo a publié un article détaillé sur le type d’appareil mobile (y compris les tablettes et les smartphones) qui domine l’extérieur. Ils ont comparé leurs couleurs par rapport aux différentes options d'ensoleillement. Il s'avère que le Samsung Galaxy S surpasse l'iPhone 4 à la lumière indirecte du soleil, le pire des pires éclairages extérieurs. Consultez l'article complet si vous recherchez plus de détails à ce sujet..
Mon argument est simple: il y a tellement de pièces en mouvement lorsqu'il s'agit de concevoir la lisibilité sur un appareil mobile. Connaissez vos utilisateurs afin de pouvoir déterminer au mieux leur expérience en lecture, commencez par leur type de téléphone et terminez par leur environnement..
Il existe de nombreux didacticiels qui vous aident à déterminer les pixels spécifiques pour lesquels votre texte doit être basé sur les ratios d'or ou simplement sur ce qui semble bon. Trouver une bonne échelle typographique pour le bureau est simple. En fait, il est assez facile de le faire aussi pour les appareils mobiles. Typecast contient un article magnifique qui explique comment trouver les mesures de votre typographie pour mobile et ordinateur de bureau: Une échelle plus moderne pour la typographie Web. L'article explique clairement pourquoi la typographie doit être adaptée. Mais je veux être plus détaillé que simplement dire «Les gens ont tendance à lire différemment sur le mobile» - c'est tellement plus que ça!
Vous voyez, le mobile est le moins fixé moyen que nous avons eu à traiter en tant que concepteurs. Comme je l'ai déjà mentionné, les gens lisent partout sur leur téléphone, dans des environnements en constante évolution. Pour optimiser leur expérience de lecture, nous devons comprendre la psychologie de ce qui en fait une bonne expérience de lecture..
J'aimerais penser que la conception de la meilleure expérience de lecture pour mobile commence par le corps du texte parfait. Quelle que soit la police que vous choisissez, vous devez vous assurer qu'elle est suffisamment souple pour supporter différentes tailles d'écran dans la même taille de police et toujours aussi belle. Si vous choisissez Helvetica Neue pour votre famille de polices, assurez-vous que son apparence sera parfaite sur un iPhone 4s de 16 pixels, ainsi que sur un téléphone Nokia et un téléphone Galaxy..
Tenez également compte du poids de la police lorsque vous sélectionnez une police, car certains téléphones afficheront un texte normal, gras ou clair différemment des autres..
C'est vrai, les titres sont tout aussi importants! Vous avez plus de liberté créative avec les titres car ils peuvent sacrifier une partie de la lisibilité au profit de l'impact, mais considérez aussi leur échelle. Comme le montre la première image avec des tailles d'écran mobiles, il est beaucoup plus probable que le texte devienne illisible en raison d'une surdimensionnement sur un petit écran. Une grande rubrique est également un gaspillage d’espace, car vous pourriez empêcher les utilisateurs d’accéder à la viande du contenu..
Une autre chose à garder à l'esprit lors de la mise au point de votre corps est le rythme vertical. Le rythme vertical est un terme faisant référence à l’espacement vertical et à l’alignement de la typographie et d’autres éléments de la page. Le terme rythme signifie un motif répétitif. Un bon rythme vertical facilite la lecture, car il permet une disposition équilibrée qui guide facilement les yeux du lecteur..
Tiré de http://modulargrid.orgQue la ligne de base soit lâche ou serrée, sa cohérence est ce qui compte le plus. Mais il est important de réaliser que la ligne de base sur les appareils mobiles peut refléter la petite taille de l'écran. N'ayez pas peur de restreindre les choses, surtout si vous avez réduit la taille de la police, mais trouvez un rythme vertical confortable pour que la lecture soit fluide pour le lecteur..
Si vous avez besoin d’aide pour déterminer les meilleures mesures pour votre rythme vertical, André Morton propose un générateur de rythme vertical sur son blog..
Il existe certaines règles empiriques que je voudrais partager avec vous en ce qui concerne la conception de la typographie en général, mais cela est particulièrement vrai pour la typographie réactive et mobile..
Vous ne devriez jamais avoir à ajuster le crénage pour des sites Web ou des applications de toute sorte. C'est un processus difficile et très peu fiable pour le Web! Le crénage des polices de qualité sera bien compris, et si la police que vous avez choisie n’a pas un bon crénage, laissez tomber.
Lorsqu'il n'y a pas de chiffon clair à droite ou à gauche de votre texte, il peut tout aussi bien être justifié (et le texte ne doit jamais être justifié sur le Web). Un chiffon de mauvaise qualité provoquera des trous et des brèches béantes dans les espaces blancs; il est plus facile de lire et de numériser du texte quand il y a un chiffon propre. Comment votre texte se casse-t-il à différentes tailles d'écran? Un correctif peut être un ajustement très simple qui supprime quelques pixels de l’élément contenant votre texte ou en ajoute un peu..
Il n'y a rien de plus trompeur que d'essayer de taper une petite zone sur un téléphone et de ne pas pouvoir le faire parce que c'est trop petit ou pire, de taper quelque chose d'autre à la place. Le meilleur conseil ici est peut-être d’en avoir le moins possible! Lorsqu'il n'y a qu'un seul lien en ligne, il est plus facile de l'exploiter, car il n'y a rien d'autre à ouvrir par inadvertance. Ensuite, assurez-vous que le lien est clair. Cela peut être fait de différentes manières, par exemple en rendant les liens audacieux ou en s’appuyant sur le motif de soulignement standard. Parfois, le simple changement de couleur ne sera pas suffisant si le contraste est trop faible (rappelez-vous comment nous avons parlé de couleurs d'écran et de problèmes d'éclairage?)
Enfin, assurez-vous que les liens en ligne ont plus de surface tactile que ce qui est perçu. Ceci peut être réalisé en appliquant affichage: inline-block; pour ancrer des éléments, mais assurez-vous que rembourrage ou extra hauteur de la ligne vous appliquez ne déforme pas le texte principal.
La conception de la typographie pour mobile comporte de nombreuses pièces mobiles que vous devez connaître. J'espère que cet article vous a permis de mieux comprendre comment améliorer vos conceptions pour mobile. Faites-nous savoir vos propres trucs et astuces dans les commentaires!
Accentsconagua