La minute Geek – Créer un site mobile pour téléphones portables


Quelques règles :


  1. Un site mobile n’a rien à voir avec un site web – Oubliez l’idée que le site web de votre groupe “suffira” pour la version mobile. L’expérience sur un téléphone portable est très différente de l’expérience sur un ordinateur. Par exemple, un bouton sur votre écran d’ordinateur apparaîtra en minuscule sur un téléphone portable. Il faut donc mettre en place une version mobile de votre site qui répondra à toutes les contraintes d’un téléphone portable.
  2. Les utilisateurs aiment avoir le choix – Ne redirigez pas de force les utilisateurs qui arrivent sur votre site web avec un téléphone vers votre site mobile. Les smartphones sont de plus en plus évolués avec des écrans de plus en plus grands. Certains utilisateurs préféreront la version web que la version mobile.
  3. Tous les téléphones mobiles ne sont pas des iPhones – L’iPhone représente environ 30% des téléphones vendus en France. Faire un site mobile qui fonctionne uniquement sur iPhone, c’est insulter les 70% d’utilisateurs qui ont un autre type de smartphone.
  4. Mais beaucoup de téléphones sont des smartphones –   La France compte actuellement plus de 13 millions d’utilisateurs de smartphones.  Vous pouvez créer sans risque un site mobile un peu évolué, qui peut contenir de la vidéo ou du son.
  5. Les smartphones ont un navigateur internet basique – L’iPhone possède un navigateur compatible HTML5, mais pas Flash. Le navigateur sur certains Android peuvent lire du Flash, mais beaucoup de composants HTML5 sont manquants. Le navigateur du BlackBerry ne sait rien faire. Bref, les navigateurs sur votre ordinateur sont largement plus évolués que celui sur votre mobile. Oubliez l’idée de faire un site mobile qui casse des briques.
  6. Les smartphones sont multimedia – Si le navigateur ne sait pas, par exemple, lire un MP3, le téléphone le sait. Donc si vous mettez un lien vers un son ou une vidéo, le téléphone se débrouillera pour le lire.
  7. Tous les téléphones mobiles ne sont pas connectés en 3G+ avec une connexion ultra-rapide – Le lieu où vous avez le temps d’utiliser votre téléphone portable : métro, bus, train, cave… est souvent l’endroit où la connexion est la plus mauvaise. Pensez-y avant de mettre en ligne un clip en ultra-HD de 300Mo.
  8. Entrer du texte sur un smartphone est une plaie – Moins il y a de texte à taper sur un clavier virtuel avec nos gros doigts boudinés, mieux c’est. Privilégiez les adresses de sites mobiles courtes et évitez de faire remplir des formulaires.
  9. Un site mobile, seul, ne sert à rien – Si une personne aime votre groupe, il ira sur votre site web, pas sur votre site mobile. Le site mobile doit servir comme une extension interactive du monde réel. Par exemple, vous pouvez ajouter un QRCode dans un article de presse qui permettra au lecteur de découvrir votre musique sur son téléphone portable.
  10. Le développement des sites mobiles en est à ses débuts – Les smartphones évoluent très vite et les solutions adaptées aux smartphones aussi. Par exemple, vous pourrez bientôt vendre votre musique ou vos places de concert directement sur un Smartphone, soit en boutique via la technologie NFC ou sur Facebook en utilisant les “Facebook Credits”. Il s’agira sûrement d’opportunités à ne pas manquer.


Un exemple de site mobile :



Pour l’exemple, j’ai développé le site mobile du groupe Concorde. Ce site comprend un lien pour écouter leur dernier single et un lien vers leur dernier clip vidéo.  Vous pouvez devenir fan de leur page Facebook ou les suivre sur leur compte Twitter. Enfin vous pouvez partager le site de Concorde sur votre page Facebook ou en parler sur votre compte Twitter. Vous pouvez aussi “faire passer” le site à vos “vrais” amis en affichant un QRCode qu’ils peuvent flasher avec leur smartphone et qui renvoie vers le site mobile.

Pour tester le site, flashez ce QRCode :

Vous pouvez télécharger les sources de ce site ici :
Télécharger les sources

Développer son propre site mobile :



Il existe sur le web des tonnes de tutoriels très bien écrits sur jQuery Mobile. Je vais donc parler ici uniquement des astuces utiles pour les artistes.

Installer jQuery Mobile :

Développer un site pour mobile contient quelques contraintes techniques, comme la gestion des différentes tailles d’écran et sa rotation. Pour ne pas avoir à gérer ces contraintes, il est plus simple d’utiliser un Framework, c’est à dire un squelette en HTML+Javascript+CSS qui vous permet de construire votre site plus rapidement. Le plus populaire est sûrement jQuery Mobile.  Si vous n’avez pas peur que votre site ressemble à tous les autres sites, c’est une excellente solution.

Pour cela, il suffit de créer un document HTML et de copier/coller le code suivant :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- Copiez/collez l'exemple ici -->
</body>
</html>

Pour installer la dernière version de jQuery Mobile, copiez/collez le “snippet” sur cette page.

Customiser votre site avec une image :

Pour customiser votre site simplement, vous pouvez ajouter une image en fond d’écran. Un peu de CSS et le tour est joué. Copiez/collez ce code dans le <head> :

<style>
body {
   background: #000 url(img/background.jpg) no-repeat center top;
}
.ui-page {
   padding-top: 80px;
   background: transparent;
}
</style>

Jouer un son :

En théorie les players audio HTML5 avec un “fallback” en flash, comme jPlayer ou SoundManager 2, devraient être une bonne solution pour jouer un MP3 sur un smartphone. Dans la pratique,  les navigateurs sont tellement buggés (voir régle n°6) que cette solution est un vrai casse tête. En attendant que les navigateurs supportent (vraiment) le HTML5, je vous conseille de créer un lien directement vers votre MP3.  Dans ce cas, le smartphone utilisera le lecteur multimedia du système pour lire le son.
Pensez à encoder votre MP3 en 64kb/s ou maximum 128Kb/s (voir régle n°7).

Exemple :

<div data-role="page" id="sound">
  <div data-role="content">
    <a href="sound/candy-boy.mp3" rel="external" data-role="button" data-icon="arrow-r" data-iconpos="right">Listen to Candy Boy</a>
  </div>
</div>

Afficher une vidéo :

Pour les mêmes raisons que le son, oubliez les lecteurs vidéo en HTML5. Avec une contrainte supplémentaire : chaque fabriquant essaye d’imposer son propre encodage pour les vidéos compatibles HTML5. Sauf si vous voulez vous lancer dans l’encodage de votre vidéo en FLV, OGG, H.264 et WebM… laissez tomber.

Par contre, Youtube qui ambitionne d’être le plus compatible possible sur les smartphones, s’occupera de la portabilité de votre vidéo. Donc postez la sur Youtube et ajoutez un lien vers la page de votre vidéo. Pour avoir la version mobile de cette page, remplacez www.youtube.com par m.youtube.com.

Exemple :

<div data-role="page" id="video">
  <div data-role="content">
    <a href="http://m.youtube.com/watch?v=8OgpNs636X4" rel="external" data-role="button" data-icon="arrow-r" data-iconpos="right">Watch Candy Boy Video</a>
  </div>
</div>

Créer un lien vers votre page Facebook et Twitter :

Comme Youtube, Facebook et Twitter possèdent une version mobile de leur site. Pour y accéder, modifiez votre URL et remplacez www.facebook.com par m.facebook.com et twitter.com par mobile.twitter.com.
Sur ces pages, l’utilisateur pourra “liker” votre page Facebook ou suivre votre compte Twitter.

Exemple :

<div data-role="page" id="follow">
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Follow Concorde</li>
      <li><a href="http://m.facebook.com/withconcorde" rel="external">Facebook</a></li>
      <li><a href="http://mobile.twitter.com/withconcorde" rel="external">Twitter</a></li>
    </ul>
  </div>
</div>

Partager votre site sur Facebook et Twitter :

Evidemment, vous n’allez pas partager un site mobile sur votre mur Facebook, ou vos amis sur leur ordinateur risquent d’avoir une mauvaise surprise. Mais la possibilité de partager votre site web via un smartphone peut être une fonctionnalité intéressante (maintenant que vous l’avez optimisé pour Facebook grace à la minute geek).

Pour Facebook, l’url pour partager du contenu sur un smartphone est :
http://m.facebook.com/sharer.php?u=http%2F%2Fwww.votre-site.com%2F

Pour Twitter, pas d’url prévu pour le mobile, mais l’outil de partage est suffisamment clair pour s’afficher sur un petit écran. :
http://twitter.com/share?text=Votre%20texte&url=http%2F%2Fwww.votre-site.com%2F

Pour encoder vos variables dans vos urls, utilisez ce site : URL Decoder/Encoder

Exemple :

<div data-role="page" id="sound">
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Share This</li>
      <li><a href="http://m.facebook.com/sharer.php?u=http%3A%2F%2Fbj.mu%2Fconcorde%2F" rel="external">Facebook</a></li>
      <li><a href="http://twitter.com/share?text=D%C3%A9couvrez%20Concorde&url=http%3A%2F%2Fbj.mu%2Fconcorde%2F" rel="external">Twitter</a></li>
    </ul>
  </div>
</div>

Créer un QRCode :

Dans notre exemple, nous avons utilisé bit.ly pour générer un QRCode. De cette façon nous obtiendrons les statistiques sur le nombre de codes flashés. Pour afficher le QRCode associé à votre lien bit.ly, rajoutez .qrcode à la fin de votre lien.

Exemple :

<div data-role="page" id="qrcode">
  <div data-role="content">
  <center><img src="http://bit.ly/mDeB2P.qrcode" width="300"></center>
  </div>
</div>

Diffuser votre site mobile :

Pour diffuser votre site mobile, imprimez le QRCode sur vos affiches, vos flyer ou vos places de concert. N’hésitez pas à ajouter un petit texte explicatif sous le QRCode, beaucoup de gens ne savent pas encore ce que cela représente.

Pensez à ajouter votre QRCode dans vos dossiers de presse, les journalistes papier seront ravis d’ajouter un peu d’interactivité dans leur article.

Pour finir, voici une superbe utilisation du QRCode pour la sortie du dernier album de Saul Williams (même si il ne respecte pas la règle 8) :

<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/4MtFfR778L0?rel=0″ frameborder=”0″ allowfullscreen></iframe>

Inscrivez-vous à notre newsletter

et recevez les derniers articles du blog tous les lundis!

I agree to have my personal information transfered to MailChimp ( more information )

Nous respectons votre vie privée. Vous pouvez vous désabonner à tout moment.

About Benoit Tersiguel

Benoit Tersiguel travaille dans le secteur du web depuis plus de 10 ans. Il créé Radio.blog.club en 2005, le premier site de streaming musical en France. Depuis la fermeture de Radio.blog.club en 2008, il accompagne les artistes pour la promotion et la distribution numérique de leurs oeuvres.

18 comments

D’accord, le conseil, c’est d’utiliser JQuery.

Mais j’ai vu qu’en utilisant wordpress, un plugin nommé WP Touch existe et est censé adapter le site à l’affichage sur smartphone. Savez-vous quel est l’effet concret de ce plugin ?

@EresSound, il existe plusieurs plugins pour WP qui transforment automatiquement le blog pour les mobiles, avec possibilite de conserver les objets encapsules (videos…) ou non dans les options. La qualite du rendu est variable et les options differentes.
Il s’agit d’une conversion a la volee, donc utile pour le contenu textuel, mais qui n’adapte pas les liens vers m.youtube par exemple…
J’ai teste WPTouch, mais finalement suis revenu pour tous mes sites au WordPress Mobile Pack, que je trouve plus efficace.

Pour tester : http://www.kotonteej.com ; http://www.allestones.com ; http://www.djelimoussadiawara.com ; http://www.cybear.eu

Par ailleurs, meme si Google Analytics suit les mobiles, je conseille d’integrer un Mobile Analytics en plus comme PercentMobile (gratuit).

Sincerely
DJM

petite question à l’article me fait penser : quelqu’un aurait une bonne source (ou des infos fraiches) sur le trafic mobile ? Pas les chiffres généraux, mais du site par site,à la alexa/nielsen/mediametrie/ojd…

Je pense que ce sera le sujet d’une prochaine “minute geek”. A suivre donc !

Bonjour à tous,

Votre article est très intéressant et je souhaite y apporter ma pierre à l’édifice.

Je viens de lancer un service destiné entre autre aux artistes et indépendants.

MUISC BYKOD, c’est un QRcode + un site internet mobile personnalisé et adapté au monde artistique, pour faire découvrir, transmettre et même gérer votre visibilité depuis votre mobile.

Que vous soyez artiste, musicien, indépendant ou organisateur d’évènements, vous allez pouvoir créer votre site Internet mobile qui sera compatible avec tous les mobiles multimédia et OS du marché français et international, et ce, sans connaissance technique.
Et grâce au Qrcode associé le diffuser où vous le souhaitez..

j’aimerais juste savoir ce que vous en pensez.

http://bykod.com

En espérant que cela vous plaira.

J’ai trouvé cet autre article pour réaliser un site mobile soi-même entièrement, expliqué pas à pas, très à jour puisqu’il date du 15 juin 2012, ça n’est pas très compliqué en fait.

L’article fait mention de nouveaux outils de Google pour tester son site mobile même le construire, et aussi toutes les étapes pas à pas, jusqu’au fichier htaccess qui va bien, le sitemap, le référencement, très complet. C’est ici : Comment créer un site mobile.

Bonjour,
Merci pour cet article.. dans un premier temps le processus est pas mal ardus… mais une fois on a maîtrisé les notions de base tout devient automatique.
Personnellement, J’ai téléchargée plus de 400 template pour site mobile couvrant des dizaines de secteurs et niches et il me suffisait seulement de faire des petits changements ici et là et puis je les revend à mes clients … marges de profit pas mal intéressent 🙂

Leave a Reply

*