Votre premier site web réactif EverWeb 5 : Du design fixe au design réactif !

This post is also available in: English (Anglais)

Si vous utilisez EverWeb depuis longtemps, vous serez certainement ravi(e) des nouvelles fonctionnalités de réactivité introduites dans la version 2.8. Pour beaucoup d’entre vous, c’est l’occasion idéale de convertir les sites web existants à largeur fixe en sites web réactifs. Si vous envisagez ce saut, voici quelques astuces pour le rendre aussi simple que possible…

1. Utilisez toujours une copie de votre fichier de projet, car le changement de mise en page de largeur fixe à réactif ne peut pas être annulé. Il est également intéressant de noter que vous ne pouvez pas dupliquer un blog dans un fichier de projet EverWeb, il est donc préférable de dupliquer le fichier de projet. Pour copier votre fichier de projet, accédez à la fenêtre « Projects » (Projets). Cliquez sur les flèches haut / bas à droite du nom du fichier de projet dans la liste « Recent Projects » (Projets récents). Sélectionnez « Duplicate… » (Dupliquer…) dans le menu. Une fois le duplicata créé, il sera ajouté à la liste des projets récents avec le même nom que l’original mais avec « Copy » ajouté à la fin.
2. Conservez toujours une source de référence originale à portée de main lors de la refonte de votre site. Vous pouvez vous y référer lors de l’édition de pages converties. Utilisez la page en production de votre site web, le fichier de projet d’origine (par exemple, placez les fichiers de projet d’origine et les fichiers à copier côte à côte) ou dupliquez chaque page du projet avant de la convertir. Une référence visuelle facilite la localisation et le repositionnement des objets sur la page convertie pour recréer la même page, ou une présentation similaire, à la page d’origine.
3. Lorsque vous modifiez la présentation de la page de Largeur fixe à Réactif, vous constaterez peut-être que votre page est en désordre, avec des objets sur toute la page, surtout s’il y en a beaucoup. Les objets superposés dans une disposition de largeur fixe seront désormais affichés les uns à côté des autres dans une disposition réactive, si vous avez utilisé une forme comme couleur de fond, par exemple. Si possible, supprimez les formes sous-jacentes à d’autres objets. Si vous utilisez des cadres pour des images, supprimez-les avant de modifier la mise en page.
4. Certains objets existants deviendront redondants dans une mise en page réactive, comme dans le cas des formes de fond ci-dessus. Il en va de même si vous utilisez une forme d’arrière-plan pour le widget Menu de navigation. Ce n’est plus nécessaire car il est inclus dans les paramètres du widget. Certains objets, tels que les lignes à largeur fixe parfois utilisées pour séparer des sections dans des pages à largeur fixe, doivent être complètement supprimés car ils ne fonctionnent pas correctement dans une page sensible. Une approche simple et propre est préférable pour une conception réactive.
5. Tentez une approche «de haut en bas». Même si, au départ, votre page convertie ressemble à une frénésie visuelle, vous pouvez faire beaucoup pour la remettre rapidement en ordre. Essayez de travailler méthodiquement du haut de la page vers le bas. Cela signifie généralement que vous devez d’abord localiser le widget du menu de navigation. Une fois que vous l’avez trouvé, vous pouvez choisir une largeur maximale dans l’inspecteur des mesures et activer les options réactives du widget dans les paramètres du widget. Faites glisser le widget en haut de la page. Si vous utilisez des zones de texte, vous pouvez choisir de les rendre pleine largeur pour vous aider à organiser rapidement votre page. Si vous souhaitez conserver des objets à largeur fixe, vous pouvez également ajouter un widget Responsive Row à la page et y incorporer la (les) zone (s) de texte (voir astuce suivante pour plus d’informations !)
6. Utilisez le widget Responsive Row. Lorsque vous modifiez la mise en page Pour réactif, vous pouvez avoir des objets tels que des boutons, des icônes de réseaux sociaux, des images et du texte qui seraient mieux placés dans un widget Responsive Row. Les boutons de réseaux sociaux sont parfaits pour une telle tâche. Ajoutez d’abord un widget Responsive Row à la page. Suivant Cliquez ensuite sur l’objet que vous souhaitez incorporer dans le widget Ligne sensible. Dans le menu qui apparaît, sélectionnez « Embed In… » (Incorporer dans…), puis choisissez le widget Responsive Row que vous venez d’ajouter à la page.
7. Lorsque vous utilisez une présentation de page réactive, les objets que vous placez sur la page seront toujours en pleine largeur, alors comment pouvez-vous inclure des marges gauche et/ou droite ? Certains widgets et zones de texte vous permettent d’ajouter un « remplissage » aux objets pleine largeur, mais il existe un meilleur moyen de sélectionner cette option. Sélectionnez l’objet auquel vous souhaitez ajouter des marges, et cliquez sur l’inspecteur de métriques. Dans la section « Size » (Taille) de l’inspecteur, vous verrez le paramètre « Margins » (Marges) pour les marges gauche et droite. Ajoutez les valeurs de marge souhaitées. La page s’ajustera automatiquement dans la fenêtre de l’éditeur.
8. Tester le design de votre page est plus important que jamais ! Comme vous ne disposez que d’un design de page (au lieu de deux, voire de trois) pour tous les périphériques, il est important de tester tous les périphériques, en particulier si vous modifiez ultérieurement la conception de votre page. Le fait que votre page ait une belle apparence sur un type d’appareil ne signifie pas nécessairement qu’elle sera belle sur un autre type d’appareil.
9. Décisions sur le design. Jusqu’à présent, nous avons examiné les aspects pratiques de la conversion de pages d’une largeur fixe en mise en page réactive. Le processus en soi peut également vous obliger à prendre des décisions de modification de conception en cours de route. Les approches de conception à largeur fixe et à conception réactive ne sont pas les mêmes. Vous devrez donc peut-être supprimer des objets, utiliser des widgets différents ou repenser certains aspects de votre conception et de votre flux de travail lors de la conversion en une mise en page réactive. En fait, cela peut s’avérer être une bonne occasion de mettre à jour votre site web si vous ne l’avez pas déjà fait depuis un certain temps !
10. Une fois que vous avez converti vos pages de fixes en pages réactives, vous souhaiterez peut-être supprimer toutes les pages redondantes de largeur fixe dans votre fichier de projet. Il vaudrait également la peine de vérifier les Assets inutilisés pouvant être supprimés. Cela réduira la taille du fichier de projet, ce qui vous permettra de continuer à éditer le fichier de projet de manière dynamique et à économiser de l’espace disque. N’oubliez pas qu’avant de prendre de telles mesures, assurez-vous de conserver une copie de sauvegarde de votre fichier projet au cas où vous auriez besoin de la restaurer ultérieurement.

EverWeb fait de la conversion de votre site web de largeur fixe à réactif, un processus simple, surtout si vous prenez des mesures de précaution et êtes ouvert à la possibilité de modifications de la conception en cours de route.

Si vous avez des idées ou des questions, veuillez nous en informer dans la section Commentaires ci-dessous.

This post is also available in: English (Anglais)