Découvrir le design responsive

Étudier un site responsive

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Analysez le fonctionnement d'un site responsive pour comprendre et déterminer quels seront les axes d'adaptation et les fonctionnalités destinées aux différents périphériques.

Transcription

Avant de commencer à parler de techniques et de stratégies spécifiques, prenons un moment ensemble pour explorer un site responsive en action, afin que vous puissiez voir comment ces concepts vont être appliqués. Pour ce faire, je vais vous montrer une démo qui a été créée par le talentueux Brad Frost pour son tutoriel HTML5 Robes. Vous allez pouvoir consulter cette démo en suivant le lien qui s'affiche. Ordinateur de bureau. Vous voyez qu'il s'agit d'une page qui présente des produits, il s'agit bien entendu d'une page fictive, et la première chose que l'on peut comprendre c'est que lorsque l'on va redimentionner la fenêtre du navigateur, eh bien vous voyez que cette page va s'adapter à la taille de l'écran. Alors bien entendu, ce n'est pas la seule chose qui va falloir vérifier lorsqu'il s'agit d'un site responsive. Il va falloir voir comment ce site va s'adapter aux différents autres appareils, notamment des périphériques mobiles. Ici nous avons une page qui est centrée sur l'écran, elle est conçue de manière à pouvoir s'adapter à une large gamme de résolutions de bureau. Nous avons un menu qui se trouve en haut et nous avons en dessous un produit avec les détails du produit et un certain nombre d'images sur lesquelles on peut cliquer, et qui vont afficher les détails du produit qui est mis en vente. On peut ici passer des commandes, ajouter au panier. Et puis en-dessous, nous avons des produits qui sont similaires, puis des commentaires clients. Au bas de la page, nous trouvons une navigation miroir qui permet de se déplacer dans les différentes sections du site. Voyons donc maintenant comment fonctionne ce site sur une tablette et sur un téléphone. Ici nous sommes sur une tablette. Aujourd'hui les écrans des tablettes sont suffisamment grands et ont suffisamment de résolution pour afficher la page de façon à peu près identique, Vous constatez par exemple que l'on va pouvoir, sur une tablette, faire défiler les images grâce au doigt, en les faisant glisser. C'est une fonctionnalité que nous n'avions pas sur l'ordinateur de bureau, où il fallait cliquer. Nous avons donc ici exploité une fonctionnalité supplémentaire. Voyons maintenant ce qui se passe sur un écran de plus petite taille, sur un téléphone portable, un iPhone. Sur un téléphone portable, où l'écran est radicalement beaucoup plus étroit, vous voyez que la mise en page change de façon spectaculaire. Tout va être condensé sur une seule colonne. Et les choses vont pouvoir être présentées de façon à ce qu'elles puissent s'intégrer sur un écran plus petit d'un téléphone portable. Nous constatons également que, en haut, le menu, qui ne pourrait pas tenir à côté du logo, est dépliable en accordéon et qu'il y a la prédominance d'un moteur de recherche qui va permettre aux utilisateurs de trouver les articles qu'ils recherchent. La navigation au niveau de l'image s'opère de la même façon que sur une tablette. Il s'agit de pouvoir faire glisser les images avec le doigt, mais nous avons également un certain nombre de fonctionnalités qui vont être des fonctionnalités spécifiques aux périphériques mobiles. Par exemple, lorsque l'utilisateur va vouloir passer une commande, mettre un produit dans le panier, vous voyez que lorsqu'il va appuyer ici sur la quantité, on va lui proposer directement un clavier avec les chiffres qui vont lui permettre de saisir la quantité voulue. Et puis lorsque, à l'inverse, il va cliquer sur la taille, où il s'agit d'un menu déroulant, eh bien ce menu déroulant va apparaître en bas de l'écran. Vous voyez qu'il s'agit de fonctionnalités qui sont des fonctionnalités spécifiques aux mobiles. Il y a également une autre fonctionnalité qui est intéressante, qui ne va pas fonctionner ici puisqu'on est sur un site de démonstration, mais vous avez un Fime Near Buy, qui se trouve juste en dessous la mise en panier, mais qui permettrait d'afficher sur une carte des magasins qui seraient à proximité de l'endroit où se trouverait l'utilisateur. Et puis enfin, si nous faisons défiler la page vers le bas, vous remarquez que les produits similaires et les commentaires clients se trouvent dans des accordéons, ce qui permet de raccourcir la hauteur de la mise en page et de pouvoir accéder directement au menu qui se trouve en bas, et également à une fonctionnalité intéressante qui est celle de pouvoir déclencher une numérotation téléphonique. Vous voyez qu'en bas, si l'utilisateur appuie sur Call 800-800 etc., eh bien le téléphone portable, puisque nous sommes sur un téléphone portable, va composer ce numéro téléphonique et va mettre l'utilisateur en liaison avec un conseiller client. Alors bien entendu, ceci n'est qu'un bref aperçu des fonctionnalités responsive sur cette page. Il y a bien d'autres choses dans l'envers du décor que nous pourrions explorer, mais plutôt que de nous concentrer sur la façon dont cette page a été construite, concentrons-nous surtout sur le pourquoi. Simplement, le concepteur a répondu au contexte pour lequel il s'est attaché à créer la meilleure expérience utilisateur adaptée à un environnement. Alors bien souvent, nous allons être obnubilés par des aspects techniques de la façon de construire quelque chose, de telle sorte que nous allons perdre de vue les raisons pour lesquelles nous le faisons réellement. A mesure que vous allez approfondir le design responsive, assurez-vous donc toujours que la meilleure expérience utilisateur soit pour vous le critère déterminant pour toute les décisions que vous prendrez. Nous allons commencer par voir ici cette page dans sa version néanmoins il y a des fonctionnalités qui sont différentes.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !