Votre premier site web réactif EverWeb 6 : Prévisualisez et publiez !

This post is also available in: English (Anglais)

Maintenant que vous avez créé votre premier site web réactif, il est presque temps de le publier. La dernière étape consiste à tester les pages de votre site pour vous assurer qu’elles fonctionnent toutes correctement avant d’être publiées.

Vérifier votre site web

Il existe quelques moyens simples de vous faire rapidement une idée de la qualité de votre site, quel que soit le périphérique sur lequel il est visualisé. Il suffit de déplacer le bord droit de la fenêtre de l’application EverWeb vers la gauche pour réduire la largeur de l’application et de la fenêtre de l’éditeur. La page s’ajustera automatiquement afin que vous puissiez avoir une idée approximative de son apparence sur tablettes et autres appareils mobiles. Pour voir plus de la fenêtre d’édition et moins de l’interface utilisateur d’EverWeb, cachez-la entièrement à l’aide de l’option de menu Window -> Presentation Mode ou masquez simplement la fenêtre Inspecteur à l’aide de l’option de menu Window -> Hide Inspector.

Conseils bons à savoir

Voici quelques conseils qui vous aideront à résoudre certains des problèmes les plus courants rencontrés lors de la consultation d’un site avant la publication…

1. Les objets ne semblent pas réactifs. Par exemple, vous avez peut-être ajouté un widget FlexBox à la page, mais lorsque vous le visualisez sur un périphérique mobile, il ne s’adapte pas du tout à l’affichage du périphérique sur lequel il est visualisé. Si cela se produit, sélectionnez le widget et vérifiez que l’option « Full Width » (Pleine Largeur) ??a été sélectionnée. C’est bien souvent la source du problème. Bien que les objets puissent sembler être de pleine largeur, il est parfois nécessaire de vérifier qu’ils le soient bien !
2. Les bords de la page se trouvent bien contre les bords du navigateur. EverWeb inclut une option « Margins » (Marges) dans l’inspecteur des mesures. Il vous suffit donc de définir les marges gauche et droite pour que votre page soit éloignée du bord du navigateur.
3. Le contenu est trop proche des bords de la page. Assurez-vous que la largeur de votre contenu convient à tous les appareils, par exemple, sur les appareils mobiles, vous voulez probablement que le contenu ait une largeur d’environ 300 à 350 pixels. N’oubliez pas non plus que l’ajout de marges aux côtés gauche et droit de la page réduira la largeur du contenu lui-même. Vous devrez donc peut-être ajuster les widgets et/ou le contenu en conséquence.
4. Avez-vous besoin d’utiliser un widget Responsive Row ? Le widget Responsive Row est souvent utilisé alors qu’il n’est pas nécessaire. La plupart des widgets, par exemple, fonctionnent comme des objets de pleine largeur, ce qui évite la nécessité d’un objet Responsive Row.
5. Considérez la largeur maximale du contenu. EverWeb 2.9 vous permet de définir une largeur de contenu maximale pour les objets à l’aide de l’inspecteur de mesures. Vous pouvez également définir la largeur de contenu maximale pour les objets contenus dans un widget Responsive Row via les paramètres de ce dernier.
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éfini sur « Fixed Position » (Position fixe) dans l’inspecteur des mesures. Si vous l’avez défini dans le widget Navigation Menu, cela ne fonctionnera pas, car le widget est placé au-dessus du widget Responsive Row, c’est donc le widget Responsive Row qui doit être réparé.
7. Le contenu glisse sur le widget Navigation Menu. Assurez-vous d’avoir coché la case « Always on Top » (Toujours au premier plan) dans l’inspecteur des mesures, toujours pour la ligne réactive dont le widget Navigation Menu fait partie.

Tester vos pages

Comme d’habitude dans EverWeb, utilisez sa fonction « Preview » (Aperçu) et sélectionnez le navigateur avec lequel vous voulez tester votre site web. La plupart des navigateurs sont livrés avec un mode design réactif qui vous permet de tester vos pages avec toutes les tailles de périphérique :

1. Safari: pour accéder au mode de conception réactif, accédez d’abord au menu Safari -> Preferences. Cliquez sur le bouton « Advanced » (Avancé), puis cochez la case « Show Develop menu in menu bar » (Afficher le menu Développement dans la barre de menus). Fermez les préférences. Vous verrez le menu Develop dans la barre de menus. Utilisez l’option Develop -> Enter Responsive Design Mode (Entrer en mode design réactif) lors du test de votre site web. Le mode design réactif vous montrera différents appareils Apple sur lesquels vous pouvez tester votre site.
2. Firefox: sélectionnez l’option Tools-> Web Developer-> Responsive Design Mode (Outils-> Développeur web-> Mode réactif). Vous pouvez ensuite sélectionner la hauteur et la largeur de la page à votre guise.
3. Google Chrome et Opera: Avec Chrome, allez à l’option de menu View-> Developer-> Developer Tools (Affichage-> Développeur-> Outils de développement). La fenêtre du navigateur changera la page affichée à gauche de l’écran et les outils de développement à droite. La deuxième icône à gauche de la fenêtre de droite est Toggle Device Toolbar (barre d’outils Basculer l’appareil) qui permet de basculer l’affichage de la fenêtre de gauche entre les vues mobile et de bureau
4. Opera : le mode réactif de ce navigateur web fonctionne de la même manière que Google Chrome. Cependant, vous commencez par accéder au menu Developer-> Developer Tools (Développeur-> Outils de développement) au lieu du menu View-> Developer ->Developer Tools (Affichage-> Développeur -> Outils de développement).

Une fois que vous avez prévisualisé et testé votre site web, vous êtes prêt à publier votre site web réactif une fois que vous avez effectué tous les changements révélés par vos tests !

Si vous avez des commentaires, des suggestions ou des questions concernant cet article ou l’un des autres de la série, veuillez nous en informer ci-dessous dans la section Commentaires.

This post is also available in: English (Anglais)