Les smartphones, ainsi que les téléphones mobile, dans leur version moderne, permettent d'afficher le contenu d'un site web.
Pour autant le site web n'est pas directement affichable en l'état, les pages sont trop lourdes et prennent trop de temps à télécharger, la résolution d'écran est différente.
Il convient donc d'écrire une version mobile de son site, sans pour cela refaire un site complet.
Partons du principe que le site web à passer en version mobile est un site dynamique (langage serveur, base de donnée), la version statique est également faisable et nous indiquerons les différence, et faisons des choix avec des solutions. La réflexion n'étant pas terminée dans ce monde en constante évolution, il vous appartient de valider ces choix ou de faire différemment selon votre idée sur les évolutions à venir.
Pour passer du web au mobile, nous allons appliquer un template, évolutif, et permettre de conserver la même url pour la version web sur PC et pour la version web sur mobile.
Nous allons décrire des pages modèles permettant de re-écrire son site en version mobile.
Ce template provient de mobiforge.com lequel fournit un template web, d'une part en anglais, d'autre part pour site statique.
Voici une version commentée pour site dynamique et en français, et enrichie de l'expérience à la mise en place de ce template
Le template que nous vous proposons dispose de d'une page index, une page nouvelle, une page article, ainsi qu'une feuille de style pour la mise en forme.
A cela ajoutons une page entête (header) et une page pied de page (footer).
Voyons l'entête : entete
Le doc type pour page mobile, le titre du site, l'appel à la feuille de style (version optimisée avec des composants compressés)
La page index, c'est de manière classique le menu général avec des liens vers les autres rubriques.
Voyons l'index : index
Les éléments dynamiques d'include de l'entête ou du pied de page n'ont pas été indiqués ici, ni même ceux liés à la connexion à la base de donnée. Pour un site statique cette page index fonctionne en ayant au préalable recopié entête et pied de page à leur emplacements respectifs (à l'identique des pages d'un site web statique).
La page nouvelle et ou article (la structure est identique)
Voyons la page nouvelles : news
La page article peut être construite de la même manière, ainsi que toute autre page faisant appel à la base SQL pour le contenu, seul ici le mode d'affichage particulier pour du web mobile est indiqué. De manière générale la section SQL de votre page classique peut-être insérée ici, puis mise en page de la manière indiquée dans le code proposé et mise en forme avec la feuille de style.
Sur cette construction de base, toute page dynamique web peut-être ainsi passée en version mobile.
Si vos articles contiennent des images ou des photos, il peut être très intéressant de redimensionner les images pour le web mobile (script en ligne)
Il reste encore à voir quelle structure pour web mobile utiliser et comment rediriger les internautes mobiles vers ce bon répertoire. )