Il n’est pas surprenant qu’un récent rapport de l’agence des Nations Unies, le Union internationale des télécoms , a prédit qu'il y aura plus d'abonnements mobiles sur la planète que dans les 9 prochains mois. La «révolution des smartphones» est pour nous incontournable et, en tant que telle, le design web mobile a explosé ces dernières années.
Cela signifie que les développeurs Web ont dû se familiariser avec la conception de sites mobiles s'ils souhaitaient être compétitifs et pérennes pour leurs activités. Gardant cela à l’esprit, j’ai quelques astuces pour donner aux développeurs un point de départ, certaines choses étant à garder à l’esprit avant de continuer.
Un rapide coup d’œil sur la progression des appareils mobiles depuis l’introduction de l’iPad confirmera que la technologie mobile évolue rapidement et que, pour cette raison, il est judicieux d’envisager une conception évolutive.
Cela signifie que suivre les dernières tendances est essentiel si vous voulez vous assurer que le site sera viable dans quelques années. Le design réactif est bien sûr à la mode en ce moment et il est probable que cela fera partie de votre plan.
Bien qu'il soit prudent de supposer que la plupart de vos visiteurs auront des smartphones, cela vaut la peine de considérer que tout ne va pas, et que vous devrez peut-être travailler cela dans la conception. Cela vaut la peine de faire une recherche sur le public cible lors des étapes de planification, afin de pouvoir vous familiariser avec les périphériques communs utilisés, ainsi que le comportement des utilisateurs.
Les internautes mobiles n’accèdent pas nécessairement aux sites Web en déplacement et il faut en tenir compte. Souvent, la navigation mobile se fait en attendant; dans le train, dans la voiture ou même sur le canapé à la maison.
Cela signifie que supprimer le design pour qu'il soit trop simpliste pourrait être contre-productif. Si vous avez un site dénudé avec peu de contenu, cela pourrait être rebutant, car votre site ne fournit rien de très réel et pourrait être considéré comme une simple bannière publicitaire surdimensionnée.
Mobile est utilisé autant, sinon plus, que le bureau pour la navigation sur Internet. Tenez-en compte lors du processus de conception et assurez-vous que votre site est facile à utiliser, mais riche en contenu.
L'optimisation des sites Web mobiles est également essentielle, en particulier pour les pages de destination, car elles constituent le point d'entrée sur le site Web. Cela signifie qu'un site Web mobile doit être optimisé pour l'utilisateur, ainsi que le moteur de recherche, pour offrir une expérience de navigation simple, du texte clair, des formulaires en un clic et des métadonnées et balises alt pertinentes.
Les tailles de fichiers doivent être considérées en termes de poids et un appel à l'action fort doit être inclus sur les pages de destination. Si vous devez utiliser des formulaires, gardez-les aussi simples que possible, avec le moins de champs possible afin que l'utilisateur ne soit pas frustré et quitte.
La même chose vaut pour les actions; gardez-les simples et n'utilisez que lorsque cela est nécessaire. Même s’il est intéressant d’avoir un système de navigation sophistiqué, si le système est inutilisable, attendez-vous à un taux de rebond élevé.
Lorsque des boutons doivent être utilisés, assurez-vous qu'ils réussissent le «test du pouce», ce qui signifie que vous pouvez facilement appuyer sur un bouton avec votre pouce, sans toucher à un autre contenu susceptible de vous amener à une page indésirable.
L'optimisation est quelque chose dont il faut tenir compte lors de la création d'un site Web réactif. Beaucoup de débats ont fait rage récemment sur la façon dont le design réactif ralentit le web et si cela signifierait essentiellement la disparition des sites réactifs. Cependant, il existe des techniques de chargement conditionnelles qui peuvent aider à accélérer un site pour garantir que les appareils ne téléchargent pas automatiquement la version complète du bureau à chaque fois.
Les ressources CSS et JavaScript doivent être compressées et de nombreux logiciels open source sont disponibles pour vous aider. Par exemple, UglifyJS peut être utilisé avec JavaScript pour compresser du code et Boussole peut être utilisé pour créer un balisage plus propre, ainsi que des sprites et des extensions, sans trop de difficultés et de travail.
Lors de l'utilisation de responsive design, l'une des choses clés à définir au départ est la grille et vos points d'arrêt. Encore une fois, il y a beaucoup outils en ligne cela peut vous aider à définir les colonnes et leur largeur et les gouttières.
Certains développeurs aiment définir des points d'arrêt basés sur la résolution, mais ce n'est pas vraiment la meilleure solution car il y a tellement d'appareils mobiles sur le marché et les résolutions changent avec le temps.
Cela signifie que les points d'arrêt doivent être basés sur la conception et le contenu, plutôt que sur la résolution. Pour tester les points d'arrêt et les grilles, la fenêtre du navigateur peut être utilisée pendant le projet de conception pour voir comment le contenu se comporte lors du redimensionnement.
Idéalement, il devrait s'écouler naturellement et vous pouvez utiliser autant de points d'arrêt que nécessaire pour y parvenir.
Comme vous le savez, tous les systèmes d'exploitation mobiles ne sont pas créés de la même manière. Il est donc utile de consulter les consignes d'utilisation, par exemple, pour Android et iOS, ainsi que les navigateurs pouvant être utilisés.
Gardez à l'esprit que les utilisateurs naviguent sur une variété de systèmes d'exploitation et que certaines seront d'anciennes versions, il est donc utile de s'assurer que le site Web mobile est rétrocompatible. Ici, il est utile d'examiner l'analyse du site principal, le cas échéant, car vous pourrez voir sur quels périphériques votre public accède au site.
Bien entendu, l’analyse des données après achèvement du site vous aidera également à apporter les modifications nécessaires et à apprendre pour l’avenir.
Comme nous le savons tous, le contenu est encore une fois le roi du Web et la planification de modules de contenu est donc importante. Le comportement des modules de contenu devra être défini afin de s’assurer qu’ils s’affichent correctement lors de la navigation et de l’action de l’utilisateur.
Cela signifie que vous devez examiner et définir la manière dont le contenu s'affiche lorsque vous basculez entre un écran de bureau et un écran mobile afin de déterminer comment les modules vont s’empiler et se réorganiser eux-mêmes.
À cet égard, il est souvent plus facile de bien comprendre la situation au stade de la planification. Faites un croquis sur la manière dont vous envisagez d’afficher le contenu, puis expliquez comment cela peut être réalisé.
Cependant, essayez de ne pas trop vous attarder à tout définir. Alors que vos pages principales ont besoin de wireframes, cela ne signifie pas nécessairement que chaque page le fera. La création d'un ensemble maître pour les tailles d'écran et l'orientation devrait vraiment suffire.
Construisez d'abord un prototype et testez-le en profondeur pour vous assurer que tous les aspects fonctionnent. Il est également sage de garder l’utilisateur en tête lors des tests, en veillant à ce que la navigation soit simple et, de préférence, avec un maximum de trois couches. Essayez de trouver quelqu'un qui n'a pas l'esprit technologique, mais utilise différents appareils pour tester le site.
La conception de sites Web mobiles est un défi nécessaire à relever en tant que concepteur, afin d’offrir un service complet au client. Comme beaucoup de choses dans la vie, l'un des aspects les plus importants est la planification afin que vous ayez une idée claire de la manière d'aller de l'avant.
Une planification efficace et la prise en compte de l'utilisateur vous aideront à surmonter la plupart des obstacles que vous rencontrerez, et des tests approfondis vous permettront de surmonter le reste. Pensez réactif, rapide et simple, avec un excellent contenu utile et vous ne pouvez pas vous tromper.
Image / vignette en vedette, image web mobile via Shutterstock.