L'essentiel de Muse CC 2015

Comprendre la conception réactive

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
De manière générale, Damien Bruyndonckx vous explique les tenants et les aboutissants du design réactif.

Transcription

Dans ce chapitre, nous allons aborder l'aspect réactif de notre site, et dans cette première vidéo, nous allons prendre le temps de bien comprendre ce qu'est un site réactif. Alors je me situe ici sur un site que je connais bien pour l'avoir développé moi-même et ce site, il est réactif. alors, ça veut dire quoi, et bien vous remarquez que le navigateur Chrome ici, est en plein écran, il utilise donc tout l'espace ici disponible, et mon site, il est en largeur fixe au sein de la fenêtre de mon navigateur. J'ai deux zones vides de part et d'autres de ce site, pour que ce site soit donc centré dans la fenêtre. Quand je commence à réduire la largeur de la fenêtre de mon navigateur, ce qui va se passer, c'est que les deux zones de part et d'autre de mon site vont se réduire mais le site en lui-même va garder sa largeur, j'ai ici un site à largeur fixe. Vous voyez que se sont bien les deux marges de part et d'autres du site qui se redimensionnent pour que le site reste au centre de la fenêtre. Alors cette mise en page, elle a été pensée pour l'ordinateur de bureau ou l'ordinateur portable avec de grands écrans. Alors si je continue de réduire la largeur de la fenêtre de mon navigateur, je vais atteindre un point, le voici, où le site va complètement changer de mise en forme et d'apparence, donc vous voyez en fait que tous les éléments ici sont réduits. Alors le moment où je passe d'une mise en forme à l'autre, on appelle ça un point d'arrêt, et donc le point d'arrêt, il est défini à une certaine largeur d'écran, et donc quand j'atteins la largeur en question, je bascule d'un côté à l'autre du point d'arrêt, et donc j'applique de nouvelles règles de mise en forme. Ici cette mise en page est tout à fait indiquée pour une tablette que l'on tient en mode paysage, c'est à dire en horizontal. Si je continue à descendre, Vous constatez que dans ce point d'arrêt, mon site est toujours en largeur fixe et se sont bien toujours les deux zones à gauche et à droite du site qui se redimensionnent de manière identique pour que le site reste bien au milieu de la page. Alors maintenant, dans le site et bien qu'est-ce que l'on a ? En dessous du diaporama, nous avons 3 colonnes ici, Ensuite nous avons un pavé en 2 colonnes pour la newsletter, ensuite nous avons également 2 colonnes pour les 3 dernières nouvelles et les 3 derniers articles du blog. Nous terminons ici par le pied de page, ici dans le fond cette grande zone bleue. Alors je vais continuer à baisser la largeur de mon navigateur, et je vais atteindre un second point d'arrêt, alors ce point d'arrêt est défini à une autre largeur de page, vous voyez que je passe d'un côté à l'autre de ce point d'arrêt et donc j'ai ici aussi un site à largeur fixe qui va rester de la même largeur avec les 2 zones de côté qui vont se redimensionner mais vous voyez que le site a complètement changé d'apparence ici je n'ai plus 3 colonnes mais se sont maintenant des éléments qui sont superposés les uns aux autres, la newsletter, elle n'a pas changé, elle est toujours en 2 colonnes et puis pour les dernières nouvelles et le blog, et bien ces éléments ne sont plus les un à côté des autres, mais les un au dessous des autres. Alors je vais continuer à descendre la largeur de mon navigateur, et je vais atteindre encore un autre point d'arrêt, le voici, et dans ce point d'arrêt je continue à modifier mon site, non seulement ici j'ai un autre système de menu, qui sera adapté ici à l'écran plus petit d'un smatphone, cette mise en page a d'ailleurs été pensée pour des smatphones, et puis ici vous voyez que je change même les règles puisque mon site ici n'est plus de largeur fixe, mais il est complètement fluide, et donc il suit complètement la largeur de mon navigateur. Et donc forcement quand je fais cela, et bien vous voyez que les sauts de lignes se recalculent et je perds le contrôle notamment de la hauteur de mon site. J'ai donc ici 3 points d'arrêt qui définissent 4 mises en page pour mon site. Une mise en page pour les smartphones, une mises en page, la voici, pour les tablettes que je tiens en portrait donc verticalement. Une autre mises en page pour les tablettes que je tiens horizontalement, c'est à dire en paysage et puis la mise en page XXL ici pour les écrans d'ordinateur de bureau ou de portable. Certaines de ces mises en pages sont de largeur fixe, c'est le cas de cette mise en page-ci, de la suivante et même de la 3ème, et puis la dernière mise en page et bien elle est de largeur complètement fluide vous le voyez, et donc elle s'adapte complètement à l'écran qui lit le site. Voici donc ce qu'est un site réactif, et donc dans Muse, nous allons devoir définir l'emplacement de nos points d'arrêt, choisir également si les points d'arrêt vont définir des mises en page de largeur fixe ou de largeur fluide, et je vous propose évidement de continuer tout cela dans le reste de ce chapitre.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :21 juil. 2016

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 !