Premiers pas dans la conception responsive avec Adobe Muse

Lisez cet article pour découvrir la conception responsive dans Adobe Muse. Découvrez comment créer des sites web responsive pour n’importe quel appareil.

Remarque :

Adobe Muse n’ajoute plus de nouvelles fonctionnalités et son support cessera le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous aux questions fréquentes (FAQ) consacrées à la fin de service Adobe Muse.

Lorsque vous créez un site responsive, ajouter des points d’arrêt pour un appareil, un système d’exploitation ou une marque de produit spécifiques peut s’avérer inutile. Une définition des points d’arrêt en fonction de ces critères peut entraîner une maintenance importante. Pour définir où et comment ajouter des points d’arrêt, tenez plutôt compte de la mise en page et du contenu de votre site web.

Lisez ce qui suit pour découvrir l’approche de conception recommandée pour créer un site responsive à l’aide d’Adobe Muse.

Créez un site. Sélectionnez Largeur fluide dans la boîte de dialogue Nouveau site.

Pour éviter les espaces blancs et d’autres problèmes de conception, définissez les dimensions de la page. Cliquez sur Réglages avancés pour définir la largeur de page minimale et maximale ainsi que la hauteur minimale de votre site.

Dans la boîte de dialogue Nouveau site, sélectionnez Largeur fluide.
Dans la boîte de dialogue Nouveau site, sélectionnez Largeur fluide.

 

 

 

Ouvrez un gabarit ou une page individuelle. Notez le point d’arrêt par défaut à 960 pixels.

Notez le point d’arrêt par défaut à 960 pixels.
Notez le point d’arrêt par défaut à 960 pixels.

 

 

 

Commencez à mettre en page les éléments de la page (texte, images, diaporamas et widgets à ce point d’arrêt).

Mettez en forme votre page web.
Mettez en forme votre page web.

 

 

 

Utilisez la barre de défilement pour simuler plusieurs largeurs de navigateur. Observez comment s’affiche votre site avec différentes largeurs de navigateur.

Utilisez la barre de défilement pour voir comment votre site web s’affiche dans différentes largeurs de navigateur.
Utilisez la barre de défilement pour voir comment votre site web s’affiche dans différentes largeurs de navigateur.

 

 

 

Lorsque votre conception se divise, ajoutez un point d’arrêt. Par exemple, dans l’illustration précédente, notez la zone de texte qui dépasse de la largeur lorsque vous faites glisser la barre de défilement. Ajoutez un point d’arrêt à l’endroit de la largeur où la conception se divise.

Ajoutez un point d’arrêt là où la conception se divise.
Ajoutez un point d’arrêt là où la conception se divise.

 

 

 

Réglez votre mise en page sur le nouveau point d’arrêt de façon à obtenir une mise en page correcte de votre site.

Réglez votre mise en page au niveau du point d’arrêt.
Réglez votre mise en page au niveau du point d’arrêt.

 

 

 

Continuez à prévisualiser votre site jusqu’à la largeur minimale. Ajoutez des points d’arrêt et peaufinez la mise en page lorsque c’est nécessaire.

Grâce à cette approche de conception, votre site s’affiche correctement quelle que soit la largeur du navigateur et sur n’importe quel appareil. Votre conception ne dépend pas de la taille d’un appareil ou d’un écran.

Logo Adobe

Accéder à votre compte