Créer des pages web pour mobile
Consulter une page web sur son mobile est de plus en plus courant.
Les pages web classiques sont peu lisibles sur les mobiles et dissuadent les visiteurs à rester sur ce type de page.
Pour régler ce problème, il faut avoir un double affichage, la première conventionnelle et la seconde en version mobile. Cette solution est celle proposée par blogger pour les blogs réalisés.
Pour l'utilisateur cette application est transparente, car les modifications sont faites automatiquement lors de l'affichage sur le mobile.
C'est ce type de modification que nous proposons d'étudier pour nos pages web.
Le processus comprend 3 étapes :
- On garde la page HTML et la feuille de style actuelles.
- On crée une feuille de style "mobile.css" qui impose un affichage sur une seule colonne
- On ajoute dans chaque page web des déclarations qui vont détecter l'affichage d'un mobile et orienter l'affichage avec la feuille de style "mobile.css".
Le principe utilisé ici c'est l'introduction dans une page web de média quieries qui font partie d'un module CSS3. Elles vont permettre d’appliquer une feuille de style ou une propriété CSS en fonction des caractéristiques matérielles du média utilisé dans notre application c'est : appliquer une feuille de style en fonction de la taille de l’écran.
Media quieries à intégrer dans les balises <head> </head> :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> <link media="Screen" href="style.css" type="text/css" rel="stylesheet" /> <link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" /> <!--[if IEMobile]> <link rel="stylesheet" type="text/css" href="mobile.css" media="screen" /> <![endif]-->
Création d'une feuille de style "mobile.css"
Exemple pour les boîtes div id="xxx" :
#xxx {
margin: 2px;
width: 96%;
max-width: 480px;
background: #fff;
padding: 2px;
}
Exemple pour un menu dans <div id="yyy"> :
#yyy {
color : green;
text-decoration: none;
line-height: 25px;
height: 100%;
width: 95%;
background: #ffffff;
}
#yyy a:hover {
color: orange;
}
#yyy a {
display: block;
color: green;
text-decoration: non;
line-height: 25px;
width: 95%;
max-width: 480px;
border: 1px solid black;
background: #fc0;
margin: 2px;
padding: 2px;
text-align: center;
}
