Bien que le nombre de sites Web sans optimisation mobile diminue, il en reste certains conçus uniquement pour les ordinateurs de bureau. Malheureusement, le précédent service Web « mobilisateur » de Google a été interrompu. Le successeur spirituel du service est Google Weblight, conçu autour de l'optimisation des connexions lentes plutôt que de la révision des sites pour une visualisation mobile. Au-delà du service de Google, il existe un certain nombre de pratiques et d'outils qui doivent être pris en compte lors du développement d'un site en pensant aux mobiles.
Pas
Partie 1 sur 2: Expérimenter avec Google Weblight
Étape 1. Analysez le fonctionnement de Weblight
Weblight est un algorithme créé par Google pour fournir aux utilisateurs des chargements de page plus rapides et plus légers dans des conditions de réseau médiocres. Cela signifie que Weblight n'a pas d'interface utilisateur et fonctionne sur le backend. Les pages sont dépouillées de leurs éléments les plus complexes, offrant une expérience simplifiée et légère, plutôt qu'une expérience explicitement optimisée pour la plate-forme mobile.
Étape 2. Testez les modifications du site avec Weblight
Sur votre appareil mobile, ajoutez simplement l'URL complète de votre site à la fin de l'adresse Weblight (par exemple, si votre site Web est "mywebsite.com", vous entrez https://googleweblight.com/?lite_url=https://mywebsite.com). La page chargera une version simplifiée mais fonctionnelle d'elle-même. Avec les éléments supprimés, certains sites peuvent apparaître beaucoup mieux sur les écrans des appareils mobiles.
Étape 3. Reconnaître les limites
Gardez à l'esprit qu'il ne s'agit pas d'un outil de conversion explicite conçu pour l'interaction avec l'utilisateur. Bien que la saisie manuelle du site Web puisse être utilisée à la rigueur, Weblight est conçu pour la vitesse et non pour la convivialité.
Partie 2 sur 2: Conception pour la compatibilité mobile
Étape 1. Gardez à l'esprit les limitations des appareils mobiles
Les appareils mobiles partagent quelques aspects qui les distinguent de leurs homologues de bureau. Ces fonctionnalités de base devraient être les principales considérations lors de la création d'un site pour la consommation mobile.
- Petits écrans et verticalité: Bien que les résolutions d'écran sur les appareils mobiles s'améliorent constamment, la taille et le facteur de forme restent une préoccupation pour la conception du site. Concevoir un site en une seule colonne est préférable pour les téléphones (les tablettes peuvent souvent utiliser des sites de bureau sans trop de problèmes).
- Interfaces tactiles: les éléments de la page doivent être placés en tenant compte de la taille d'un doigt. Les éléments qui utilisent le survol de la souris doivent être minimisés ou repensés pour le toucher (par exemple, les menus déroulants).
- Débits de données: l'un des grands avantages des appareils mobiles est leur utilisation en dehors de la portée du wifi, mais les connexions de données sont généralement plus lentes et moins fiables. Les interfaces utilisateur (UI) doivent rester simples et le contenu doit être visible et accessible. Trop d'encombrement ralentira les temps de chargement et rendra la navigation difficile.
Étape 2. Utilisez un service de système de gestion de contenu (CMS)
Pour ceux qui développent avec moins de ressources, l'utilisation d'un service CMS comme Wordpress ou Squarespace est une excellente option pour une conception mobile à faible coût et conviviale. Les thèmes qui utilisent une conception Web réactive fourniront le modèle le plus simple pour un site mobile.
La conception Web réactive est une théorie de la conception Web qui favorise l'utilisation d'éléments de conception fluides pour permettre des transitions en douceur de la conception et de la convivialité sur toutes les plateformes
Étape 3. Testez les écrans des appareils mobiles à l'aide du logiciel de bureau
Il existe un certain nombre d'applications Web gratuites qui vous permettent d'émuler des appareils mobiles pour tester l'esthétique et la fonctionnalité d'un site Web. L'utilisation de ces outils est aussi simple que de sélectionner l'appareil de test souhaité, puis d'accéder au site Web cible à prévisualiser. La plupart incluront des outils pour des variables telles que l'orientation de l'écran, la densité de pixels ou même la sélection du navigateur. Voici quelques exemples populaires:
- Émulateur de mode appareil Chrome
- mobilephoneemulator.com
- screenfly (un sous-ensemble de quirktools)
- mobiletest.me (abonnement payant)
