SmartphonesDévelopper pour le mobile est devenu est sujet très à la mode, de plus en plus de personnes se connectant à internet depuis leur smartphone. L’on se souvient de cette époque où les entreprises s’arrachaient ces nouveaux explorateurs d’internet qu’étaient les développeurs web. Aujourd’hui la donne n’a pas tout a fait changé, cependant, les internautes ont juste un peu changé leurs habitudes, car ils veuillent désormais disposer d’internet à tout moment, et si possible sans trop d’encombrement. Beaucoup optent pour le notebook (La sortie prochaine des Chromebooks, le 15 juin, devraient les intéresser), c’est notamment le cas des grands voyageurs, quand d’autres, grands citadins, se tournent vers les smartphones.

L’entreprise tout comme le particulier Web 2.0, voire 3.0, se doivent  donc de s’adapter, en repensant l’image que donne leur site d’eux. Afin d’atteindre cet objectif, les questions qui se posent sont souvent :

  • Doit t-on réécrire un site from scratch et entièrement customisé pour le web mobile ? Ou juste alléger le site en fonction du visiteurs ?
  • Faut t-il développer une application native ou application multiplateforme ?

A vrai dire, tout dépend de certains paramètres comme le temps imparti, la taille de l’équipe de développement et le type d’application ciblé.

A mon avis, faire le choix d’une application native est vraiment intéressant si l’on souhaite pousser au maximum les capacités de l’application. Une application de réalité augmentée par exemple ne peut et ne doit être faite qu’en application native. On pourra ainsi bénéficier de toute la puissance de l’appareil (accélération matérielle, rendu graphique,…).

Par contre un site d’actualités transformé en application mobile peut se faire sans difficulté grâce aux technologies du web (HTML, CSS, JavaScript). Ce qui aura d’ailleurs l’avantage de permettre aux internautes une transition facile du site web vers l’application mobile. On sait tous à quel point l’acceptabilité d’une application est un problème, alors tant qu’on peut la contourner on ne va pas s’en priver. Un internaute visitant le site via son mobile sera par exemple redirigé vers la version mobile du site après détection du type d’appareil à l’aide d’un script côté serveur par exemple ou encore en JavaScript. Un exemple avec la librairie PHP Tera-WURFL est expliqué ici.

Un autre paramètre important est le nombre de personnes dans l’équipe de développement. Si l’on dispose de beaucoup de monde, alors autant pleinement exploiter les plateformes de développement proposées par chaque OS mobile (Android, iOS, Blackberry OS,…) et négocier avec le client sur la durée de développement et donc des couts finaux, lui promettant une application qui changera la face de son entreprise.

Une solution pour adapter son site web en production est l’utilisation des médias queries. Cette méthode évite de devoir faire des redirections, de reconstruire son site avec les technologies du web ou en natif. En fait l’idée est simplement de garder son site tel quel (s’agissant du contenu et du design) et d’adapter sa feuille de style en fonction du type de navigateur utilisé (standard ou mobile). Mon avis est que cette méthode est d’abord orienté vers les smartphones. Pour les mobiles un peu ancien, le mieux c’est de faire simple, comme expliqué dans ce tutoriel. Une redirection placée à la page index du site devrait permettre d’atteindre la version appropriée :

Redirection simple en PHP
1 2 3 4 5 6 7 8 9 
<?php    if (is_wap_mobile_fonction)    {       // Mettre ici du code php optimisé pour les anciens mobiles    }    else {      // Et ici du code php avec media queries    } ?>

La spécification CSS 3 Media Queries donne les règles d’adaptation CSS en fonction des capacités de l’appareil. Inspirées de la spécification Media Types en CSS 2, les Media Queries étendent les capacités de cette spécification, et vont grandement faciliter la vie des développeurs. Ces dernier n’auront en effet qu’à l’appliquer sur un site standard, sans ensuite se préoccuper d’une éventuelle version mobile.

L’écriture des Media Queries (Requêtes de média) se fait grâce à d’opérateurs logiques : and (ET Logique), only (uniquement) et not (NAND).

Dans cet exemple, le fichier smartphone.css ciblera les appareils que le navigateur considérera comme étant de petites tailles (handheld) et dont la largeur est au plus égale à 320px :

Ciblage en fonction de la taille de l’écran
1 2 
<link rel="stylesheet"   media="handheld, only screen and (max-device-width: 320px)" href="smartphone.css">

Cet autre exemple permettra de cibler la tablette iPad :

Ciblage Tablette iPad
1 2 
<link rel="stylesheet"   media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">

Les Media Queries peut être directement intégrées dans une balise style :

Media Queries dans une balise style
1 2 3 
<style>   @media only all and (orientation: portrait) { #navigation{display:none} } </style>

Dans le cas d’un site à développer, l’utilisation des Media Queries se fera simplement en ajoutant ceci à la balise head :

Media Queries en Action
1 2 3 4 
<link rel="stylesheet"   media="all" href="/css/style_de_base.css" /> <link rel="stylesheet"   media="only screen and (max-width: 800px)" href="/css/mobile.css" />

Le fichier style_de_base.css définissant le look ‘n Feel de base du site (paramètre all), tandis que le mobile.css se charge d’adapter le site en cas de visite d’un appareil mobile (paramètre only), dont la largeur est fatalement inférieure à 800px. On couvre ainsi les smartphones (environ 320px) et les tablettes. Les changement à apporter pourraient être :

  • La modification des valeurs du whitespace et des marges(padding, margin)
  • Suppression du :hover, qui n’est d’ailleurs pas visible en mobile
  • Ajuster la structure du site de façon à ce que le contenu ne tienne que sur une colonne.

Et bien d’autres, comme vous le sentirez.

Pour aller plus loin:

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.