L’an dernier, l’utilisation du Web mobile a augmenté de 148% dans le monde. Dans un proche avenir, alors que les poneys deviennent de plus en plus omniprésents, ce nombre continuera à monter en flèche. En tant que développeur, le moment est venu pour vous de réfléchir sérieusement à la question de savoir si vous devriez commencer à adapter votre audience mobile.
Aujourd'hui, nous allons examiner quelques moyens rapides de rendre votre site un peu plus convivial pour les appareils mobiles.
Analysez votre public
Avant de vous lancer dans l'amélioration de votre site d'un point de vue mobile, il est judicieux de vérifier quelle part de votre trafic provient réellement d'appareils mobiles. À l'aide de Google Analytics ou d'un outil similaire, jetez un coup d'œil rapide à la ventilation du navigateur afin de vous familiariser avec ce numéro. Ensuite, vous pourrez prendre une décision éclairée quant à la distance à parcourir avec votre hébergement mobile.
Une chose à garder à l'esprit est que si ce nombre est très faible, cela peut être dû en partie au mauvais état de votre site sur les appareils mobiles. Décidez si vous souhaitez simplement améliorer l'expérience de vos utilisateurs mobiles actuels ou rechercher activement davantage d'utilisateurs mobiles en lançant un site mobile dédié, une application Web ou une application iPhone.
Créer des feuilles de style mobiles
L’une des plus importantes mesures à prendre pour rendre votre site convivial pour les mobiles est de créer un CSS personnalisé qui cible les appareils mobiles. Cela peut être une tâche beaucoup plus petite que vous ne pouvez l'imaginer si vous souhaitez conserver l'apparence générale du site. Voyons comment orienter votre CSS mobile pour charger uniquement sur les appareils mobiles.
Types de média
L'utilisation de différentes déclarations de type de support vous permet d'affecter différentes feuilles de style à certaines utilisations. La plupart des navigateurs de bureau reconnaissent? Screen? alors que de nombreux appareils mobiles utilisent l'ordinateur de poche? commander. Découvrez l'exemple suivant:
En utilisant cette simple déclaration, vous pouvez créer un fichier handheld.css qui ne sera activé que sur les appareils de poche (du moins ceux qui permettent de styler). Bien sûr, cela ne fonctionnera pas sur tous les appareils, mais cela coûtera assez cher. Certains développeurs vont même jusqu'à suggérer d'utiliser cette méthode avec une feuille de style vide pour tout réinitialiser et simplifier l'affichage pour un affichage mobile.
Utiliser des schémas fluides
Malheureusement, il n'est pas facile de savoir à quoi ressemblera votre mise en page sur tous les navigateurs mobiles, car il existe beaucoup trop de périphériques pour pouvoir les suivre tous. Une façon de contourner ce problème consiste à utiliser des dispositions fluides qui s’ajusteront automatiquement à la taille de l’écran.
Une façon d’y parvenir est de éviter de définir des largeurs en pixels et tirez pour les pourcentages ou ems à la place. Par exemple, au lieu de
simplement utiliser
Pour télécharger de superbes mises en page prédéfinies pour mobiles fluides, consultez l’article ci-dessous:
Dispositions liquides CSS parfaites multi-colonnes - compatible iPhone
Masquer le contenu inutile
Si votre site contient de nombreux liens de bas de page ou des espaces publicitaires encombrés, il est judicieux de supprimer ce contenu dans la version mobile. N'oubliez pas que la petite taille d'écran des navigateurs mobiles n'est pas idéale pour cliquer sur de petits éléments ou pour faire défiler des pages volumineuses et remplies de contenu. Essayez de couper votre contenu pour faciliter la navigation dans un seul format de colonne. avec de grandes zones cliquables et des en-têtes clairement définis.
Insérez le code CSS suivant pour tout élément que vous souhaitez masquer:
Dimensionnement correct des images
Les grandes images peuvent ou ne peuvent pas s'afficher correctement dans les navigateurs mobiles et vous pouvez parier qu'elles vont vraiment gâcher un site mobile. Il est recommandé de les dimensionner sur le serveur ou en utilisant CSS à l'aide de la commande max width. Gardez simplement à l'esprit que ce dernier nécessite un peu plus de temps processeur et peut prendre un certain temps à se charger.
S'assurer que les images ne sont pas trop grandes n'est pas votre seul problème. Comme indiqué dans l'astuce précédente, les zones cliquables doivent également être repensées. De nombreux périphériques mobiles utilisent un doigt comme périphérique de saisie principal, ce qui est considérablement moins précis qu'une souris et un pointeur. C'est pourquoi toutes les images qui servent de boutons ou de liens doivent être prises en compte et éventuellement redimensionnées pour être facilement sélectionnables avec un point et une touche au lieu d'un point et d'un clic. Vous ne savez pas à quel point faire un bouton? Examinez la taille de votre doigt pour indiquer si une image peut facilement être sélectionnée sur un appareil mobile.
L'interactivité
Parfois, l'ajout de quelques éléments interactifs à un site le rend beaucoup plus agréable et moins statique / ennuyeux. Toutefois, sur la version optimisée pour les mobiles de votre site, réduisez au minimum l’interactivité (à moins bien sûr que vous ne créiez un jeu ou quelque chose de similaire). L'interaction peut facilement mal tourner sur les appareils mobiles et laisser vos utilisateurs frustrés par tout le travail qu'ils doivent faire. Cherchez des endroits où réduire la saisie dont vous avez besoin des utilisateurs, en particulier dans le domaine de la saisie de texte, car l'utilisation de minuscules claviers peut être l'une des pires parties de l'expérience Web mobile.
Techniques spécifiques à l'iPhone
Beaucoup d’entre vous sont venus à cet article à la recherche d’informations sur le Web mobile en général, mais dans l’espoir de trouver de bons conseils pour optimiser votre iPhone. Je n'aimerais pas décevoir, alors voici certaines choses que vous pouvez faire pour satisfaire le roi des clients Web mobiles.
Ajout d'une icône d'écran d'accueil
iPhone et iPod Touch disposent d'une fonctionnalité intégrée qui permet aux utilisateurs d'ajouter votre site à leur écran d'accueil sous la forme d'une icône. Vous pouvez personnaliser cette icône en plaçant simplement un fichier dans votre répertoire racine intitulé? Apple-touch-icon.png? (assurez-vous que l'image est au moins 57? 57). Vous pouvez également placer l'extrait suivant dans votre code HTML:
Évidemment, vous allez personnaliser le chemin et le nom du fichier pour votre propre image.
Fenêtre de visualisation: Zoom par défaut
Votre site peut comporter un espace blanc qui a fière allure sur un ordinateur de bureau, mais cela ajoutera une étape de zoom supplémentaire aux utilisateurs d’iPhone qui ne souhaitent pas voir cet espace blanc, car cela réduit la lisibilité et la taille du contenu principal. Utilisez l'extrait de code suivant pour zoomer automatiquement sur la largeur de votre contenu.
La? Largeur = 320 ;? détermine le niveau de grossissement du contenu. Définissez ce nombre sur la valeur appropriée pour votre contenu (320 pixels correspond à la largeur de l'écran de l'iPhone dans une orientation verticale).
Feuille de style spécifique à l'iPhone
Si vous voulez créer du CSS qui ne s'applique qu'aux utilisateurs de votre iPhone, utilisez le code suivant:
Cela cible uniquement les appareils avec une largeur d'écran maximale de 480 pixels, à savoir les iPhones et les iPod Touch.
Constructeurs de sites mobiles
Il existe quelques sites qui vous aident à créer un site mobile avec peu de connaissances en HTML et CSS. Le plus prometteur à mon avis est Mobify, mais j'ai également proposé quelques solutions de rechange. Si vous avez essayé l'une de ces méthodes (ou d'autres méthodes), indiquez-nous le pour et le contre et votre impression générale.
Mobify
Mofuse
Wirenode
bMobilisé
Zinadoo
Lectures complémentaires
Découvrez ces autres excellents articles sur la création de sites optimisés pour les mobiles. Chacun de ces éléments m'a aidé dans mes recherches et regorge d'informations supplémentaires.
- Comment rendre votre site Web convivial
- La métamorphose mobile en CSS de 5 minutes
- Rendez votre site Web mobile et iPhone convivial
- 7 conseils pour rendre votre site Web compatible avec les appareils mobiles
- 6 conseils pour optimiser votre site Web pour iPhone
- Rendre un site Web convivial pour iPhone avec CSS
- Principes et directives pour créer un contenu iPhone de qualité
Conclusion
Les conseils ci-dessus ne représentent que quelques moyens de commencer à s’adresser au segment croissant des utilisateurs du Web mobile. Utilisez les commentaires ci-dessous et partagez vos astuces pour l'optimisation mobile. J'ai hâte d'apprendre de vous aussi!