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>