]]>
Menu
Recherche
La zone de conseils et modes d'emploi des outils votresite.ca
#main-column

Configurer la version mobile de votre site Web

Bonne nouvelle!

Les sites Web faits avec l'outil de création votresite.ca sont automatiquement compatibles avec les tablettes (iPad, Androïd) et les téléphones intelligents (iOs, Androïd, BlackBerry, Windows Phone, etc.). Allez tout de suite voir de quoi a l'air le vôtre!

Si l'allure de votre site Web sur un appareil mobile ne vous satisfait pas, nous vous proposons ici comment créer, avec les outils votresite.ca, une version optimisée de votre site Web pour les appareils mobiles. Un autre service sans frais, exclusif à nos membres!

En quelques clics, vous rejoindrez 100% de vos clients, qu'ils soient devant un ordinateur, une tablette ou un téléphone intelligent!

Configurer votre site Web mobile


Étape 1

  • Choisissez d'abord un nom de sous-domaine pour votre site mobile:
    Exemple: [m.votrenomdedomaine.com]

Il faut identifier votre nom de domaine comme étant mobile. D'où la présence du m. Inutile de mettre un terme plus long, vu l'espace restreint sur un appareil mobile.

Plus votre nom de domaine est court, plus il sera visible dans la fenêtre de navigation du mobile. C'est vraiment plus «vendeur» de voir votre nom de site au complet dans la fenêtre de navigation.


Étape 2

Copiez le message suivant (entre < et >), remplissez-le et faites-le parvenir à l'équipe du service client votresite.ca:

Contacter l'équipe votresite.ca

<Je veux faire un site mobile. Voici mes coordonnées:
Nom :
No de téléphone :
Nom de domaine :
Nom du sous-domaine choisi pour le site mobile :
Merci de me prévenir quand je pourrai commencer à le créer.>

On vous créera un environnement vierge pour votre site mobile. Normalement, le délai est de 24 heures (jour ouvrable).


Étape 3

En ouvrant une session dans le panneau de gestion de votre site, vous devez cliquez sur Gestion de votre site Web pour voir vos deux noms de domaines: celui de votre site Web de base et celui de votre version mobile. Il suffit de cliquer sur l'un ou sur l'autre en fonction du site sur lequel vous voulez travailler.

* IMPORTANT: il ne faut jamais travailler sur vos deux sites en même temps, car cela peut créer des conflits et engendrer une perte de données. Fermez donc votre session chaque fois que vous faites une modification d'un site à l'autre.

En réalisant les étapes 1 à 3, vous avez activé un nouvel outil de création de sites pour faire la version mobile de votre site. Il reste deux étapes à franchir avant de le structurer.


Étape 4

Cette étape est importante. Elle fait en sorte qu'à chaque fois qu'un internaute voudra se rendre sur votre site, notre système reconnaîtra le type d'appareil qu'il utilise.

Ainsi, s'il navigue à partir d'un appareil mobile, il sera automatiquement redirigé vers la version mobile de votre site Web.

  • Dans l'outil de création de votre site principal, ajoutez un module Script, en choisissant l'option visible sur toutes les pages (barre bleue). Pour savoir comment faire, consultez la chronique:

Ajouter un module sur une page ou sur toutes les pages

  • Dans la case d'ajout de script, copiez/collez tel quel, le code suivant:


  • À l'intérieur du code, entrez l'URL de votre site mobile (inscrire votre URL tel qu'il est inscrit ici entre les crochets [ ]:
    [http://m.votrenomdedomaine.com/]

Ce script fonctionne pour les appareils les plus utilisés: Windows Phone, iPad, iPhone, Androïd et BlackBerry. Si vous voulez créer une redirection en fonction d'autres types d'appareils, communiquez avec notre équipe du service aux membres. On vous expliquera comment modifier le script.

* À NOTER: ce script peut aussi être intégré à la programmation de votre site Web même si celui-ci n'a pas été créé avec notre outil de création de sites.

Ajouter un script


Étape 5

En consultant votre site mobile, plusieurs mobinautes (eh oui! c'est comme cela qu'on appelle les internautes qui utilisent un appareil mobile!) voudront naviguer sur votre site Web de base pour, par exemple, voir l'ensemble de votre offre.

Pour leur permettre de le faire, vous devez ajouter, sur votre version mobile, un hyperlien vers votre site principal.

Pour rendre cet hyperlien fonctionnel, vous devez toutefois permettre au système de «contourner», à chaque fois qu'un mobinaute cliquera sur l'hyperlien, la redirection automatique que vous avez créée à l'étape 4.

  • Dans la boîte Insérer/modifier le lien, entrez l'URL de votre site Web principal suivi du code [/?nm=1]
  • Dans la boîte d'insertion de lien, L'URL prendra donc la forme suivante: [http://www.nomdomainesiteprincipal/?nm=1]

Pour savoir comment insérer un hyperlien, voir la chronique:

Créer un hyperlien

Insérer url du site web principal dans site mobile

Faire la structure de votre site mobile

Si vous voulez, il est possible de copier le contenu de votre site principal dans votre site mobile, mais attention, la structure va suivre aussi! Lisez ce qui suit.

* IMPORTANT: la structure de votre site principal ne peut pas convenir à sa version mobile. Une bande de menu verticale, par exemple, gêne l'utilisation d'un site mobile. Vous aurez donc à déconstruire la structure copiée pour en faire une version adaptée aux appareils mobiles. Suivez les deux modèles qu'on vous propose plus loin dans la chronique.


Transférer le contenu de votre site principal dans votre site mobile

Allez dans l'outil de création de votre site Web de base.

  • Cliquez sur la flèche à droite de l'option Enregistrer pour créer une sauvegarde du contenu.
  • Cliquez rapidement trois fois sur un des champs nommés [Enregistrement vide], donnez lui un nom (ex.:[contenu-site-principal]) puis cliquez sur Sauvegarder. Vous venez de créer un «snapshot» (une sauvegarde) de la structure et des textes de votre site principal.
  • Cliquer sur la petite disquette à droite et enregistrez le fichier sur votre ordinateur. Rappelez-vous de l'endroit où vous le placez.

Transferer site principal dans site mobile

Allez dans l'outil de création de votre site Web mobile.

  • Cliquez sur la flèche à droite de l'option Enregistrer pour y déposer la copie de votre fichier de sauvegarde [contenu-site- principal.ssb].
  • Cliquez rapidement trois fois sur un des champs nommés [Enregistrement vide] et cliquez sur la flèche à droite.
  • Dans la fenêtre qui s'ouvre, cliquez sur Parcourir. Trouvez et sélectionnez votre fichier de sauvegarde [contenu-site- principal.ssb] puis cliquez sur Ouvrir (Open).
  • Cliquez sur la flèche à droite de l'option Revenir en arrière, sélectionnez le fichier que vous venez de télécharger et cliquez sur Charger. Confirmez l'opération en cliquant sur Oui.

Transferer site principal dans site mobile

* IMPORTANT: seuls la structure et les textes du site principal seront transférés. Il se peut que vos images et vos documents en hyperliens soient visibles dans l'outil de création de site mobile, mais pas nécessairement lorsqu'il sera publié. C'est pourquoi vous devrez, après le transfert, replacer vos images et vos documents manuellement dans votre site mobile.


Adapter la structure de votre site mobile

  • Dans l'outil de création de votre site mobile, sous l'onglet Style, choisissez une structure sans volets (option 0 volets).
  • Quant à la largeur du site Web, indiquez 100% et cochez l'option Flexible.
  • Réservez l'entête à votre logo. Pour insérer celui-ci, utilisez un module Texte & Images et non pas un module En-tête. En effet, le module En-tête n'est pas «lu» par plusieurs téléphones intelligents qui ne pourront pas afficher votre logo.

Mise en page

Créer un site mobile avec menu déroulant


Site mobile

Sous l'onglet Pages de l'outil de création de votre site mobile, créez deux pages:

1. Menu
2. Contactez-nous

Sous la page Menu, créez une page pour chaque sujet que vous voulez proposer à vos internautes. Exemple:

Menu
-  Rabais
-  Meilleurs vendeurs
-  Nos chambres
-  etc.

Ajouter, supprimer ou changer le nom ou le niveau des pages de votre site


Le look de votre menu

  • Glissez un module Navigation sous le module Texte & Images contenant votre logo.
  • Dans Éléments du menu, amusez-vous à personnaliser le look de votre menu: l'alignement, la couleur, le style de police, etc.

* IMPORTANT: désélectionnez le soulignement par défaut.

Ajouter un volet de navigation ou un sous-menu aux pages du site


Créer votre page d'accueil

Sous votre menu, glissez un module Texte & Images dans votre page d'accueil. Insérez-y une petite image et quelques mots qui décrivent votre entreprise. Soyez bref!

  • Allez dans chacune de vos autres pages pour y ajouter vos contenus.

Ajouter une image ou une photo dans une page

Ajouter et mettre en page du texte sur une page Web


Ne pas négliger le contenu!

Allez dans chacune de vos autres pages pour y ajouter votre contenu.

* IMPORTANT: on ne traite pas le contenu dans un site mobile de la même façon que dans un site Web classique! Consultez la chronique:

Quel contenu mettre dans votre site mobile

Créer un site mobile avec menu en icônes

site Web mobile

Les deux exemples ci-dessus sont parfaitement optimisés pour les écrans de cellulaires et les tablettes.

Les icônes sont des boutons avec hyperliens qui mènent aux différentes pages du site. Elles proposent une autre expérience de navigation au mobinaute.

Si vous choisissez cette option pour garnir votre page d'accueil, faites d'abord votre site avec menu déroulant avant d'y appliquer le modèle avec icônes. Vous offrirez ainsi deux façons de naviguer.


Faire vous-même les icônes

  • Faites d'abord une recherche d'images en lien avec vos sujets.
  • Quand vous avez trouvé celles qui vous plaisent, assurez-vous d'en acquitter les droits.

Photos et vidéos: quand en intégrer sur votre site et où vous les procurer


Intégrer vos icônes

  • Glissez un module Texte & Images sous votre menu du modèle A.
  • Insérez un tableau de deux colonnes et trois lignes (pour six icônes), d'une largeur à 100%. Vous pouvez ajouter des lignes ou des colonnes pour mettre plus d'icônes, mais rappelez-vous que moins il y a d'éléments dans un écran de site mobile, mieux c'est!
  • Déterminez la largeur des colonnes en cliquant sur Propriétés de la cellule puis en écrivant un pourcentage dans la case Largeur.

-  Pour un tableau à deux colonnes, les cellules du tableau doivent être d'une largeur de 50% chacune.

-  Pour un tableau à trois colonnes, c'est 33% pour la première, 33% pour la deuxième et 34% pour la troisième.

-  Pour un tableau à quatre colonnes, inscrivez 25% à chacune d'elle.

  • Redimensionnez les images que vous avez choisies pour devenir vos icônes, en fonction du tableau que vous venez de créer. Les icônes doivent avoir toutes la même forme et la même dimension.

Insérer un tableau personnalisé sur une page de votre site

Site gratuit pour redimensionner, retoucher, changer le format d'une image


Faire de vos icônes des hyperliens

Dans chaque case du tableau, ajoutez une image (icône). Pour chacune d'elles, insérez un lien vers la page correspondante.

Ajouter une image ou une photo dans une page

Créer un hyperlien


Ne pas négliger le contenu!

Retournez enfin dans chacune de vos pages pour y ajouter votre contenu.

* IMPORTANT: on ne traite pas le contenu dans un site mobile de la même façon que dans un site Web classique! Consultez la chronique:

Quel contenu mettre dans votre site mobile

Tirez le maximum de votre abonnement à votresite.ca

Tirez le maximum de votre abonnement à votresite.ca!

#extra-column