Site Internet vers site mobile


partager des documents DOCUMENTS ASSOCIÉS

 

Site Internet vers site mobile

 

Comment adapter son site web aux Smartphones ? Sommaire 1. Impensable de faire une version pour tous les mobiles ................................................................. 1 2. Quelles sont les techniques pour détecter un mobile ?.................................................................. 2 Pour les téléphones les plus récents : Media Queries .................................................................... 2 Pour les téléphones anciens : Détection par User-Agent ............................................................... 2 Si vous avez un CMS, un module existe peut-être.......................................................................... 2 3. Adapter son site Internet : les éléments à éviter............................................................................ 3 Flash................................................................................................................................................. 3 Javascript......................................................................................................................................... 3 4. Adapter son site Internet : les éléments à modifier........................................................................ 3 Penser au confort de lecture........................................................................................................... 3 Alléger vos pages - quelques conseils ............................................................................................. 3 Adapter l'affichage .......................................................................................................................... 3 Améliorer les performances............................................................................................................ 3 5. Il est temps de tester !..................................................................................................................... 4 Accéder à internet à partir de son smartphone est devenu courant. En France, entre janvier et août 2010, la vente de ces appareils a connu une croissance en volume de plus de 138% selon l?institut GfK. Désormais, un quart des téléphones vendus est un smartphone. Malgré tout, il y a encore de nombreuses contraintes qui rendent la navigation difficile : résolution réduite, temps de chargements importants etc. Autant de raisons de vouloir offrir à vos visiteurs une version de votre site optimisée pour les mobiles. 1. Impensable de faire une version pour tous les mobiles Vous trouviez fastidieux d?assurer une compatibilité de votre site pour Firefox, Chrome et Internet Explorer 6, 7 et 8 ? Bienvenue dans le monde des mobiles ! Ici, vous aurez bien plus de navigateurs à supporter, chaque fabriquant ayant son propre navigateur avec ses spécificités. Vous n?avez probablement pas le temps ni les moyens de tester tous les modèles de téléphones existants. Nous pouvons cependant séparer les smartphones en 2 catégories : ? Les smartphones récents dans lesquels nous mettrons IPhone, Androïd, dernières version de Blackberry, WP7 ? Les smartphones low-cost ou plus anciens (Nokia E71, anciens Blackberry?) Les stratégies de support seront très différentes selon la catégorie visée. Pour la première catégorie, on peut adapter un site existant, avec quelques CSS et Javascript personnalisés. Pour les plus anciens, il faudra penser à fournir des templates spécifiques. Si vous développez un site web d?entreprise, vous optimiserez votre site pour les smartphones de l?entreprise. Si vous développez un site grand public, vous pouvez vous décider en fonction des parts de marché des différents appareils. Attention, celles-ci sont très différentes suivant les pays! Alors qu?au niveau mondial Opera mobile est le navigateur le plus utilisé (principalement à cause de l?Asie), aux Etats-Unis, le marché est réparti équitablement entre iOS, Androïd et Blackberry. Si votre site web est destiné à un public exclusivement français, le choix sera facile. En effet, la France fait figure d?exception, avec une écrasante domination d?Apple, les mobiles sous iOS effectuant 64% des requêtes, très loin devant les autres navigateurs mobiles. 2. Quelles sont les techniques pour détecter un mobile ? Pour les téléphones les plus récents : Media Queries La grande majorité des Smartphones récents (IPhone, Androïd et Blackberry ...) utilise un navigateur basé sur le moteur open-source Webkit, qui supporte bien les feuilles de style CSS3. Il est donc possible d'utiliser les « media queries ». Les « media queries » permettent d?inclure un contenu CSS de manière conditionnelle donc en fonction des capacités d?affichage : <link rel="stylesheet" media="screen and (max-width: 480px)" href="480px.css" /> L?exemple ci-dessus inclura dynamiquement la feuille CSS « 480px.css » si la largeur de l?écran est inférieure à 480 pixels. On peut ainsi créer différents layouts en fonction de la taille de l?écran. Attention, l?IPhone croit disposer d?une largeur d?écran plus grande que sa résolution native puisqu'il est possible de zoomer et dezoomer grâce au « pinch ». Aussi, pour que les media queries fonctionnent correctement, il faudra indiquer : <meta name="viewport" content="width=device-width" /> Pour les téléphones anciens : Détection par User-Agent Chaque navigateur, même sur un mobile, envoie son nom et sa version dans chaque requête HTTP, dans le header User-Agent. Il est donc possible de savoir si on accède à votre site à partir d?un mobile ou non. De manière générale, se baser sur l?User-Agent est cependant une mauvaise pratique. En effet, il existe de très nombreux User-Agent et des nouveaux apparaissent pour chaque génération de téléphone. Il est donc très complexe de garder une liste à jour. Aussi, on préfère généralement se baser sur la détection des capacités du téléphone en Javascript. Cependant, si vous voulez supporter des téléphones basiques, qui n?ont pas de support Javascript, vous n?aurez pas d?autre choix que d?utiliser le User-Agent. Une détection en PHP peut ressembler à ceci : <?php $iphone = strpos($_SERVER['HTTP_USER_AGENT'],?iPhone?); $android = strpos($_SERVER['HTTP_USER_AGENT'],?Android?); $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],?webOS?); $ipod = strpos($_SERVER['HTTP_USER_AGENT'],?iPod?); if($iphone || $android || $palmpre || $ipod) { // le code à executer pour les smartphones } ?> Si vous désirez avoir plus d?informations concernant les User_Agent, les sites Internet suivants peuvent vous aider : HandsetDetection.com, WURFL ou Zytrax. Si vous avez un CMS, un module existe peut-être Si vous avez de la chance et que votre site web est construit autour d'un CMS, il est possible qu'un module adapte directement votre site internet. Par exemple, pour Drupal, le module « Mobile Plugin » fait presque tout à votre place : il détecte le mobile puis change automatiquement le template selon la plateforme du mobile. Il permet également de configurer des blocs différents pour le site mobile. Pour Joomla, il s'agit du module « Mobilebot ». 3. Adapter son site Internet : les éléments à éviter Flash L?annonce du non support de Flash dans l?IPhone a provoqué un buzz qui a même été repris par la presse généraliste. Inutile donc de vous dire que Flash n?est pas une option dans le monde mobile et ne le sera pas tant qu?Apple sera dominant sur ce marché. Javascript Le support Javascript sur un site web mobile est un sujet complexe. Javascript n?est pas supporté ou activé par défaut sur tous les mobiles. Si vous visez le support le plus large, mieux vaut renoncer au Javascript ou ne l?utiliser que de façon cosmétique. Si vous visez principalement les smartphones récents, le support Javascript peut alors se révéler important. Vous pourrez par exemple tirer partie de l?API de géolocalisation, qui a été récemment standardisée par le W3C, ou encore exploiter les API permettant d?effectuer du multi-touch. Attention cependant, plus vous souhaiterez élargir le nombre de téléphones supportés, plus l'effort d'adaptation sera important. Le site Quirksmode référence les fonctionnalités supportées par chaque navigateur mobile : http://www.quirksmode.org/m/table.html 4. Adapter son site Internet : les éléments à modifier Penser au confort de lecture Chaque navigateur mobile offre une police avec une taille adaptée. Il vaut donc mieux éviter de préciser une taille en pixels pour les polices de caractères. Utilisez plutôt les valeurs relatives comme «medium, large, small, x-large, etc...» qui seront interprétées selon la configuration du navigateur et des préférences de l?utilisateur. Alléger vos pages - quelques conseils Du fait de la taille de l'écran, réduisez au maximum l?encombrement du site sur les côtés. Verticalisez le plus possible votre mise en page. Un site constitué par une seule colonne est beaucoup plus lisible. Il faut être attentif aux hyperliens. Un lien un peu long sur un écran d'ordinateur peut s'afficher sur 3 à 4 lignes sur un écran mobile. C'est moche. L?apparition de l?écran tactile procure un vrai plaisir de navigation sur mobile, il faut cependant tenir compte du fait que la précision des doigts est beaucoup moins importante que le stylet. Il est parfois préférable de simplifier la navigation. N?oubliez pas non plus qu?en l?absence de souris, les aides contextuelles de type « hover » ne s?afficheront pas. N?hésitez donc pas à revoir votre ergonomie ! Adapter l'affichage Si on exclut les tablettes, les écrans de smartphones ont des résolutions allant de 240x240px jusqu?à 640x960px pour l?IPhone 4. Donc, il vaut mieux éviter les layouts « fixes » et préférer les mises en pages de type « fluid », dans lesquelles les dimensions sont indiquées en pourcentage de la largeur de l?écran. Autre problème : les feuilles de style se comportent différemment selon les navigateurs. Encore une fois, le site Quirksmode peut vous aider avec un tableau très détaillé des comportements CSS en fonction des navigateurs mobile : http://www.quirksmode.org/m/css.html Améliorer les performances Comparé à une ligne ADSL, les réseaux mobiles sont lents. Le temps de latence peut dépasser les 300ms. Il est donc très important de respecter les bonnes pratiques de performance sur un site web mobile : ? Limiter la taille des fichiers envoyés : compresser fortement les images, minimiser les fichiers CSS et Javascript ? Limiter le nombre de fichiers par page : autant que possible, agréger les styles dans un fichier CSS unique, agréger les fichiers Javascript également. ? Concaténer les images du thème en une image unique, et les afficher grâce à la technique du « sprite CSS ». Des outils comme YSlow de Yahoo! ou PageSpeed de Google se chargeront de détecter pour vous les points à améliorer pour optimiser vos performances. 5. Il est temps de tester ! Votre site web est prêt ? Il est temps de le tester ! Heureusement, pas besoin de disposer de tous les mobiles pour tester le rendu ! Les fabricants mettent à disposition des développeurs des outils de simulation. Rendez- vous sur le site de Programmez pour la liste des liens vers les outils de tests ! Qing Sun ? Responsable de l?offre mobilité chez The Coding Machine, société spécialisée dans le développement web A RAJOUTER SUR LE SITE WEB DE PROGRAMMEZ : La meilleure façon de savoir si votre site web mobile est adapté aux Smartphones, est de le tester. Au lieu d?acheter tous les types de Smartphone pour faire tester votre site web. Il existe aussi les outils qui sont gratuits et simple à utiliser. Les principaux constructeurs de Smartphones proposent des simulateurs (ou émulateurs) de leur Smartphone. Cela permet aux développeurs de tester leur site web mobile sur leur ordinateur. Opera mobile simulator: http://www.opera.com/developer/tools/ Blackberry: http://www.blackberry.com/developers/downloads/simulators/index.shtml Android: http://developer.android.com/sdk/index.html Nokia: http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4- caac8872a7c5/NMB40_install.zip.html Windows Phone 7: http://www.redmondpie.com/standalone-windows-phone-7-series-emulator-9140536/ Palm Pre: http://developer.palm.com/ Site web de test Un simulateur en ligne: http://emulator.mtld.mobi/emulator.php iPhone Simulator en ligne http://www.testiphone.com Pour aller plus loin, nous vous conseillons de lire les bonnes pratiques du Web mobile en Flipcards édité par le W3C. Il est un excellent résumé du guide complet des Pratiques exemplaires du Web mobile 1.0.

PARTAGER SUR

Envoyer le lien par email
644
READS
2
DOWN
1
FOLLOW
2
EMBED
DOCUMENT # TAGS
#webmobile  #site mobile 

Licence non indiquée


DOCUMENT # INDEX
Web mobile 
img

Partagé par  ced

 Suivre

Auteur:
Source:Non communiquée