Comment écrire des pages Web pour les appareils mobiles

Table des matièresDévelopper

• Conditions générales d'Utilisation
• Mise en page pour Smartphones
• Liens et navigation
• Conseils pour les images
• Choses à éviter

Il y a de fortes chances que vous ayez vu comment l'iPhone peut retourner et développer des pages Web. Il peut vous montrer toute la page Web en un coup d'œil ou effectuer un zoom avant pour rendre lisible le texte qui vous intéresse. Dans un sens, depuis le iPhone utilise Safari , les concepteurs Web ne devraient rien faire de spécial pour créer une page Web qui fonctionnera sur l'iPhone. Mais voulez-vous vraiment que votre page fonctionne ou se démarque et brille ?

Lorsque vous construire une page Web , vous devez penser à qui va le voir et comment ils vont le voir. Certains des meilleurs sites prennent en compte le type d'appareil sur lequel la page est affichée, y compris la résolution, les options de couleur et les fonctions disponibles. Ils ne comptent pas seulement sur l'appareil pour le comprendre.

Directives générales pour la création d'un site pour les appareils mobiles

Testez sur autant d'appareils que possible.La première chose à faire est de visualiser votre site sur un iPhone et autant de appareils mobiles ou émulateurs que vous pouvez. Bien que vous puissiez utiliser des émulateurs pour tous vos tests, ils ne vous donnent vraiment pas la même sensation que d'essayer de naviguer sur un site Web sur le tout petit écran. Vous devez tester autant que possible sur des appareils réels. Faites en sorte que vos pages se dégradent gracieusement.Vous pouvez écrire vos pages pour Flash activé , les navigateurs à écran large, mais assurez-vous que les informations critiques sont visibles même sur un petit écran qui ne peut gérer aucune fonctionnalité spéciale (comme les cookies, Ajax, Flash, JavaScript, etc.). Tout ce qui va au-delà de XHTML Basic sera au-delà de certains téléphones portables. Alors que la plupart des smartphones peuvent gérer toutes ces choses, les autres appareils mobiles ne le peuvent pas. Créez une page spécifique au sans fil et rendez-la facile à trouver.Si vous envisagez de créer une page spécifique pour vos clients de téléphonie mobile et sans fil, rendez-la disponible. Un excellent moyen consiste à placer le lien vers la page sans fil tout en haut de votre document, puis à masquer ce lien sur les appareils non portables utilisant le type de support portable. Après tout, la plupart des gens viennent sur votre page d'accueil, même sur des téléphones portables - et si le lien vers votre page sans fil n'y est pas, ils partiront si la page est trop difficile à utiliser.

Mise en page de pages Web pour smartphones

La première chose dont vous devez vous souvenir lorsque vous écrivez des pages pour le marché des smartphones est que vous n'avez pas à apporter de modifications si vous ne le souhaitez pas. La grande chose à propos de la plupart des smartphones disponibles est qu'ils utilisent des navigateurs Webkit (Safari sur iOS et Chrome sur Android) pour afficher des pages Web, donc si votre page semble correcte dans Safari ou Chrome, elle ira bien sur la plupart des smartphones (juste beaucoup plus petit ). Mais il y a des choses que vous pouvez faire pour rendre l'expérience de navigation plus agréable :

N'oubliez pas que l'écran est minuscule.Les smartphones condenseront toutes ces colonnes dans la petite fenêtre, ce qui peut les rendre très difficiles à lire sans zoomer. La plupart des utilisateurs sont habitués au zoom, mais cela peut devenir fastidieux. Une longue colonne de texte est plus facile à lire.Divisez les pages en plus petits morceaux.Il peut être difficile de lire de longs segments de texte sur un téléphone portable, donc les mettre sur plusieurs pages les rend plus faciles à lire.

Liens et navigation sur iPhone

Plus les URL sont courtes, mieux c'est.Si vous avez déjà essayé de taper une URL sur un téléphone portable, vous saurez que c'est pénible (sauf peut-être pour les adolescents qui ont l'habitude d'envoyer beaucoup de SMS). Même sur l'iPhone, il est fastidieux de saisir de longues URL. Gardez-les courts. Mais le texte du lien long est plus facile à exploiter.Lorsque vous êtes sur une page où plusieurs mots distincts sont liés à différents articles, tous juste à côté les uns des autres, il peut être très difficile de taper sur le bon sans zoomer. Beaucoup de gens vont simplement abandonner et aller ailleurs. Les liens contenant 3 à 5 mots sont plus faciles à cliquer sur le téléphone que les liens d'un mot. Ne mettez pas votre navigation tout en haut de l'écran.Il n'y a rien de plus ennuyeux que de devoir feuilleter des écrans et des écrans de liens pour trouver l'information que vous voulez. Si vous avez consulté des pages Web conçues pour les téléphones portables, vous verrez que les premières choses qui apparaissent sont le contenu et le titre. Ensuite, en dessous, c'est la navigation. N'ayez pas peur de masquer votre navigation. Masquer les liens de navigation avec CSS ou JavaScript et les faire apparaître uniquement lorsque l'utilisateur le demande est un moyen de rendre la page plus facile pour les utilisateurs de smartphones.

Conseils pour les images sur les smartphones

Les images doivent être petites.Oui, Android et iPhone peuvent zoomer et dézoomer sur les images, mais plus ils sont petits, en termes de dimensions et de temps de téléchargement, plus vos clients sans fil seront satisfaits. Optimisation des images est toujours une bonne idée, mais pour les pages de téléphone portable, c'est essentiel. Les images doivent se télécharger rapidement.Les images occupent beaucoup d'espace sur les pages Web lorsque vous les visualisez à partir d'un appareil mobile. Et bien qu'ils soient souvent très agréables et améliorent l'apparence des pages lorsqu'ils sont affichés sur un navigateur Web en plein écran, ils gênent souvent sur un appareil mobile. De plus, lorsqu'un utilisateur de smartphone est sur le réseau cellulaire, la dernière chose qu'il veut payer est de télécharger un tas d'images énormes ou d'icônes de navigation. Ne mettez pas de grandes images en haut de la page.Tout comme pour la navigation, il peut être très fastidieux d'attendre qu'une image qui occupe 3 à 4 écrans se charge tout en haut de la page. Et cela est extrêmement courant sur les pages Web. La seule exception à cette règle est si le lecteur sait qu'il obtiendra une image lorsqu'il cliquera, par exemple dans une galerie de photos.

Ce qu'il faut éviter lors de la conception pour mobile

Il y a plusieurs choses que vous devriez éviter lors de la création d'une page adaptée aux mobiles. Comme mentionné ci-dessus, si vous voulez vraiment les avoir sur votre page, vous pouvez, mais assurez-vous que le site fonctionne sans eux.

Éclat: La plupart des téléphones mobiles ne prennent pas en charge Flash, ce n'est donc pas une bonne idée de l'inclure sur vos pages sans fil. Biscuits: De nombreux téléphones portables ne prennent pas en charge les cookies. Les iPhones ont prise en charge des cookies . Cadres:Même si le navigateur les supporte, pensez aux dimensions de l'écran. Les cadres ne fonctionnent tout simplement pas sur les appareils mobiles : ils sont très difficiles, voire impossibles à lire. les tables: N'utilisez pas de tableaux pour la mise en page sur une page mobile. Et essayez d'éviter les tables en général. Ils ne sont pas pris en charge sur tous les téléphones portables (bien que les iPhones et autres smartphones les prennent en charge) et vous pouvez vous retrouver avec des résultats étranges. Tableaux imbriqués: Si vous devez utiliser une table, veillez à ne pas l'imbriquer dans une autre table. Celles-ci sont difficiles à prendre en charge par les navigateurs de bureau et, au mieux, ralentissent le chargement de la page. Mesures absolues: En d'autres termes, ne définissez pas les dimensions des objets en tailles absolues (comme des pixels, des millimètres ou des pouces). Si vous définissez quelque chose comme 100 pixels de large, sur un appareil mobile, cela peut être la moitié de l'écran et sur un autre, cela peut être deux fois plus large. Les tailles relatives (comme ems et pourcentages) fonctionnent mieux. Polices: Ne présumez pas que l'un des polices auxquels vous avez l'habitude d'avoir accès seront disponibles sur les téléphones portables.