{"id":4325,"date":"2019-04-14T18:23:36","date_gmt":"2019-04-14T16:23:36","guid":{"rendered":"https:\/\/www.allaboutiweb.com\/?p=4325"},"modified":"2019-04-15T21:51:57","modified_gmt":"2019-04-15T19:51:57","slug":"votre-premier-site-web-reactif-everweb-6-previsualisez-et-publiez","status":"publish","type":"post","link":"https:\/\/www.allaboutiweb.com\/fr\/2019\/04\/votre-premier-site-web-reactif-everweb-6-previsualisez-et-publiez\/","title":{"rendered":"Votre premier site web r\u00e9actif EverWeb 6 : Pr\u00e9visualisez et publiez\u00a0!"},"content":{"rendered":"

Maintenant que vous avez cr\u00e9\u00e9 votre premier site web r\u00e9actif, il est presque temps de le publier. La derni\u00e8re \u00e9tape consiste \u00e0 tester les pages de votre site pour vous assurer qu’elles fonctionnent toutes correctement avant d’\u00eatre publi\u00e9es.<\/p>\n

V\u00e9rifier votre site web<\/strong><\/p>\n

Il existe quelques moyens simples de vous faire rapidement une id\u00e9e de la qualit\u00e9 de votre site, quel que soit le p\u00e9riph\u00e9rique sur lequel il est visualis\u00e9. Il suffit de d\u00e9placer le bord droit de la fen\u00eatre de l’application EverWeb vers la gauche pour r\u00e9duire la largeur de l’application et de la fen\u00eatre de l’\u00e9diteur. La page s’ajustera automatiquement afin que vous puissiez avoir une id\u00e9e approximative de son apparence sur tablettes et autres appareils mobiles. Pour voir plus de la fen\u00eatre d’\u00e9dition et moins de l’interface utilisateur d’EverWeb, cachez-la enti\u00e8rement \u00e0 l’aide de l’option de menu Window -> Presentation Mode ou masquez simplement la fen\u00eatre Inspecteur \u00e0 l’aide de l’option de menu Window -> Hide Inspector.<\/p>\n

Conseils bons \u00e0 savoir<\/strong><\/p>\n

Voici quelques conseils qui vous aideront \u00e0 r\u00e9soudre certains des probl\u00e8mes les plus courants rencontr\u00e9s lors de la consultation d\u2019un site avant la publication\u2026<\/p>\n

    \n
  1. Les objets ne semblent pas r\u00e9actifs. Par exemple, vous avez peut-\u00eatre ajout\u00e9 un widget FlexBox \u00e0 la page, mais lorsque vous le visualisez sur un p\u00e9riph\u00e9rique mobile, il ne s’adapte pas du tout \u00e0 l\u2019affichage du p\u00e9riph\u00e9rique sur lequel il est visualis\u00e9. Si cela se produit, s\u00e9lectionnez le widget et v\u00e9rifiez que l’option \u00ab\u00a0Full Width\u00a0\u00bb (Pleine Largeur) ??a \u00e9t\u00e9 s\u00e9lectionn\u00e9e. C\u2019est bien souvent la source du probl\u00e8me. Bien que les objets puissent sembler \u00eatre de pleine largeur, il est parfois n\u00e9cessaire de v\u00e9rifier qu\u2019ils le soient bien\u00a0!<\/li>\n
  2. Les bords de la page se trouvent bien contre les bords du navigateur. EverWeb inclut une option \u00ab\u00a0Margins\u00a0\u00bb (Marges) dans l’inspecteur des mesures. Il vous suffit donc de d\u00e9finir les marges gauche et droite pour que votre page soit \u00e9loign\u00e9e du bord du navigateur.<\/li>\n
  3. Le contenu est trop proche des bords de la page. Assurez-vous que la largeur de votre contenu convient \u00e0 tous les appareils, par exemple, sur les appareils mobiles, vous voulez probablement que le contenu ait une largeur d’environ 300 \u00e0 350 pixels. N’oubliez pas non plus que l’ajout de marges aux c\u00f4t\u00e9s gauche et droit de la page r\u00e9duira la largeur du contenu lui-m\u00eame. Vous devrez donc peut-\u00eatre ajuster les widgets et\/ou le contenu en cons\u00e9quence.<\/li>\n
  4. Avez-vous besoin d’utiliser un widget Responsive Row\u00a0? Le widget Responsive Row est souvent utilis\u00e9 alors qu’il n’est pas n\u00e9cessaire. La plupart des widgets, par exemple, fonctionnent comme des objets de pleine largeur, ce qui \u00e9vite la n\u00e9cessit\u00e9 d’un objet Responsive Row.<\/li>\n
  5. Consid\u00e9rez la largeur maximale du contenu. EverWeb 2.9 vous permet de d\u00e9finir une largeur de contenu maximale pour les objets \u00e0 l’aide de l’inspecteur de mesures. Vous pouvez \u00e9galement d\u00e9finir la largeur de contenu maximale pour les objets contenus dans un widget Responsive Row via les param\u00e8tres de ce dernier.<\/li>\n
  6. Le menu de navigation ne se colle pas en haut de la page. Si vous utilisez le widget Navigation Menu dans un widget Responsive Row, assurez-vous que le widget Responsive Row est d\u00e9fini sur \u00ab\u00a0Fixed Position\u00a0\u00bb (Position fixe) dans l’inspecteur des mesures. Si vous l’avez d\u00e9fini dans le widget Navigation Menu, cela ne fonctionnera pas, car le widget est plac\u00e9 au-dessus du widget Responsive Row, c’est donc le widget Responsive Row qui doit \u00eatre r\u00e9par\u00e9.<\/li>\n
  7. Le contenu glisse sur le widget Navigation Menu. Assurez-vous d’avoir coch\u00e9 la case \u00ab\u00a0Always on Top\u00a0\u00bb (Toujours au premier plan) dans l’inspecteur des mesures, toujours pour la ligne r\u00e9active dont le widget Navigation Menu fait partie.<\/li>\n<\/ol>\n

    Tester vos pages<\/strong><\/p>\n

    Comme d’habitude dans EverWeb, utilisez sa fonction \u00ab\u00a0Preview\u00a0\u00bb (Aper\u00e7u) et s\u00e9lectionnez le navigateur avec lequel vous voulez tester votre site web. La plupart des navigateurs sont livr\u00e9s avec un mode design r\u00e9actif qui vous permet de tester vos pages avec toutes les tailles de p\u00e9riph\u00e9rique\u00a0:<\/p>\n

      \n
    1. Safari: pour acc\u00e9der au mode de conception r\u00e9actif, acc\u00e9dez d’abord au menu Safari -> Preferences. Cliquez sur le bouton \u00ab\u00a0Advanced\u00a0\u00bb (Avanc\u00e9), puis cochez la case \u00ab\u00a0Show Develop menu in menu bar\u00a0\u00bb (Afficher le menu D\u00e9veloppement dans la barre de menus). Fermez les pr\u00e9f\u00e9rences. Vous verrez le menu Develop dans la barre de menus. Utilisez l’option Develop -> Enter Responsive Design Mode (Entrer en mode design r\u00e9actif) lors du test de votre site web. Le mode design r\u00e9actif vous montrera diff\u00e9rents appareils Apple sur lesquels vous pouvez tester votre site.<\/li>\n
    2. Firefox: s\u00e9lectionnez l\u2019option Tools-> Web Developer-> Responsive Design Mode (Outils-> D\u00e9veloppeur web-> Mode r\u00e9actif). Vous pouvez ensuite s\u00e9lectionner la hauteur et la largeur de la page \u00e0 votre guise.<\/li>\n
    3. Google Chrome et Opera: Avec Chrome, allez \u00e0 l’option de menu View-> Developer-> Developer Tools (Affichage-> D\u00e9veloppeur-> Outils de d\u00e9veloppement). La fen\u00eatre du navigateur changera la page affich\u00e9e \u00e0 gauche de l’\u00e9cran et les outils de d\u00e9veloppement \u00e0 droite. La deuxi\u00e8me ic\u00f4ne \u00e0 gauche de la fen\u00eatre de droite est Toggle Device Toolbar (barre d’outils Basculer l’appareil) qui permet de basculer l’affichage de la fen\u00eatre de gauche entre les vues mobile et de bureau<\/li>\n
    4. Opera\u00a0: le mode r\u00e9actif de ce navigateur web fonctionne de la m\u00eame mani\u00e8re que Google Chrome. Cependant, vous commencez par acc\u00e9der au menu Developer-> Developer Tools (D\u00e9veloppeur-> Outils de d\u00e9veloppement) au lieu du menu View-> Developer ->Developer Tools (Affichage-> D\u00e9veloppeur -> Outils de d\u00e9veloppement).<\/li>\n<\/ol>\n

      Une fois que vous avez pr\u00e9visualis\u00e9 et test\u00e9 votre site web, vous \u00eates pr\u00eat \u00e0 publier votre site web r\u00e9actif une fois que vous avez effectu\u00e9 tous les changements r\u00e9v\u00e9l\u00e9s par vos tests\u00a0!<\/p>\n

      Si vous avez des commentaires, des suggestions ou des questions concernant cet article ou l’un des autres de la s\u00e9rie, veuillez nous en informer ci-dessous dans la section Commentaires.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Maintenant que vous avez cr\u00e9\u00e9 votre premier site web r\u00e9actif, il est presque temps de le publier. La derni\u00e8re \u00e9tape consiste \u00e0 tester les pages de votre site pour vous assurer qu’elles fonctionnent toutes correctement avant d’\u00eatre publi\u00e9es. V\u00e9rifier votre site web Il existe quelques moyens simples de vous faire rapidement une id\u00e9e de la qualit\u00e9 de votre site, quel que soit le p\u00e9riph\u00e9rique sur lequel il est visualis\u00e9. Il suffit de d\u00e9placer le bord droit de la fen\u00eatre de l’application EverWeb vers la gauche pour r\u00e9duire la largeur de l’application et de la fen\u00eatre de l’\u00e9diteur. La page s’ajustera […]<\/p>\n","protected":false},"author":32825,"featured_media":4396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[258,265,259,266,261],"tags":[],"class_list":["post-4325","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-everweb-fr","category-logiciel","category-site-web-reactif","category-web-design-fr","category-widgets-fr"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4325\/"}],"collection":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/users\/32825\/"}],"replies":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/comments\/?post=4325"}],"version-history":[{"count":2,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4325\/revisions\/"}],"predecessor-version":[{"id":4393,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4325\/revisions\/4393\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/4396\/"}],"wp:attachment":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/?parent=4325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/categories\/?post=4325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/tags\/?post=4325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}