Rendre un site “responsive”

Pour simplifier, un site « responsive » est un site Internet que l’on pourra consulter de façon lisible et ergonomique sur diverses tailles d’écran (ordinateur de bureau jusqu’au smartphone). WaFx résoud cette problématique en proposant au Webmaster de définir les pages de son site avec des composants dont les propriétés géométriques seront dépendantes de l’écran du visiteur.

Astuce

Si vous débutez, il est conseillé de ne mettre que 2 écrans de travail (1 ordinateur de bureau + mobile), votre site sera ainsi plus simple à modifier

Vous avez créé votre site au format ordinateur et vous souhaitez le rendre accessible sur un smartphone (sans que le visiteur ne doivent zoomer pour voir les éléments de votre site).

  1. Activez le format mobile dans les propriétés générale du site (choisissez 2 mises en page)

    ../../_images/icon_props_website1.png
    ../../_images/screen_settings1.png
  2. Sur votre espace de travail, selectionnez l’icone correspondant au format mobile

    ../../_images/screen_selection_mobile.png
  3. Votre page se retrouve comme « reduite », celle ci n’est pas encore au format mobile

  4. Il faut ensuite agencer chaque éléments ( agrandir la plupart d’entre eux ) pour avoir un rendu mobile lisible.

  5. Publiez, votre site est maintenant « responsive »

Conseils

  • Utiliser le zoom

    N’hésitez pas à activer le zoom (en haut a gauche) pour facilement réperer vos éléments.

  • Utiliser le masquage d’éléments

    Vous pouvez affiner votre mise en page en masquant certain éléments selon l’écran ou la langue

    ../../_images/button_hide_show.png

Astuce

Vous pouvez également définir des « écrans virtuels » qui permettront à votre site de multiplier ses formats d’affichage en faisant une mise à l’échelle de vos écrans de travails Les écrans virtuels vous seront tres utiles pour gagner du temps et ne pas dupliquer inutilement plusieurs mise en page à des échelles différentes.

../../_images/extension_screen_settings.png