Optimiser votre site Web pour le Mobile

24 mai 2012 JavaScript / JQuery, Mobile / iPhone /Android

Introduction

Quand on parle de site internet, on voit immédiatement, un site taillé pour une grande résolution, optimisé pour un poste de travail. Hors, avec l’arrivée de l’internet sur mobile, il est rapidement devenu évidement qu’un site optimisé pour une résolution d’écran normal ne permettait pas une navigation aisée sur mobile. LA grande problématique est donc : comment faire entrer son site desktop sur un mobile : Nouveau site ou Redimensionnement?

Le mobile

Le développement pour et sur mobile pose de fortes contraintes en même temps qu’il offre une ouverture vers des fonctionnalités et interactions plus abouties (géo localisation, l’appareil photo, l’accéléromètre, etc..)

Les contraintes viennent directement de l’appareil en lui-même. En effet, la gestion de la taille de l’écran, du processeur, de la mémoire et du stockage va prendre une part importante des choix de développement.

Quand on parle de développement mobile, une question se pose automatiquement, vaut il mieux un développement web ou un développement natif ?

La réponse n’est pas simple. En effet, le développement web a comme avantages

  • un développement unique pour plusieurs plateformes (web kit, blackBerry, OperaMobile, Chrome, …)
  • le site n’est pas soumis à validation par un organisme pour les déploiements sur son système. (ex. itune)
  • les mises à jour sont automatiques

Avantages auxquels le développement natif oppose ses propres atouts :

  • L’application est plus rapide
  • L’expérience utilisateur est plus aboutie
  • Une rémunération est possible et contrôlée
  • Un mode déconnecté est possible
  • Des kits de développement sont disponibles

Là encore, le choix sera guidé par les priorités du moment et du contexte client.

Le web mobile, possibilités et bonnes pratiques

Normes pour le mobile

Les principales normes pour le développement web mobile sont disponibles sur www.w3c.org/TR/mobile-bp, on retrouve entre autre que :

  • Le HTML est un sous ensemble du XHTML 1.1
  • Le CSS est un sous ensemble de CSS 2.1
  • Le Javascript est basé sur Ecmascript MP
  • L’encodage est l’UTF-8

Gestion des urls

La gestion des url doit être adaptée au type d’appareil qui accède au site. En effet un utilisateur de mobile doit accéder au site mobile tandis qu’un utilisateur desktop doit accéder au site complet.

Il n’y a aucune norme sur le sujet. Le conseil que nous pourrions donner est de faire en sorte que l’adresse s’adapte. Pour cela, utiliser le « browser sniffing ». Deux moyens :

  • Par les « User-agent »
  • Par le UAProf grâce au fichier x-wap-profile (fichier envoyé par le mobile qui contient l’intégralité des informations du mobile : taille écran, résolution, etc. (Attention, il n’est pas reconnu par Safary)).

    • Votre architecture est basée sur Spring ? Spring-Mobile vous facilitera la tâche.

    Deux points sont à ne pas négliger dans la mise en place des utls :

    • Il est important de faire attention à la non réversibilité coté serveur. Il faut toujours laisser le choix à l’utilisateur mobile de revenir au site complet. Et bien évidement, d’empêcher l’utilisateur desktop d’accéder au site mobile.
    • Le référencement des sites mobiles est difficile. Une bonne astuce est d’utiliser dans l’entête de la page d’accueil du site mobile la balise :
      <link ref="canonical" href="adressedemonsiteprincipale"/>

    Bonnes pratiques

    HTML

    Quelques bonnes pratiques concernant les pages HTML :

    • Contrôler la taille des pages. Un page doit faire au maximum 20Ko
    • Mettre un DOCTYPE :

      o DOCTYPE strict en XHTML 1.1
      o DOCTYPE HTML5
      o DOCTYPE Mobile (existe mais préférer l’un des deux autres)
    • Mettre des balises viewport.
    • Deux balises viewport indispensables :
      o Une avec width=device-width (ouverture d’une page en pleine largeur)
      o Une avec initiale-scale=1 (ouverture d’une page en zoom x1)
    • Fermer toutes les balises
      o Les balises sans contenu (ex. <BR />)
      o Les balises avec contenu (ex. <script></script>). Ne pas fermer des balises avec contenu directement (ex. préférer < script></script> à <script/>)
    • Mettre les noms des balises en minuscule
    • Utiliser des input
    • Utiliser les labels. Les écrans étant petits l’utilisation des labels permet à l’utilisateur une zone de sélection plus grande.
    • Bannir les pop-up
    • Préférer des layouts en 1 colonne
    • Adapter la taille des polices
    • Optimiser la navigation

    CSS

    Comme vu précédemment le CSS mobile est un sous ensemble de CSS 2.1. Le CSS 2.1 n’étant pas encore reconnu par tous les navigateurs, il est conseillé d’utiliser CSS 1.

    En terme de développement, une bonne pratique est d’utiliser plusieurs CSS avec des medias (@media) et des medias queries (width, device-width, orientation, …).
    Les medias de base à utiliser sont « screen » (pour le desktop) et « handheld » (pour le mobile).
    Attention toutefois, le media « handheld » n’est pas reconnu par tous les navigateurs. Une solution est d’utiliser le media query « only screen and (max-device-width :XXXpx) »

    Un exemple pour toucher un maximum de mobile :
    <link rel="stylesheet" href="monCssGenerale.css" media="screen" />
    <link rel="stylesheet" href="monCSSmobile.css" media="handheld, only screen and (max-device-width:480px)" />

    Images

    Les images sont un point critique pour la taille des pages, le cpu et la bande passante. Une attention toute particulière est donc à leurs porter :

    • Préférer des images en basse définition.
    • Spécifier la taille dans le HTML/CSS (permet d’optimiser le CPU).
    • Éviter de redimensionner les images en HTML/CSS.
    • Ne pas hésiter à utiliser des outils pour retailler et baisser la qualité des images

    JS

    L’utilisation du Javascript sur les mobiles a été pendant un long moment un sujet tabou. Maintenant, il se démocratise mais doit être utilisé en respectant quelques bonnes pratiques :

    • Utiliser le mode « strict »
    • Séparer le HTML et le JS
    • Placer le JS en fin de HTML
    • Faire attention à l’utilisation des librairies et API : vérifier avant d’utiliser
    • Vérifier l’existence : Avant d’utiliser un composant (ex. géo localisation, …) checker son existence
    • Utiliser des validateurs Javascript
    • Privilégier la validation coté client (en dosant néanmoins, tout ne doit pas être validé coté client. Penser au CPU du mobile)
    • Éviter l’utilisation de setInterval et setTimeout
    • Limiter la manipulation du DOM (couteux en CPU)
    • Utiliser AJAX avec parcimonie

    Rapidité

    Pour rendre son site web mobile rapide et efficace, trois actions sont à mener :

    • Limiter le nombre de fonctionnalités accessibles. Trouver la meilleure réponse à la question, que veulent les utilisateurs, pour sélectionner les fonctionnalités indispensables.
    • Contrôler la taille des pages. Une page doit faire au maximum 20 Ko.
    • Réduire au mieux la latence et la bande passante. (Réduire au maximum les appels serveur / la taille des fichiers qui transitent).

    Réduire les appels

    1- Cache des éléments et données

    • Utiliser les « cache Proxy »
    • Utiliser le « CDN » (Content Delivery Network) si la cible est internationale
    • Jouer sur les paramètres « Expires », « Cache-contrôle » et « Etag »
    • Versionner les fichiers
    • Utiliser des validateurs

    2- HTML5

    • Utiliser le « localStorage » (stockage des données en local) à la place des cookies. (Pour rappel, les cookies sont transmis à chaque appel).
    • Utilisation du « cache manifest » : Application web offline

    3- Requêtes HTTP

    • Concaténer les fichiers lorsque cela est possible
    • Utiliser les « sprites CSS » pour les images (Permet d’exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres et appelées unitairement dans le CSS)
    • Encoder les petites images en base 64. Cette technique permet d’embarquer l’image dans le HTML. Ainsi l’image n’est pas téléchargée indépendamment (1 appel http (HTML) au lieu de 2 (HTML + Image)). L’inconvénient est que l’encodage augmente d’environ 50% la taille de l’image. Cette astuce est donc à utiliser avec prudence.
    • Éviter les redirections

    1.1.1.5. Minifier
    Pour alléger le poids des fichiers, certains types de fichier peuvent être minifiés :

    • Les CSS
    • Le JS

    Références

    Outils

    Minifier :
    • YUI compressor
    Compresser les images :
    • PNG Cruch
    Validateur HTML :
    • http://validator.w3.org/
    Validateur CSS :
    • http://jigsaw.w3.org/css-validator/
    Émulateur :
    • http://quirktools.com/screenfly/
    • http://www.opera.com/developer/tools/
    • http://www.opera.com/developer/tools/mini/
    • https://developer.apple.com/devcenter/ios/index.action
    • http://developer.android.com/sdk/index.html
    • http://www.microsoft.com/en-us/download/details.aspx?id=13890
    • http://us.blackberry.com/developers/resources/simulators.jsp
    • http://www.developer.nokia.com/info/sw.nokia.com/id/ec866fab-4b76-49f6-b5a5-af0631419e9c/S60_All_in_One_SDKs.html
    • http://www.mozilla.org/fr/mobile/
    Validateur cache :
    • Wireshark
    • RED Bot
    Validateur JS :
    • http://www.jslint.com/
    Validateur de site :
    • http://validator.w3.org/mobile/
    Évaluateur de site :
    • http://ready.mobi/
    • http://www.gomez.com/mobile-readiness-test/

    Framework

    1.1.1.6. Framework mobile
    • JQuery Mobile (orienté HTML5)
    • Sencha2 (orienté Javascript)
    • JO (orienté Javascript)
    • JQTouch (orienté Jasvascript) associé à JQuery ou ZeptoJs
    1.1.1.7. Autres Frameworks (Web, Natifs)
    • Titanium, compilation Javascript vers narif
    • PhoneGap, conteneur d’applications Web accédant aux fonctions natives du terminal
    • Joshfire
    • KendoUI

    Débuggage

    • Weinre : un remote debug multi plateforme.
    • Il existe un remote debugging par navigateur

    Conclusion

    La mise en place d’un site mobile ne consiste donc pas simplement en une miniaturisation du site desktop. Le site doit être totalement repensé afin d’assurer à l’utilisateur une navigation rapide et intuitive.

    Pour résumer, les trois clés d’un bon site web mobile sont :

    • S’adapter aux dimensions
    • S’adapter au media
    • S’adapter aux performances
«
»