Structure pour web mobile - Programmation

Navigation: Pages Webmaster > Programmation

Nous avons vu précédemment comment passer un site web sur mobile, voici d'autres éléments pour aller plus loin.

Rediriger l'internaute vers les pages mobiles

C'est une question que l'on se pose à juste titre à la conception du site, il existe plusieurs solutions.
Informer de l'url pour mobile : il s'agit de communiquer sur l'adresse de votre site version mobile. Il n'y a pas de redirection. Vous avec crée un sous domaine, ou bien un répertoire et c'est la que se trouve physiquement les pages pour mobile de votre site.
Détecter le navigateur wap : il s'agit ici de différencier l'internaute classique de l'internaute wap, pour ce faire on interroge le User-Agent et en fonction, on laisse passer le visiteur, ou bien on le redirige vers les pages adéquates.
Les pages pour mobile peuvent se trouver physiquement dans un répertoire donné du site, mais l'accès se fera vers un répertoire donné, un sous domaine, ou bien le même domaine.

Télécharger ici le Script pour détecter un navigateur wap

Une fois cet internaute détecté, il convient de le rediriger vers les bonnes pages : la version mobile du site. Comme indiqué dans le script, le changement de header permet de faire cette redirection.

Exemple d'utilisation du script :
Soit le répertoire de base : /repertoire/
Soit le répertoire wap : /repertoire/wap/

Si nous voulons que l'internaute web et l'internaute wap utilisent la même url indépendamment du support utilisé, nous allons écrire ceci.
Dans /repertoire/index.php, nous faisons un include suivant :
include ("mobile.php");

Dans mobile.php; le test suivant est fait :

if($isMobile){
header('Location: http://domaine.tld/wap/');
exit();
}

Ainsi pour l'internaute web, $isMobile répond false, rien n'est fait, le site web classique s'affiche, alors que pour l'internaute wap, $isMobile répond true, la redirection par le header se fait vers le répertoire ou se situe les pages wap pour mobile.

Structure des pages pour mobile

Ainsi que nous l'avons vu précédemment avec le template pour mobile, les pages sont structurées simplement.

Un entête avec liens de navigation.
Un corps de page avec contenu mis en forme, séparateur, affichage de vignette avec texte à droite et autour, texte en couleur, fond d'écran avec couleur.
Un pied de page avec liens de navigation.
Le W3C permet de suivre les avancées en matière de normes, tout n'est pas permis sur le wap, sinon nous laisserions l'internaute se débrouiller à zoomer sur les pages (la résolutions est différente) et à attendre que les pages se chargent, il est toutes fois utile de profiter des fonctions natives de ces smartphones avec notamment l'envoi de mail.

Les limites dans le codage
Un site dynamique est aujourd'hui composé de différents éléments pas forcement compatibles avec la venue de support différents.
Exemple : les liens absolus ou les liens relatifs.
Avec le protocole http sur le web, les pages peuvent avoir une url de base, les liens internes sont alors codés en fonction de cette base.
Côté flux rrs de syndication, permettant notamment de moins solliciter le serveur SQL, les liens relatifs ne sont pas acceptés. Etant donné que les flux sont exportables dans des lecteurs externes au site, le liens relatif n'a plus aucune valeur, bien au contraire.
Lorsque la base de donnée alors utilisée pour les flux de syndication, est également utilisée pour faire du contenu wap, les liens internes codés dans le texte de l'article sont des liens absolus. Ce liens absolu peut alors ne pas être cohérent avec l'url utilisée pour la version mobile du site. Cette incohérence peut être levée de manière brutale en remplaçant à la volée les urls non cohérentes par des urls pointant vers la version wap. La manière fine serait de pouvoir disposer d'une url de base, également pour les flux rss.

Dernière étape, ou étape à mener en parallèle, voyons comment Tester son site avec un émulateur de mobile

Partagez cette page sur :

           

Commentaires

Autres publications Programmation

Url en bit.ly sous ajax (le 15/03/2010 - 52 lectures)

Optimiser l'API bit.ly pour un affichage plus rapide des pages (le 08/03/2010 - 83 lectures)

Intégrer l'API bit.ly pour twitter (le 06/03/2010 - 104 lectures)

Dessiner dans une image avec PHP (le 23/02/2010 - 162 lectures)

Ecrire dans une image à la volée (le 22/02/2010 - 485 lectures)

Redimensionner photo pour le web mobile (le 15/02/2009 - 2.433 lectures)

Passer au web version mobile (le 09/02/2009 - 2.764 lectures)

Structure pour web mobile (le 09/02/2009 - 2.521 lectures)

Faut il externaliser ses scripts (le 09/12/2008 - 1.898 lectures)

Reseau Social Friend connect (le 05/12/2008 - 1.638 lectures)

Feuilles de styles statiques (le 09/11/2008 - 1.205 lectures)

Optimiser ses scripts (le 05/10/2008 - 1.216 lectures)

Optimiser la lecture des feuilles de style (le 01/10/2008 - 1.114 lectures)

YSLOW : composant compressé (le 20/09/2008 - 1.405 lectures)

Yslow : les pages dynamiques ou statiques sont persitantes (le 12/09/2008 - 1.255 lectures)

YSLOW : Réduire le nombre de requêtes (le 31/08/2008 - 1.682 lectures)

Améliorer la vitesse d'un site coté serveur (le 30/08/2008 - 2.086 lectures)

GoogleEarth kml et flux rss (le 20/06/2008 - 2.064 lectures)

Annuaire thématique cartographié (le 05/12/2007 - 6.134 lectures)

Adapter son site à la résolution d'écran (le 23/11/2007 - 10.328 lectures)

L'API Google Maps Xml et Ajax sont sur un site web (le 19/11/2007 - 7.149 lectures)

Intégrer l'API Google Maps (le 18/01/2006 - 63.463 lectures)

Software 2.0 - Programmation en Java (le 04/04/2005 - 5.792 lectures)

Suivez phortail

Web phortail.org

• ETL domaine decisionnel
• Temoigner sur le stress au travail
• L'individu au coeur du bilan de compétences
• Nouveautés réseaux sociaux
• Présentation du livre les sept habitudes