version mobile - Manuel d`Utilisation PowerBoutique

Transcription

VERSION MOBILE
Activation et personnalisation de votre site mobile
I. VERSION MOBILE : PREMIERS PAS ................................................................... 2
1. Activez votre site mobile ...................................................................................................2
2. Personnalisez votre site mobile ........................................................................................2
2.1. Apparence générale et identité visuelle .....................................................................2
2.2. Liste des rayons sur la page d'accueil .......................................................................2
2.3. Navigation bas de page .............................................................................................3
2.4. Tags de tracking.........................................................................................................3
2.5. Sitemap ......................................................................................................................3
3. Ouvrez votre site mobile ...................................................................................................3
II. VERSION MOBILE : PERSONNALISATION GRAPHIQUE.................................. 4
1. Blocs libres - cms..............................................................................................................4
1.1. Les blocs libres communs à l'ensemble des pages ...................................................4
1.2. La structure de la page d'accueil................................................................................5
1.3. La structure des pages intérieures.............................................................................6
2. Mises en page ..................................................................................................................7
2.1. Modèles de listes et de fiches ....................................................................................7
2.2. Tunnel de commande ................................................................................................7
3. Web-design.......................................................................................................................8
3.1. Gabarit html................................................................................................................8
3.2. Feuilles de style .........................................................................................................8
3.3. API FO panier ................................................................................................................9
III. VERSION MOBILE : REFERENCEMENT .......................................................... 10
1. Nom de domaine ............................................................................................................10
2. Balises ............................................................................................................................10
2.1. Balises head.............................................................................................................10
2.2. Balises titres et meta................................................................................................10
3. Sitemap...........................................................................................................................11
4. Script de détection des appareils mobiles ......................................................................11
VERSION MOBILE | Activation et personnalisation de votre site mobile
-1-
I. VERSION MOBILE : PREMIERS PAS
1. Activez votre site mobile
Sur le sommaire de votre tableau de bord, dans le bloc "Informations générales", cliquez sur
"Gérer vos sites". Cliquez ensuite sur le bouton "Désactivé" de la ligne "Site Mobile" pour le
passer en "Activé".
Votre site mobile est alors paramétrable, sans que celui-ci ne soit accessible pour les
internautes.
Pour aller plus loin...
Comment modifier le message de site fermé de votre version mobile ?
Comment visualiser votre version mobile dans la fonction "Modèle de site" ?
2. Personnalisez votre site mobile
2.1. Apparence générale et identité visuelle
Sans intervention particulière de votre part, votre version mobile reprend les couleurs de
votre site en version française : fond général, couleur de textes, de liens…
Vous devez tout d’abord renseigner le nom de votre site : comment le personnaliser ?
Nous vous conseillons en parallèle d’apporter une identité visuelle à votre site mobile en
insérant par exemple votre logo dans le bandeau : comment intégrer un bandeau sur votre
site mobile ?
Pour aller plus loin...
Comment personnaliser le copyright de votre site mobile ?
Comment supprimer le background (image de fond) de la version mobile ?
2.2. Liste des rayons sur la page d'accueil
Un modèle de mise en page spécifique, et optimisé mobile, est automatiquement appliqué à
la page d’accueil de votre site. Il est composé de différents blocs, dont un qui présente la
liste de vos rayons.
Dans le cas où votre liste de rayons ne serait pas visible dans le cadre central de la page
d'accueil de votre site en version mobile, vous devez l’activer : comment afficher la liste de
vos rayons sur votre page d’accueil mobile ?
Après avoir activé votre liste de rayons sur votre version mobile, pensez à ajouter une
vignette pour chaque rayon afin de les illustrer (fonction "Rayon" - rubrique "Catalogue").
-2-
Dans le cas où les espaces promotionnels « Zoom sur » et « A l’affiche » seraient affichés
par défaut sur votre page d’accueil en version mobile, vous pouvez les désactiver si vous ne
souhaitez pas les utiliser : comment désafficher ces 2 espaces promotionnels ?
2.3. Navigation bas de page
Une navigation bas de page renvoie vers vos pages institutionnelles suivantes : Livraison Paiement - CGV – Contact.
Comment modifier les liens de la navigation bas de page de la version mobile ?
2.4. Tags de tracking
Vous pouvez activer, sur votre site mobile, les tags de tracking (tags ROI) installés sur votre
site en version classique.
Comment activer les tags de tracking (ROI) sur votre version mobile ?
2.5. Sitemap
Afin de permettre une meilleure indexation des pages de vos sites par les moteurs de
recherche, vous disposez d’un fichier sitemap.xml différent pour chacun d’entre eux (fr, us ou
mobile).
Cela vous permet, en outre, sur Google outils pour les webmasters, de connaître pour
chacun d’entre eux le nombre de pages indexées par Google.
Comment soumettre un sitemap pour la version mobile ?
3. Ouvrez votre site mobile
Sur le sommaire de votre tableau de bord, dans le bloc "Informations générales", cliquez sur
"Gérer vos sites".
Cliquez ensuite sur le bouton "Fermé" de la ligne "Site Mobile" pour le passer en "Ouvert".
Votre site mobile est alors accessible pour les internautes.
-3-
II. VERSION MOBILE : PERSONNALISATION GRAPHIQUE
1. Blocs libres - cms
1.1. Les blocs libres communs à l'ensemble des pages
Vous disposez de 5 blocs libres - cms, présents sur toutes les pages de votre site mobile :
le bloc libre - cms 3 vous permet d’insérer un bandeau ou un logo sur votre
version mobile ;
le bloc libre - cms 1 inclut le menu de navigation réservé à votre version mobile ;
le bloc libre - cms 8 vous permet d’insérer le contenu de votre choix après le
menu de navigation ;
le bloc libre - cms 11 renvoie vers vos pages institutionnelles ;
le bloc libre - cms 2 affiche le copyright de votre site.
Personnalisez ces blocs libres : accédez à la fonction "Bloc libre - CMS" (rubrique
"Animation"), puis sélectionnez "Site mobile" dans le menu déroulant, en haut à droite de
cette fonction.
Schéma des blocs libres communs à l’ensemble des pages :
-4-
1.2. La structure de la page d'accueil
Votre page d'accueil est constituée de 3 blocs libres spécifiques, et de la liste de vos rayons :
les blocs libres - cms 4 et 9 incluent 2 espaces promotionnels (« Zoom sur » et
« A l’affiche ») pour mettre en avant les articles de votre choix ;
la liste rayons reprend automatiquement vos rayons et/ou gammes en vitrine. Un
modèle de mise en page optimisé pour la version mobile est appliqué par défaut ;
le bloc libre - cms 5 vous permet d’insérer du contenu après votre liste rayons.
Personnalisez les blocs libres de votre page d’accueil : accédez à la fonction "Bloc libre CMS" (rubrique "Animation"), puis sélectionnez "Site mobile" dans le menu déroulant, en
haut à droite.
Comment désactiver les 2 espaces promotionnels « Zoom sur… » et « A l’affiche » ?
Dans le cas où votre liste de rayons ne serait pas visible dans le cadre central de la page
d'accueil de votre site en version mobile, vous devez l’activer : comment afficher la liste de
vos rayons sur votre page d’accueil mobile ?
Schéma des blocs spécifiques à la page d’accueil :
-5-
1.3. La structure des pages intérieures
Vos pages intérieures sont constituées de 3 blocs libres spécifiques, et du contenu de votre
catalogue :
les blocs libres - cms 6 et 10 vous permettent d’insérer du contenu avant la
présentation de votre catalogue ;
le contenu de votre catalogue est repris dynamiquement. Un modèle de mise en
page, optimisé pour la version mobile, est appliqué par défaut à vos pages
intérieures ;
le bloc libre - cms 7 vous permet d’insérer du contenu après votre catalogue.
Personnalisez les blocs libres de vos pages intérieures : accédez à la fonction "Bloc libre CMS" (rubrique "Animation"), puis sélectionnez "Site mobile" dans le menu déroulant, en
haut à droite de cette fonction.
Schéma des blocs spécifiques aux pages intérieures :
-6-
2. Mises en page
2.1. Modèles de listes et de fiches
Les mises en page par défaut des pages de votre site mobile sont optimisées pour un
affichage sur les smartphones. Sont concernées vos :
liste rayons sur votre page d’accueil ;
listes gammes ;
listes articles ;
fiches articles.
Pour chacune de ces listes et fiches, plusieurs autres modèles de mise en page sont
également à votre disposition.
Modifiez les modèles de mise en page par défaut : accédez à la rubrique "Apparence"
puis aux fonctions suivantes en fonction de vos besoins :
"Modèle liste rayons" ;
"Modèle liste gammes" ;
"Modèle liste articles" ;
"Modèle fiche articles".
Sélectionnez "Site mobile" dans le menu déroulant, en haut à droite de chaque fonction.
Personnalisation avancée – Web-design : vous pouvez créer vos propres modèles de
mise en page pour chacune de vos listes et fiches, si vous disposez des compétences
techniques nécessaires.
Rendez-vous à rubrique "Apparence" - "Outils Experts – Web-design" puis aux fonctions
suivantes en fonction de vos besoins :
"Modèle liste rayons" ;
"Modèle liste gammes" ;
"Modèle liste articles" ;
"Modèle fiche articles".
Sélectionnez "Site mobile" dans le menu déroulant, en haut à droite de chaque fonction.
2.2. Tunnel de commande
Les pages du tunnel de commande sont également optimisées pour un affichage sur les
smartphones. Sont concernés :
le panier,
la page de connexion au compte client,
le formulaire d'enregistrement client,
la page de choix des modes de livraison,
la page de choix des modes de paiement.
-7-
3. Web-design
Attention : les interventions de personnalisation graphique avancée listées dans cette
rubrique nécessitent des compétences techniques spécifiques.
3.1. Gabarit html
Vous pouvez appliquer votre propre gabarit html à la version mobile de votre site.
Rendez-vous à la fonction "Intégration gabarits html" (rubrique "Apparence" - "Outils
Experts – Web-design"), puis sélectionnez "Site mobile" dans le menu déroulant, en haut à
gauche de cette fonction.
Les gabarits standards de votre version mobile sont disponibles dans le répertoire
"site/m/gabarit" de votre espace de stockage (rubrique "Import/Export") :
page d'accueil : gab_index.html
pages intérieures : gab_int.html
pages de paiement chèque / facture : gab_blanc.html
pages de popup : gab_popup.html
Vous personnalisez ces gabarits et les appliquez à votre version mobile.
3.2. Feuilles de style
Sur votre version mobile, une feuille de style CSS (site/m/css/main.css) reprend les éléments
de votre version de site classique.
Il existe également une feuille CSS spécifique pour chaque langue de votre version mobile.
code_lg = lg_fr > …/site/m/css/fr-FR.css
code_lg = lg_us > …/ site/m/css/us-US.css
Ces feuilles de style sont disponibles dans votre espace de stockage (rubrique
"Import/Export").
Si vous les personnalisez, elles prennent le dessus sur main.css.
Extrait code source de la page liste_rayons.cfm
…
<link rel="stylesheet" href="../m/css_dys_pwb/gabarit183.css" type="text/css" />
<link rel="stylesheet" href="../m/css_dys_pwb/liste_rayons183.css" type="text/cs" />
<link rel="stylesheet" href="../site/m/css/main.css" type="text/css" />
<link rel="stylesheet" href="../site/m/css/fr-FR.css" type="text/css" />
…
-8-
3.3. API FO panier
L’API Front Office vous permet de personnaliser totalement votre mise en page du panier.
Vous créez un fichier Xsl personnalisé et le déposez dans l'espace de stockage de votre
site mobile (site/m) dans un dossier nommé "templateXsl". Votre fichier portera
obligatoirement le nom "templateXslPanier.xsl".
Si le fichier est présent dans le répertoire, il sera utilisé pour structurer la page panier.
Téléchargez un exemple de fichier Xsl personnalisable pour votre page panier mobile :
http://docs.powerboutique.com/wiki/Personnalisation_de_la_page_panier.
-9-
III. VERSION MOBILE : REFERENCEMENT
1. Nom de domaine
Le nom de domaine par défaut de votre version mobile est :
http://www.mon-domaine.com/m/.
Pour utiliser un nom de domaine spécifique pour votre version mobile, adressez votre
demande au département des noms de domaine : [email protected].
2. Balises
2.1. Balises head
Lorsque vous activez la version mobile de votre site, cela a pour conséquence de proposer
aux internautes 2 versions différentes d’une même page.
Chaque version de page dispose de sa propre adresse (URL) :
Exemple en version classique : http://www.monsite.fr/deco-murale,fr,2,71.cfm
Exemple en version mobile : http://www.monsite.fr/m/deco-murale,fr,2,71.cfm
Si leur mise en forme est différente, ces pages ont un contenu globalement similaire. Afin
d’éviter des problèmes de duplication de contenu qui pourraient être néfastes à votre
référencement, et conformément aux recommandations de Google, des balises spécifiques
sont automatiquement insérées sur les différentes versions de vos sites.
Celles-ci permettent aux moteurs de comprendre que les pages ne sont pas dupliquées mais
qu’il s’agit de versions optimisées d’un même contenu, pour un affichage sur différents
appareils.
Sur les pages adaptées aux ordinateurs, la balise <head> de chaque page contient ainsi une
balise indiquant l’adresse de la version mobile de la page :
<link
rel="alternate"
media="only
screen
and
(max-width:
640px)"
href="http://www.monsite.fr/m/deco-murale,fr,2,71.cfm">
Sur les pages adaptées aux appareils mobiles, la balise <head> de chaque page inclut, à
l’inverse, une balise indiquant l’adresse de la version classique de la page :
<link rel="canonical" href="http://www.monsite.fr/deco-murale,fr,2,71.cfm">
2.2. Balises titres et meta
Les balises de référencement de vos pages sont renseignées de la même manière sur
l’ensemble des versions de votre site (classique et mobile) : aucune intervention de votre
part n’est nécessaire.
- 10 -
3. Sitemap
Afin de permettre une meilleure indexation des pages de vos sites par les moteurs de
recherche, vous disposez d’un fichier sitemap.xml différent pour chacun de vos sites (fr, us
ou mobile).
Cela vous permet, en outre, sur Google outils pour les webmasters, de connaître pour
chacun d’entre eux le nombre de pages indexées par Google.
Comment soumettre un sitemap pour ma version mobile ?
4. Script de détection des appareils mobiles
Afin de permettre aux internautes et aux moteurs d’être redirigés vers la version de votre site
la plus adaptée, un script de détection des appareils mobiles a été mis en place. Il détecte
les connexions réalisées depuis des terminaux nomades sur le site classique, et les redirige
automatiquement vers la version mobile.
Il peut arriver que l’internaute soit redirigé vers la version mobile mais que celui-ci préfère
visualiser la version classique de votre site. Dans ce cas, il a la possibilité de changer
facilement de version depuis la page mobile, en cliquant sur le lien placé par défaut en bas
de page.
Pour aller plus loin…
Comment afficher la version mobile de mon site sur les tablettes ?
- 11 -

version mobile - Manuel d`Utilisation PowerBoutique

Transcription

Documents pareils

Intégrateur Web Expert H/F Parue le 11/06/2014

Webmaster/Intégrateur H/F

Formation Webmaster : Création de site Web Initiation +

bookmarks - Nathalie Vanassche

CV - Céline Pasteur

Télécharger en version PDF - Webdesigner

Bonnes pratiques en HTML-CSS

Créer un site Web avec HTML 5 ET CSS 3

BEP CSS

FORMATION HTML 5 / CSS 3 (3 jours)