HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

Transcription

1 46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes pratiques Avant de rentrer dans le vif du sujet en commençant le site HTML5, il est très important de bien comprendre l'environnement mobile, la manière d'afficher vos pages ainsi que les habitudes des utilisateurs. Comme déjà évoqués dans le chapitre Particularités des sites mobiles, nous allons aller plus loin pour non seulement afficher une page HTML sur votre mobile mais également la faire correspondre à l'utilisateur final. 2.1 Adapter le site à la taille de l'écran Dans le cadre du développement d'un site mobile, la spécificité la plus forte d'un appareil mobile est la taille de son écran ainsi que sa résolution. En effet, alors que les écrans pour ordinateur peuvent être au-dessus de la définition des télévisions (1920 pixels par 1080), la résolution des écrans pour mobiles est beaucoup plus faible, certains anciens modèles font même 320 pixels par 240. De la même manière, alors que les écrans d'ordinateur font maintenant plus de 43 cm, ceux des mobiles sont beaucoup plus petits, très souvent 8,9 cm (3,5 pouces). Bien sûr, les appareils mobiles peuvent afficher une page Internet, mais l'affichage d'une page web classique sera minuscule et il sera nécessaire d'agrandir la page pour lire correctement les caractères. Lors de l'affichage d'une page sous un appareil mobile, le navigateur va prendre en compte la largeur de cette page et utiliser celle-ci pour en afficher le maximum sur son navigateur. Editions ENI - All rights reserved

2 Créer un site mobile : HTML5 Chapitre 4 47 La deuxième problématique de ces pages est qu'elles sont prévues pour être affichées sur un écran suffisamment grand pour voir correctement la largeur de la page. Lors d'un agrandissement, il nous sera malheureusement impossible d'afficher correctement cette largeur et nous serons obligés de nous déplacer pour voir la page dans son intégralité. Il est donc primordial d'avoir à l'esprit ces inconvénients afin de créer un site permettant un affichage correct même sur un petit écran : Via une largeur adéquate. Via une taille de caractères lisible. Via des images peu larges. Affichage du site classique de Wikipédia sur un appareil mobile :

3 48 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles Affichage du site mobile de Wikipédia : 2.2 Améliorer la visibilité Il est nécessaire d'avoir un site reposant à l œil, ainsi : des images de fond, des couleurs de texte non adaptées avec le fond d'écran, une taille de texte trop petite, un bloc de texte trop compact, Editions ENI - All rights reserved

4 Créer un site mobile : HTML5 Chapitre 4 49 sont autant d'éléments qui feront que votre site ne sera pas visité dans des conditions optimales. N'hésitez pas à jouer sur les tailles et couleurs pour afficher les menus, sousmenus ou liens, n'hésitez pas non plus à ajouter des effets d'ombres aux boutons pour les faire ressortir. Si votre page peut descendre, assurez-vous de le faire comprendre à l'utilisateur en ne mettant pas une image couvrant toute la hauteur de la page (mais en coupant un peu avant pour montrer le texte qui suit) ou encore en ne collant pas les éléments de menu exactement à la hauteur de la page si d'autres sont plus bas. Une page contenant du texte non visible après la photo :

5 50 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles 2.3 Écrire des pages légères Actuellement, une des mauvaises pratiques du web classique, gommée grâce aux grandes connexions, est l'ajout de grandes images. Même si celles-ci sont ensuite réduites via la taille de la page sur l'écran, elles sont tout de même téléchargées sur le navigateur afin qu'il puisse les afficher correctement. Editions ENI - All rights reserved

6 Créer un site mobile : HTML5 Chapitre 4 51 Il est donc nécessaire de travailler sur deux axes pour les images : Réduire leur taille pour un chargement plus rapide. Changer leur résolution pour coller au mieux à la taille voulue sur notre site mobile (une image de grande résolution, réduite via le navigateur, rendra très souvent moins bien qu'une image déjà réduite via un logiciel spécialisé). Pour permettre une meilleure lisibilité générale due à la taille de l'écran, il est également recommandé de limiter les images qui se révéleraient inutiles pour une bonne visibilité. Une autre pratique des sites Internet classiques est l usage d un grand nombre de fichiers optionnels dont le téléchargement alourdit la page. Pensons à une page classique de 500 Ko, via un accès ADSL le chargement sera quasi instantané, il n'en sera pas de même pour un accès 3G et donc la page ne pourra pas donner satisfaction à l'utilisateur. Il faut par conséquent privilégier : Les pages faibles en poids. Le bon usage du cache pour navigateurs. L'utilisation de fichiers JavaScript ou CSS sous forme d'import (et non directement dans les pages) ; ceci permettra de les réutiliser sur tout votre site. Même si les appareils mobiles tendent à être de plus en plus puissants, ils ne sont toujours pas à la hauteur des ordinateurs de bureau : le temps de traitement d'un JavaScript sera plus long sur appareil mobile, l'affichage de la page sera plus lent. Privilégiez donc des JavaScript n'utilisant que le nécessaire dans la mesure du possible.