Avec l’arrivée dans notre vie des nouveaux smartphones, tablettes et autres innovations nous permettant de surfer sur le web, la question de l’accessibilité de votre site sur ce type d’appareil est fondamentale.
En effet, leur nombre croit à une vitesse folle et votre nombre de visiteurs potentiels également. Auparavant, la question ne se posait pas ou peu, puisqu’il valait mieux une version de site totalement dédiée aux mobiles, mais actuellement certains smartphones ou tablettes peuvent afficher un site comme un PC.
Une des possibilités est d’utiliser les Media Queries CSS3 pour adapter votre design au type d’appareil. Mais vous pouvez aussi créer deux versions de votre site web et laisser le choix au visiteur entre la version mobile et la version « normale » (appelée version desktop ou bureau).
Premier problème : si vous utilisez des redirections dans le fichier .htaccess, vous allez forcément rediriger tous vos visiteurs suivant leur user-agent (~ navigateur). Or un smartphone qui n’affichera pas correctement votre version normale de site et une tablette qui l’afficherait correctement peuvent très bien contenir « android » tous les deux dans ce user-agent.
Voici donc une solution possible pour laisser le choix à vos visiteurs avec ces deux fonctions javascript :
function lireCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function nav() {
var valeurnav = lireCookie('navmobile');
if (valeurnav == 'mobile') {
window.location = "url de la version mobile de votre site web";
}
if (valeurnav == 'bureau') {
}
else
{
if((navigator.userAgent.match(/iphone/i))||(navigator.userAgent.match(/ipod/i))||(navigator.userAgent.match(/android/i))||(navigator.userAgent.match(/palm/i))||(navigator.userAgent.match(/ipad/i)))
{
var question = confirm("Souhaitez-vous naviguer sur la version mobile du site (Cliquez sur \"Annuler\" pour la version bureau) ?")
if (question){
document.cookie = 'navmobile=mobile; expires=0 UTC; path=/'
window.location = "url de la version mobile de votre site web";
}
else
{
document.cookie = 'navmobile=bureau; expires=0 UTC; path=/'
}
}
}
}
Ensuite vous devez appeler la fonction nav(); sur les pages adéquates de votre site web pour laisser le choix au visiteur entre la version mobile et normale.
En bref, on a cette fonction, qui va vérifier dans un premier temps, si ce visiteur est déjà venu et le choix de sa version (mobile ou bureau). Si c’est le cas, il est redirigé en fonction. La date d’expiration du cookie permet de savoir combien de temps on doit conserver son choix. Ici le choix entre la version mobile et normale expire à la fin de chaque session (à la fermeture du navigateur).
Si ce choix n’a pas été fait (première visite ou cookie supprimé), on va détecter les navigateurs mobiles (afin de ne pas « déranger » les visiteurs provenant d’un PC), et les orienter selon leur choix vers la version mobile ou bureau. L’autre fonction sert uniquement comme son nom l’indique à lire les cookies.
Ceci vous permettra de présenter un contenu adapté au visiteur selon qu’il choisir la version mobile ou normale de votre site web.