Conception pour les navigateurs Web mobiles
Quelle est la meilleure approche pour concevoir un site Web à exécuter sur la plupart des navigateurs Web mobiles modernes?
Le ciblage des navigateurs WebKit est-il suffisant?
Non, cibler WebKit ne suffit pas. La première chose à faire est de considérer qu'il existe deux segments du marché mobile: tactile et non tactile. Cela affecte la façon dont vous concevez votre expérience utilisateur mobile. Heureusement, ceux basés sur le tactile vont évoluer de manière significative vers WebKit (Android, iPhone et WebOS). Les autres vont être principalement IE Mobile (IE Mobile 6 sur Windows Mobile 6.5 et un nouveau basé sur IE7/IE8 sur Windows Phone 7) et Opera = (Mobile et Mini). Reportez-vous à cette liste des navigateurs mobiles sur Wikipedia pour plus d'informations sur les moteurs de rendu et les capacités.
Pour les plateformes tactiles, une bibliothèque comme Sencha Touch peut vous aider à créer des expériences comparables sur tous les appareils, mais il sera difficile de créer des expériences égales sur tous les appareils. En fait, je vous recommande de ne pas essayer . La différence entre les plates-formes mobiles tactiles et non tactiles devient si grande qu'elle ressemble presque à la différence UX d'essayer d'adapter une interface utilisateur de bureau sur un écran de taille mobile - ce qui fonctionne bien sur les plates-formes tactiles car elles utilisent le paradigme "zoom" de l'iPhone - mais vous aurez du mal à tirer quelque chose d'utile de cette approche pour les plates-formes anciennes ou non tactiles.
Cependant, considérez l'article de LukeW et les discussions ultérieures sur la conception pour mobile d'abord , ce qui n'est pas nécessairement une réponse à votre question mais peut être considéré comme un bon principe: commencez à concevoir en identifiant les choses que les consommateurs veulent faire sur votre site et rendez ces informations disponibles rapidement et facilement. Cela est toujours une bonne conception sur toutes les plates-formes toutes, donc dans ce sens, vous pouvez l'utiliser comme modèle pour guider votre conception mobile.
J'ai fait quelques expériences hier avec un iPhone 3. Voici mes expériences:
Ne présumez pas que la largeur est de 320 pixels, utilisez donc une disposition de largeur fluide.
Utilisez le bon doctype. J'utilise le XHTML Mobile 1.2. Mais je ne sais pas si c'est le bon.
Rendez les boutons énormes.
Pas de survol, utilisez donc des icônes pour indiquer ce que font les différents éléments de l'interface utilisateur.
Le terme mobile se développe en dehors du domaine des téléphones et commence à inclure des appareils comme les tablettes, qui comportent des écrans tactiles de cinq à neuf pouces. De plus, une conception mobile devrait tenir compte des orientations horizontales et verticales. En plus de ce que neoneye a dit, quelques recommandations/suggestions supplémentaires.
- Utilisez une marge ou un remplissage pour vous assurer qu'aucun texte ne se trouve bien sur le bord de l'écran.
- En plus d'utiliser une disposition de largeur fluide (les largeurs peuvent aller de 320 pixels à 1024 pixels), assurez-vous que les éléments de conception que vous utilisez sont bien enveloppés. Par exemple, les boutons semblent mieux enveloppés qu'une liste horizontale.
- Le texte doit être un peu plus gros, mais toujours lisible. À mon avis, un bon style typographique est au moins tout aussi important ici. Les éléments du style typographique appliqués au Web est une bonne référence.
Si votre public peut être qualifié un peu plus, vous pourrez peut-être faire des hypothèses éclairées selon lesquelles la plupart des clients utilisent un appareil principal ou un navigateur de rendu. Répondez d'abord aux besoins fondamentaux de votre public principal. Tenter de distribuer votre application sur toutes les plates-formes de manière égale au "début" peut être une tâche trop ardue.
Voici quelques articles utiles que j'ai rencontrés:
Référence mobile http://www.quirksmode.org/mobile/