Share
Aujourd'hui, je vais récapituler quelques considérations concrètes à prendre en compte pour optimiser la conception de votre site Web sur une tablette tactile..
En mars, j’ai écrit un article intitulé Comment l’iPad (et les tablettes) sont au cœur d’une nouvelle ère de la conception Web. Dans cet article, je me suis penché sur l'iPad - une plate-forme que j'utilisais quotidiennement depuis environ dix mois - et sur la façon dont il avait changé les considérations du concepteur de sites Web moderne. Avec la montée en puissance des tablettes (ou plutôt de l'iPad), les entrées tactiles sont beaucoup plus utilisées lorsque vous naviguez sur le Web. C'est une histoire différente des smartphones, qui ont souvent un site tactile spécialisé.
Dans cet article, j'ai examiné les concepts de conception pour les tablettes, tels que la conception de nouvelles résolutions. Bien que très similaire, cet article couvrira des considérations que vous devriez faire pour toucher dispositifs entraînés.
L’une des considérations les plus importantes est peut-être de garder à l’esprit que le doigt humain n’est pas aussi précis que le curseur contrôlé par une souris ou un trackpad. Prenez votre doigt et maintenez-le sur votre écran à côté de votre curseur. Il est assez clair que le type d’action précise réalisable avec une souris n’est tout simplement pas possible avec des entrées tactiles.
Pour cette raison, de nombreuses applications Web ont maintenant des équivalents iPad natifs qui conviennent mieux à la précision d'un doigt. Bien sûr, vous n'avez pas besoin de développer une application. En fait, obliger vos utilisateurs à utiliser une application peut les détourner. La solution à retenir pour ce point est simplement de s’assurer que les zones clés telles que votre navigation n’ont pas besoin d’être agrandies pour que les utilisateurs puissent y accéder via une interface tactile..
Pour obtenir une bonne convivialité à la fois au toucher et à la souris, les concepteurs doivent faire des compromis sur le "juste milieu"; tout doit pouvoir être touché avec le doigt de l'homme, mais ne doit pas sembler excessivement grand lorsqu'il est visionné avec une configuration de souris et de PC plus traditionnelle.
Après avoir lancé les deux sites sur un iPad, il est évident que le site d’Apple offre la meilleure navigation. Bien que les deux fonctionnent bien avec une souris, le menu d'Apple est clairement le plus facile pour le toucher, tandis que celui de la BBC exige beaucoup plus de précision.. Lorsque j’ai écrit mon article en mars sur la conception Web pour iPad, j’ai écrit cette ligne: "Les concepteurs doivent atteindre le" juste milieu "? . je reprends ça.
À moins que votre conception Web ait expressément besoin d'une version personnalisée pour les interfaces tactiles, il n'est généralement pas recommandé de segmenter vos visiteurs avec différentes versions d'un site. Si vous disposez de plusieurs versions pour différentes plates-formes, il sera probablement plus difficile à maintenir, mais plus important encore, cela rompra la connexion établie par les utilisateurs entre la navigation sur votre site sur un ordinateur de bureau et celle sur une tablette. Si la situation est différente, ils doivent apprendre une deuxième méthode de navigation qui n’aide personne..
Si vous devez créer une version spécifique à l'iPad, indiquez toujours un itinéraire de retour pour que les utilisateurs choisissent d'afficher le site complet..
Jetez un coup d'œil à votre conception et réfléchissez à ce qui en fait ce qu'elle est. Vous avez sans doute utilisé HTML et CSS, mais avez-vous utilisé Flash ou une autre technologie? La meilleure façon de prendre en compte le plus grand nombre de plates-formes est de s'en tenir aux normes HTML et CSS, qui sont conformes aux normes, et d'éviter en particulier l'utilisation de technologies nécessitant des plug-ins de navigateur ou des logiciels supplémentaires..
Heureusement, HTML5 fournit un ensemble d'outils formidable pour la création d'éléments interactifs et multimédias qui fonctionneront de manière transparente sur une tablette et les principaux navigateurs de bureau de la génération actuelle. Je pourrais susciter la controverse en suggérant ceci, mais (en ce qui concerne la conception Web), essayez d'éviter Flash à tout prix. Non seulement il présente de nombreux problèmes sur le bureau, mais l'iPad à majorité partagée ne le prend pas en charge, pas plus que ceux qui utilisent l'interface utilisateur de Metro de Windows 8.
Vous devez utiliser HTML5 en général pour un certain nombre de raisons, outre le fait qu'il est plus susceptible de fonctionner instantanément sur une tablette. Les médias tels que l'audio et la vidéo fonctionnent très bien avec HTML5 et sur diverses plates-formes. J'ai été surpris par certains des éléments HTML5 que j'avais vus lorsque je faisais des recherches sur une rafle récente, car ils fournissaient des effets similaires à ceux de Flash, mais sans les tracas et l'exclusion liés à iOS..
Naturellement, vous devez vous assurer que tout votre code est écrit conformément aux normes, comme tout site Web, orienté iPad ou autre..
Un grand nombre de services populaires, y compris YouTube, offrent automatiquement des lecteurs vidéo compatibles avec HTML5 à la fois sur leur propre site et lorsqu'ils sont intégrés sur un autre. Dans ce cas, cette vidéo est intégrée à un blog et est lue de manière transparente sur un iPad.. Bien sûr, il y aura des exceptions à cela, mais en général, vous devriez envisager de concevoir des résolutions d'environ 1024 pixels pour qu'elles tiennent parfaitement sur une tablette. Les systèmes de grille de la plupart des sites Web totalisent une largeur d’environ 960 px de toute façon, cela ne devrait donc pas être un gros problème à mettre en œuvre. Si vous choisissez d'ignorer ce conseil, votre site Web finira probablement par être réduit pour s'adapter à la largeur du navigateur de la tablette, ce qui obligera l'utilisateur à effectuer un zoom avant. Cela laisse beaucoup plus de zoom avant et arrière et de balayage. autour de trouver des choses, ce qui n'aide personne.
La solution au problème se présente sous la forme de CSS adaptatif, qui peut changer de style en fonction de la plate-forme, du navigateur et de la résolution. J'ai déjà expliqué que l'idée de créer une version unique d'un site Web ciblée sur l'iPad ne me plaisait pas vraiment, mais la modification de certains styles pour les utilisateurs d'iPad ne devrait pas poser de problème. Malheureusement, cela laisse beaucoup plus de travail, mais peut parfois être une simple étape qui apporte des améliorations majeures.
Si vous souhaitez concevoir simultanément plusieurs résolutions ou simplement modifier des styles triviaux entre plates-formes (par exemple, modifier la reconnaissance des liens sur un iPad par rapport à un ordinateur de bureau), une poignée de services vous aidera, y compris Adapt.js. Assurez-vous également de lire le superbe article sur les mises en page adaptatives de Smashing Magazine.
iOS a ce moyen génial de mettre en signet un site Web sur votre page d'accueil. Il ressemble donc à un lien permettant d'ouvrir une application. La forme la plus élémentaire consiste à ajouter une petite icône à afficher sur l’écran d’accueil lorsqu’il est enregistré par un utilisateur. Ceci est réalisé avec une seule ligne de code:
Remarque: Cet extrait ajoutera automatiquement le gloss de style Apple à votre icône. Échanger apple-touch-icon pour apple-touch-icon-precomposed enlever ce brillant.
Il existe d’autres balises méta, normalement inutilisées, qui peuvent être appliquées à votre conception pour l’améliorer lorsqu’elle est enregistrée sur l’écran d’accueil de l’iPad. Par exemple, la ligne ci-dessous masquera l’adresse et la barre de favoris et affichera la page Web en plein écran..
Ce ne sont que deux des extraits disponibles et vous devez absolument consulter le didacticiel MobileTuts + sur ce sujet. Celles-ci ne font que peu de différence pour votre site sur des plates-formes non iOS, mais pourraient en améliorer l'expérience sur iPad si votre application leur convenait.
Avec l'utilisation croissante de tablettes, dont la plupart ont un accéléromètre intégré, un nouveau type de pli est introduit. Alors que nous avons écrit sur le décès de la bergerie, nous en introduisons une nouvelle avec l'augmentation du nombre de comprimés utilisés.
Lorsqu'une tablette change d'orientation, la vue entière d'une page Web peut être déformée. Comme pour la prise en charge de plusieurs résolutions de navigateur, vous devez également vous assurer que leur site Web représente les multiples résolutions possibles d'une seule tablette, celle de ses orientations portrait et paysage..
L'élément de la liste de contrôle ici est de s'assurer que vos informations clés sont visibles sans glisser lorsque vous les affichez en mode paysage et portrait. Ceux-ci peuvent fournir des instantanés radicalement différents de votre site. Essayez donc de les tester dans les deux orientations pour vous assurer que tous les utilisateurs d'une tablette spécifique pourront voir la meilleure représentation de la conception de votre site et de son contenu..
Le site Web de CNN orienté portrait et paysage dans Mobile Safari. Pour que votre site fonctionne sur un iPad, il est important de tester votre site sur une interface tactile et de déterminer: est-ce si simple? Si vous en avez besoin, visitez un Apple Store, mettez de côté l'un des enfants sur Facebook et chargez votre création..
Si vous n'avez pas d'iPad, ni accès à un magasin avec un présentoir, mais que vous avez un Mac, téléchargez Xcode, ouvrez le simulateur iPad et testez-le comme par exemple pour la résolution et l'orientation..
Xcode est un téléchargement gratuit pour les utilisateurs de Mac OS X Lion. Il propose des simulateurs iPhone et iPad qui vous permettent en gros de voir comment votre site apparaît dans différentes résolutions.. Les tablettes ont définitivement changé de design Web, sans doute pour le meilleur et il est de plus en plus important de les adapter lorsque nous concevons de nouveaux sites. Un utilisateur qui visite d'abord votre dessin sur son iPad, seulement pour constater qu'il ne fonctionne pas, nécessite beaucoup de défilement ou une autre frustration, peut être renvoyé à vie à cause de l'impression qu'il en résulte..
J'ai certainement visité de nombreux sites Web sur mon iPad au cours des 16 derniers mois et en ai expérimenté un peu en travaillant avec un design spécifique à l'iPad (comme dans le conseil n ° 4). Suivez ces six conseils et vous devriez être prêt à utiliser un design compatible avec l'iPad. Tant que cela fonctionne techniquement, ne nécessite pas une tonne de zoom et / ou de défilement et peut être utilisé avec un doigt, vous êtes sur la bonne voie pour accueillir un créneau précieux du marché de la navigation.
Accentsconagua