Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir le design responsive

S'initier aux viewports mobiles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec votre formateur, abordez les principes de viewports mobiles (zones d'affichage) et de facteurs d'échelle d'affichage initial.

Transcription

Dans ce chapitre nous allons nous concentrer sur les concepts et techniques communs à la conception de sites responsive. Ces techniques vont impacter la façon dont nous allons concevoir pour les appareils mobiles, et surtout la façon dont nous allons pouvoir nous assurer de contrôler que notre contenu va bien s'afficher correctement sur les écrans mobiles. L'aspect le plus déroutant de ces techniques est essentiellement un concept qui s'appelle le concept de viewports mobiles et qu'on a traduit parfois par Fenêtres. Il s'agit en fait de la zone d'affichage qui est prévue pour la page web à l'écran. Dans la vidéo précédente, nous avons vu un exemple de site responsive et nous allons voir maintenant un exemple de site qui n'est pas responsive, de manière à bien comprendre à quoi correspond cette notion de viewport. Nous sommes ici sur un ordinateur de bureau, avec un navigateur standard qui est chrome, sur un site test qui n'est pas responsive. Et vous voyez que lorsque nous allons resserrer ici notre fenêtre, eh bien la mise en page ne va pas bouger et nous allons arriver sur une vue qui, au final, sera une vue partielle si les zones d'affichage sont inférieures à celle qui a été prévue au moment de la conception. Ici sur un téléphone, la page va s'afficher en tout petit et l'utilisateur, lui, va pouvoir, non pas zoomer avec les outils de zoom, ou redimensionner la fenêtre, mais il va pouvoir, avec les doigts, faire changer le facteur de zoom pour se déplacer dans la page. Et on aura de la même façon la notion de soit on aura une vision complète de la page qui sera bien trop petite, soit on pourra aller voir des détails, mais ces détails empêcheront d'avoir une vision globale du reste de la page. Vous commencez donc à vous rendre compte qu'il y a deux choses, premièrement il y a le viewport, c'est-à-dire la taille de la zone d'affichage, et d'autre part il y a un autre élément qui est très important, qui va être le facteur d'agrandissement, le facteur de taille à laquelle on va présenter les éléments. Nous pouvons donc par exemple être ici sur un viewport de 320 par 480 pixels, et avoir une page qui va s'afficher à cette taille, et avec ici une échelle de 1. Et nous pourrions être sur le même viewport, c'est à dire sur la même zone d'affichage, de 320 par 480, avec une échelle d'affichage qui serait différente, par exemple le double. Les viewports vont également varier d'un appareil à un autre et d'un navigateur à un autre. Par exemple sur Safari il y a un viewport de 980 pixels de large, alors que sur Opera on aura un viewport de 850 pixels. Si vous réalisez une mise en page web sur un de ces viewports, de 980 pixels ou 850 pixels, et que vous devez l'afficher sur un écran d'un téléphone portable qui va faire 320 pixels de large, vous voyez très clairement que la page ne va pas pouvoir être contenue dans la largeur de cet écran. Il va donc y avoir à un moment donné une réduction de la taille de l'image de manière à ce qu'elle s'adapte à l'écran. il s'agit ici d'un rapport de taille. À l'inverse, si vous avez prévu une mise en page pour un écran de 320 pixels de large, et que vous allez l'afficher à la taille 1 dans un viewport de 980 pixels, vous voyez que votre page web va être trop petite par rapport à la taille de l'écran dans lequel elle va s'afficher. Donc pour pouvoir créer des sites responsive qui vont correspondre parfaitement aux tailles d'écrans des mobiles, il va falloir que vous puissiez, à la fois contrôler la taille de la fenêtre, le viewport, mais également son facteur d'échelle initial, et c'est ce que nous allons voir dans notre prochaine vidéo. "trou de serrure", c'est à dire que,

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
Votre/vos formateur(s) :
Date de parution :6 sept. 2017
Durée :2h02 (25 vidéos)

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 !