Principes de base de la conception de sites Web mobiles - mannequins

Lors de la conception ou de la refonte d'un site Web, vous devez envisager de créer d'autres versions mobiles du site. Ces versions ne doivent pas être confondues avec les applications natives qui résident sur vos téléphones intelligents (celles que vous téléchargez depuis les boutiques d'applications). Les téléphones intelligents ont tous des navigateurs Web et peuvent rendre votre site Web avec plus ou moins de succès. Essentiellement, vous devez faire une liste des périphériques que vous allez prendre en charge et concevoir des sites alternatifs pour répondre à ces cibles multiples. Autre que cela, la contrainte la plus évidente qu'ils partagent tous est la petite taille d'écran des fenêtres de navigateur de téléphone.

Vous pouvez ajouter du code sur votre site qui détecte l'appareil d'un utilisateur et le redirige vers la version appropriée de votre site Web. Avec autant de périphériques à choisir, les développeurs créent généralement divers profils de périphériques et regroupent de nombreux périphériques dans l'un de ces profils. Les profils sont généralement déterminés par la taille de l'écran:

* Microscopique: 132 pixels ou moins
* Minuscule: 240 pixels ou moins
* Petit: 320 ou moins

Compte tenu de ces espaces restreints pour offrir votre expérience Web, il n'est pas inutile de proposer des conceptions alternatives.

Regardez les pixels pour les sites Web mobiles

Ce qui est unique aux appareils, c'est qu'ils n'ont plus de pixels de 72 ppp. Beaucoup de ces appareils ont des résolutions plus élevées. C'est là que les choses deviennent difficiles, car pour les sites Web et CSS, vous devez toujours définir des éléments en pixels qui sont 1/72 pouces de large. Cette mesure n'a rien à voir avec la densité de pixels des appareils, de sorte que le pixel est maintenant une unité de mesure relative.

Néanmoins, si vous deviez configurer un modèle Photoshop pour simuler un écran d'iPhone, vous utiliseriez 640 x 960 à 72 dpi. Cette taille d'écran vous donne le bon "affichage de la rétine" que vous obtiendrez sur un iPhone. Mais ne soyez pas tenté de presser beaucoup de texte et d'images dans cet espace. C'est clairement une taille de toile beaucoup plus grande que le téléphone. Pour avoir une idée de la façon dont votre design s'affichera réellement sur le téléphone, effectuez un zoom arrière de 50% sur votre document Photoshop.

Simplifiez la navigation sur un site Web mobile

N'oubliez pas qu'il n'y a pas de souris pour se déplacer. De nombreux utilisateurs mobiles ont un clavier ou un écran tactile. Il n'y a pas beaucoup d'espace pour afficher tous les éléments de navigation que vous pourriez normalement inclure dans le site principal. Pour cette raison, les versions mobiles des sites ont souvent un schéma de navigation simplifié.

Souvent, ces sites réduits sont frustrants pour les utilisateurs en déplacement qui ont besoin d'accéder à une certaine zone du site normal.C'est pourquoi il est recommandé d'inclure un lien pour afficher le site principal.

Crédit: © Cable News Network. Turner Broadcasting System, Inc.

Réduire la taille des fichiers

Lorsqu'ils n'utilisent pas le Wi-Fi pour naviguer sur le Web, les appareils mobiles enregistrent un grand nombre de mégaoctets sur le plan de données d'un utilisateur, avec une limite mensuelle. Par conséquent, plus vous pouvez réduire la taille des fichiers et les dimensions des composants d'interface et de contenu, non seulement votre site téléchargera plus rapidement sur les réseaux cellulaires, mais il marchera légèrement sur le budget d'allocation de transfert de données mensuel de l'utilisateur. Vous pouvez également supprimer le code inutile, les commentaires et les balises facultatives pour accélérer les choses.

Orientation horizontale et verticale

La navigation mobile est un environnement fluide. Entre la variété des densités de pixels et la possibilité d'afficher les sites dans des orientations horizontales et verticales, il est préférable d'adopter une mise en page flexible pour votre site Web adapté aux mobiles, par opposition à une mise en page à largeur fixe. En ne spécifiant pas la largeur du site et en le laissant remplir naturellement l'espace disponible, vous adaptez votre site plus efficacement à l'environnement de visualisation mobile. En outre, utilisez la couleur CSS et les graphiques en mosaïque, au lieu des images uniques liées aux pixels, pour remplir vos composants.

Utiliser une mise en page à colonne unique sur un site Web mobile

Même si les téléphones intelligents sont plus grands que leurs prédécesseurs, ils ne sont toujours pas assez volumineux pour prendre en charge plus qu'une seule colonne. Il s'agit d'une modification de conception importante à apporter à votre conception Web principale, mais qui en vaut la peine en termes d'amélioration de la convivialité. Une mise en page de contenu à une colonne qui utilise toute la largeur de l'écran (quelle que soit l'orientation) évite à l'utilisateur de faire un panoramique ou de zoomer. Laissez le contenu se déplier à la place. Les utilisateurs acceptent beaucoup plus de faire défiler la page que de devoir se déplacer côte à côte et zoomer.

Le site mobile de Crew Clothing Company est un excellent exemple de site mobile de commerce électronique complexe qui utilise une navigation simplifiée. système et une disposition de colonne unique pour emballer dans beaucoup de fonctionnalités. En outre, ils fournissent également un lien clair pour afficher le site principal au cas où les utilisateurs ont besoin de fonctionnalités supplémentaires qui ont été retirées de la version mobile.