La conception d'un site Web mobile est compliquée, car une version mobile d'un site peut ne pas être compatible avec tous les appareils. Les concepteurs doivent être conscients des meilleures pratiques de conception pour que votre présence mobile soit significative et utile.
Les développeurs Web discutent sans cesse de la meilleure façon de créer un site Web optimisé pour les mobiles. Il existe trois méthodes principales pour développer un site Web mobile.
Ceux-ci sont:
- Site Web adaptatif.
- Sites Web mobiles dédiés.
- RESS: la programmation côté serveur restitue CSS et HTML, en fonction du type d'appareil.
Chaque méthode a ses avantages et ses inconvénients. Un développeur Web doit connaître chaque technique pour mettre en œuvre la meilleure solution à la situation.
3 façons de concevoir un site Web mobile
Conception Web réactive (RWD)
RWD s'appuie sur les requêtes de support CSS3 pour aligner la mise en page d'une page Web sur la taille de la zone d'affichage d'un périphérique. Le même code HTML est utilisé pour présenter différentes mises en page de pages Web pour tablettes, appareils mobiles, ordinateurs de bureau et autres gadgets.
Avantages:
- Votre site Web aura un contenu et une balise HTML similaires, afin que les visiteurs mobiles aient la même expérience, quel que soit le type d'appareil qu'ils utilisent.
- Une seule URL facilite la création de liens vers les utilisateurs et le partage de contenu. (Si la page Web est disponible sous plusieurs adresses URL, les utilisateurs peuvent être déroutés.)
Désavantages:
Il n'est pas possible d'optimiser séparément le contenu mobile. Par conséquent, un concepteur utilisant RWD ne peut pas personnaliser le contenu séparément pour les utilisateurs mobiles.
Selon les données de janvier 2013 des archives HTTP, une page Web moyenne représente environ 1,3 Mo. Cependant, la plupart des sites RWD sont comparativement plus grands. Cette taille plus grande diminue les performances des sites mobiles et les ralentit.
Les utilisateurs mobiles sont plus sensibles aux modèles de conception d'interface utilisateur spécifiques aux mobiles. De plus, les utilisateurs mobiles sont habitués au multitâche. À moins que la structure de navigation ne soit personnalisée pour des appareils spécifiques, les utilisateurs peuvent faire face à des problèmes lorsqu'ils tentent d'accomplir plusieurs tâches simultanément.
Sites mobiles dédiés
Cette méthode améliore l'expérience des utilisateurs mobiles en créant un site Web entièrement séparé.
Avantages:
- Simplicité de gestion: des modifications distinctes sont requises pour les sites mobiles et de bureau. Les modifications apportées sont limitées à chaque version. Cela signifie que les modifications destinées à la plate-forme mobile ne sont pas accessibles à partir du bureau.
- Lorsque vous développez un site Web spécifique à un mobile, il devient plus facile de le rationaliser et de l’optimiser spécifiquement pour ce public.
- La structure du contenu et de la navigation peut être personnalisée pour les utilisateurs mobiles.
Désavantages:
Le partage d'une page Web via les médias sociaux devient plus difficile, car avec des sites mobiles dédiés, il existe plusieurs URL pour les pages. Lorsque les utilisateurs d'ordinateurs de bureau cliquent sur des URL mobiles partagés sur des plates-formes de réseaux sociaux, ils peuvent par inadvertance recevoir la version mobile du site plutôt que la version de bureau.
Afin d'éviter les problèmes de contenu en double, le développeur Web doit utiliser les méta-balises rel = "alternative" et rel = "canonical". Si un utilisateur de mobile recherche Google et clique sur une URL de bureau, l'utilisateur visualisera la version de bureau ou sera redirigé vers la version mobile de la page Web. Si la version mobile n'existe pas, l'utilisateur recevra un message d'erreur.
La création d'un site Web totalement différent pour les utilisateurs mobiles signifie que le site sera spécialement conçu pour les utilisateurs mobiles. Cependant, pour atteindre cet objectif, les développeurs Web doivent supprimer les fonctionnalités et le contenu, ce qui s'avère être un cauchemar pour eux.
Site Web adaptatif+ Composants côté serveur (RESS)
Cette méthode dépend de la programmation côté serveur pour fournir du code HTML et CSS personnalisé pour différents périphériques. Le code pour les utilisateurs mobiles sera différent de celui des utilisateurs de bureau.
L’objectif principal de cette mise en œuvre est d’améliorer les performances du site Web. Cette méthode fonctionne bien lorsqu'elle est associée à une conception Web réactive. Par conséquent, cette implémentation peut être appelée Composant côté serveur (RESS) Responsive Web Design +.
Avantages:
- La structure de navigation peut être personnalisée pour différentes tâches effectuées par les utilisateurs de bureau et mobiles.
- Les développeurs peuvent supprimer des éléments de page de HTML et CSS pour obtenir l'affichage souhaité.
- Il est possible de supprimer du code HTML inutile le code JavaScript, ce qui libère les ressources du processeur, la mémoire et le cache des appareils mobiles.
Désavantages:
- Le HTML dynamique augmente la charge sur le serveur.
- La détection de périphérique ne peut pas être invoquée.
- HTML et CSS sont optimisés pour les performances mobiles. La version de bureau utilise plus de requêtes HTTP et de scripts Java.
Quelle méthode choisir?
La décision de concevoir un site optimisé pour les appareils mobiles dépend des produits que vous vendez, de votre public cible, de l'investissement requis, de votre concurrence, des taux de conversion, etc. La méthode de conception qui conviendra le mieux dépend en grande partie des formats d'écran, des systèmes d'exploitation, des navigateurs, etc. résolutions.
La plupart des sites Web de conception Web réactifs ne sont pas implémentés de manière optimale. Par conséquent, leur chargement prend plus de temps. La concurrence étant féroce, vous risquez de perdre des clients si votre site fonctionne plus lentement. Un utilisateur basculera simplement sur un autre site Web dont l’ouverture prend moins de temps. Bien qu'il soit possible de créer des sites Web avec des temps de chargement plus courts avec des sites mobiles dédiés, cette implémentation présente également plusieurs inconvénients.
Le SRSE offre les avantages de RWD en surmontant ses deux principaux inconvénients. Le principal inconvénient de RESS est que la détection de périphérique n'est pas fiable. Vous devez tester fréquemment les nouveaux périphériques pour vous assurer que le processus continue de fonctionner correctement.
Certains services, tels que DeviceAtlas, WURFL et autres, peuvent détecter de nouveaux appareils. Ce sera une aide précieuse pour mettre à jour de nouveaux périphériques dans votre base de données.
La conception Web mobile ne réussit que lorsqu'un site Web est correctement affiché sur un appareil mobile. Bien que c’est une tâche ardue pour les concepteurs de représenter toutes les parties essentielles d’un site pour ordinateur de bureau dans une petite fenêtre mobile, chaque jour de nouvelles techniques font leur apparition pour améliorer les sites Web mobiles, les rendre plus rapides et plus complets.
Photo de site Web mobile via Shutterstock
15 commentaires ▼
