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 le texte qui vous intéresse lisible. En un sens, puisque le iPhone utilise Safari, les concepteurs de sites Web ne devraient pas avoir à faire quoi que ce soit de spécial pour créer une page Web qui fonctionnera sur l'iPhone. Mais voulez-vous vraiment que votre page fonctionne ou qu'elle 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 vous le pouvez. La première chose à faire est de visualiser votre site sur un iPhone et autant de appareils mobiles ou des é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 devriez 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é, navigateurs à écran large, mais assurez-vous que les informations critiques sont visibles même sur un petit moniteur 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 votre téléphone portable et vos clients 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 pour 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'est pas là, ils partiront si la page est trop difficile à utiliser.
Mise en page 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. L'avantage de la plupart des smartphones disponibles est qu'ils utilisent les navigateurs Webkit (Safari sur iOS et Chrome sur Android) pour afficher des pages Web, donc si votre page a l'air bien 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 morceaux plus petits. 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 iPhone, il est fastidieux de saisir de longues URL. Gardez-les courts.
- Mais le texte de lien long est plus facile à exploiter. Lorsque vous êtes sur une page où plusieurs mots séparés sont liés à différents articles, tous les uns à côté des autres, il peut être très difficile d'appuyer sur le bon sans zoomer. Beaucoup de gens abandonneront et iront ailleurs. Les liens contenant 3 à 5 mots sont plus faciles à cliquer sur le téléphone que les liens d'un mot.
- Ne placez pas votre navigation tout en haut de l'écran. Il n'y a rien de plus ennuyeux que de devoir parcourir des écrans et des écrans de liens pour trouver les informations que vous recherchez. 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 se trouve 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 les iPhones peuvent zoomer et dézoomer sur les images, mais plus elles sont petites, à la fois en dimensions et en temps de téléchargement, plus vos clients sans fil seront satisfaits. Optimiser les 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 affichez à partir d'un appareil mobile. Et bien qu'elles soient souvent très agréables et rendent les pages plus belles lorsqu'elles sont affichées sur un navigateur Web en plein écran, elles 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'énormes images ou icônes de navigation.
- Ne placez 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 de 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 le pouvez, mais assurez-vous que le site fonctionne sans eux.
- Éclat: La plupart des téléphones portables 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.
- Tables gigognes: Si vous devez utiliser une table, veillez à ne pas l'imbriquer dans une autre table. Ceux-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 les pixels, les millimètres ou les pouces). Si vous définissez quelque chose comme 100px de large, sur un appareil mobile, cela peut faire la moitié de l'écran et sur un autre, cela peut faire deux fois la largeur. Les tailles relatives (comme les ems et les pourcentages) fonctionnent mieux.
- Polices: Ne présumez pas que l'un des polices auquel vous avez l'habitude d'avoir accès sera disponible sur les téléphones portables.