Remarque :
Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.
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.
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.
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 :
-
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.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.