Ouvrez Adobe Muse, puis cliquez sur Fichier > Nouveau site.
Lisez cet article pour savoir comment créer des sites web pour appareils mobiles ou smartphones.
Vous pouvez créer et concevoir des sites web pour appareils mobiles à l’aide du design de sites web adaptatifs dans Adobe Muse. Les mises en page adaptatives vous permettent d’utiliser un seul fichier Muse pour créer des sites web pour tous les appareils, y compris les appareils mobiles.
Vous devez d’abord déterminer la largeur du navigateur pour laquelle vous souhaitez concevoir votre site. Vous pouvez ensuite continuer à concevoir votre site. Pour plus d’informations sur la création de sites mobiles avec une mise en page responsive, voir Création de sites web responsive.
Si vous souhaitez concevoir une variante de mise en page pour les sites web réservés aux appareils mobiles, consultez l’article suivant.
Avec Adobe Muse, vous pouvez créer des mises en page de site pour le contenu web à afficher sur les postes de travail, les smartphones et les tablettes. A l’aide des fonctionnalités de conception pour appareils mobiles, vous pouvez créer des mises en page alternatives pour les téléphones et les tablettes, ainsi que pour les postes de travail.
Adobe Muse contient des éléments tels que des éléments de largeur à 100 % et la fonctionnalité Pied de page rémanent, pour vous permettre d’afficher correctement votre conception sur la multitude d’appareils disponibles sur le marché. Adobe Muse vous permet d’utiliser des workflows qui vous sont familiers pour créer des conceptions immersives pour chaque dimension d’écran possible.
Pour créer une mise en page alternative pour appareils mobiles :
Ouvrez Adobe Muse, puis cliquez sur Fichier > Nouveau site.
Sélectionnez Largeur fixe, puis cliquez sur Paramètres avancés dans la même boîte de dialogue.
Indiquez la largeur de page maximale.
Déterminez la largeur de navigateur appropriée pour les téléphones mobiles et saisissez la valeur correspondante.
Entrez les valeurs de marge et de marge intérieure pour votre site mobile. Entrez les informations suivantes :
Cliquez sur OK.
Vous pouvez commencer à concevoir les mises en page pour votre site web pour appareils mobiles.
Lorsque vous créez un nouveau projet, vous pouvez concevoir n’importe quelle mise en page en premier, et ensuite créer d’autres mises en page, toutes dans le même fichier .Muse. Lorsque vous publiez ou exportez un site, Adobe Muse génère automatiquement un fichier nommé sitemap.xml qui contient une liste de toutes les pages, pour toutes les mises en page. Le fichier sitemap.xml est téléchargé avec les autres parties du site. Il améliore l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en aidant les moteurs de recherche à indexer le site, de sorte que les pages soient correctement classées dans les résultats de la recherche.
Pour créer une nouvelle mise en forme pour un téléphone mobile, l’une des premières choses que vous devrez faire avec un site existant est de réviser le contenu et de déterminer quels éléments sont nécessaires pour l’expérience de l’utilisateur de smartphone. Etant donné que les visiteurs smartphone sont souvent en déplacement et visualisent le contenu sur un écran plus petit, il est important de simplifier la conception et de n’afficher que le contenu qui est utile et facile d’interaction sur un écran tactile.
Ouvrez le fichier .Muse existant auquel vous souhaitez ajouter une mise en page alternative pour téléphones mobiles.
Ouvrez chaque page de votre projet et cliquez sur Page > Ajouter une variante de mise en page > Téléphone.
Vous pouvez utiliser le menu pour sélectionner une mise en forme existante à copier. Pour les besoins de cet article, choisissez Bureau pour copier la mise en page pour postes de travail vers la mise en page pour téléphones.
Notez que vous avez la possibilité de copier le plan du site, les attributs de page et le fond du navigateur. Conservez les paramètres par défaut afin de copier les informations du site pour poste de travail existantes vers la mise en forme pour téléphones.
Cliquez sur OK pour fermer la boîte de dialogue et ajouter la mise en page pour téléphones.
Muse crée un plan de site pour la mise en forme pour téléphones. Les noms de page, la structure du site et les attributs du gabarit sont copiés. Le bouton de mise en forme pour téléphones n’affiche plus un signe plus (+) en regard de son nom, car la mise en forme pour téléphones a été ajoutée au projet Muse.
Vous remarquerez que le contenu réel de la page n’est pas ajouté dans la vignette de page de mise en forme pour téléphones. C’est intentionnel, pour vous permettre de copier seulement le contenu que vous souhaitez vraiment dans chaque page d’une mise en forme pour appareils mobiles. Au fur et à mesure que vous ajoutez le contenu souhaité à chaque nouvelle page, vous pouvez le redimensionner pour qu’il tienne dans les dimensions plus petites de l’écran de l’appareil mobile.
Vous pouvez ajouter de nouvelles pages en cliquant sur le signe plus à droite de la page d’accueil. Une fois que vous avez configuré la carte du site, vous pouvez commencer à concevoir l’expérience pour appareils mobiles.
Consultez la section suivante pour savoir comment configurer les gabarits pour la mise en page pour téléphones.
Dans la vue Plan, double-cliquez sur la vignette de la page A-Master pour ouvrir celle-ci en vue Conception.
Ouvrez l’interface de fond de navigateur pour définir l’image d’arrière-plan.
Cliquez sur Ajouter une image dans la section Image. Recherchez et sélectionnez le fichier que vous souhaitez définir comme image d’arrière-plan.
Définissez l’option Ajustement sur Ajuster au fond et cliquez sur la position du centre.
Cliquez sur la zone grise en dehors de la page ou n’importe où dans le panneau Contrôle pour fermer l’interface Fond du navigateur.
Adobe Muse permet de lier facilement des pages externes, des fichiers téléchargeables, des sections dans des pages web et bien plus encore à l’aide d’hyperliens. Il est important de concevoir une navigation appropriée de votre site pour assurer à vos visiteurs des déplacements aisés parmi les pages de votre site web. Une navigation de site correctement définie permet également d’optimiser votre site web pour les moteurs de recherche. Pour plus d’informations, voir Création d’hyperliens.
La liste déroulante Hyperliens répertorie les pages ou liens d’ancrage ajoutés à votre plan de site. Pour rechercher les liens corrects, commencez par saisir le nom de la page ou du point d’ancrage. Vous n’avez à saisir que les premières lettres ; le menu Hyperliens filtre les résultats et les affiche dans une liste déroulante. Ainsi, vous pouvez accéder aisément aux liens que vous voulez mettre à jour rapidement.
Vous allez commencer par finaliser la page d’accueil.
Ensuite, vous allez ajouter le contenu à la page Section 01.
La page Section 01 a pour fonction de présenter brièvement l’entreprise et de permettre aux visiteurs du site de l’appeler aisément. Lors de la création de sites web pour appareils mobiles, vous pouvez ajouter un nouveau type de lien qui permet au visiteur de toucher l’écran et d’appeler le numéroteur téléphonique du smartphone pour appeler un numéro. Cette fonction de site mobile est pratique, car elle permet aux clients potentiels d’appeler aisément une entreprise.
Pour ajouter un lien dans une mise en page pour appareils mobiles pour appeler un numéro de téléphone, procédez comme suit :
Il s’agit du format que les navigateurs mobiles reconnaissent pour les liens de numéro de téléphone.
Remarque : si vous préférez créer un lien de courrier électronique, vous pouvez entrer le format suivant dans le champ du menu Hyperlien :
mailto:designers@design-is-fun.com
Après avoir ajouté le lien au bouton Téléphone, la création de la page Section 01 est terminée.
La page Section 02 contient le code HTML incorporé généré par le site web Google Maps pour créer une carte interactive.
Si vous avez suivi le tutoriel Prise en main de Muse, rappelez-vous que vous avez copié le code source Google Maps depuis le site web de Google et utilisé la fonction de code HTML incorporé de Muse pour le coller dans la page.
Heureusement, le code Google Map contient déjà le support des mouvements des doigts sur écrans tactiles pour que les visiteurs utilisant des appareils puissent interagir avec la carte facilement. Pour cet exemple de projet, les dimensions de la carte ont déjà été redimensionnées.
Toutefois, si vous devez redimensionner les dimensions du contenu du code HTML incorporé dans vos projets, vous pouvez cliquer avec le bouton droit de la souris sur le contenu et choisir HTML pour afficher le code dans la fenêtre HTML. Vous pouvez modifier les valeurs de hauteur et de largeur dans le code pour redimensionner la carte afin de l’ajuster à un écran plus petit.
Si vous avez ouvert la fenêtre Modifier le code HTML, cliquez sur OK pour la fermer sans appliquer les modifications.
Cette fois, vous allez ajouter un lien vers un site web externe (Google Maps) pour faciliter pour les internautes la visite de la version complète de la carte dans une nouvelle fenêtre de navigateur.
https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14
Ensuite, vous allez ajouter le contenu à la page Section 03.
La page Section 03 contient un widget Formulaire de contact qui utilise des scripts serveur et la base de données Business Catalyst pour traiter les données des formulaires envoyés. Lorsque vous cliquez sur Publier et envoyez les fichiers du site depuis Muse, la fonctionnalité de formulaire fonctionne automatiquement.
Remarque : bien que vous puissiez utiliser d’autres fournisseurs de service pour héberger la version finale du site web Muse, notez que vous devez exécuter des opérations de codage supplémentaires pour que les formulaires de contact puissent fonctionner si le site n’est pas hébergé sur les serveurs Business Catalyst.
Dans cet exemple de projet, CAPTCHA n’est pas activé pour le formulaire de contact. CAPTCHA est un paramètre du menu Options des widgets de formulaire de contact, que vous pouvez ajouter lorsque vous voulez vérifier que le formulaire est envoyé par une personne et non pas par un script ou un "réseau d’ordinateurs de courriers indésirables". L’interface CAPTCHA affiche une image avec une série de caractères que le visiteur doit saisir pour pouvoir envoyer son message via le formulaire. Bien que les envois de formulaires par des réseaux d’ordinateurs de courriers indésirables constitue une gêne, il est également important de prendre en compte la convivialité du site sur un téléphone mobile. Si le formulaire est trop compliqué à remplir, cela peut dissuader les visiteurs d’envoyer leur message.
La page Section 03 est maintenant terminée. Il n’est pas nécessaire d’ajouter un lien vers le bouton Envoyer, car le bouton est déjà configuré comme faisant partie du widget Formulaire de contact.
La dernière page de la mise en page pour téléphones, Section 04), contient un widget de diaporama. Les widgets dans Muse sont conçus et testés pour fonctionner avec tous les navigateurs actuels pour appareils mobiles et postes de travail. Par conséquent, vous n’avez rien à changer pour que le diaporama fonctionne sur un écran tactile.
Procédez comme suit pour copier le contenu de la page de travail de la mise en page pour postes de travail vers la page Section 04 de la mise en page pour téléphones :
Remarque : si vous configurez des widgets de diaporama pour utiliser les transitions Fondu, Horizontal ou Vertical, le code dans Muse active automatiquement le glissement du doigt pour permettent aux visiteurs de faire glisser leur doigt sur l’écran tactile pour faire défiler les images du diaporama.
Dans la section suivante, Création de conceptions de mise en forme pour appareils mobiles dans Muse, vous allez apprendre à facilement mettre à jour les ressources sur toutes les plates-formes mobiles et à publier votre site Muse pour chaque mise en page pour appareils mobiles.
Comparés aux postes de travail, les tablettes et les smartphones disposent d’un processeur beaucoup plus limité, utilisent des connexions plus lentes et ont une capacité de stockage inférieure. Par conséquent, il convient de tenir compte de certains points lors de la création et de l’envoi de conceptions de site sur les appareils mobiles.
Muse contient des fonctionnalités qui permettent d’optimiser les graphiques affichés dans les mises en page pour appareils mobiles afin que le site se charge rapidement et fonctionne d’une manière acceptable.
Dans ce petit exemple de site, la liste des ressources est relativement gérable, mais lorsque vous créez de plus grands sites, la liste des ressources peut s’allonger et être fastidieuse à parcourir.
Pour faciliter la navigation dans la liste, vous pouvez sélectionner le premier élément de chaque ressource, puis cliquer sur la flèche à gauche pour réduire l’ensemble. Cliquez à nouveau pour afficher la liste complète des instances où la ressource est utilisée dans le projet de site.
Si vous souhaitez localiser les ressources utilisées pour une mise en page donnée, cliquez sur le haut de la colonne à l’extrémité droite du panneau des ressources qui contient les icônes Poste de travail, Tablette ou Téléphone. Dans ce cas, la liste des ressources est triée pour afficher les ressources de chaque mise en page dans un ensemble consolidé.
Si vous souhaitez apporter une modification à une image qui va mettre à jour toutes ses instances (sur toutes les mises en page), cliquez avec le bouton droit de la souris sur un nom de ressource et choisissez Modifier l’original dans le menu qui s’affiche.
Le fichier d’origine que vous avez placé s’ouvre dans Photoshop, Fireworks ou le programme d’édition d’image que vous avez utilisé pour le créer afin que vous puissiez effectuer rapidement des modifications.
Lorsque vous enregistrez le fichier d’origine modifié et revenez dans Muse, l’élément dans le panneau des ressources affiche l’icône de synchronisation pour indiquer que la version du graphique dans le site ne correspond plus au fichier source. Cliquez de nouveau avec le bouton droit de la souris et choisissez Mettre à jour pour mettre à jour toutes les itérations du graphique pour qu’elles utilisent la nouvelle version.
Il existe plusieurs options que vous pouvez utiliser pour afficher l’aperçu de la conception de site que vous créez.
Dans la vue Conception de la mise en page pour postes de travail, cliquez sur Aperçu pour afficher le rendu d’émulateur Webkit intégré du code HTML, CSS et JavaScript. L’aperçu permet de déterminer l’affichage des mises en pages dans un navigateur avant de publier un site et de le vérifier en ligne avec un appareil.
Dans la vue Conception de la vue Téléphone, cliquez sur Aperçu pour afficher la mise en page de téléphone. Utilisez le menu Taille de l’aperçu pour choisir entre iPhone 4, iPhone 5, Samsung Galaxy S III et Nokia Lumia 920 afin d’afficher la mise en page dans différentes tailles d’écran.
Cliquez sur l’icône à droite de la fenêtre Taille de l’aperçu pour afficher la mise en page en mode Portrait ou Paysage.
La taille de l’aperçu comprend des rapports de hauteur et de largeur prédéfinis qui couvrent les tailles d’écran les plus courantes des téléphones mobiles.
Certains écrans de smartphone sont plus larges (Motorola Droid, par exemple). Si un visiteur dispose d’un écran plus grand écran, la fonction Viewport de Muse redimensionne automatiquement la largeur de mise en page pour téléphones pour l’adapter à la taille d’écran disponible.
En mode Aperçu, vous pouvez cliquer sur les liens et naviguer dans le site. Vous pouvez faire défiler les données, ce qui simule un glissement, mais pour le tester réellement, testez-le sur l’appareil.
Si vous cliquez sur le bouton i en regard du menu Taille de l’aperçu en mode Aperçu, une note s’affiche avec un lien décrivant l’outil Adobe Edge Inspect. Edge Inspect permet d’utiliser une extension du navigateur Chrome pour connecter les appareils mobiles à votre ordinateur, puis de les synchroniser avec le contenu affiché dans le navigateur Chrome pour postes de travail.
Avec Edge Inspect, vous pouvez utiliser Chrome et l’aperçu dans l’option Navigateur d’Adobe Muse pour afficher un site sur votre poste de travail, la même page s’affichant également automatiquement sur les appareils connectés. (Veillez à définir Chrome comme navigateur par défaut.)
Si vous le souhaitez, vous pouvez également acheter l’outil tiers Reflection qui permet d’exécuter une émulation de votre appareil (connecté en utilisant la même connexion réseau) sur votre poste de travail. Lorsque vous utilisez votre smartphone ou tablette pour naviguer sur un site, l’émulateur met en miroir l’écran tactile de votre appareil.
Comme dans les versions précédentes de Muse, vous pouvez faire glisser des repères pour définir la zone au-dessous de la page et spécifier la zone de pied de page. Vous pouvez également définir un élément de contenu comme élément de pied de page. Dans ce cas, il s’affiche sous la hauteur de page minimale définie dans les propriétés du site ou sous le contenu de page existant, selon l’élément le plus long.
La définition du contenu de pied de page est très utile lorsqu’un site contient des pages de longueurs différentes, car le positionnement du pied de page s’ajuste verticalement pour s’afficher uniformément le long des pages sans chevaucher le contenu de la page.
Par défaut, l’option Pieds de page récurrents est activée. Il s’agit d’une fonction dédiée aux visiteurs disposant de grands écrans de poste de travail. Dans la plupart des cas, il est judicieux de laisser l’option Pieds de page récurrents activée pour les sites web, car elle maintient les pieds de page à l’emplacement souhaité, même si la fenêtre du navigateur est significativement plus grande que la conception de page web, comme dans le cas d’un écran de cinéma d’Apple.
Pour voir le fonctionnement, vous pouvez afficher l’aperçu d’un site Muse dans un navigateur et effectuer un zoom arrière sur la page. Notez que si vous utilisez un contenu de page trop petit par rapport à la fenêtre du navigateur, la zone sous le pied de page s’affiche dans la fenêtre du navigateur au lieu de maintenir le pied de page dans le bas l’écran.
Lorsque vous créez des sites dans Muse, l’option Pied de page rémanent est activée dans la boîte de dialogue Nouveau site.
En règle générale, il est préférable d’utiliser la fonction Pied de page rémanent lorsque vous créez des sites. Cependant, si vous notez que les pages qui s’affichent sont plus longues que prévu (car les pages du site ont le minimum de contenu et sont relativement courtes), vous pouvez toujours désactiver cette option en désélectionnant la case à cocher dans la boîte de dialogue Propriétés de la page.
Le code généré par Muse est testé pour vérifier qu’il s’affiche et fonctionne normalement sur tous les navigateurs et plates-formes actuels.
L’une des normes web qui diffèrent entre les navigateurs de postes de travail et d’appareils mobiles est le support des éléments de page verrouillés. Lors de la création de sites pour les navigateurs de postes de travail, vous pouvez sélectionner un élément et utiliser l’option Panneau de contrôle pour le verrouiller dans la fenêtre du navigateur. Le verrouillage est utile pour créer une navigation homogène. Il est également pratique lorsque vous voulez maintenir un élément dans la même zone d’une page plus longue, quelle que soit la longueur de défilement qu’exécute le visiteur sur la page.
Au moment de la rédaction de ce manuel, les navigateurs pour appareils mobiles ne prennent pas en charge uniformément les objets verrouillés. Par conséquent, il est nécessaire de trouver des stratégies alternatives pour les objets verrouillés lors de la création des mises en page pour les téléphones et les tablettes.
Lors de la création de mises en page pour téléphones et tablettes, notez que les options Epingler sont indisponibles et inactives.
Vous pouvez publier des sites comportant plusieurs mises en page dans Muse en utilisant la même méthode que celle que vous utilisez normalement pour publier des sites pour postes de travail. Il est utile de publier des sites d’essai, puis d’utiliser des appareils mobiles pour afficher la version dynamique pour tester les conceptions sur des écrans plus petits.
Cliquez sur Publier ou choisissez le Fichier > Télécharger vers l’hôte FTP pour envoyer les fichiers du site au serveur d’hébergement.
Lors de la publication d’un site Muse comportant plusieurs mises en page, le site est envoyé avec une seule URL. Il suffit donc d’enregistrer un nom de domaine de type :
http://www.mon-site.com
Lorsque vous publiez un site avec deux ou trois mises en page différentes, Muse génère le code du site, qui comprend la détection des scripts qui identifient le type d’ordinateur ou d’appareil et le type de navigateur qu’utilise l’internaute pour accéder à la page.
Le code de détection détermine la plate-forme et la version du navigateur, puis affiche automatiquement la mise en page correcte. Vous n’avez rien à faire pour que les visiteurs qui utilisent une tablette voient la conception pour tablettes et les visiteurs qui utilisent un smartphone voient la conception pour téléphones. Tout s’effectue en arrière-plan.
Les nouvelles fonctions de mise en page pour appareils mobiles de Muse permettent d’optimiser les mises en page pour ces appareils afin que les utilisateurs des appareils ne téléchargent pas inutilement des fichiers plus volumineux. La fonctionnalité de mise en page alternative gère uniquement les fichiers d’image redimensionnés plus petits pour que le site fonctionne correctement sur tous les plates-formes et navigateurs.
Pour plus d’informations sur l’utilisation de Muse, consultez les articles et les tutoriels sur la page d’ Aide d’Adobe Muse.
Cliquez sur l’onglet Gabarit (Bureau) pour activer le gabarit pour postes de travail dans la vue Conception.
Muse facilite le passage d’une mise en page à l’autre en utilisant l’outil de navigation Atteindre la page. Ce bouton apparaît dans la vue Conception des projets comportant plusieurs mises en page.
Lorsque vous travaillez avec plusieurs mises en page, il est pratique de pouvoir avancer ou reculer entre au moins deux pages pour pouvoir copier et coller aisément du contenu.
Remarque : outre la possibilité de cliquer sur le bouton Atteindre la page, vous pouvez utiliser le raccourci clavier Commande+J (Mac) ou Ctrl+J (Windows).
La boîte de dialogue Atteindre la page s’affiche. Elle contient un champ de texte que vous pouvez utiliser pour saisir les premières lettres d’un nom de page dans le site et accéder aisément à la page sans revenir constamment à la vue Plan.
Le champ analyse le site pour rechercher des noms de page correspondants éventuels et les affiche dans la liste ci-dessous.
La page Gabarit (Téléphone) s’ouvre dans la vue Conception et elle est prête à être modifiée.
Vous pouvez également utiliser une autre méthode très efficace pour passer d’une mise à page à l’autre dans un site en utilisant les nouveaux raccourcis clavier :
Ces raccourcis sont actifs uniquement lors de la modification d’un site qui possède les mises en page correspondantes. Testez ces nouveaux raccourcis pour développer un workflow que vous préférez lorsque vous passez d’une mise en page ou d’une page à une autre.
Ensuite, vous allez créer un second gabarit pour téléphones et ajouter les éléments de conception.
Accéder à votre compte