blog actif depuis 774 jours.
retours d'expériences, codes sources, réflexions, humeurs... d'un webmaster
Mer.
22
Avr.
Développer un site pour mobile ne se résume pas à faire un site de petite taille.
Il existe un doctype pour le Web mobile, des règles de navigation et d'ergonomie particulières et même un CSS spécifique, le WCSS.
Voici quelques règles et conseils pour développer un site « Mobile Friendly », tiré du "dotMobi Mobile Web Developer's Guide"
Le doctype spécifique aux mobiles est le XHTML MP. Donc vous devez le déclarer comme ceci :
De même le mime type doit être "Application/xhtml+xml" et codé en UTF-8 :
Coder en XHTML
Mise en page, organisation
La résolution d'écran standard est le QVGA (240 x 320). L'iPhone a, lui, une résolution de (320 x 480). Il est donc préférable, pour rester compatible avec tous les mobiles de développer pour une largeur de 240 pixels maxi.
Il est préférable d'utiliser des divs plutôt que des tables pour la mise en page. En effet, les tableaux s'affichent très mal sur des espaces de petite taille.
La navigation sur un mobile se fait de façon verticale, contrairement à un site classique qui permet une mise en page en plusieurs colonnes, avec notamment le menu à gauche.
Il faut également garder à l'esprit que sur les téléphones non tactiles, le scroll se fait à la molette ou pire avec les touches de navigation. Donc prévoyez un menu en bas de page pour éviter les clics inutiles.
Liens
L'intérêt d'être sur un téléphone est que vous pouvez faire des liens directement sur un numéro de téléphone :
Pour faciliter la navigation, on utilisera l'attribut « accesskey » qui permettent d'accéder à un lien en cliquant sur une touche (un raccourci en quelque sorte). Pensez à garder certains raccourcis constants (ex : touche 0 pour retourner au menu principal).
Menu
Il est conseillé d'écrire les menus sous forme de liste numérotée comme ceci, avec les raccourcis correspondants :
Limitez le nombre de liens : de 0 à 10 pour permettre l'accès via le pavé numérique.
Tableaux
Préférez les listes de définition (balise <dl>) plutôt que les tables, qui s'affichent mal sur de petits écrans.
Formulaires
Pour les formulaires, utilisez les listes de définition, comme ceci :
Les raccourcis sont ici très intéressants pour naviguer rapidement dans le formulaire.
Images
La taille de vos images ne doit pas dépasser 120 pixels de large et l''attribut alt doit toujours être rempli (ce qui est une règle XHTML).
WCSS - CSS pour le WAP.
Le WAP a sa propre feuille de style, le WCSS.
Il permettra notamment de définir des règles de remplissage pour les formulaires.
Ex : -wap-input-format: "A*a" : Chaine de caractère d'au moins une lettre avec la première lettre en Majuscule
Quelques conseils supplémentaires
Les titres de pages sont très importants sur les mobiles.
Evitez d'insérer des objets dynamiques (flash, vidéos…) et du javascript.
Les « autorefresh » sont à proscrire.
Utilisez le cache si possible :
<meta http-equiv="Cache-Control" content="max-age=300">
Pas de popups.
La taille totale de la page à charger (ressources externes incluses – css, images…) doit être d'environ 10 Kb pour un affichage fluide mais ne devrait pas dépasser 25 Kb.
Liens
Emulateurs de mobiles en ligne
dotMobi Mobile Web Developer's Guide
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
De même le mime type doit être "Application/xhtml+xml" et codé en UTF-8 :
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
Coder en XHTML
Mise en page, organisation
La résolution d'écran standard est le QVGA (240 x 320). L'iPhone a, lui, une résolution de (320 x 480). Il est donc préférable, pour rester compatible avec tous les mobiles de développer pour une largeur de 240 pixels maxi.
Il est préférable d'utiliser des divs plutôt que des tables pour la mise en page. En effet, les tableaux s'affichent très mal sur des espaces de petite taille.
La navigation sur un mobile se fait de façon verticale, contrairement à un site classique qui permet une mise en page en plusieurs colonnes, avec notamment le menu à gauche.
Il faut également garder à l'esprit que sur les téléphones non tactiles, le scroll se fait à la molette ou pire avec les touches de navigation. Donc prévoyez un menu en bas de page pour éviter les clics inutiles.
Liens
L'intérêt d'être sur un téléphone est que vous pouvez faire des liens directement sur un numéro de téléphone :
<a href="tel:0557225050">0557225050</a>
Pour faciliter la navigation, on utilisera l'attribut « accesskey » qui permettent d'accéder à un lien en cliquant sur une touche (un raccourci en quelque sorte). Pensez à garder certains raccourcis constants (ex : touche 0 pour retourner au menu principal).
Menu
Il est conseillé d'écrire les menus sous forme de liste numérotée comme ceci, avec les raccourcis correspondants :
<ol>
<li><a href="lien1.html" accesskey="1">Lien 1</a></li>
<li><a href="lien2.html" accesskey="2">Lien 2</a></li>
</ol>
Limitez le nombre de liens : de 0 à 10 pour permettre l'accès via le pavé numérique.
Tableaux
Préférez les listes de définition (balise <dl>) plutôt que les tables, qui s'affichent mal sur de petits écrans.
Formulaires
Pour les formulaires, utilisez les listes de définition, comme ceci :
<dl>
<dt>Nom</dt>
<dd>
<input type="text" id="idnom" value="nom" accesskey="N" />
<label for="idnom">Votre <span class="accesskey">N</span>om</label>
</dd>
</dl>
Les raccourcis sont ici très intéressants pour naviguer rapidement dans le formulaire.
Images
La taille de vos images ne doit pas dépasser 120 pixels de large et l''attribut alt doit toujours être rempli (ce qui est une règle XHTML).
WCSS - CSS pour le WAP.
Le WAP a sa propre feuille de style, le WCSS.
Il permettra notamment de définir des règles de remplissage pour les formulaires.
Ex : -wap-input-format: "A*a" : Chaine de caractère d'au moins une lettre avec la première lettre en Majuscule
Quelques conseils supplémentaires
Les titres de pages sont très importants sur les mobiles.
Evitez d'insérer des objets dynamiques (flash, vidéos…) et du javascript.
Les « autorefresh » sont à proscrire.
Utilisez le cache si possible :
<meta http-equiv="Cache-Control" content="max-age=300">
Pas de popups.
La taille totale de la page à charger (ressources externes incluses – css, images…) doit être d'environ 10 Kb pour un affichage fluide mais ne devrait pas dépasser 25 Kb.
Liens
Emulateurs de mobiles en ligne
dotMobi Mobile Web Developer's Guide
Commentaires
Bonjour Esther.
Je ne connais pas tous les hébergeurs du marché.
Pour ma part, je travaille avec OVH, qui propose des offres avec rapport qualité/prix imbattables sur le territoire.
Je n'ai jamais eu de problème majeur chez eux. Les petits soucis que j'ai pu rencontrer ont été gérés avec rapidité, le support téléphonique a toujours été sérieux et de qualité.
11/11/2009
Ajouter un commentaire
Webmaster depuis maintenant plus de 10 ans, j'ai créé ce blog pour publier mes retours d'expérience et parler du Web et du développement Web en général, mais aussi de plein d'autres choses...
romualb.com est sur Facebook
| < | Juillet 2010 | |||||
|---|---|---|---|---|---|---|
| Lun | Mar | Mer | Jeu | Ven | Sam | Dim | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- merci à toi pour l'info (romualb)
- J'ai trouvé la solution pour ce problème. Il faut juste mettre ... (Lowlo)
- @Lowlo : effectivement, c'est pas prévu mais ça peut être ... (romualb)
- @boucmacmilian : - pour activer les jours, il faut utiliser la méthode ... (romualb)
- Bonjour romualb merci bien pour ce script j'en avais besoin j'ais un ... (boumacmilan)
- Bonjour, Merci beaucoup pour cette classe, elle fonctionne niquel. J'ai juste ... (Lowlo)
- c'est mon dev qui va etre heureux (max)
- le calendrier de ce blog est un bon exemple d'intégration (romualb)
- Bonjour, Je pense que j'ai résolu le problème. Ça semble ne ... (Mic)
- @Mic cette erreur vient du fait que le PHP5 n'est pas activé sur ton ... (romualb)
- apache (2)
- bases de données (4)
- CSS (1)
- divers (44)
- e-commerce (7)
- geek (6)
- HTML (1)
- Javascript / jQuery (17)
- LAMP (2)
- liens (33)
- linux (6)
- méthodologie (5)
- monétisation (2)
- outils (18)
- pensée du jour (2)
- PHP (15)
- réalité augmentée (2)
- référencement (9)
- romualb.com (7)
- sécurité (2)
- sites à voir (8)
- Petitchevalroux - les notes d'un dev php mysql
- CERDAN Yohann - Blog d'un développeur PHP/TYPO3 http://www.ycerdan.fr/
- LyRiXx Blog
- Développeur Web à Grenoble
Bonjour,
nous sommes une société spécialisée dans la PLV (Publicité sur Lieu de Vente) et nous sommes dans un travail de recherche pour l'hébergement de notre blog d'entreprise.
Nous sommes sur la piste de l'hébergeur américain bluehost,de l'hébergeur OVH, 1&1 et online.net.
Quel est selon vous celui qui saura répondre au mieux à notre besoin?
Auriez-vous d'autres références à nous conseiller?
Cordialement,
Esther.
09/11/2009