Stratégies pour créer des sites adaptatifs

Aujourd’hui, les sites Web sont consultés sur une gamme variée d’appareils, et avec toutes les tablettes et les PC optimisés pour Windows 8 qui arrivent sur le marché, cette tendance ne peut que s’amplifier. Les sites Web capables de s’adapter en douceur aux différentes caractéristiques d’affichage et méthodes d’entrée utilisateur offrent la meilleure expérience possible au public le plus large possible. Dans cette rubrique, nous allons aborder les stratégies d’utilisation des fonctionnalités dans Internet Explorer qui vous aideront à créer des sites et applications Web attrayants et capables de fonctionner sans problème sur des appareils Windows 8 utilisant des méthodes d’entrée utilisateur et facteurs de forme différents.

Image d’une conception adaptative

Vous connaissez peut-être déjà la conception Web réactive (également appelée conception adaptative). La conception Web réactive consiste essentiellement à faire correspondre le plus fidèlement possible les fonctionnalités de votre site Web aux fonctionnalités de l’appareil sur lequel l’utilisateur affiche votre site —en « adaptant » votre site à l’utilisateur. La conception réactive englobe des techniques telles que les requêtes de média CSS (Cascading Style Sheets), les dispositions de type grille fluide et les images redimensionnables flexibles qui permettent d’obtenir une conception riche mais fluide fonctionnant parfaitement sur de nombreux appareils et navigateurs. Vous pouvez comparer la conception réactive et la conception de sites ciblés pour des tailles d’écran et des agents utilisateur spécifiques, qui peut entraîner un design déformé inesthétique, un sentiment de frustration de la part de l’utilisateur, voire un site Web inutilisable.

Depuis l’invention de l’expression conception réactive par Ethan Marcotte en 2010, sa signification s’est étendue au sein de la communauté Web et inclut désormais toutes les méthodes qui permettent d’obtenir des expériences de site appropriées et délibérées, quelles que soient les dimensions de l’écran, la vitesse de connexion, les fonctionnalités tactiles et autres caractéristiques de l’appareil de l’utilisateur.

Si vous recherchez des ressources de conception Web réactive générales, il existe un grand nombre de très bons articles et de démonstrations susceptibles de vous inspirer, semblable aux suivants :

La suite de cette rubrique examine les nouvelles fonctionnalités qui facilitent la création de sites Web réactifs et adaptatifs dans IE, ainsi que les stratégies visant la prise en charge de tous les appareils IE sur Windows 8 dans vos plans de conception de sites Web adaptatifs plus importants.

Deux points à prendre en compte pour la création de sites adaptatifs : l’affichage et les entrées

L’expérience utilisateur de votre site Web englobe non seulement ce que les visiteurs du site voient mais également ce qu’ils font. La manière dont ils interagissent avec votre site joue un rôle aussi crucial en matière de convivialité globale que la disposition elle-même. Ce que les utilisateurs voient et la manière dont ils interagissent avec votre site Web sont déterminés en grande partie par les caractéristiques d’affichage et les fonctionnalités de saisie de l’appareil qu’ils utilisent pour la navigation.

Il est impossible de concevoir et de tester un site pour toutes les plateformes disponibles et de nombreux propriétaires de sites choisissent de créer plusieurs versions de leur site ciblant quelques combinaisons « plateforme Web + appareil » spécifiques sur le marché. Vu le nombre élevé d’appareils informatiques qui permettent actuellement d’utiliser le Web, que pouvez-vous faire, en tant que développeur Web, pour vous préparer au nouvel écosystème d’appareils Windows 8 ? La réponse à cette question dépend en grande partie de la stratégie du contenu, des ressources de développement et des objectifs globaux de votre site. Toutefois, si votre principal objectif est de proposer une expérience inoubliable à l’audience la plus variée qui soit, vous devez tenir compte des diverses caractéristiques d’affichage et des méthodes d’entrée sur les appareils utilisés pour parcourir et utiliser le contenu Web. Bien que la disposition et la gestion des entrées utilisateur soient des facteurs étroitement liés dans la conception de l’interaction Windows 8, la prise en charge tactile n’implique pas nécessairement certaines caractéristiques d’affichage et vice-versa. Imaginez, par exemple, les diverses expériences suivantes :

  • Un ordinateur portable à écran large sans prise en charge tactile ayant été mis à niveau vers Windows 8 peut exécuter Internet Explorer dans la nouvelle interface utilisateur Windows à sa taille minimale, dont la largeur d’affichage est similaire à celle d’un appareil mobile classique
  • Un ordinateur miniportable sans prise en charge tactile ayant été mis à niveau vers Windows 8 peut avoir un écran de taille similaire à celui d’une tablette tactile courante
  • Un PC Windows 8 tout-en-un doté d’un écran 24 pouces peut être utilisé pour exécuter uniquement des applications du Windows Store  Windows 8 telles qu’Internet Explorer 10 et ne pas disposer d’une souris et d’un clavier

De la même façon, bien qu’IE sur Windows 8 soit disponible dans les deux versions—Internet Explorer dans l’interface utilisateur Windows et Internet Explorer pour le Bureau,—ni les caractéristiques d’affichage, ni la prise en charge tactile ne permettent d’identifier de manière fiable la version d’IE utilisée pour naviguer. Internet Explorer dans l’interface utilisateur Windows peut être redimensionné de la largeur minimale de 320 pixels à la largeur de l’écran de l’appareil hôte. Internet Explorer pour le Bureau peut activer ou désactiver le mode plein écran (via la touche F11). Sur un matériel prenant en charge les interactions tactiles, les entrées tactiles sont prises en charge dans les deux versions. De façon plus générale, il n’existe aucun moyen de savoir par programme si l’utilisateur exécute Internet Explorer dans l’interface utilisateur Windows ou Internet Explorer pour le Bureau.

Habituellement, afin d’assurer la meilleure compatibilité possible de votre site avec plusieurs navigateurs, la pratique recommandée consiste à détecter les fonctionnalités et non les navigateurs pour déterminer quel type d’expérience de site offrir à l’utilisateur. La même stratégie s’applique aux deux expériences de navigation IE sur Windows 8. Les différentes caractéristiques d’affichage et méthodes d’entrée choisies par les utilisateurs de votre site sont les deux principaux points à prendre en compte pour créer des dispositions conviviales et apporter des améliorations éventuelles aux entrées tactiles. En effet, votre site doit pouvoir fonctionner correctement sur une large gamme d’appareils Windows 8.

Stratégies de conception de site adaptatif avec des appareils Windows 8

En résumé, voici un ensemble de meilleures pratiques générales à suivre pour créer des sites adaptatifs avec IE sur Windows 8.

Utilisez la détection des fonctionnalités plutôt que de faire des hypothèses sur les capacités d’un navigateur ou d’un appareil. IE sur Windows 8 est une plateforme Web unique offrant deux expériences d’interface utilisateur distinctes, sans qu’il soit possible de détecter avec laquelle l’utilisateur navigue. Utilisez les requêtes de média et les méthodes de détection tactile pour obtenir des informations sur les caractéristiques d’affichage et les fonctionnalités d’entrée des appareils choisies par l’utilisateur.

Adaptez l’expérience utilisateur de votre site aux caractéristiques d’affichage et aux fonctionnalités d’entrée des appareils. Évitez d’émettre des hypothèses de conception se basant sur des largeurs de fenêtre d’affichage ou des plages de largeurs spécifiques avec des fonctionnalités ou des limitations d’entrée. Réfléchissez plutôt à la disposition de votre site et à la gestion des entrées utilisateur de façon séparée, ou encore mieux, essayez de garder à l’esprit les différentes combinaisons d’écrans et de méthodes de saisie dont peuvent disposer les utilisateurs de Windows 8. Utilisez les requêtes de média et les écouteurs de requête de média pour adapter la disposition et les styles de votre site à une large gamme de caractéristiques d’affichage. Pensez également à utiliser l’adaptation des appareils au format CSS pour remplacer la mise à l’échelle automatique. Suivez les recommandations en matière d’interaction tactile, tirez profit du modèle de pointeur d’IE pour gérer facilement tous les types d’entrée (souris, stylet, entrée tactile et entrée tactile multipoint), et améliorez l’expérience tactile de votre site à l’aide des événements de mouvement.

Testez différentes largeurs et méthodes d’entrée. Durant la conception et de la création de votre site adaptatif, veillez à tester continuellement au moins un ensemble de variables et de combinaisons de base, telle que la matrice de test suggérée dans le diagramme suivant.

Deux tableaux séparés par un x : le tableau des largeurs de fenêtre d’affichage indique 320 pixels, 768 pixels et 1024+ pixels, et le tableau des méthodes d’entrée indique la souris, le clavier, les entrées tactiles et le stylet

Si votre site est déjà conçu pour plusieurs formats spécifiques, proposez-les selon une heuristique générale et permettez aux utilisateurs de passer d’un format à un autre. Si vous avez déjà créé plusieurs versions de votre site en ciblant des classes d’appareils spécifiques sur le marché, utilisez le tableau ci-dessus pour faire correspondre vos expériences de navigation mobile, de navigation sur tablette et de navigation sur le Bureau à différentes tailles de fenêtres d’affichage et méthodes d’entrée utilisateur dans IE sur Windows 8.

Si l’environnement de tablette et l’environnement de bureau sont équivalents du point de vue fonctionnel, préférez l’environnement de tablette avec prise en charge des entrées tactiles. (Sinon, choisissez entre un environnement de tablette et un environnement de bureau.) Et pour garantir la meilleure expérience de site possible à vos utilisateurs, permettez-leur de basculer vers un format différent de celui de l’environnement par défaut.

Rubriques connexes

Affichage et disposition
Adaptation des appareils
Événements liés à l’orientation de l’appareil
Disposition de boîte flexible (« Flexbox »)
Disposition en grille
Requêtes de média et écouteurs
Disposition multicolonne
API d’orientation de l’écran
Gestion des entrées
Préparer votre site aux interactions tactiles

 

 

Afficher:
© 2014 Microsoft