Sites de marque destinés aux appareils mobiles
Je travaille actuellement sur un site Web qui est également censé être optimisé pour les mobiles.
Mon client m'a fourni une présentation de la version mobile de l'apparence du site Web. Réaliser leur souhait de conception n'est pas un problème, mais adapter le design à l'écran est mon problème. En ce moment, je suis confronté à des problèmes concernant la largeur du <body> tag du site, car le design est mesuré sur une largeur de 640px, mais cela laisse un grand écart sur le côté droit de l'écran, par exemple iPhones et Android.
Le site Web est développé en ASP.NET et C #. Nous n'utilisons qu'une seule page maître, l'optimisation peut donc être délicate. Le design qui m'a été fourni est un .psd fichier dont je suis censé simplement découper et prendre des images, etc. directement. Le problème est que toutes les images de navigation, les images de division de contenu, etc. sont toutes dans des largeurs et hauteurs spécifiées, j'ai donc mis la largeur de 640px sur le <body> tag.
Donc ma question est vraiment, quelle est la meilleure façon d'adapter un design à un écran de poche? Dois-je tout oublier sur les pixels, les em et les pouces et aller jusqu'au bout avec% pour la largeur, la taille de la police, etc.? Ou puis-je simplement "copier/coller" la conception fournie et comment forcer les résolutions d'écran sur les téléphones à adapter leur zoom à la largeur de la largeur du corps 640px sans laisser d'espace dans les deux côtés de l'écran?
Lors de la conception d'appareils portables, vous devez comprendre les concepts suivants
Taille d'écran - Taille physique réelle, mesurée comme la diagonale de l'écran.
densité d'écran - quantité de pixels dans une zone physique de l'écran; généralement appelé dpi (points par pouce).
Orientation - orientation de l'écran du point de vue de l'utilisateur. paysage ou portrait
Pixel indépendant de la densité (dp) Unité de pixel virtuelle que vous devez utiliser lors de la définition de la disposition de l'interface utilisateur, pour exprimer les dimensions ou la position de la disposition de manière indépendante de la densité. Le pixel indépendant de la densité équivaut à un pixel physique sur un écran à 160 dpi, qui est la densité de base supposée par le système pour un écran à densité "moyenne".
Pour répondre à votre question: Vous devrez fournir les images découpées en pixels en fonction de la densité d'écran de l'appareil pour lequel vous développez et également tenir compte de l'orientation. Fondamentalement, les densités d'écran sont classées en 3 catégories ldpi/mdpi/hdpi ayant leur propre résolution d'écran. Et selon la densité de l'écran, vous pouvez charger l'ensemble spécifique d'images.
Je me retiens de me plaindre de la conception d'expériences Web, en particulier mobiles, en tant que dispositions PSD à "découper". Vous pourriez envisager doucement de suggérer à vos concepteurs de google "responsive web design" et "mobile first" et de lire les conversations/débats autour des approches de conception pour le web moderne et multi-appareils. Attendez, j'ai dit que je ne piquerais pas, non? Désolé.
Il semble que vous tentiez de déployer une conception à largeur fixe sur une gamme d'appareils mobiles avec différentes largeurs d'écran, largeurs de fenêtres et densités de pixels. Malheureusement, il n’existe pas d’approche unique pour y parvenir. Je suggère de lire l'excellente recherche de Peter-Paul Koch sur les appareils mobiles et les navigateurs sur www.quirksmode.org . Plus précisément, regardez son message " n conte de deux fenêtres ". Portez une attention particulière à la section "Meta Viewport" dans deuxième partie de l'article.
Essayez d'expérimenter certaines des techniques abordées par PPK et assurez-vous de tester sur une variété d'appareils mobiles et de navigateurs.
Bonne chance!
Que diriez-vous d'interroger le facteur de forme/résolution, puis de charger l'ensemble d'images correspondant? Juste une pensée.