Ouvrez votre site web existant.
Dernière mise à jour le
May 02, 2021 03:19:14 AM GMT
|
S'applique également à Adobe Muse CC (2015)
La version de février 2016 d’Adobe Muse et les versions ultérieures prennent en charge le design adaptatif. Si vous avez utilisé une version antérieure à celle de février 2016 pour créer des sites web, vous pouvez les convertir en sites adaptatifs.
Pourquoi devrais-je migrer vers une mise en page responsive ?
Si vous disposez d’un projet Adobe Muse utilisant une variante de mise en page, vous pouvez migrer votre projet vers une mise en page adaptative. Cependant, si vous souhaitez continuer à utiliser des variantes de mise en page, c’est également possible.
Les sites web responsive sont généralement synonymes d’un codage important et de modèles complexes. Pour la première fois, Adobe Muse vous offre la possibilité de créer des sites web responsive sans aucun codage, aucune grille et aucun modèle. De plus, vous pouvez utiliser un fichier unique pour créer des sites entièrement responsive qui présentent une mise en page adaptée à tous les appareils et à toutes les tailles d’écran. Les mises en page distinctes appartiennent désormais au passé.
Grâce au responsive design Adobe Muse, la mise à jour de votre texte et de vos images devient également très pratique. La mise à jour d’un seul élément pour toutes les mises en page ne vous demande plus des heures de travail. En outre, l’application In-Browser Editing, qui vous permet de modifier le contenu du site via des navigateurs, prend également en charge la mise en page responsive.
Adobe Muse vous offre également de nombreuses possibilités lorsque vous créez un site. Vous pouvez choisir d’afficher ou de masquer des objets spécifiques dans des points d’arrêt spécifiques. Par exemple, vous pouvez choisir d’afficher des options de menu tactiles conviviales lorsque votre site s’affiche sur des appareils mobiles. Vous pouvez également épingler des objets sur un emplacement ou les repositionner dans des points d’arrêt spécifiques.
Lisez ce qui suit pour découvrir comment migrer vos sites Adobe Muse existants vers une mise en page responsive. Migrez vos sites vers le responsive design et orientez-les ainsi vers l’avenir.
Comment migrer les variantes de mises en page vers la mise en page responsive ?
Avant de convertir votre site en site adaptatif, vous pouvez afficher un aperçu de la conception web adaptative dans Adobe Muse.
Pour commencer à convertir votre site en site adaptatif :
-
-
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.
Remplacez Largeur fixe par Largeur fluide dans la fenêtre Propriétés de la page. -
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.
Cliquez sur Affichage > Afficher les points d’arrêt. Remarque :Lorsque vous planifiez votre mise en page avec un design adaptatif, positionnez d’abord vos pages pour la plus grande largeur de page. Affichez ensuite les pages avec des largeurs de navigateur différentes à l’aide de la barre de défilement. Si votre conception se « divise », ajoutez des points d’arrêt pour ces largeurs. Réglez ensuite votre mise en page au niveau de ces points d’arrêt.
En général, il est conseillé d’ajouter des points d’arrêt en fonction de la mise en page du site et non en fonction de la taille de l’écran des appareils de l’utilisateur.
-
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.
Remarque :Lorsque vous positionnez des objets, vérifiez la distance entre les objets et la distance entre chaque objet et le bord du navigateur. Vous devrez peut-être ajuster le positionnement des objets ou ajouter des points d’arrêt supplémentaires pour résoudre les problèmes de conception entre les points d’arrêt.
-
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.
Votre site web adaptatif est maintenant prêt à être publié !
Accéder à votre compte