Design de poche : Porter votre site web au petit écran
Par Elika Etemad et Jorunn D. Newth
Parmi tous les sites web existants, peu respectent les standards. Dans ce petit groupe, seule une poignée propose des feuilles de style répondant aux besoins des appareils portables ; de ceux qui offrent un style pour portables, tous ne s’adapteront pas aux écrans les plus petits à basse résolution, sans présenter à l’utilisateur l’horreur ultime du portable : j’ai nommé le scrolling horizontal. Le navigateur Opera fonctionne sur les petits périphériques de toutes tailles et de toutes résolutions, certains n’ayant pas plus de 120 pixels de large. Nous travaillons pour la société qui développe le navigateur Opera, de telle sorte que nous pouvons offrir un aperçu unique des fonctions d’Opera pour mobiles. Dans cet article, nous avons préparé une liste de suggestions pour créer une feuille de style qui convienne à ces petits périphériques, et nous les avons accompagnées de conseils propres à Opera que vous pourriez trouver utiles.
Les contraintes
La principale limitation d’un périphérique portable est son petit écran, qui manquera sans doute également d’un procédé de scrolling horizontal. La saisie se fait souvent avec un stylet, pas une souris. Télécharger vers le périphérique sera sans doute à la fois cher et lent ; les processeurs sont lents, et la mémoire est limitée. Bon nombre d’utilisateurs choisiront donc de désactiver le téléchargement d’image en ligne.
Maintenant, qu’impliquent ces limitations pour le designer ?
- Concevoir des mises en page sur une colonne et éviter les flottements ;
- Optimiser votre HTML en utilisant un balisage sémantique et des CSS efficaces ;
- Minimiser l’utilisation d’images décoratives, éviter de se baser sur des images ou des plug-ins pour la navigation ;
- Écrire un texte alternatif pertinent pour les images ;
- Éviter des effets dynamiques qui nécessitent l’utilisation spécifique d’une souris ou d’un clavier pour la navigation.
Réduire l’échelle
Même si la résolution d’écran des périphériques augmente avec le temps, la largeur physique ne sera jamais plus grande que votre poche. La conséquence la plus directe est que vous ne pouvez sensiblement pas rentrer plus d’une colonne de texte dans une page. Vous voulez également que cette colonne soit aussi grande que possible, de telle sorte que la colonne de texte ne devienne pas un de ces poèmes modernes de quelques mots par vers.
Tout d’abord, évitez d’utiliser les pixels pour toute dimension supérieure à 5px (si si, vraiment!). Les dimensions en pixel plus larges que cela se dégradent mal, utilisez donc des ems ou des pourcentages pour les tailles plus importantes.
Réduisez la taille des marges, des bordures et des espacements pour qu’ils s’adaptent aux petits écrans. Insérer 3em avant un en-tête est parfaitement raisonnable sur un écran classique, mais c’est excessif sur un périphérique portable. Les larges bordures devraient être sensiblement rétrécies et l’espacement ajusté jusqu’à ce qu’il convienne. Dans certaines mises en page, mieux vaut réduire les bordures et espacements redondants ; elles sembleraient étriquées sur de plus petits écrans.
Un texte important paraît maladroit et occupe beaucoup d’espace sur de petits écrans. Les grands caractères, par conséquent, ne devraient pas être plus larges que le double de la taille d’un texte de paragraphe ; il ne devrait pas y en avoir de trop. Les petits caractères devraient également être de dimensions plus proches de celles d’un texte de paragraphe que sur un ordinateur de bureau.
Gardez les blocs de texte aussi larges que possible en n’utilisant que très peu d’espacement horizontal. Une indentation d’1em est conséquente sur des périphériques dotés de petits écrans, donc dans la plupart des cas, les marges et espacements horizontaux ne devraient jamais être supérieurs à 1em. Comme les pourcentages s’adaptent à la largeur de l’affichage, spécifier une marge en pourcentages au lieu d’une marge en ems fonctionnera très bien sur une large panoplie de tailles d’écran.
Linéariser la mise en page
Linéariser la page en une colonne fonctionne mieux lorsque la structure fondamentale du document a été conçue pour cela. Structurer le document en suivant cette logique assure que l’organisation de la page a un sens, non seulement dans Opera pour mobiles mais également dans des navigateurs non-CSS, que ce soit sur de petits périphériques ou sur un poste fixe, sur des navigateurs vocaux et dans des navigateurs en mode console comme Lynx.
Considérant que vous utilisez des CSS pour votre mise en page, limiter l’affichage à une colonne est assez simple : oubliez ou écrasez simplement les règles qui ajoutent un comportement de flottement et de positionnement absolu. Si vous utilisez des tableaux pour la mise en page, faites en sorte que les cellules se comportent comme une séquence de blocs en utilisant :
table, tbody, tr, td, th {
display: block; }
Le haut de la page est de première importance ; vous ne voulez pas que le lecteur ait des difficultés à atteindre le contenu. Pour cette raison, minimisez la navigation et la décoration de la partie supérieure. Un logo et un ou deux petits éléments de navigation, comme une courte liste de navigation, un fil d’Ariane [NDT : breadcrumbs en anglais], ou une boîte de recherche, devraient suffire. Les longues listes de navigation, les publicités, et tout autre contenu secondaire devraient être placés après le texte principal. Dans la plupart des mises en page, cela revient à les placer dans la barre de droite pour les mises en page destinées à un ordinateur de bureau. La structure du XHTML de A list Apart va exactement dans ce sens.
Les éléments de navigation non essentiels devraient être masqués par un display: none
. Par exemple, si vous utilisez des menus déroulants dynamiques au sommet de votre page, faites du titre du menu un lien vers cette section de votre site web et masquez les liens du sous-menu. Cela rend la navigation moins déséquilibrée, et si votre site est bien organisé, ceci ne devrait pas causer de problème de navigation.
Prévenir tout débordement
Parce que leurs écrans sont petits et que l’appareil n’aura pas toujours un système de scrolling horizontal, le débordement horizontal [NDT : l’overflow] est un problème majeur sur les appareils portables. En plus de laisser le contenu s’adapter à une seule colonne, vous devez vous assurer que les éléments les plus larges s’adaptent aussi aux petits écrans.
Les éléments de taille incompressible incluent les images et les contrôles de formulaire. Assignez-leur un max-width: 100%
pour les restreindre à la surface d’affichage.
Pour les blocs préformatés (<pre>
), enveloppez le texte de près (25-30 caractères) ou permettez aux longues lignes de revenir à la ligne. Vous pouvez autoriser les retours à la ligne en ajoutant la règle CSS suivante à votre feuille de style :
pre { white-space: -pre-wrap;
/* extension CSS propre à Opera */
white-space: pre-wrap;
/* ajouté dans CSS 2.1 */}
[NDT : Opera intègre la spécification CSS 2.1 concernant cette propriété depuis sa version 7. Il est par contre nécessaire d’ajouter « white-space: -moz-pre-wrap;
» pour que les navigateurs basés sur Gecko puissent utiliser cette propriété (Mozilla, Firefox, K-meleon, etc.)]
Faites attention au positionnement fixe. Un élément fixe qui recouvre la zone d’affichage est complètement inaccessible.
Laisser tomber les effets dynamiques
Opera pour périphériques portables supporte les mêmes effets dynamiques que sur un ordinateur de bureau. Cependant, un bon nombre d’effets dynamiques qui fonctionnent bien sur l’écran ne s’adaptent tout simplement pas au périphérique portable. Les fonctionnalités qui sont pénibles sur un poste fixe deviennent encore plus pénibles sur les appareils portables.
N’utilisez pas de cadres ou de popups. Bien qu’Opera puisse afficher des cadres sur des périphériques portables, ceux-ci rendent la navigation et l’affichage particulièrement pénibles. De multiples fenêtres sont également beaucoup plus difficiles à manipuler sur un appareil portable que sur un ordinateur de bureau, laissez donc les liens s’ouvrir dans la même fenêtre.
Comme lors de mises en page pour ordinateurs de bureau, assurez-vous que les éléments de navigation sont accessibles même sans souris. Les évènements claviers ne doivent pas forcément être pris en compte non plus ; l’interaction sur les périphériques portables est souvent réalisée avec un stylet, ce qui ne permet pas de détecter les appuis sur une touche ou les survols, ni d’effectuer de clic-droit ou double-clic.
Réduire les images
Les opérateurs de téléphonie mobile se régalent en facturant les transferts de données au kilo-octet, rendant les sites très imagés à la fois lents et chers à télécharger. Cela pousse souvent les utilisateurs à naviguer avec les images désactivées pour économiser du temps et de l’argent.
Vous pouvez réduire l’utilisation des images :
-
en masquant les images superflues avec
display: none
de telle sorte qu’Opera [NDT : ou tout autre navigateur respectant les standards] ne prendra pas la peine de les télécharger, - en utilisant un vrai texte pour les étiquettes de navigation et les en-têtes,
-
en demandant à Opera d’utiliser le contenu de l’attribut
alt
d’une image au lieu de charger l’image elle-même :img.as-text { content: attr(alt); }
Pour les images que vous intégrerez, définissez les attributs width
et height
pour que la page puisse adopter sa mise en forme finale avant même que les images ne soient chargées. De même, les images conçues pour un ordinateur de bureau ne s’adaptent souvent pas très bien au petit écran. Rognez, réduisez et/ou optimisez le poids des images destinées aux périphériques portables.
N’oubliez pas d’écrire des textes alternatifs significatifs. L’idée est de remplacer l’image, pas de la décrire. Si l’image est purement ornementale, le alt
devrait toujours être la chaîne vide ("").
Optimiser le HTML
Utilisez un balisage efficace, sémantique, et laissez la mise en page à CSS. Le CSS est plus puissant, plus compact, et n’encombre pas le document avec des informations de mise en page redondantes. Même si cela est une bonne pratique de création pour tous les types de média, cela devient encore plus important lorsque l’on écrit pour des périphériques portables.
-
N’abusez pas des
class
,<div>
et<span>
. S’il existe une balise HTML plus appropriée, utilisez-la et sous-classez si nécessaire. Si l’élément n’est pas vraiment nécessaire, enlevez-le. Si vous pouvez le sélectionner à partir de son contexte, n’introduisez pas de nouvelle classe ; -
Choisissez les balises qui servent le mieux le but et la structure du contenu. Les balises HTML sémantiques ont des significations universellement reconnues, ce qui n’est pas le cas des modifications de police ou des classes définies par l’auteur. Parmi les autres avantages, un balisage significatif permet aux navigateurs non CSS, qui sont plus fréquents sur les petits périphériques que sur un ordinateur de bureau, de présenter un affichage cohérent du contenu de la page au lecteur. Des balises sémantiques sont également beaucoup plus succinctes que des combinaisons
div
+class
, conduisant ainsi à des tailles de fichiers plus faibles ; - Créez des noms de class/id sémantiques, plutôt que des noms propres à la mise en page. Si votre code explique pourquoi vous stylez un élément plutôt que comment vous le stylez, le balisage ne sera pas restreint à une mise en page unique. Le style et la disposition peuvent alors être simplement et intuitivement changés indépendamment du balisage. Un code conçu de cette façon est généralement aussi plus compact et plus lisible.
Placez les scripts et les styles qui se répètent dans des fichiers externes. Cela permet au navigateur de les mettre en cache, ce qui réduit les besoins en téléchargement pour les pages suivantes du même site.
Permettre à Opera d’utiliser votre CSS
Maintenant que vous savez comment concevoir une mise en page pour un appareil portable, vous devez vous assurer qu’elle sera activée sur un périphérique portable doté d’Opera.
Opera part du principe que la plupart des pages web ne sont pas conçues pour les périphériques portables. Si « Ajuster à la largeur » est activé, comme ça l’est par défaut sur la plupart des périphériques, les styles de l’auteur sont ignorés et les pages sont reformatées pour le petit écran à moins que la page n’ait une feuille de style spécifiquement destinée aux périphériques portables.
Pour faire savoir à Opera qu’une feuille de style pour périphérique portable est présente, spécifiez « handheld » dans l’attribut media
de <link>
ou <style>
, ou utilisez une règle @media
ou @import
dédiée aux appareils portables dans votre CSS incluse :
<link rel="stylesheet" href="..." type="text/css" media="handheld">
<style type="text/css" media="handheld">...</style>
<style type="text/css">
@media handheld { ... }
</style>
<style type="text/css">
@import url(...) handheld;
</style>
Si la feuille de style s’applique également à un autre média (ou à tous les médias), listez tous les types de média dans une liste séparée par des virgules et assurez-vous d’inclure explicitement handheld
. Par exemple :
<link rel="stylesheet"
href="site-style.css"
type="text/css"
media="handheld,all">
Du moment qu’au moins une feuille de style a handheld
dans sa liste de types de média applicables, Opera désactivera SSR et utilisera toutes les feuilles de style dédiées aux périphériques portables (y compris les feuilles de style sans média spécifié ou avec un media="all"
).
Opera ne téléchargera pas de feuilles de style externes pour vérifier la présence de règles @media
ou @import
pour périphériques portables avant de décider si oui ou non il désactive « Ajuster à la largeur ». Vous devez donc déclarer l’existence d’une feuille de style pour appareil portable dans la page HTML elle-même.
Lorsque votre design est terminé, testez-le. Si vous n’avez pas accès à un appareil équipé d’Opera, vous pouvez faire en sorte que sa version pour ordinateur de bureau émule un périphérique portable en pressant Maj + F11.
Ça le fait
Afin d’illustrer l’approche précédente pour adapter la mise en page d’un site aux périphériques portables, nous avons créé une feuille de style annotée Pompage.net pour le type de media « handheld ». Elle est disponible par ici. Vous pouvez la voir en action en regardant cet exemple avec un navigateur pour périphérique portable.
Opera a su s’adapter au fait que seule une petite portion du web est adaptée aux périphériques qu’un nombre croissant de gens transportent dans leur poche, ou leurs sacs à main. Dans un web idéal, Opera ne devrait pas avoir à utiliser tous ces substituts pour afficher les pages.
Cependant, nous espérons que de plus en plus de webdesigners s’intéresseront davantage à la création de leurs propres astuces, pour afficher d’excellents designs dédiés au type de média « handheld ». C’est difficile, mais certainement pas impossible pour un site web d’avoir l’air fantastique sur de petits écrans.
Bien que les techniques décrites dans cet article soient à proprement parler standard, il est recommandé de toujours tester ses feuilles de style pour media « handheld » avant mise en production.
Il s’agit donc plus ici de mises en garde et de bons usages ; ce sont des conseils sur la création de feuilles de styles pour périphériques portables, plus qu’une simple notice à suivre au pied de la lettre.
http://alistapart.com/articles/pocket/