Le format Smartphone (responsive)

Le format Smartphone (responsive)

10 mars 2016 Le référencement Support Webplus 0
image_pdfimage_print
Aujourd’hui il est indispensable que le visuel d’un site Internet soit optimisé à la fois pour le format écran d’ordinateur et le format Smartphone.
ATTENTION : Le poids des pages est un facteur encore plus important pour les mobiles que pour le format ordinateur. Il vous faudra donc faire très attention aux poids des images. Il faut que les pages se chargent le plus vite possible. Seule l’information importante est mise en avant.
Le format pour Smartphone doit avoir une largeur de 450 pixels pour une longueur qui peut être variable suivant le contenu de chaque page. 
  1. Copier la maquette principale de votre site avec les options « Copier les objets » – « Copier l’arrière plan » – « Copier le code HTML« 
  2. Nommez cette nouvelle maquette comme par exemple « Smart-maquette« .
  3. Mettez cette maquette avec une largeur de 450 pixels.
  4. Copier chaque page au format « écran » de votre site en faisant un clic droit sur la page à copier puis « Copier« 
  5. Le nom de la page doit être, pour des raisons de classement, par exemple « Smart-accueil » 
Une fois que toutes les pages sont copiées, nous allons les mettre à la largeur Smartphone (450 pixels).
Pour ce faire dans la commande « Outils » – « Gestionnaire de site » – « Propriétés de la page…« , vous sélectionnez toutes les pages « Smartphone » en cochant la case de gauche correspondante.
En bas de la colonne « Largeur » vous remplacez la largeur actuelle (généralement 960 ou 980 pixels) par la largeur « Smartphone » : 450 pixels. 
Dans la liste de gauche vous sélectionnez « Propriétés de la maquette« , dans la zône « Largeur » vous remplacez la largeur actuelle par la largeur « Smartphone » (450 pixels), puis vous fermez la boîte de dialogue.
A ce stade le paramêtrage de la mise en page est terminé, il reste la mise en page de chaque page afin de redimensionner chaque objet à l’intérieur des pages.
Dans chacune des pages au format écran, dans les propriétés (clic droit sur le nom de la page, puis propriétés).

  1. Dans « Redirection » sélectionnez « Redirection » 
  2. Vous cliquez sur le bouton « Lien…« 
  3. Ensuite, dans la boîte de dialogue suivante, cliquez sur « Page du site« .
  4. Dans la boîte à liste « Nom de la page » sélectionnez la page correspondant au format « Smartphone« 
  5. Confirmez en cliquant sur « OK« 
  6. De retour dans les « Propriétés de la page« , vous cochez la case « Rediriger uniquement si: » (par défaut c’est « Le périphérique mobile est reconnu. » qui est sélectionné.
  7. Confirmez la boîte de dialogue en cliquant sur « OK« 
Recommencez l’opération ci-dessus pour toutes les pages au format « écran« 
Dans chacune des pages au format Smartphone, dans les propriétés (clic droit sur le nom de la page, puis propriétés).

  • Dans « Navigation » (colonne de gauche) « Options de navigation » Dans la liste choisissez « Exclure la page de la navigation« .
  • Dans « Maquette » (colonne de gauche) décochez la ou les maquettes correspondant au format écran et cochez la ou les maquettes correspondant au format smartphone.
Redimensionnez les objets de chacunes de vos pages pour que tous tiennent dans la page.
Publiez vos pages sur le Web
Dorénavant, lorsqu’un internaute arrivera sur une de vos pages au format écran* avec un smartphone, il sera redirigé automatiquement vers la page au format Smartphone de son navigateur.
No votes yet.
Please wait...