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:
<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:
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.
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:
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.
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.
* 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.
Créer un site mobile avec menu déroulant
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.
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.
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.
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.
L'expert web parcourt le Québec et livre ses conseils pour vous aider à faire votre site et votre boutique en ligne, sortir dans Google et attirer de nouveaux clients!
