Guide: Cre er son site Web Creator pour Mobiles

Guide: Creer son site Web Creator pour
Mobiles
Introduction
La version 6 de Web Creator Pro introduit la détection de médiums tels que les téléphones intelligents
et tablettes. Pour permettre à nos usagers de tirer le maximum de cette nouvelle fonctionnalité, nous
vous présentons aujourd’hui un guide qui traite spécifiquement de cette nouveauté.
Pourquoi avez-vous besoin d’un site mobile?
Pourquoi faire une version mobile? Cela dépend du type de site que vous avez, mais les études récentes
démontrent qu’en moyenne environ 20 à 30% des visiteurs sur un site le font avec un téléphone
intelligent et ce pourcentage est en augmentation constante. Sans adapter votre site à ces visiteurs,
dans la majorité des cas ceux-ci n’arriveront pas à obtenir l’information qu’ils désirent ou n’arriveront
pas à effectuer leurs achats, etc. Deux raisons principales sont en causes ici : la visibilité du contenu et
son accessibilité.
L’aspect visibilité est très simple. Les écrans étant petits, bien souvent un site adapté pour PC sera
illisible sur téléphone à moins d’agrandir de beaucoup (zoom) mais ceci rend le site très peu convivial.
De plus, les téléphones sont limités en puissance, les connexions sont généralement lentes (un G3
rapide est encore lent par rapport à une connexion internet PC) et les sites PC sont généralement truffés
d’images, animations et autres artifices qui ne servent qu’à remplir la page. Sur un mobile limité en
puissance et connexion, ces pages sont très lentes à afficher et naviguer ce qui peut décourager le plus
tolérant des visiteurs.
L’accessibilité tant qu’à elle se résume au fait que le visiteur n’a pas de souris. Le visiteur ne peut donc
pas survoler un bouton ou élément pour faire apparaître une description plus précise, il ne peut pas
utiliser un menu déroulant pensé pour le PC, il ne peut pas faire « bouton de droite », etc. Il faut donc
des pages adaptées à cette réalité, avec des contrôles qui tiennent tout cela en compte. Idéalement,
votre site PC devrait déjà avoir tout cela en tête, mais pour un résultat idéal, il faut deux sites.
Une petite note sur les tablettes. Celles-ci ont des résolutions semblables aux PC, une connexion et
puissance accrue vs les téléphones alors tous ces problèmes sont moindres. Cependant, les utilisateurs
de tablette n’ont pas de souris alors il faut en tenir compte également, soit en ayant un site spécifique à
celles-ci ou un site fait pour PC qui ne requiers pas la souris pour être fonctionnel.
Comment faire?
Tel que mentionné plus tôt Web Creator Pro 6 comprend un écran de détection de médiums qui permet
de rediriger un visiteur avec un médium mal adapté à la page en cours vers une page appropriée. Cet
écran est relativement simple d’utilisation, on doit spécifier pour quel médium la page actuelle est faite
et offrir les alternatives s’il-y-a-lieu.
Il existe une multitude de manières de faire. Dans ce tutoriel, nous vous donnons une solution très
simple qui consiste ni plus ni moins à créer un nouveau site à part pour mobile (et au besoin pour
tablettes).
Mon site pour mobile
Dans le même projet que votre site principal PC, créez une nouvelle page. Vous pouvez la nommez
comme vous désirez mais pour les besoins de l’exemple nous allons l’appeler mobile.pag, ce qui
résultera en un fichier mobile.html dans le dossier Web. Le plus simple est de créer cette page avec le
modèle de page blanche, donc sans contenu. La page d’accueil de votre site PC devrait pointer vers cette
page pour sa version mobile (et la page mobile devrait pointer vers le site PC pour sa version PC). Il
n’existe pas présentement de modèles de page pour mobile dans Web Creator, mais vous pourriez
également partir d’une page existante ou modèle et retirer les éléments inutiles, redimensionner les
items, etc. de manière à avoir une page semblable à votre page d’accueil PC.
Par la suite, il faut se défaire de l’idée qu’un site internet doit être beau est plaisant à voir. Rappelonsnous que nous avons une connexion, un processeur et un écran limités alors ce qui prime ici c’est la
légèreté, la simplicité et surtout de passer son message sans qu’il soit perdu dans les images et artifices
inutiles. Si vous avez déjà vu des sites mobiles, vous savez déjà qu’ils sont simplistes et très fonctionnels.
Dans cet esprit, répertoriez sur votre site PC les items que vous voulez voir sur le site mobile. Coupez
tout contenu qui est superflu, moindrement utile, « pour faire beau », etc. Si vous avez une entreprise,
vous voulez donner votre adresse, numéro de téléphone, courriel, lister vos produits et services, fournir
une carte Google vers votre entreprise, possiblement donner un lien vers vos pages sur les média
sociaux, etc. Laissez faire les galeries, les témoignages, les animations, etc. Il faut s’en tenir au strict
minimum, si les gens sont chez vous avec leur téléphone mobile, c’est qu’ils sont une mission, il faut leur
donner directement accès à ce qu’ils veulent et enlever tout ce qui pourrait les empêcher d’y parvenir.
Imaginons une entreprise qui vend des portes et fenêtres. Sur leur site principal PC, on a tout ce qui
faut, profil d’entreprise, liste des employés clés, photos et galeries, même vidéos des réalisations, des
produits avec prix, bouton d’achat, demande de devis, liens vers les différents fournisseurs, un forum
d’utilisateurs, etc. Il n’y a aucune règle ou loi qui vous force à offrir une copie carbone réduite de ces
options dans la version mobile du site, ce qu’il faut, c’est répondre au besoin du visiteur rapidement et
simplement.
Nous conseillons tout d’abord une taille de page fixée à 320x480 pixels car c’est la taille des iPhone donc
la plus répandue. Voici donc une version très simplifiée de ce site fictif, version mobile :
L’image permet de simplement et légèrement décorer le site pour qu’il ne soit pas trop générique. Nous
avons utilisé des boutons trouvés sur internet qui viennent de jQuery Mobile mais on pourrait utiliser
n’importe quelle image ou utiliser les boutons déjà inclus dans Web Creator Pro. Pour le reste, seules les
options de bases sont présentes, tous ensemble sur la page principale. Les deux premiers boutons et le
dernier vont envoyer vers une autre page similaire pour décrire les différentes choses.
Rappelons-nous que la structure de ce mini-site mobile peut être totalement différente du site principal
PC. Le menu du site PC dans ce cas-ci comporterait probablement plus d’options vers du contenu « de
remplissage » si on veut, des galeries par exemple. Bien que c’est un plus pour les visiteurs PC, ce ne le
serait probablement pas autant pour un utilisateur mobile pour tous les motifs déjà évoqués.
Notez que le site ne comporte pas de menu car les menus ne peuvent pas être utilisés correctement
sans souris. Plutôt que d’utiliser des menus traditionnels, on peut voir le contenu des pages comme
étant les boutons eux-mêmes. Lorsqu’on va dans « Produits » par exemple, on retrouvera un bouton
« Accueil » qui permettra de remonter au « menu principal » que constitue la page d’accueil. De la
même manière si on clique pour les détails d’un produit, on aura un bouton pour revenir à la page
d’accueil mais aussi un autre bouton pour revenir à la page des produits, ainsi de suite.
Pour terminer
Ce tutoriel ne constitue qu’une base simple. Par exemple, sur votre site PC vous pourriez mettra la
détection de mobiles sur toutes les pages et envoyer vers la page correspondante dans le site mobile
(ou accueil s’il n’y a pas d’équivalent) et vice versa. On peut y aller simple et mettre la détection
seulement sur la page d’accueil, c’est également valable. On peut même si on préfère donner le choix
avoir un menu sur chaque version du site qui permet de basculer vers l’autre, sans que ce soit
automatisé.
Un site mobile ce n’est pas nécessaire, mais c’est un gros plus surtout pour les entreprises qui vendent
des produits et services en ligne. Ne pas l’adopter, c’est comme empêcher 20 à 30% des gens de
pénétrer dans votre commerce et tout bon entrepreneur comprendra que c’est un luxe que bien peu
peuvent se permettre.
Visitez notre forum pour des discussions plus avancées sur ce sujet!
L’Équipe LMSOFT
http://www.lmsoft.com/fr