Rendre un site “responsive”

Qu’est ce qu’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ésout cette problématique en proposant au webmestre 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.

Comment utiliser le “responsive” ?

Astuce

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 doive zoomer pour voir les éléments de votre site).

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

    ../../../_images/icon_props_website1.png
    ../../../_images/screen_settings1.png
  2. Sur votre espace de travail, sélectionnez l’icône 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ément ( agrandir la plupart d’entre eux ) pour avoir un rendu mobile lisible.

  5. Publiez, votre site est maintenant « responsive »

Conseils généraux

  • Utiliser le zoom

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

  • Utiliser le masquage d’éléments

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

    ../../../_images/button_hide_show.png