Comment concevoir un site Web mobile convivial en 14 étapes

de Silvio Porcellana - 7 juillet 2016

La publication d’aujourd’hui est longue, prenez donc un café et votre bloc-notes. Nous allons décomposer le processus de conception d'un site Web convivial conçu pour les mobiles. Ce message vous expliquera du début à la fin - à quels types de choses devriez-vous penser lors de la conception d'un site Web convivial pour mobiles!

Pourquoi Mobile Friendly?

Il ya 5 ans, vous auriez peut-être pu ignorer les utilisateurs mobiles, mais ce n’est plus le cas. De plus en plus de personnes ont des téléphones intelligents et les utilisent pour toutes sortes de tâches qui auraient déjà été effectuées sur un PC.

En fait, selon Smart Insights, le mobile pourrait être plus important que le bureau! Bien sûr, cela dépend vraiment de votre créneau, mais ce qui est certain, c’est que pour la grande majorité des entreprises, la téléphonie mobile est importante!

Façons de le faire

Bien, supposons que vous soyez à bord et que vous souhaitiez rendre votre site Web convivial pour les mobiles. Comment faites-vous?

Il y a 3 options:

Conception sensible:

Vous avez essentiellement un site Web, tous les utilisateurs reçoivent les mêmes codes HTML et CSS de base. Toutefois, le site Web est conçu à l’aide d’éléments fluides et de requêtes multimédias, de sorte que son rendu diffère en fonction de la taille de l’écran de l’utilisateur.

Service dynamique:

Lorsque le navigateur d’un utilisateur demande une page sur votre site Web, il envoie un jeton appelé "agent utilisateur" qui indique au serveur quel appareil demande le site. Les sites Web servis dynamiquement utilisent cet agent d'utilisateur pour envoyer un code HTML différent (parfois totalement différent) aux mobiles par rapport aux ordinateurs de bureau. Ceci est plus compliqué que le responsive design et crée des problèmes de référencement, mais cela peut bien fonctionner pour certains types de sites.

Site Web mobile:

Vous avez tous vu cela en action. Les utilisateurs mobiles sont redirigés vers une autre URL - souvent «mob.example.com» ou similaire. En gros, vous avez 2 sites entièrement séparés, et ils peuvent théoriquement être aussi similaires ou aussi différents que vous le souhaitez.

Quelle option choisir

Les options 2 et 3 ont essentiellement le même résultat (bien que l’option 3 soit probablement la plus facile à implémenter), il s’agit simplement de savoir si vous souhaitez ou non que votre site mobile se trouve sur un domaine distinct.

Si votre site mobile a le même contenu et les mêmes pages que votre site principal, la diffusion dynamique peut être une option. Toutefois, si votre site mobile a une structure différente ou de grandes différences de contenu, il peut être préférable d’utiliser l’option 3 au lieu de l’option 2.

La vraie question est de choisir l'option 1 ou l'option 2/3:

L’avantage majeur d’un site mobile distinct est que vous n’avez pas à essayer d’afficher un site pour ordinateur de bureau sur un écran mobile, ce qui est bien sûr un défi. Vous pouvez construire votre site mobile à partir de la base.

Les sites réactifs dépendent du périphérique de l'utilisateur pour effectuer le traitement. Ils doivent télécharger le site complet, puis analyser le code CSS pour afficher uniquement les bits dont le périphérique mobile a besoin.

Par contre, avec un site mobile séparé, le serveur fait le gros du travail. Vous pouvez envoyer à l'appareil mobile uniquement les fichiers CSS et HTML dont il a besoin, mais surtout, vous pouvez envoyer des images plus petites, optimisées pour les mobiles, plutôt que de forcer l'utilisateur à télécharger les images plus grandes à partir de votre site *.

C'est bien sûr bon pour la vitesse de chargement. Plus sur cela plus tard cependant.

* Il existe une solution de contournement pour obtenir un résultat similaire avec un site responsive, mais cela nécessite des connaissances techniques et présente ses propres inconvénients.

Le design réactif est indéniablement un choix populaire, mais voici pourquoi nous pensons qu'un site mobile séparé est souvent un meilleur choix.

Structure du site

Une fois que vous avez décidé comment rendre votre site compatible avec les appareils mobiles, vous devez commencer à réfléchir à la conception du site. Mais avant que nous nous inquiétions de l’aspect réel du site, réfléchissons à ce qu’il doit faire!

Quels appareils?

La première question que vous devez vous poser est de savoir quels appareils vos utilisateurs utilisent. Cela dépendra beaucoup de votre créneau et de l'identité de vos clients. Par exemple, si votre entreprise compte environ 20 personnes, vous pouvez parier que la majorité de votre clientèle utilisera des téléphones intelligents.

Plutôt que de faire des suppositions, consultez vos statistiques d'analyse pour votre site actuel. Vous pouvez rapidement afficher des statistiques sur les périphériques utilisés par vos utilisateurs, leur taille d'écran et leurs logiciels.

Avoir une idée des capacités des appareils de vos utilisateurs aura un impact sur les types de fonctionnalités que vous utilisez sur votre site.

Que veulent vos utilisateurs?

Ceci est une question importante. Les utilisateurs mobiles peuvent vouloir les mêmes choses que les utilisateurs mobiles, mais ils ne peuvent pas. Il est donc important de bien réfléchir à ce qu’ils pourraient rechercher. Avec un site mobile, vous avez peu de place à l'écran, il est donc essentiel que vous montriez aux utilisateurs les informations dont ils ont besoin.

Par exemple, les appareils mobiles n’ont pas assez de place pour un menu complet. Par conséquent, aidez les utilisateurs à trouver facilement les pages dont ils ont le plus besoin.

Vous ne pouvez pas insérer de longues descriptions de produits sur un écran de mobile. Par conséquent, accordez une priorité aux images et à des puces concises.

Qu'est-ce que vous voulez?

Vos utilisateurs doivent passer en premier, mais cela ne signifie pas que vos besoins ne sont pas satisfaisants.