Le format Smartphone (responsive)

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.



Mettre des info-bulles

Chemin :
Clic droit sur l’objet, l’image, puis « Option d’exportation Web » Clic sur l’onglet « Balises ALT et Titre »




La balise «H1

Le texte qui est associé à la balise «H1» est considéré comme ayant plus d’importance par les moteurs de recherche.
Elle est à utiliser 1 fois, voir 2 fois maximum par page.
Dans Webplus :
Après avoir sélectionné le titre de la page, dans le menu de commande, cliquer sur «Texte», puis sur «Paragraphe», ensuite choissez «HTML», puis «H1».



Modifier le nom du fichier

Modifier le nom du fichier de chaque page (SAUF LA PAGE D’ACCUEIL)
Cliquez droit avec la souris sur le nom de la page à renommer

Puis en bas du menu contextuel, cliquez sur «Propriétés de la page…»

Dans «Propriétes de la page»
Remplacer par exemple «page3.html», par «le-nom-du-fichier.html»
Ce nom de fichier peut comporter plusieurs mots, qui doivent être en rapport avec le contenu de la page et les mots recherchés par les internautes.
5 à 6 mots dans ce nom de fichier sont une bonne moyenne.

ATTENTION :
Le nom du fichier DOIT se terminer par «.html».
Ne DOIT PAS comporter ni d’accent, ni d’espace, QUE des lettres et des chiffres.



Nommer des fichiers images

Pour nommer des fichiers images, cliquer droit sur l’image, puis «Options d’exportation…».
Dans l’onglet «Options d’exportation de l’image», cliquer sur le bouton radio «Enregistrer sous le nom et l’emplacement choisi:»
Tapez le nom du fichier, avec des mots clés, SANS ACCENTS NI VIRGULE et terminer par l’extention de l’image (.jpg, .png, .gif)



Le descriptif de la page

La balise « meta description » (descrition de la page) est prise en compte par Google mais seulement dans l’affichage des résultats des requêtes.
Elle se voie ici.
 
Cette zone n’est pas prise en compte par Google pour le positionnement des pages.
Il arrive qu’un autre texte soit affiché, si Google considère que votre description ne correspond pas à la requête des internautes, ou si elle est vide.
Conclusion : Il faut donc soigner la description de chaque page de façon à ce qu’elle corresponde au contenu de cette page, et y mettre un message qui donne envie à l’internaute de cliquer sur votre page.
Il faut y insérer des arguments commerciaux et de marketing.