Création de sites web pour appareils mobiles avec Adobe Muse

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 :

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.

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.

1. Cliquez sur l’onglet Intérieur (Téléphone). Copiez l’ensemble du groupe de quatre boutons numérotés.
2. Utilisez la fonction Atteindre la page pour accéder à la page Accueil (Téléphone) et coller le groupe. Les liens que vous avez ajoutés dans la section précédente sont conservés. Par conséquent, la page Accueil et le gabarit Intérieur ont maintenant la même navigation.
3. Utilisez l’outil Sélection pour positionner le groupe dans le centre de la page d’accueil, près du bas du pied de page.
4. Cliquez sur l’onglet Travail (Bureau) pour revenir à la page de travail. Copiez le bloc de texte dans le module à l’extrémité gauche qui indique qu’il existe plusieurs solutions pour résoudre un problème.
5. Cliquez sur l’onglet Accueil (Téléphone) et collez le bloc de texte. Utilisez l’outil Sélection pour placer le bloc de texte afin de le centrer au-dessus du groupe de boutons.

Ensuite, vous allez ajouter le contenu à la page Section 01.

1. Cliquez sur l’onglet Travail (Bureau) pour revenir à la page Travail. Sélectionnez le rectangle arrondi blanc d’arrière-plan et les trois blocs de texte dans le deuxième module à l’extrémité gauche. Les trois blocs de texte comprennent le cercle 01, le texte d’espace réservé de la section 01 et le bouton orange Téléphone. Copiez les éléments sélectionnés.
2. Appuyez sur les touches Commande+J (Mac) ou Ctrl+J (Windows) et saisissez les premières lettres de la section 01. Sélectionnez la page de mise en page pour téléphones de la section 01 à l’aide de la touche fléchée Bas, puis appuyez sur la touche Retour/Entrée pour l’ouvrir dans la vue Conception.
3. Collez les éléments sur la page Section 01 de la mise en page de téléphone. Utilisez l’outil Sélection pour les centrer sur la page à l’aide des repères qui s’affichent temporairement.

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 :

1. Utilisez l’outil Sélection pour sélectionner le bouton Téléphone.
2. Dans le champ du menu Liens, saisissez tel:+1 et un numéro de téléphone, comme suit :
   tel:+14155551234

Il s’agit du format que les navigateurs mobiles reconnaissent pour les liens de numéro de téléphone.

3. Appuyez sur Retour ou Entrée pour enregistrer le lien.

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.

1. Cliquez sur l’onglet Travail (Bureau) pour revenir à la page Travail. Sélectionnez le rectangle d’arrière-plan blanc arrondi, le cercle vert 02, le bloc de texte Section 02, la carte incorporée et le bouton vert Carte. Copiez les éléments sélectionnés.
2. Appuyez sur les touches Commande + J (Mac) ou Ctrl+J (Windows) et saisissez les premières lettres de la Section 02. Sélectionnez la page de mise en page Section 02 pour téléphones à l’aide de la touche fléchée Bas, puis appuyez sur la touche Retour/Entrée afin de l’ouvrir dans la vue Conception .
3. Collez les éléments que vous avez copiés au cours de l’étape 1 sur la page Section 02 de la mise en page pour téléphones. Utilisez l’outil Sélection pour les centrer sur la page à l’aide des repères d’alignement.

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.

4. Sélectionnez le bouton Carte.

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.

5. Copiez le lien ci-dessous et collez-le dans le champ du menu Liens :

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

6. Cliquez sur le mot Liens à gauche du menu Liens. Dans la boîte de dialogue qui s’affiche, cochez la case Ouvrir le lien dans une nouvelle fenêtre ou un nouvel onglet. En outre, dans le champ Info-bulle, saisissez le texte Carte d’Adobe Fremont.

7. Cliquez à l’extérieur de la boîte de dialogue Liens pour la fermer.

Ensuite, vous allez ajouter le contenu à la page Section 03.

1. Cliquez sur l’onglet Travail (Bureau) pour revenir à la page Travail. Sélectionnez le rectangle d’arrière-plan blanc arrondi; le cercle violet 03, le bloc de texte Section 03, le formulaire de contact et le bouton Envoyer. Copiez les éléments sélectionnés.
2. Appuyez sur les touches Commande + J (Mac) ou Ctrl+J (Windows) et saisissez les premières lettres de la section 03. Sélectionnez la page de mise en page Section 03 pour téléphones à l’aide de la touche fléchée Bas, puis appuyez sur la touche Retour/Entrée pour l’ouvrir dans la vue Conception.
3. Collez les éléments que vous avez copiés au cours de l’étape 1 sur la page Section 03 de la mise en page pour téléphones. Utilisez l’outil Sélection pour les centrer sur la page à l’aide des repères d’alignement. Les styles appliqués au widget Formulaire de contact pour postes de travail sont conservés lors de la copie vers la mise en page pour téléphones La seule modification apportée pour préparer le formulaire pour une mise en page pour appareils mobiles implique de redimensionner le formulaire et les éléments du formulaire pour les adapter à un écran plus petit.

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 :

1. Cliquez sur l’onglet Travail (Bureau) pour revenir à la page Travail. Sélectionnez le rectangle d’arrière-plan blanc long, le cercle rouge 04, le widget de diaporama et le bloc de texte Section 04. Vous pouvez utiliser l’outil Sélection pour cliquer et faire glisser la souris sur tous les éléments pour les sélectionner simultanément. Copiez les éléments sélectionnés.
2. Appuyez sur les touches Commande + J (Mac) ou Ctrl+J (Windows) et saisissez les premières lettres de la section 04. Sélectionnez la page de mise en page Section 04 pour téléphones à l’aide de la touche fléchée Bas, puis appuyez sur la touche Retour/Entrée pour l’ouvrir dans la vue Conception.
3. Collez les éléments que vous avez copiés au cours de l’étape 1 sur la page Section 03 de la mise en page pour téléphones. Utilisez l’outil Sélection pour les centrer sur la page à l’aide des repères d’alignement. Les styles appliqués au widget Formulaire de contact pour postes de travail sont conservés lors de la copie vers la mise en page pour téléphones La seule modification apportée pour préparer le formulaire pour une mise en page pour appareils mobiles implique de redimensionner le formulaire et les éléments du formulaire pour les adapter à un écran plus petit. Lorsque vous ajoutez des widgets avec des fonctions interactives (telles que des widgets de diaporama) à des mises en forme pour appareils mobiles que vous créez dans Muse, notez que le panneau Options contient l’option Enable Swipe. Ce paramètre est activé par défaut. Par conséquent, les widgets que vous ajoutez à vos créations pour appareils mobiles sont automatiquement configurés pour permettre aux visiteurs de toucher et effectuer des gestes sur les écrans tactiles. La page Section 04 contient un widget de diaporama qui affiche l’image correspondante lorsque l’utilisateur touche une vignette. Le diaporama est configuré pour utiliser une transition horizontale pour basculer entre les images dans la galerie. Cet exemple requiert une action de l’utilisateur pour afficher les photos, mais si vous le désirez, vous pouvez définir le widget de diaporama pour qu’il lise automatiquement les images lors du chargement de la page.

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.

1. Appuyez sur la combinaison de touches Commande/Ctrl+7 pour afficher la mise en page pour postes de travail, puis double-cliquez sur le fichier Gabarit A pour postes de travail pour l’ouvrir dans la vue Conception.
2. Ouvrez le panneau des ressources en cliquant sur son onglet dans le groupe de panneaux pour l’activer. Ou, s’il est fermé, choisissez la commande Fenêtre > Ressources.
3. Sélectionnez la grande image d’arrière-plan représentant des collines vertes. La ressource est mise en surbrillance dans le panneau des ressources.
4. Cliquez sur le nom de l’élément, background.jpg, pour développer la liste des instances utilisées dans le site. Notez que le fichier de l’image d’arrière-plan est répertorié trois fois avec deux icônes différentes pour indiquer qu’il est utilisé dans les mises en page pour téléphones et postes de travail.

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.

Pied de page rémanent

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.

Eléments verrouillés

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.

1. Cliquez sur le bouton Atteindre la 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.

2. Saisissez les trois premières lettres du nom de la page à rechercher. Pour cet exemple, saisissez les trois premières lettres du mot Gabarit: mas.

Le champ analyse le site pour rechercher des noms de page correspondants éventuels et les affiche dans la liste ci-dessous.

3. Appuyez deux fois sur la flèche Bas pour sélectionner la page Gabarit A (téléphone) page), puis appuyez sur la touche Retour/Entrée pour l’ouvrir.

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 :

• Commande/Ctrl+7 affiche la mise en page pour les postes de travail.
• Commande/Ctrl+8 affiche la mise en page pour les tablettes.
• Commande/Ctrl+9 affiche la mise en page pour les téléphones

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.