Bonjour,

Aujourd'hui, quel que soit le modèle de site choisi : grands ou petits formats, les versions smartphones ou tablettes sont automatiquement conçues en parallèle de la version principale (avec cependant,quelques petites retouches à apporter).

Merci beaucoup pour votre éclairage.

Que veux dire "automatiquement" dans ce cas? En parallèle, deux versions distinctes ou une seule version qui est adaptative à tous les supports (pc, tablette, androïd) genre Design Web réactif ? Il y a une subtilité que je n'appréhende pas... 🤔

Ça y est, je crois avoir compris le principe de "parallèle". Il est possible effectivement avec la dernière version(16) que j'essaie, de créer plusieurs versions de site qui semblent inter-agir l'un vers l'autre (faute de pouvoir les essayer sur un mobile ou une tablette androïd pour l'instant) et s'adaptent automatiquement et au périphériques de tailles différentes comme expliqué dans les aperçus ci-dessous:

Moi qui la voyais bien plus simple avec un site bien tranquille, je crois qu'il va falloir que je mette les mains dans cette nouvelle usine à gaz de la version 16 si je souhaite un résultat bien plus optimisé sur différentes plateformes.

Le problème que je subodore venir, est que les versions adaptatives sont plus contraignantes au niveau graphisme, puisqu'il faut anticiper finement le résultat final...

Non, c'est plus simple qu'il n'y paraît.

Bonne journée

Fb

Bonjour,

Les navigateurs actuels que ce soit sur PC (Chrome, Edge sous Windows 10), sur tablette (Safari sous IOS 12) ou sur Smartphone (Chrome, Samsung Internet sous Android 8 et sup), disposent tous d'une gestion adaptative de l'affichage et que ce soit en mode paysage ou en mode portrait.

Bien cordialement.

DéDé.

Bonjour,

 

Les navigateurs actuels que ce soit sur PC (Chrome, Edge sous Windows 10), sur tablette (Safari sous IOS 12) ou sur Smartphone (Chrome, Samsung Internet sous Android 8 et sup), disposent tous d'une gestion adaptative de l'affichage et que ce soit en mode paysage ou en mode portrait.

 

Bien cordialement.

DéDé.

Merci beaucoup pour votre commentaire.

Que veut dire "gestion adaptative de l'affichage" dans ce cas ? Est-ce que même si l'on créer un site "rétro" simple (à l'ancienne) avec une page fixe 770 pixels de large, s'adaptera automatiquement à l'écran mais n'aura pas d'effets dynamiques dans la page, ou cela signifie que dès le début de la création du site il faut surtout choisir le format adaptatif (qui créer au moins deux versions automatiquement ) pour justement s'adapter aux différents formats ?

Re,

Que veut dire "gestion adaptative de l'affichage" dans ce cas ?

Je laisse répondre mes collègues rompus aux dernières versions de Web Designer.

Personnellement je compose des petits sites web sur la version 10. Pour m'affranchir de la taille de la page en fonction des dispositifs de visualisation et des navigateurs, dans les options de page -> Taille de la page, je décoche l'option "Verrouiller taille de page". Ceci me permet de m'affranchir d'un affichage fixe sur les différents navigateurs.

Bien cordialement.

DéDé.

Pour m'affranchir de la taille de la page en fonction des dispositifs de visualisation et des navigateurs, dans les options de page -> Taille de la page, je décoche l'option "Verrouiller taille de page". Ceci me permet de m'affranchir d'un affichage fixe sur les différents navigateurs.

Merci beaucoup pour votre contribution.

Houaaa ! C'est super ce que vous évoquez. 😃

Pourriez-vous détailler la procédure exacte sur l'interface pour déactiver cette option sur Web Designer ? Ainsi je pourrais voir si cela est possible sur le site sur lequel je travaille sur la version 8 et constater le résultat sur une page web PC d'essai. Etant néophyte je tâtonne mais je reste confiant...

Fichiers / options pages.

Mais perso je ne le conseille pas, car il suffit que la souris ou un clic malheureux ait lieu et bonjour les embêtements si on ne prend garde, surtout quand on commence un site.

Choisir plutôt variantes de site web. Service / variantes de sites web / créer / etc... et vous aurez une version principale ( pc ) et une version mobile que vous pourrez ajuster à ce format. Les pages sont crées en même temps.

Ne pas oublier que la version mobile doit être réduite et ne contenir que l'essentiel de votre site ( tout en gardant les mêmes pages que le principal.

aWanderer

Merci beaucoup, petit à petit j'y vois plus clair.

Fichiers / options pages.

Mais perso je ne le conseille pas, car il suffit que la souris ou un clic malheureux ait lieu et bonjour les embêtements si on ne prend garde, surtout quand on commence un site.

Effectivement, il y a deux jours j'ai "glissé/cliqué" sur des éléments de page et un décalage d'affichage d''une page à l'autre s'est manifesté en largeur sans m'en rendre compte, et c'était très difficile à rattraper manuellement. Il a fallu que j'annule la page qui posait problème.

Si l'on clique sur "verrouiller la taille" il n'est plus possible d'appliquer un étirement vertical ou horizontal. Pour moi c'était déverrouillé par défaut sur chaque page. Une fine ligne en pointillé sur le bas de page fait son apparition pour indiquer si la page est déverrouillée (ou pas) comme sur ces exemples:

Choisir plutôt variantes de site web. Service / variantes de sites web / créer / etc... et vous aurez une version principale ( pc ) et une version mobile que vous pourrez ajuster à ce format. Les pages sont crées en même temps.

Chose possible dans la version 16 que j'essaie mais pas dans la 8.

Ne pas oublier que la version mobile doit être réduite et ne contenir que l'essentiel de votre site tout en gardant les mêmes pages que le principal.

Comment faire concilier "version réduite, contenir l'essentiel" et "en gardant les mêmes pages que le principal" ?

Alors qu'est ce que l'on peut modifier, ajouter ou supprimer sur la version réduite sans affecter la synergie avec la principale et inversement ?

Il y a une subtilité que je ne saisis pas...

exemple :

après avoir choisi les variantes de site,

vous êtes en possession de : une page de 760 px qui correspond au site principal ( pc )

et de une page de 480 px qui correspond au site mobile ( smartphone )

donc la page 480 px ne pourra pas contenir ce qui est sur la page 760 px.

autre exemple plus parlant , vous ne pourrez jamais mettre le contenu d'une demi bouteille de bière dans un verre à moutarde. Il faudra faire un choix, commencer par enlever la mousse et un peu de liquide pour remplir le verre.

Dans le cas des variantes de sites la mesure largeur des pages 760 et 480 px est toujours la même. Ce qui fait le changement d'affichage sur différents écrans, c'est la largeur des pages et non la largeur et hauteur.

E n espérant avoir été assez clair dans mes explications.

aWanderer

exemple :

après avoir choisi les variantes de site,

vous êtes en possession de : une page de 760 px qui correspond au site principal ( pc )

et de une page de 480 px qui correspond au site mobile ( smartphone )

donc la page 480 px ne pourra pas contenir ce qui est sur la page 760 px.

autre exemple plus parlant , vous ne pourrez jamais mettre le contenu d'une demi bouteille de bière dans un verre à moutarde. Il faudra faire un choix, commencer par enlever la mousse et un peu de liquide pour remplir le verre.

Dans le cas des variantes de sites la mesure largeur des pages 760 et 480 px est toujours la même. Ce qui fait le changement d'affichage sur différents écrans, c'est la largeur des pages et non la largeur et hauteur.

E n espérant avoir été assez clair dans mes explications.

aWanderer

Merci beaucoup pour votre patience et votre précieuse aide.

La moutarde ça pique au nez, la bière faudrait pas qu'elle se transforme en bière tombale, quant à la mousse de mon fauteuil, je suis en harmonie avec.😉 Donc vous expliquez si j'ai bien compris que "qui peut le plus peut le moins" mais pas l'inverse. Donc faut essayer ce qui passe ou pas. Je suis loin de tout bien comprendre mais à force de s'y mettre comme en archéologie, les éléments sont révélés petit à petit... "

Bonjour,

Il est logique qu'une version pour smartphone obéisse aux dimensions de son format, tout comme pour les tablettes. Si le logiciel vous permet de transposer le travail effectué de la version pc sur les versions portables, il en va de soi qu'il faudra ajuster le contenu à ce nouveau format. Bref, lorsque l'on crée un site destiné à être lu sur tous les médias du web, il est évident qu'une page doit se résoudre à l'essentiel de manière à être facilement lue sur tous les médias. L'affichage sera obligatoirement différent, mais pas le contenu. Vous serez seulement amené à réduire la taille des photos ainsi que la taille des textes si vous voulez gagner de la place afin de faire une page moins longue à dérouler. Magix Designer vous propose les formats du web prêts à l'emploi, il n'y a plus qu'à ajuster le contenu sur chaque page. Lorsque vous construisez votre site sur le format pc, les textes et images sont automatiquement reportés sur ou près de la structure des autres médias, à vous de jouer pour le reste.

Pour terminer, la hauteur des pages n'obéit pas à sa largeur on peut élargir une page sans toucher à sa hauteur et vice versa. 760 x 480 est une proposition de format pas une obligation. (il vous suffit de tirer sur les lignes pointillées).

Je possède la dernière version du logiciel et je dois admettre que la transposition des contenus pour chaque média a été améliorée depuis son origine, le travail du webmaster s'en trouve considérablement facilité.

Bon dimanche.

Fb

Merci beaucoup FB pour votre éclairage.

Vous dites: "Les textes et images sont automatiquement reportés".

(Vers.16) Je ne sais pas ce qui s'est passé mais j'ai pu automatiquement inclure un arrière plan "rosé" sur la page du site principal pc et il s'est copié tout seul sur la version mobile, toutefois, j'ai essayé de copier une image png et il m'a dit que cela n'était pas possible de la mettre en mode variante... De plus juste quand j'essaie un aperçu site web (vous savez l'icone avec un oeil) il me dit qu'une police (FontAwesome) est manquante etc.

C'est à rien ni comprendre. Je n'ai encore quasiment rien fait sur ce site à part changer l'arrière plan et ajouté une image png. Un rapport de bug s'est manifesté et à été envoyé à Magix. Le coup de la police qui dévisse, il me la ressert à chaque fois que j'essaie de valider la manoeuvre d'aperçu web . 🤔

Code de référence: 4ca48779-3eff-4175-b891-b87405096355

Il me rajoute aussi un autre problème sur l'aperçu web: Normalement c'est une image png parfaitement transparente mais il y a une sorte de décalage dans le résultat visuel. On peut le constater en zoomant sur l'icone png, la transparence n'est respectée.

Pourriez vous m'indiquer la manoeuvre exacte pour inclure une image ou un texte en mode variante sur une page vierge et sur un site déjà existant ? Le site en mode variante que j'essaie est "superfoodstore_website.web".

Bon dimanche à vous aussi.

Bonjour,

Personnellement je fixe la taille maximum en largeur à 1200 px. Mais sa peut varier en fonction des demandes.
Après pour les sites ou les pages doivent s’adapter au clients (la fenêtre ou elle s'affiche) il y a la notion de point de rupture avec des valeurs maximum et minimum de largeur. celle des smartphone des tablettes et des écrans pc.

J'ai trouvé un site intéressant qui expliquera la chose mieux que moi.
https://www.groupe-scala.com/7-conseils-pour-realiser-son-site-en-responsive-design/

En espérant avoir répondu à la demande initial.

Re :

Vous sélectionnez votre .png, ensuite dans l'onglet service vous cliquez sur la mention "Variantes de sites web" et ensuite sur "Partager avec toutes les variantes". (a noter que le copier-coller fonctionne sans problème chez moi)

Une mauvaise manipulation sans doute pour votre problème de décalage, car un .png n'influence aucune autre image comme je le vois avec le design de votre page.

je ne sais pas pourquoi on vous signale la police FontAwesome peut être un besoin pour certaines fonctions du logiciel (cependant elle est présente sur mon pc). Mais comme vous utilisez le logiciel en essai, il se peut que les polices spéciales utilisées par le logiciel ne soient pas installées et s'installeront lorsque vous l'aurez acheté

Quant aux rapports d'erreur, j'en ai souvent rencontrés moi-aussi et sont dus à de mauvaises manipulations. rien ne vous oblige d'envoyer le rapport.

Fb

Bonjour,

Personnellement je fixe la taille maximum en largeur à 1200 px. Mais sa peut varier en fonction des demandes.
Après pour les sites ou les pages doivent s’adapter au clients (la fenêtre ou elle s'affiche) il y a la notion de point de rupture avec des valeurs maximum et minimum de largeur. celle des smartphone des tablettes et des écrans pc.

J'ai trouvé un site intéressant qui expliquera la chose mieux que moi.
https://www.groupe-scala.com/7-conseils-pour-realiser-son-site-en-responsive-design/

En espérant avoir répondu à la demande initial.

Merci beaucoup pour votre précieuse aide. Oui effectivement, le lien que vous partagez avance la forte progression du mobile et la nécessite du mode site web adaptatif qui a une marge de manoeuvre d'affichage plus grande que la "vielle" page fixe. J'ai lu sur un autre site qu'en Asie la progression se rapprocherait des 60% sur mobile. Le lien que vous évoquez parle aussi beaucoup de CSS, div, point fixe absolu etc, notions avec lesquelles je ne suis pas à l'aise du tout même si je comprends que c'est la structure originelle de programmation des modes d'affichages. D'ailleurs c'est pour cela que je préfère et de loin un logiciel comme Web designer qui comme pour piloter une voiture nécessite un permis B mais pas d'être un ingénieur en électro-mécanique pour aller d'un point a vers b. En tout cas votre lien contribue à me convaincre que la version 8 que j'ai qui n'a pas de gestions de version adaptative multi-plateformes ne suffit plus vue l'évolution de l'affichage web.

Encore merci.

Bonjour,

Comme dit précédemment, je compose des petits sites web sur la version 10 de Web Designer et à "l'ancienne", c'est à dire en site dédié.

La taille de mes pages est bien souvent personnalisée avec une largeur de 1200 px et une hauteur de 960 px.

Après la publication de la page et avant sa mise en ligne, je corrige le code source htm, dans le "head" et en particulier le meta tag "viewport" comme suit

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Cette ligne définit la largeur du « viewport » pour être la même que la taille de l'écran de l'appareil utilisé pour afficher le site. L'échelle d'affichage du site sera 100 % et l'échelle maximum également de 100 %.

Ensuite c'est au niveau du navigateur utilisé sur l'écran de l'appareil utilisé (Smartphone, tablette ou PC) que l'utilisateur peut paramétrer son mode d'affichage.

A titre d'exemple, le paramétrage du navigateur Samsung Internet sous Android 8 permet de choisir le mode d'affichage d'un site web quelconque soit en Version Bureau, soir en Version Mobile.

Voici ce que cela donne pour le site du présent forum sur un Smartphone Galaxy A5 (2017).

Affichage Version Bureau

Affichage Version Mobile

Bien cordialement.

DéDé.

Re,

Selon le site visité et si ce dernier est conçu en mode dédié et en mode mobile, le mode d'affichage choisi sur le dispositif mobile permet de naviguer soit sur un type de site ou l'autre type de site.

Exemple sur 301 papillons de l'ami François que je salue au passage.

Si la mise en page retenue n'est pas trop chargée, vous pouvez vous contenter de concevoir un seul site et sans vous prendre la tête.

Bien cordialement.

DéDé.

Si la mise en page retenue n'est pas trop chargée, vous pouvez vous contenter de concevoir un seul site et sans vous prendre la tête.

 

Bien cordialement.

DéDé.

Merci beaucoup Dédé pour les exemples et explications.

Avec la version 16 d'essai (que je vais vraisemblablement acheter en mise à jour) j'expérimente des effets d'affichage variés qui n'existent pas dans la version 8.

Bonjour,

Comme dit précédemment, je compose des petits sites web sur la version 10 de Web Designer et à "l'ancienne", c'est à dire en site dédié.

La taille de mes pages est bien souvent personnalisée avec une largeur de 1200 px et une hauteur de 960 px.

Après la publication de la page et avant sa mise en ligne, je corrige le code source htm, dans le "head" et en particulier le meta tag "viewport" comme suit

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

DéDé.

Merci beaucoup Dédé pour ces nombreux exemples détaillés. Je constate que vous êtes à l'aise dans les modification du code source.

Questions:

Juste au cas où je devienne à l'aise avec les notions que vous évoquez comment accédez-vous à ce code source et où est cette ligne de code ?

Avec la version 16 est-il possible (ce que je suppose mais je n'en suis pas certain) de faire la même chose via l'interface de Web Designer ?

Le meilleur à vous 🙂

Après la publication de la page et avant sa mise en ligne, je corrige le code source htm, dans le "head" et en particulier le meta tag "viewport" comme suit

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Est-ce de cela qu'il s'agit, la console pour ajouter dans "head" ? :