Comment rendre son blog compatible mobile?

Le mobile représente généralement, selon les sites internet, entre 20% et 40% des connexion utilisateurs. Des sites internet comme Facebook sont passés en l’espace d’un an et demi à du 50% mobile. La consommation de l’internet est résolument tournée vers le nomadisme et l’utilisation du terminal Desktop continue de diminuer à vitesse grand V.

Les fêtes de noël venant de se terminer, le produit star au pied des sapins de noël fut la tablette, suivie du smartphone -même si étant donné le budget, ce sont souvent les personnes qui se font ce type de cadeau à elle-même, ce qui laisse présager d’une nouvelle forte accélération du taux de pénétration des mobinautes à court et moyen terme dans les statistiques de.

Mobile-friendly: la solution du responsive design

La première option est de changer le template de votre site internet pour en adopter un qui soit responsive. Cela signifie que votre site internet aura le même rendu sur une tablette ou un smartphone que la version que vous pouvez visualiser sur une version Desktop. Les dimensions vont se changer automatiquement pour s’adapter à la taille de l’écran utilisé pour la visualisation.

La majorité des templates modernes de sites internet sont généralement par défaut responsive. Cette information est précisée lors du téléchargement du template.

Créer une application mobile ou utiliser le plugin WpTouch pour WordPress

Deux autres solutions: soit vous avez les moyens et vous pouvez décider de développer votre propre application mobile, soit vous pouvez décider d’utiliser un plugin si votre site tourne sous un CMS.

Si vous possédez un site internet simple ou un blog sous WordPress, allez faire un tour du côté des plugins existants. Ces plugins transforment carrément le design de votre site internet pour le rendre 100% compatible mobile – il s’agit d’un thème qui ne sera utilisé que pour les smartphones et tablettes. Cela signifie que les liens de navigation vont changer, l’agencement des articles et des pages de votre site va changer rendant la navigation dans le site internet agréable pour un internaute mobile. L’expérience qu’aura un internaute de votre site en sera grandement améliorée.

Le plugin WpTouch permet une très bonne utilisation en natif, sans faire de grandes modifications à votre site internet.

Sous le capot, le plugin permet de repérer le USER-AGENT utilisé par l’internaute et en fonction de celui-ci, de cloaker le site internet pour permettre un meilleur rendu à l’utilisateur. Une variable globale permet de référencer les use-case traités par le plugin. Pour les personnes intéressées, ces bouts de code se trouvent dans le dossier /core du plugin dans le fichier  mobile-user-agents.php – voici un aperçu de ce qu’il contient:

<?php

/* Smartphones */
global $wptouch_smartphone_list;
$wptouch_smartphone_list = array(
        array( 'iPhone', 'Mobile' ),                                    // iPhone
        array( 'iPod', 'Mobile' ),                                              // iPod touch
        array( 'Android', 'Mobile' ),                                   // Android devices
        array( 'BB', 'Mobile Safari' ),                                 // BB10 devices
        array( 'BlackBerry', 'Mobile Safari' ),                 // BB 6, 7 devices
        array( 'IEMobile/10.0', 'Touch' ),                              // Windows IE 10 touch devices
        'IEMobile/7.0',                                                                 // Windows Phone OS 7
        'IEMobile/9.0',                                                                 // Windows Phone OS 9
        'webOS'                                                                                 // Palm Pre/Pixi
);

/* Tablets */
global $wptouch_tablet_list;
$wptouch_tablet_list = array(
        // Nothing excluded yet
);

/* Matching any of these user-agents will cause WPtouch Pro to be shown for the 'default' theme */
global $wptouch_device_classes;
$wptouch_device_classes[ 'default' ] = $wptouch_smartphone_list;

global $wptouch_exclusion_list;
$wptouch_exclusion_list = $wptouch_tablet_list;

En surface, vous pouvez grâce à un back-office relativement simple procéder à quelques modifications du rendu visuel pour adapter le rendu du site internet et notamment adapter la charte graphique à la version Desktop traditionnelle de celui-ci.