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

Planifier le design responsive

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Planifiez le design responsive dans le flux de production, en adoptant les bonnes pratiques et des méthodes de travail adaptées.

Transcription

La planification de sites web avec des Design Responsive Il s'agit de mettre en place un flux de production, qui va nous permettre de réaliser un site qui sera adaptable pour tous les périphériques dans les meilleures conditions. Bien entendu, chaque projet est unique, et les exemples que nous allons voir ne sont pas à prendre que pour vous donner une idée des méthodes à mettre en place. Premièrement, nous allons nous attacher à connaître le contenu. Le contenu est le roi, nous allons donc devoir inventorier ces contenus et les hiérarchiser. Dans le cas d'un site de e.commerce par exemple, nous allons pouvoir placer en premier les nouveaux produits, puis les images de ces produits qui sont très importantes, les informations et le contact, le mécanisme d'achat, c'est-à-dire la mise en panier et le passage de commande, et puis des informations de connexion. Et vous voyez qu'ici, il ne s'agit que d'une idée, mais nous avons hiérarchisé. Nous aurions pu très bien décider que les informations et contacts viendraient en dernier et que le passage de commande viendrait en troisième position. Vous devez donc : 1- Inventorier les contenus, et 2- Les hiérarchiser. Ensuite, il va falloir que vous raisonniez "mobile" d'abord à partir du moment où vous devez travailler pour plusieurs périphériques. Vous allez donc commencer par travailler sur le périphérique dont l'écran est le plus restreint en terme de taille. Si nous prenons notre exemple e.commerce, nous allons mettre en place dans un premier temps un logo, et puis nous allons mettre ensuite en place une en-tête, puis une navigation, enfin un article, un deuxième article, et puis un troisième article. Et vous voyez que compte tenu de la taille de notre écran, dans ce cas précis, nous ne pouvons pas aller beaucoup plus loin en terme de répartition de contenu au premier niveau. Nous allons voir que sur un écran d'ordinateur, la situation va être différente. Ici, nous allons mettre en place notre logo, mais nous avons, à côté du logo, de la place. Nous allons donc pouvoir placer un élément qui ne va pas figurer sur la version pour téléphone portable. Ensuite nous allons mettre en place une en-tête, et cette en-tête, vous le voyez, est beaucoup plus large, donc pourra être plus complète ou différente, et puis notre navigation, et ensuite les articles. Et vous constatez ici que sur un écran au premier niveau, nous pouvons placer neuf articles alors que sur notre téléphone portable nous ne pouvions faire figurer que trois articles au maximum. Nous avons donc une situation qui est bien différente. L'étape suivante va être de considérer quels vont être les différents points de rupture, c'est à dire à partir de quelle largeur d'écran nous allons faire varier les mises en page. Nous allons commencer par l'écran de plus petite taille, par exemple déterminer des écrans en dessous de 480 pixels, et puis ensuite nous allons mettre en place l'écran de plus grande taille, par exemple ici 1200 pixels. Une fois que ces deux écrans auront été définis, il va falloir que nous définissions les points de rupture, c'est-à-dire les écrans intermédiaires pour lesquels, à chaque fois, la mise en page va changer. Une fois que ça va être fait, on va pouvoir mettre en place les différents éléments, répartir les contenus pour ces différents écrans en fonction de nos points de rupture. Les points de rupture vont concerner essentiellement la mise en forme, mais pas uniquement. Ils vont également concerner certaines fonctionnalités, notamment une fonctionnalité très importante qui est la navigation. Vous voyez qu'ici, nous avons une navigation que nous pouvons resserrer: par exemple entre 1000 pixels et 480 pixels, cette navigation peut fonctionner. Il suffit simplement de resserrer la largeur des différents boutons qui constituent cette navigation. Mais en dessous de 480 pixels, et bien cette navigation ne va plus tenir dans la largeur. Vous voyez que le quatrième bouton est passé en dessous. Nous avons donc ici un impact direct de la largeur sur la fonctionnalité. Il faudra donc trouver une solution différente pour notre navigation. Ça peut être un menu de type Burger (les trois petites lignes), ou ça peut être un menu déroulant, ou un menu accordéon qui va se déplier à la demande. Mais il va falloir que nous trouvions une solution pour des écrans inférieurs à 480 pixels, notamment des écrans de 420 pixels. Et puis il y a d'autres choses qu'il va falloir prendre en compte, c'est également des fonctions spécifiques aux périphériques mobiles. Il peut y avoir des fonctions que vous n'avez pas sur les ordinateurs, qui peuvent être la géolocalisation, qui peuvent être liées au toucher de l'écran, et à des fonctionnalités de communication spécifiques aux périphériques, comme la messagerie Une fois que tous ces points auront été pris en considération, on va considérer essentiellement dans un premier temps l'organisation de la navigation, ensuite on verra comment standardiser le code source, et puis il va falloir faire une analyse réaliste de ce qu'il est possible de faire et de ce qu'il n'est pas possible de faire en terme de Design Responsive. Effectivement, nous allons nous poser un certain nombre de questions, et la question fondamentale est: peut-on utiliser une seule structure de documents pour gérer l'affichage sur tous ces périphériques que nous avons définis en fonction de nos points de rupture? Si la réponse est non, il va falloir se reposer une autre question, c'est: peut-on redéfinir les objectifs? Et si la réponse est non, et bien il va falloir se poser une autre question: y a-t-il possibilité de modifier le contenu? Et si la réponse est encore non, et bien nous allons arriver vers des solutions qui vont nous faire abandonner la création d'un Design Responsive, et nous tourner vers la création, soit d'une application mobile, soit d'un site qui soit spécifique pour ces périphériques. Si par contre, lorsque nous sommes à la question numéro 2 de redéfinir les objectifs, ou à la question numéro 3 qui est de modifier le contenu, et que la réponse est oui, et bien là, nous allons pouvoir commencer à construire notre site Responsive. Et nous aurons ainsi maximisé l'organisation de notre flux de production, et nous n'aurons pas perdu de temps à déployer des solutions qui se révéleraient, in fine, des échecs. Et puis, puisque l'on parle de temps, il va falloir que vous vous prépariez à rencontrer des obstacles inattendus au fur à mesure que vous allez avancer dans votre conception. Il faut donc que vous soyez assez larges dans la mise en place de votre planning, de telle sorte que lorsque vous rencontrerez ces obstacles, vous ne les intégrerez pas comme étant des problèmes graves, mais comme étant des solutions à trouver. Dans les vidéos suivantes, nous allons peut se révéler parfois frustrante si l'on n'applique pas les bonnes méthodes. au pied de la lettre, ils ne sont là ou la composition de numéros de téléphone.

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 !