ptlb-formation à Poitiers

Tutoriels de formation
pour les infographistes débutants et avancés

Stratégie et conception de site Internet - partie 09

Création d'un site internet avec Muse
 
Retour au sommaire des vidéos -  Vidéogramme suivant ...

Regarder « Création d'un site internet avec Muse » sur youtube
Consultez notre choix de formations sur PTLB-Formation.fr

Un site internet avec Adobe Muse

Ce logiciel se nomme « Muse ». Non seulement il permet le référencement, mais également la possibilité de réaliser des sites responsive étant adaptée aux smartphones et aux tablettes.

Il y a bien sûr quelques bases à connaître, mais ce logiciel est relativement intuitif.

Ici, nous allons refaire le même exemple de façon extrêmement simplifiée.

Allons dans le logiciel qui se nomme « Muse ».

Nouveau document

Créons un « nouveau document ».

Parmi toutes les options, la plus importante concerne si le site doit être « fluide  » ou « fixe ».

Ce choix est fondamental pour la manière dont sera réalisé le site Internet concernant la partie responsive, c’est-à-dire avec une visibilité sur les Smartphones et les tablettes.

Ici je laisserai les paramètres par défaut en gardant la « largeur fluide » puis je clique sur « OK ». L’interface est composée notamment de deux parties : « page d’accueil » et « gabarits ».

La partie qui se nomme « Gabarits » correspond aux éléments omniprésents sur l’ensemble des pages. Il s’agit, en général, du haut de la page avec ses menus ainsi que le pied de page.

Doubles cliquons sur « gabarits ». L’interface change.

En haut se trouve la partie correspondant au « header », c’est-à-dire au haut page.

Il m’est possible de bouger le curseur pour augmenter cette zone.

Grâce à l’outil texte de la « barre des outils », je peux tracer un rectangle qui va correspondre aux containers de texte.

Ici, je vais coller du texte comme je l’ai effectué déjà plusieurs fois.

Ainsi, à la façon de « Word » ou de « Indesign » je peux agencer mon texte. Il me suffit de surligner celui-ci et indiquer les valeurs que je souhaite dans la fenêtre texte.

Le titre

Commençons par le titre.

Ici, je choisis la typographie qui se nomme « Verdana » et je lui attribue une taille de « 24 », je laisse par défaut la couleur noire et je centre mon texte.

En bas de la fenêtre, je sélectionne la balise H1, c’est-à-dire « titre de niveau 1 ». Les balises de titres et de sous-titres sont extrêmement importantes pour le référencement auprès de Google. En effet, ces titres et sous-titres indiquent la hiérarchie de l’information.

Je sélectionne le texte de « l’accroche » et j’effectue quelques modifications.

Je choisis de nouveau la typographie « Verdana » et j’indique un corps de 18 pixels.

Titre de niveau 3

Je centre le texte et je sélectionne la balise « H3 » pour montrer à Google l’importance de cette phrase.

Dans notre exemple, nous utilisons volontairement ses balises afin de vous montrer l’importance de celle-ci. En général l’attribut des balises se fait en amont dans la stratégie marketing pour déterminer les options de référencement.

Afin de décaler le texte par rapport au titre, je surligne de nouveau « le titre » et j’indique la valeur « huit » dans la cellule qui correspond à la « taille de l’espace après le paragraphe ».

Le footer

Nous allons en rester là pour le haut de la page, occupons-nous maintenant du « footer » c’est-à-dire le bas de la page. C’est en général à cet endroit que l’on trouve les coordonnées de l’entreprise.

Pour faire simple, je vais effectuer un copier/coller depuis le site Internet original.

J’augmente la hauteur du « footer » en utilisant le curseur qui se trouve sur la gauche.

Je crée un « bloc texte » et je colle mon texte.

Il me suffit maintenant de surligner les portions de texte et ainsi modifier leurs attributs.

Après avoir effectué un certain nombre de réglages, il est nécessaire d’enregistrer son site Internet afin d’éviter tout problème. Pour cela, je vais dans le menu « fichier» et j’utilise la commande « enregistrer le site sous ».

Sur le disque dur de l’ordinateur, je crée un dossier qui se nomme « Muse ». A l’intérieur de ce dossier, J’inscris comme nom de fichier « ptlb-formation-01.muse », je clique sur « enregistrer ».

Ici il s’agit d’un fichier propre au logiciel « Muse ». C’est un fichier natif qui ne possède pas de html et de CSS.

Pour plus de visibilité, refermons la fenêtre qui se nomme « gabarits » en cliquant sur la croix. Cette manière de procéder évite de voir la page « gabarits ». Cette action ne ferme pas le projet, il empêche seulement de voir la page « gabarits ». Nous sommes toujours dans le projet en cours. Ainsi, nous sommes revenus sur la première fenêtre.

La fenêtre « accueil » qui correspond à l’index.html possède dorénavant en son sein les attributs de la page « gabarits ».

Je « double-clique » sur la « page d’accueil ». Celle-ci s’affiche.

Il m’est impossible de modifier, les éléments réalisés dans la page « gabarits ». Vous l’aurez compris chaque nouvelle page possédera les éléments disposés dans la page « gabarits ». Toutefois, il faut savoir qu’il est possible de créer plusieurs gabarits.

Revenons sur le premier onglet qui se nomme « ptlb-formation-01 ».

2 nouvelles pages

Pour faire simple, nous allons créer 2 nouvelles pages.

Ici, je clique sur le petit « + » qui se trouve à droite de la page d’accueil afin de générer une page de même importance et je renouvelle l’opération.

Maintenant, je renomme mes pages de la façon suivante.

La première se nomme « Accueil », la deuxième se nomme « Formations » et la troisième se nomme « Contact ».

Je retourne dans la page « gabarits » en double-cliquant sur celles-ci.

Comme les pages ont été créées, il devient possible de créer un menu en rapport avec ses pages.

Ici l’opération va être extrêmement rapide, car « Muse » contient des « widgets », c’est-à-dire des modules déjà programmés qui permettent ce genre de réalisation.

Je clique dans la fenêtre qui s’appelle « bibliothèque de widgets » puis l’option « menus » et enfin je glisse le mot « horizontal » sur la page. À l’aide de la flèche noire, il me suffit ensuite de positionner ce menu ou bon me semble. Ici, nous prendrons soin de placer ce menu dans la partie haute de la page, juste sous l’accroche.

Pour effectuer un centrage optimal, utilisons les options d’alignement.

Les options du menu « alignement » me permettent de centrer aisément le menu.

En haut à droite, je clique sur « alignement ».

Et je sélectionne « aligner sur la zone de contenu ».

Il me suffit de cliquer sur l’icône « numéro 2 » qui se trouve dans la rubrique « alignement des objets ».

Je déplace le petit curseur qui délimite le « header », autrement dit le haut de la page.

Je referme la fenêtre « gabarits » et je me place sur la fenêtre « accueil ».

Insertion d’image

Nous allons insérer une image.

Pour cela, affichons le contenu du disque dur et je remonte jusqu’à la racine.

J’ouvre le dossier qui se nomme éléments préparatoires et je sélectionne l’image qui se nomme « la-colorisation-a-l-aide-de-photoshop.jpg ». J’effectue un « contrôle + C » pour copier.

Je me place maintenant dans le répertoire « Muse ».

J’effectue maintenant un « contrôle + V » pour coller

Je retourne dans « Muse ».

Dans le menu « fichier », je sélectionne la commande qui se nomme « importer » et je sélectionne l’image qui se nomme « la-colorisation-a-l-aide-de-photoshop.jpg ».

L’image se retrouve au bout de mon curseur sous forme d’une vignette. Je clique à l’endroit de mon choix.

À l’aide du raccourci clavier « contrôle + moins », je zoom arrière pour augmenter la visibilité. L’image étant visible dans son entier, je peux me servir de l’une de ses poignées pour la réduire de façon homothétique à l’aide de la flèche noire.

Il me sera facile de centrer l’image en utilisant les commandes d’alignement.

À l’aide de l’outil « texte », je crée un bloc, au-dessus de la photographie, dans lequel j’inscris « Accueil ».

Le rouge #e30613

Dans la fenêtre « texte », je choisis la typographie « Verdana », corps 20. Pour la couleur rouge, j’inscris dans la cellule correspondant aux chiffres hexadécimaux, la valeur « e30613 » qui correspond au rouge « ptlb ».

Je centre mon texte et je lui attribue un sous-titre de « niveau 2 ».

J’indique la valeur 10 dans la cellule correspondant à « espace avant » afin de faire redescendre très légèrement mon texte.

Si besoin, je descends l’image : soit à la souris, soit à l’aide des flèches directionnels.

Je sélectionne l’outil « texte » dans la barre des outils. Sous l’image, je crée un bloc texte. Celui-ci repousse les limites de la page.

À l’aide de la flèche noire, je lui donne une taille et une position optimale. J’inscris dans le bloc texte « Télécharger notre brochure au format PDF »

Ensuite, je surligne mon texte pour modifier ses caractéristiques. Ici, je choisis la typographie « Verdana » avec un corps de « 14 » et je clique sur l’icône « centrer ».

Retournons sur le disque dur, afin de placer un doublon du fichier PDF dans le répertoire Muse.

En racine du disque dure, je clique sur le dossier se nommant «  éléments préparatoires ».

J’effectue un copier/coller dans le répertoire Muse.

Je retourne dans « Muse ».

Hyperliens

En haut à droite se trouve une commande qui se nomme « hyperliens ». Légèrement sur la droite, est associé à cette commande un menu déroulant. Je choisis l’option « lier au fichier ».

Je sélectionne le fichier PDF que je viens de copier dans le dossier « Muse ».

Afin que le fichier s’affiche sur un autre onglet, je clique sur le mot hyperliens. Et je coche l’option qui se nomme « ouvrir le lien dans un nouvel onglet ou page ».

Le texte « télécharger notre brochure au format PDF » s’est transformé. Ce texte est souligné et a pris la couleur bleue traditionnelle des liens. Pour faciliter le tout début de la création des deux autres pages, nous allons sélectionner à l’aide de la flèche noire le bloc qui contient le mot « Accueil » écrit en rouge.

La duplication des pages

Dans le menu « édition », j’utilise la commande « copier ».

Je retourne dans le premier onglet.

Je double-clique sur la page qui se nomme formation.

Ici, dans le menu « édition » j’utilise la commande « coller sur place ».

Ainsi le mot « Accueil » est placé au même endroit. À l’aide de l’outil texte de la barre des outils, je remplace le terme « accueil » par le mot « Formations ».

Je retourne sur l’onglet « numéro un » et je double-clique sur la page « Contact ».

Je vais de nouveau dans le menu « édition » et j’utilise la commande « coller sur place ».

Je remplace le terme « Accueil » par le terme « Contact ».

Je sauve de nouveau mon site Internet en utilisant la commande « enregistrer le site ».

Avant de voir le site Internet dans le navigateur, nous allons utiliser le mode « aperçu ».

Ce mode est un espace de travail qui permet de tester la navigation, mais il ne permet pas de télécharger le fichier PDF.

Cliquons sur la commande qui se nomme « aperçu » qui n’est autre qu’une prévisualisation. Passons maintenant au référencement. « Muse » permet de remplir des champs d’informations qui seront pris en compte par Google.

Les critères « in page » et « out page »

Il y a beaucoup de choses à savoir sur le référencement naturel. Pour simplifier à l’extrême, nous dirons qu’il existe des critères « in page » et les critères « out page ».

Les critères « in page » sont les critères qui seront gérés à l’intérieur des pages du site Internet. Parmi les règles importantes, chaque page doit posséder des métadonnées. Ce sont des informations qui seront présentes dans la partie « head » du code html est donc non visible par l’internaute.

Je retourne dans l’espace de travail qui se nomme « Plan ». J’affiche la « page d’accueil » et je clique sur le « bouton droit de la souris ». Apparaît alors un menu contextuel.

Propriété de la page

Je peux choisir l’option « propriété de la page ».

Dans la fenêtre qui s’affiche et qui se nomme « propriété de la page pour accueil », je sélectionne « métadonnées ».

Le champ correspondant à « description » permet d’inscrire un texte qui présente le site Internet.

Ici, j’inscris, par exemple, «Formation en Infographie, PAO, Web designer à Poitiers dans la Vienne (86) : PTLB - Formation by Pierre Tomy Le Boucher ». Dans le champ qui correspond à mots-clés, j’inscris des mots en rapport avec l’activité et le contenu de la page : «  Formation, infographie, PAO, multimédia, Web design, site Internet, logiciels Adobe, Photoshop, Illustrator, Indesign, DreamWeaver, plan de formation ». Les mots-clés sont séparés par des virgules.

Le troisième champ permet d’ajouter du code html, qui comme nous l’avons dit se trouvera dans la Balise « head ».

Ajout de code HTML

À titre d’exemple, j’inscrirais les termes suivants permettant ainsi à Google de savoir que je suis l’auteur de ce site Internet.

signe : plus petit que "meta name="author" content="Pierre Tomy Le Boucher" /plus grand que

Je clique sur OK pour refermer la fenêtre.

J’affiche, maintenant, la page qui se nomme « formations ».

Je clique sur le bouton droit de la souris et dans le menu contextuel, je sélectionne « propriété de la page ».

De nouveau une fenêtre s’affiche me permettant d’informer Google du contenu de la page « Formations ».

Vous l’aurez compris, il suffit de renouveler ces opérations sur chaque page en prenant soin d’avoir une expression explicite et différente pour chacune des pages.

Hiérarchie de l’information

Retournons sur la page d’accueil.

Le balisage des titres, des sous-titres et des paragraphes est fondamental pour indiquer à Google la hiérarchie de l’information.

Ici pour notre exemple, nous n’avons pratiquement pas de texte, mais il est nécessaire de créer cette hiérarchie.

Souvenez-vous, dans la page « gabarits » nous avons commencé à sélectionner les balises de titres. Le titre « PTLB - formation » est le titre de niveau « 1 » en utilisant la balise « H1 ». Il s’agit du titre le plus l’important.

Pour l’accroche, nous avons utilisé la balise de niveau » 3 ».

Pour le titre des pages écrits en rouge, nous avons utilisé la balise de niveau » 2 ».

En général, le texte utilise la balise « P » comme paragraphes.

Il est même possible de créer des hiérarchies encore plus profondes en utilisant des caractères « gras » ou « italiques ».

Google ne sait pas encore comprendre les images, il est donc pour l’instant incapable de définir le sujet de l’image même s’il est capable d’identifier, par exemple, des personnages.

Il est donc nécessaire d’informer Google du contenu de l’image comme nous l’avons évoqué plus haut.

En effectuant un clic droit sur l’image, il est possible de faire apparaître un menu contextuel. Je choisis la commande « modifier les propriétés l’image ».

Title et Alt

La nouvelle fenêtre qui s’affiche permet d’inscrire des informations dans 2 champs.

Le champ « infobulles » correspond à la Balise « Title » et le champ « texte de substitution » correspond à la valise « Alt ».

À l’instar de ce que nous avions préparé dans notre exemple précédent, nous remplirons les champs de la manière suivante.

Info bulles : « Photoshop est l’outil idéal pour la colorisation d’images avec des effets les plus surprenants ».

Texte substitution : « Portrait d’une personne avant colorisation et après colorisation grâce au logiciel Photoshop ».

Il faudra agir de la même manière sur l’ensemble des images du site Internet.

Les informations sur la page, la hiérarchisation des titres et la description des images sont les trois critères les plus importants des critères « In page ». Il existe d’autres critères un peu trop complexes à expliquer dans ce vidéogramme.

Backlink

Les critères « out page » correspondent à toutes les actions qui seront menées en dehors de la réalisation de site Internet. Nous prendrons comme exemple « le Backlink », c’est-à-dire trouver des solutions d’échanges de liens avec d’autres sites Internet faisant écho à vos propositions. Google considéra qu’il s’agit d’un complément d’information et validera la qualité de ce lien. Le faite de donner sa carte de visite ou un prospectus qui possède l’adresse du site Internet est aussi un comportement « out page ».

Le responsive design

Il nous reste à aborder la gestion du « responsive », c’est-à-dire proposer un contenu cohérent et visible sur Smartphone.

Le but étant de ne surtout pas diminuer la taille du texte en rendant la lecture impossible.

Déplaçons la règle verticale pour la positionner sur la largeur de 320 pixels. C’est aujourd’hui le format minimum utilisé par les Smartphones.

Ici, on peut constater des débordements. Les éléments sont positionnés de façon anarchique. Seule la photo ne paraît pas être affectée, elle est simplement réduite.

Avant de traiter la page « accueil », nous allons retourner dans la page « gabarits ».

Ici, nous allons effectuer la même opération en plaçant la règle au niveau des 320 pixels.

Pour pouvoir effectuer des modifications et que celle-ci soient prise en compte, il est nécessaire de cliquer sur l’icône qui représente un petit « + » pour créer ce que l’on appelle « un point de rupture ».

Il me devient donc possible de modifier des informations sur la page.

Il est possible de modifier l’aspect du texte : typographie, couleurs, etc., mais en aucun cas « supprimer » des mots.

En effet, l’aspect du texte appartient au CSS et le contenu du texte appartient au html.

Les CSS

La différence entre l’affichage pour un ordinateur de bureau et un Smartphone réside dans la modification des CSS. Toutefois, il est possible de substituer des textes, car les CSS sont capables de créer des blocs invisibles selon les situations.

À l’aide de la flèche noire, je modifie la taille du bloc qui contient le « titre et l’accroche » pour obtenir une mise en page plus adéquate.

À l’aide de la flèche noire, je modifie la taille et la position du menu.

Je modifie la hauteur de mon « header » à l’aide du petit curseur qui pilote la règle.

En prévision des autres pages, je modifie la position des règles.

Je prends le temps de modifier le « footer » afin de trouver une proposition acceptable.

Ici, les deux premières lignes du « footer » sont coupées de façon inadéquate. En effet le prénom est coupé en deux. Il m’est impossible d’effectuer un retour chariot, car cette manipulation affecterait le code html. En effet, ce retour chariot aurait une répercussion sur l’ensemble des pages du site Internet.

C’est pourquoi je vais créer un nouveau « bloc de texte ». Celui-ci sera affiché dans le mode 320 pixels et le bloc actuel sera masqué dans le mode 320 pixels grâce au CSS. Cette manipulation s’effectue sans toucher au code.

Tout ceci va paraître beaucoup plus simple dans un instant.

Afficher / Masquer selon le point de rupture

La version 320 pixels s’adresse plus particulièrement aux Smartphones. Les informations peuvent être simplifiées.

En effet, le code « Naf », le « Siret » et le « numéro d’enregistrement » du centre de formation ne sont peut-être pas utiles. Ainsi, nous nous contenterons du titre, de l’adresse et du téléphone.

Il est évident qu’un internaute désirant avoir des informations complètes proposées par le site « PTLB-Formation » ira probablement les voir sur un ordinateur.

Pour effectuer cette opération au plus simple, nous allons dupliquer le bloc actuel.

À l’aide de la flèche noire, je sélectionne le bloc.

Dans le menu « édition », j’utilise la commande « copier ».

Et en retournant de nouveau dans le menu « édition » j’utilise la commande « coller ».

Avec la flèche noire, je déplace le bloc sur le côté afin de pouvoir le modifier.

Ici, je ne garderais que « PTLB - Formation l’adresse et le téléphone. Si besoin j’augmente la taille des caractères.

Lorsque ces modifications sont réalisées, je sélectionne le bloc original à l’aide de la flèche noire, c’est-à-dire le bloc qui contient l’ensemble des informations.

À l’aide du bouton droit de la souris, je fais apparaître un menu contextuel qui me permet d’utiliser la commande « masquer dans le point d’arrêt ».

Il me suffit maintenant de placer, à l’aide de la flèche noire, l’autre bloc dans une position adéquate.

J’effectue un certain nombre d’opérations pour que le bloc soit bien positionné.

Dans le menu « fichier », j’utilise la commande « enregistrer le site ».

Il me suffit, maintenant, d’activer la visualisation sur 960 pixels pour voir les répercussions de la création de ce nouveau bloc.

Comme on pouvait s’y attendre, il existe 2 blocs. Nous effectuerons la même opération, nous sélectionnerons cette fois-ci le second bloc afin de le masquer à l’aide du menu contextuel en choisissant la commande « masquer dans ce point d’arrêt ».

Maintenant, je peux cliquer sur 960 ou 320 pour constater la différence de mise en page.

Activons maintenant la « page d’accueil ».

En cliquant sur 320, il ne se passe rien.

En effet il est nécessaire de créer un point d’arrêt. Les points d’arrêt peuvent être différents sur chaque page.

Je déplace la règle sur 320 pixels. Lorsque j’ai trouvé la bonne position, je clique sur le petit « + » qui se trouve en haut.

L’interface change légèrement et le point d’arrêt et créer.

Il me suffit de positionner mes blocs en fonction de l’esthétique que je désire obtenir.

Lien de téléchargement

Nous allons commencer par le lien hypertexte qui concerne le téléchargement de la brochure PDF.

Dans cette mise en page, le texte est très au bord. Il serait mieux que celui-ci soit en deçà de la marge.

Je réduis la taille du bloc et le texte finit par aller à la ligne.

Ainsi, je peux obtenir sur la première ligne « télécharger notre brochure » et sur la deuxième ligne « au format PDF ».

Toujours avec la flèche noire, je positionne mon texte un peu plus bas.

J’utilise la commande alignement pour centrer le bloc.

Occupons-nous maintenant de la photographie, il suffit de la sélectionner avec la flèche noire et de modifier ces proportions.

Ici nous allons grossir cette image pour que celle-ci soit alignée avec les marges verticales.

Occupons-nous du titre et plaçons le un peu plus bas.

En ce qui concerne les autres pages, il suffit de les activer, de créer un point de rupture à 320 et de positionner le texte en conséquence.

La question qui peut se poser, que se passe-t-il entre les mises en page entre 320 et 960.

Je me place sur la page qui se nomme « gabarit ».

Je déplace la poignée et j’observe l’incidence sur la mise en page.

En déplaçant la poignée jusqu’à 600 pixels, l’ensemble de la mise en page paraît correct.

Seuls les menus paraissent un peu trop réduits.

La poignée étant positionnée sur « 600 pixels », je clique sur le petit « + » pour créer un point d’arrêt sur la page « gabarit ».

Je prends quelques instants pour positionner correctement les blocs par rapport aux marges.

Nous allons effectuer la même opération sur la « page d’accueil ».

Ici, pour simplifier nous allons créer un point de rupture à 600 pixels, sachant que celui-ci pourrait être différent.

Je déplace la poignée verticale jusqu’à 600 pixels et je clique sur l’icône qui représente un petit « + »

Ici, nous n’avons pas grand-chose à faire.

Il suffit d’adapter les blocs aux marges et éventuellement grossir la photographie.

Lorsque je suis satisfait de la position des éléments, je vais dans le menu « fichier » et je sélectionne la commande « enregistrer le site »

Contenu html transférer sur le serveur distant

Nous allons placer notre site Internet sur notre serveur.

Il existe plusieurs manières de procéder, nous allons utiliser la plus simple en référence à ce que nous avons déjà réalisé.

Dans le menu fichier, j’utilise la commande qui se nomme « exporter au format html ». La fenêtre d’exportation s’affiche. Pour l’URL du site, nous inscrirons l’URL utilisée. Dans notre cas nous inscrirons : « http://www.ptlb-formation.com/demo/muse ».

Nous choisirons le répertoire « Muse » pour y sauver toutes les informations.

Pour éviter de mélanger les fichiers, nous allons créer un dossier nommé html.

Lorsque celui-ci est créé, il suffit de l’ouvrir et de cliquer sur le bouton « sélectionner un dossier ».

De retour dans la fenêtre qui se nomme « exporter au format html » je clique sur le bouton « OK ».

« Muse » génère les fichiers nécessaires.

Maintenant, il me suffit d’utiliser le logiciel « FilleZilla » pour copier les fichiers sur le serveur.

Sur la partie qui concerne le disque dur, je clique sur le bouton « droit de la souris » pour actualiser le contenu du disque dur.

Apparaît alors le répertoire qui se nomme Muse.

En ouvrant ce répertoire, on constate la présence de plusieurs fichiers ainsi qu’un dossier qui se nomme html. Vous l’aurez compris, seul le dossier html sera déposé sur le serveur.

Basculons côté serveur et créons un répertoire qui se nomme « muse ».

Simplement par cohérence, nous placerons le répertoire « html » du disque dur dans le répertoire « Muse » du serveur distant.

Après cette copie, il suffit d’aller dans le navigateur et d’inscrire l’adresse de notre site Internet, C’est-à-dire « www.ptlb-formation.com/demo/muse/html ».

Notre site est en ligne.

En cliquant sur le lien de téléchargement, il est possible de télécharger le fichier PDF.

Dans notre exemple, nous allons changer navigateur, car « opera » n’est pas capable de réduire sa taille jusqu’à 320 pixels.

Je sélectionne donc Firefox et je copie-colle l’adresse Internet.

En réduisant la taille du navigateur à partir de la droite, je vais pouvoir observer les différents points de rupture.

Lorsque j’arrive à 320, la mise en page est correcte. Nous sommes, éventuellement, gênés par la barre de « scroll », mais celle-ci n’existe pas sur les téléphones.

Il ne s’agit pas ici d’une formation sur Muse, mais il s’agit plutôt de présenter des exemples concrets. Il est évident qu’il est nécessaire d’apprendre l’ensemble des possibilités de ce logiciel.

Muse : une solution complète

Vous noterez qu’il répond à trois critères : il permet la réalisation de site Internet de type vitrine ou statique si vous préférez, il permet d’organiser le référencement naturel et enfin « Muse » permet de créer des sites responsives adaptés aux tablettes au smartphone, sans connaître la programmation.

Il faut ajouter que les nombreux widgets, que nous n’avons pas évoqués ici, sauf pour la création du menu, ajoutent des compléments aux logiciels permettant de faire des galeries d’images, des projections vidéo, des formulaires de contact, etc.

Voir la suite sur le vidéogramme suivant ...

Pierre Tomy Le Boucher