Conversion des sites web Adobe Muse existants en sites adaptatifs

Ouvrez votre site web existant.

Ouvrez chaque page de votre site web et cliquez sur Page > Propriétés de la page.

Sur l’onglet Mise en page, remplacez Largeur fixe par Largeur fluide. Vous pouvez également définir vos largeurs de page, marges et marges intérieures minimales et maximales à partir de cette fenêtre.

Cliquez sur OK.

Pour vérifier que les nouvelles pages que vous ajoutez seront aussi fluides, cliquez sur Fichier > Propriétés du site. Remplacez Largeur fixe par Largeur fluide dans cette fenêtre.

Sélectionnez la largeur de page maximale, la largeur minimale et la hauteur minimale pour votre mise en page.

Cliquez sur OK.

Accédez au gabarit et aux pages individuelles pour ouvrir les pages en Largeur fluide.

Pour utiliser efficacement le design adaptatif, désactivez les effets de défilement. Si vous souhaitez conserver des effets de défilement sur des pages spécifiques, utilisez l’option Largeur fixe pour ces pages.

Lorsque vous ouvrez les pages avec la Largeur fluide, par défaut, les objets de la page sont dotés de paramètres de Largeur fixe. Les objets sont également épinglés sur la gauche.

Rendez les objets fluides afin qu’ils soient redimensionnés proportionnellement à la largeur du navigateur. Cliquez avec le bouton droit de la souris sur les objets qui doivent être fluides, puis sélectionnez l’option Adaptatif.

Supprimez l’ancrage si vous souhaitez que les objets soient fluides. Pour supprimer l’ancrage, cliquez avec le bouton droit de la souris sur l’objet et sélectionnez Epingler à la page > Fluide.

Utilisez la barre de défilement pour afficher votre mise en page dans les différentes largeurs de navigateur.

Vous remarquerez que certains widgets ne sont pas fluides. Chaque fois que ces widgets divisent la conception, ajoutez des points d’arrêt à ces largeurs de page. Vous pouvez ensuite soit redimensionner le widget à ce point d’arrêt, soit masquer le widget à ce point d’arrêt.

Par défaut, la barre des points d’arrêt n’est pas visible lorsque vous travaillez sur un site web créé avec une version antérieure. Pour afficher les points d’arrêt, cliquez sur Affichage > Afficher les points d’arrêt.

Ajustez la taille et la position des objets et formatez le texte afin que la mise en page soit adaptée à toutes les largeurs de navigateur. Pour plus d’informations sur le positionnement des objets dans les mises en page adaptatives, voir Positionner des objets lors de la conception de sites web adaptatifs.

Vérifiez l’alignement et la lisibilité du texte dans tous les points d’arrêt. Si vous souhaitez réaligner la zone de texte ou formater le texte pour des largeurs de page spécifiques, voir Formatage de texte dans les mises en page adaptatives.

Prévisualisez les modifications en faisant glisser la barre de défilement vers des points d’arrêt spécifiques ou prévisualisez-les dans un navigateur web.

Supprimez toutes les variantes de mise en page de votre site web que vous avez créées pour d’autres appareils. La conception de sites web adaptatifs permet d’assurer la conversion et la maintenance de votre site pour tous les appareils, dans une seule zone de travail.