Accueil > outils pour webmaster > Comment créer un site mobile facilement - outils et explications

Comment créer un site mobile facilement - outils et explications

mardi 12 juin 2012

Explications rapides pour créer un site mobile facilement. Il existe des outils qui peuvent grandement vous faciliter la tâche. Vous pouvez les utiliser soit pour orienter votre graphisme, soit pour créer de A à Z votre site et l’acheter tel quel.

Quelques notes rapides prise lors de l’évènement Google mobile du 6 juin à Paris.

D’après l’équipe de Google :

Très mauvais exemple de site mobile : ratp
Très bon exemple : le figaro (étrangement ce site ne passe pas dans le mobilomètre ni sur les mobiles sur lesquels j’ai essayé, je ne comprends pas pourquoi cet exemple... ^^) par contre celui que je suis en train de faire passe très bien, 1 secondes et quelques poussières d’affichage. A voir sur votre mobile : http://www.belle-belle-belle.com, vous serez redirigé proprement et rapidement sur la version mobile. (en cours de construction mais bien avancée déjà).

pour booster son trafic ou ses ventes, il faut avoir un site mobile et / ou une application mobile, en 2015, plus de 14 millions en France seront équipées d’un Smartphone.

Si un site mobile met plus de 3 secondes à s’afficher, les utilisateurs s’en vont.

Recommandations principales pour un site mobile :

- simplifier la navigation
- penser à l’utilisation au pouce, bouton + larges
- penser local
- moteur de recherche très important
- proposer une redirection vers le desktop, ne pas bloquer l’utilisateur sur la version mobile obligatoirement
- éviter les images si pas nécessaire et les mettre à un poids adapté

Publicités Adsense / Adwords pour mobiles

Créer un compte ADMOB pour les annonces format mobile (adsense / adwords)

Les 320X50 et 300X250 explosent, meilleurs formats.
Les annonces s’affichent en fonction du mot-clé de la recherche

Les outils pour créer un site mobile

Le plus intéressant dans tout ça, c’est ça : les outils ! réaliser votre site mobile en ligne ou utiliser les outils pour rapidement mettre votre propre site au format mobile.

L’outil http://jquerymobile.com/, est excellent mais il existe d’autres outils depuis à découvrir :

http://www.mobilisezvous.fr/fr/d/, passer par là pour avoir accès ensuite à http://my.dudamobile.com/login sans être obligé d’entrer votre mail, c’est aussi sur cette page que vous pouvez participer au concours "devenez le m site de l’année", concours meilleur site, pour ceux qui ont un site mobile comme pour ceux qui n’en n’ont pas. Si vous n’en n’avez pas, vous pouvez gagner la création de votre site pour une valeur de 15.000 €.

Les étapes à suivre pas à pas pour profiter pleinement de ces outils

Vous arrivez sur cette page http://www.mobilisezvous.fr/fr/d/tester-votre-site/mobilometre/, vous pouvez tester votre site, ensuite le créer (onglets en haut à droite) vous arrivez ici : http://www.mobilisezvous.fr/fr/d/creer-votre-site/ puis cliquez sur commencer et c’est ici l’astuce pour pouvoir créer son site sur cette page : http://www.mobilisezvous.fr/fr/d/creer-votre-site/#commencer là il faut aller tout en bas et cliquer sur la langue “en” et là, vous avez accès à la page : http://www.mobilisezvous.fr/en/d/ et là, vous pouvez commencer à vous amuser. Ce que j’aime, c’est que ça peut donner plein d’idée de mise en page surtout, ça facilite grandement la réflexion, les idées graphiques, d’ergonomie. Les outils css, html sont dispo en haut à droite.

Bien sur vous pouvez accéder à cette page directement maintenant que vous connaissez l’URL précise, mais les étapes d’avant permettent de tester déjà son site pour voir sa compatibilité avec le mobile.
là vous arrivez sur http://gomo.dudamobile.com,

Là vous choisissez votre thème dans la première partie, puis, vous passez à l’onglet suivant EDIT SITE, cochez l’option all, qui vous offre beaucoup plus de possiblités et vous n’avez plus qu’à faire du drag & drop de ce que vous voulez ajouter ou enlever. Vous pouvez même naviguer sur le site. Là ça commence à sérieusement devenir intéressant je trouve. De quoi donner de bonnes idées, de voir le résultat et même si on ne veut pas se prendre la tête à le faire soi-même après, à le faire faire en ligne, gratuitement pendant un an, ensuite c’est payant dans les 100 dollars environ par contre, là vous devrez entrer cette fois votre nom et email bien sur.

Important, en haut à droite, il y a l’onglet “setting” pour le html, css, pour ajouter des pages, etc, vous verrez par vous-même.

Sinon, vous pouvez passer en direct sur http://my.dudamobile.com/login, mais vous devez entrer votre nom et email tout de suite, la version précédente permet de faire tous vos tests anonymement ou presque car vous entrez quand-même l’url de votre site ^^

Preview vous permet de visualiser sur plusieurs sortes de mobiles.

Si vous voulez créer votre site mobile vous-même de A à Z, voici les étapes à suivre :

1 : créer un sous-domaine, par exemple m.monsite.com

2 : y placer le contenu que vous aurez optimisé pour le mobile et appeler la même base de donnée que pour le site desktop.

3 : insérer le code de redirection

Soit dans le fichier .htaccess, du site principal et mettre ceci (fortement conseillé, affichage beaucoup plus rapide puisqu’on envoie directement sur le site mobile) :

#redirect mobile browsers
RewriteCond %HTTP:x-wap-profile !^$ [OR]
RewriteCond %HTTP:Profile !^$ [OR]
RewriteCond %HTTP_USER_AGENT ^.*(iPhone|iPod|Palm|Mobile|BlackBerry|android|noki|siem|phone|smar).*$
RewriteRule ^(.*)$ http://m.monsite.com/$1  [QSA,L,R=301]

vous pouvez rajouter ou supprimer les modèles de téléphone portable que vous voulez.

j’ai supprimé Ipad, car je considère que mon site peut s’afficher et reste lisible sur les tablettes.

(remplacez monsite par le nom de votre site)

soit dans un javascript dans la partie head sur votre site principal ci-dessous :



remplacez monsite.com par le nom de votre site.

Vous devez voir votre site mobile apparaître sur votre mobile, si c’est votre site principal qui s’affiche, c’est que vous n’avez pas placé la redirection correctement.

4 : mettre le bon doctype sur votre site mobile, donc ceci :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd" >

remplacez iso-8859-1 par UTF-8 si vous êtes en UTF8.

5 : testez votre site et votre redirection dans le mobilomètre ici : http://www.mobilisezvous.fr/fr/d/tester-votre-site/mobilometre/ ou sur un mobile. Le top est de pouvoir tester sur tous les modèles de mobile (Ipad, Nokia, Smartphone, etc...)

6 : tester votre site mobile dans le validateur w3c pour voir si tout est bon : http://validator.w3.org/mobile/ ça peut vous aider à corriger des erreurs de doctype ou d’encodage par exemple ou autre soucis qu’on ne voit pas toujours.

7 : Les statistique de votre site mobile sur Google Analytics

pensez à ajouter votre site dans Google Analytics et le code asynchrone sur vos pages qui vous permettra ensuite l’ajout également de votre site mobile dans webmaster tool sans avoir à replacer de fichier à la racine de votre site.

8 : Votre site mobile dans webmaster tool

n’oubliez pas d’ajouter votre site mobile dans wembaster tool et votre sitemap spécial mobile.

9 : créez le sitemap pour mobile :

Le sitemap mobile doit ressembler à ceci :

<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
       xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
        <url>
                <loc>http://www.votresite.com/</loc>
                <mobile:mobile/>
        </url>
</urlset>

Enregistrez votre sitemap dans Google Webmaster Tool, et vous devez avoir les deux sitemap qui s’affichent pour chacune des version. Dans mon cas, j’ai choisi d’indexer exactement les mêmes pages que la version mobile, ça me donne donc ceci en image :

sitemap pour mobile


10 : Côté référencement : comment éviter le duplicate content entre site web et site mobile ?

Une vidéo bien claire de Matts Cutts (en anglais) vous expliquant quoi faire et comment pour éviter le duplicate content entre vos deux versions de sites, mobile et desktop :

Matt Cutts explique qu’il existe un user-agent spécialement pour détecter les sites mobiles. Mais si vous avez bien tout fait comme expliqué dans cet article, vous n’aurez pas de soucis, Google comprendra très bien qu’il s’agit d’une version mobile et non de cloaking ou autre technique pour le tromper. Si vous proposez la même version aux internautes et aux robots, pas de soucis.

Si jamais malgré tout ceci vous êtes tout de même sanctionné, il faudra dans ce cas contacter Google pour leur expliquer votre bonne foi et corriger cette erreur.

Cette page de webmaster tool en français cette fois :-) vous explique tout ce que vous pouvez faire pour éviter le duplicate content :

http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=66359

Un extrait qui me semble intéressant : Le contenu en double n’entraîne pas de conséquences négatives particulières pour votre site sauf si l’objectif semble être de tromper et de manipuler les résultats des moteurs de recherche. En cas de problèmes de contenu en double, et si vous ne suivez pas les recommandations indiquées ci-dessus, nous nous chargeons de choisir la version du contenu à afficher dans nos résultats de recherche.

Performance du site, vitesse de chargement d’une page

2 jours après avoir enregistré le site dans Google Webmaster Tool, je constate que les données arrivent et que la performance du site est excellente, 1,6 secondes, plus rapide que 78% des sites. En image :

performance du site mobile

Concours du meilleur site de l’année

vous permet de gagner la réalisation d’un site mobile de valeur de 15.000€ pour ceux qui n’ont pas de site mobile.

lemsitedelannee.fr


Contact |