3.3.3. Adaptation aux terminaux mobiles
Créer un site Web consultable de manière
conviviale sur un terminal mobile est de nos jours une nécessité
absolue dans la mesure où une frange de plus en plus importante de la
population kinoise a recours à un téléphone intelligent ou
une tablette tactile pour accéder aux contenus sur Internet. Il est
évident que l'interaction sur les différents réseaux
sociaux a changé ces dernières années les habitudes, au
point où les terminaux mobiles sont devenus le moyen par excellence de
communication sur Internet, transformant les internautes d'hier en mobinautes
d'aujourd'hui.
Page 42 of 56
ILUNGA KABANGU Aristarque
Selon l'objectif du site web envisagé, du public cible
ou encore des services susceptibles d'être proposés aux
utilisateurs via les terminaux mobiles, trois solutions sont envisageables :
o une présentation adaptée aux terminaux mobiles
;
o un site Web dédié ;
o une application native, téléchargeable sur
certaines plates-formes.
Dans le cadre de notre projet, nous allons nous atteler
à la première approche, celle de l'adaptation de la
présentation du site Web aux terminaux mobiles. Il n'est nullement
question dans ce chapitre d'exposer l'ensemble des concepts, méthodes et
techniques relatifs à l'implémentation d'un « design fluide
» appelé aussi « responsive Web design » en anglais, mais
plutôt de présenter de manière succincte et pratique les
étapes importantes réalisées dans l'implémentation
d'un design fluide ou réactif.
Trois concepts nous ont servi de fil conducteur dans la mise
en oeuvre d'un design réactif. Il s'agit de :
o grille de mise en page flexible ;
o images et médias flexibles ;
o requêtes médias ou media queries.
Une grille de mise en page flexible ou grille fluide permet
de présenter le contenu d'un site Web dans un nombre approprié de
colonnes, en fonction de la largeur de l'écran.
Les images et médias flexibles sont des médias
qui peuvent s'adapter en fonction de la taille de l'écran. Ils sont
fixés à leur largeur maximale de 100% (max-width: 100%).
Les requêtes médias sont un ensemble de
règles qui permettent d'activer des styles différents, en
fonction de certains paramètres tels que la largeur de l'écran
d'un terminal mobile ou de son orientation.
Les étapes de l'implémentation du design
réactif :
o le Meta viewport
o le redimensionnement des éléments
o la prévention au débordement de contenus
o la redéfinition des tailles de polices
o l'affichage sur une seule colonne
o la suppression du superflu
o l'optimisation de la navigation
o la réorganisation des contenus
Page 43 of 56
a.
Promouvoir les atouts touristiques de... Mémoire de
Master M2 SIMI
ILUNGA KABANGU Aristarque
Le Viewport
La notion de viewport est indispensable pour l'adaptation et
l'intégration d'un site Web pour terminaux mobiles. Le viewport
désigne ordinairement la surface de la fenêtre d'un navigateur
sur un écran de bureau, ce qui diffère de celui
d'un terminal mobile doté essentiellement d'une navigation tactile.
Etant donné que chaque téléphone dispose de
ses propres caractéristiques techniques, il va donc falloir harmoniser
son espace d'affichage, généralement de faible résolution,
et ce pour obtenir un rendu de son navigateur qui soit semblable à celui
d'un écran de bureau.
En insérant le méta tag « viewport »
dans la balise <head> du code XHTML ou de la feuille de style CSS, le
navigateur du terminal mobile va recevoir des instructions lui dictant le
comportement à adopter pour afficher une page Web.
Interprétation du méta tag « viewport
» du site Web
<meta name='viewport' content='width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no' />
Cette ligne définit la largeur du « viewport
» pour être la même que la taille de l'écran du
terminal mobile utilisé pour afficher le site Web. L'échelle
d'affichage du site web sera 100 % et l'échelle maximum également
de 100 %.
Chaque navigateur mobile dispose de son propre «
viewport » par défaut, la plupart de ces navigateurs utilisant un
« viewport » par défaut de 980px ce qui signifie que la page
sera affichée dans une section d'affichage de 980 pixels et qu'un zoom
arrière sera effectué si nécessaire pour que la page
s'affiche en plein écran.
Plus l'écran le terminal mobile est petit plus le zoom
arrière sera important. Changer la valeur du « viewport »
permet de personnaliser la façon dont le navigateur va afficher le futur
site web.
b. Le redimensionnement des
éléments
De façon générale, après la
définition du viewport, certains éléments contenus dans
les pages Web et dont la largeur est supérieure à la
résolution de l'écran du terminal mobile sont sujets à une
déformation du fait de leur débordement de cette page. A cela, il
est impérieux de procéder à un remplacement les valeurs
fixes affectées au dimensionnement des éléments d'une page
Web (largeur, hauteur, marge intérieure, marge extérieure, etc.)
par des valeurs fluides en pourcentage (%) ou par défaut (auto ou 0).
Page 44 of 56
Promouvoir les atouts touristiques de... Mémoire de
Master M2 SIMI
ILUNGA KABANGU Aristarque
Le recours au mot-clé « !important » sera
quelque fois d'usage pour passer en priorité par rapport aux
déclarations précédemment appliquées au sein des
styles « classiques ».
Exemple de passage des valeurs fixes en valeurs
fluide
#entete {... width:960px; height:170px;...}, #entete {...
width:100%; min-height:170px;...}
c. La prévention au débordement de
contenus
L'étape suivante consiste à prévenir tout
débordement de contenus à l'intérieur d'une page Web.
Certains éléments sont particulièrement sujets à
ces comportements indésirables, par exemple les codes source et les
cellules de tableaux :
Exemple de code du site Web
textarea, table, td, th, code, pre, samp {word-wrap:break-word;
white-space: pre-line;}
d. La redéfinition des tailles de
polices
Afin de pouvoir adapter les tailles de polices de contenus,
de titrages et des éléments de formulaires aux terminaux mobiles,
et tenant compte de l'orientation de l'affichage de contenus de ceux-ci, le
recours à la propriété -webkit-text-size-adjust est
prisée.
e. L'affichage sur une seule
colonne
Afin d'améliorer le rendu de l'affichage de blocs de
contenus de pages Web sur terminaux mobiles, aussi bien en mode portrait que
paysage, la transformation de toutes les colonnes des blocs empilés
verticalement en une seule colonne de largeur maximale 100% s'impose.
Pour ce faire, les propriétés de flottaison
à gauche et à droite sont annulées. Tous les blocs de
contenus prennent la largeur 100%.
f. La suppression du superflu
Certains éléments contenus dans une page Web
peuvent être considérés comme utiles sur un écran de
bureau sans forcément l'être pour un terminal mobile dont la
surface d'affichage est largement inférieure. À l'aide de la
propriété display:none, les éléments non
indispensables sont masqués.
Page 45 of 56
g.
Promouvoir les atouts touristiques de... Mémoire de
Master M2 SIMI
ILUNGA KABANGU Aristarque
L'optimisation de la navigation
Etant donnée la taille réduite des écrans
mobiles, il est nécessaire de repenser la navigation initialement
conçue pour les écrans d'ordinateurs. La contrainte pour ce
projet est celle de faciliter le déploiement des liens des sous-menus
pour tous les différents terminaux.
Pour ce faire, nous avons choisi un module compatible WordPress
capable de déployer tous les liens sur toutes les plates-formes.
h. La réorganisation des
contenus
Afin de réorganiser la présentation des contenus
sur certains mobiles (taille de l'écran inférieure à
640px), certains changements dans la mise en page ont été
nécessaires.
| 
