Découvrez des conseils et des pratiques pour réaliser des sites Web compatibles avec différents périphériques, comme les smartphones, les tablettes ou les ordinateurs de bureau.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Utilisez ces 5 bonnes pratiques HTML5 pour des applications performantes sur mobiles
Bonjour à tous et bienvenu sur développement facile donc on va aborder ensemble une nouvelle série de tutoriels cette fois ça va être consacré au développement sur les terminaux mobiles vous avez plusieurs cours notamment avec jQuery mobile des astuces des pour utiliser les nouvelles balises HTML 5 CSS 3 bien emballées beaucoup plus loin donc bien évidemment on va repartir sur des bonnes bases avec les bonnes pratiques que vous devez utiliser et ensuite vous allez notamment découvrir canva donc c’est l’API canva qui permet de dessiner sous JavaScript si vous avez fait un peu d’ActionScript flash, vous aller trouver exactement les mêmes fonctionnalités pour dessiner avec JavaScript et donc à terme faire des jeux et des applications de plus en plus évoluées avec JavaScript.
Les sites pour mobiles avec HTML5
Alors, tout d’abord voici des bonnes pratiques à utiliser avec HTML 5 pour concevoir vos sites sur les périphéries mobiles que ce soit les Smartphones ou les tablettes. Déjà la bien évidemment vous devez adapter la taille de votre interface à l’écran de votre périphérique. Il faut savoir que les écrans mobiles plus petits commencent à partir de 3,5 pouces notamment les premiers iPhones les premiers Smartphones maintenant ça va à 5,5 pouces, 6 pouces et plus pour les Smartphones et pour les tablettes jusqu’à 10 12 pouces tout dépend du modèle de la tablette. Donc penser à faire des sites responsive c’est à dire qui s’adaptent automatiquement à la taille de l’écran du périphérique sur lequel ils sont afficher. Donc en gros si je suis le PowerPoint il faut pour afficher une page sur un appareil mobile vous devez prendre en compte la largeur de l’écran disponible sur le périphérie et adapter l’affichage de votre application de votre jeu en fonction de la taille disponible de l’écran. Un site responsive permet d’agrandir automatiquement la taille, la largeur de votre application fonction de la taille de l’écran. Ça évite à l’utilisateur de devoir utiliser la barre de scroll en continue pour voir, pour faire défiler tous les éléments de la page donc si vous pouvez effectuer cette adaptation pas en tout cas le prévoir dans la conception de votre site ça va grandement faciliter l’expérience de vos utilisateurs.
Donc il faut garder en tête certains inconvénients qui existent avec les petits écrans notamment ceux des Smartphones. Pensez toujours à la largeur adéquate donc ça je vous l’ai dit. Une taille de caractères lisibles, si vous prenez une taille de police 10, désolé mais sur un Smartphone ce n’est pas lisible sur une tablette c’est assez difficile donc testé la taille de vos polices, prévoyez une taille un peu plus grande et des images de petite taille et très légère en poids. Cela ne sert à rien de mettre une image en 2048, non. Plutôt sur Smartphones des images en résolution 800 par 600 ça suffira largement et l’avantage c’est que le poids sera plus léger donc un chargement plus rapide, puisque les Smartphones, les tablettes c’est de la 3G donc pensez à ça, prévoyez que les connexions 3G sont plus lentes que l’ADSL, que le câble donc avec un poids d’images plus petits l’expérience utilisateur sera bien meilleure. Et donc pensez à créer des sites agréables à regarder sur mobile donc éviter les images de fond ça ne sert à rien, ça alourdi le poids de la page pour rien. Evitez les couleurs de texte inadapté avec le fonds de votre écran donc si vous avez un fond d’une certaine couleur pensez à la couleur du texte surtout pour les petits écrans comme sur les Smartphones, la taille de texte trop petite je vous l’ai déjà dit. Evitez les blocs de texte trop compact, c’est à dire les gros paragraphes de texte, c’est illisible sur un petit écran donc espaçez bien vos paragraphes, faites des petits paragraphes, des phrases courtes et toujours avec beaucoup d’espace sera beaucoup plus agréable à lire pour vos utilisateurs.
Donc comme je vous l’ai dit toujours des pages Web légères et optimisées que ce soit en poids et en affichage réduisez bien la taille des images pour un chargement plus rapide donc avec une résolution inférieure pour vos images. Changez bien leur résolution pour adapter la taille de vos images pour un affichage sur Smartphones ou sur tablettes pensez à utiliser le cache du navigateur, c’est très important. Utilisez des fichiers JavaScript CSS avec la balise import et non directement dans la page. Ça veut dire en fait que si vous avez plusieurs pages qui utilise les mêmes fichiers CSS, les mêmes fichiers JavaScript, ils seront déjà dans le cache du navigateur donc il va y avoir un chargement beaucoup plus rapide si vous effectuez des imports de fichiers externes plutôt que les intégrer dans votre page HTML directement.
Privilégiez bien les menus compacts ça ne sert à rien sur un site mobile d’avoir des menus avec 10, 20 possibilités non, menu très compact, en principe il apparaît soit tout en haut soit sur le côté il s’affiche …il y a un petit bouton qui permet de le faire afficher ou sinon tout en haut avec 4, 5 éléments dans le menu mais guère plus sur un mobile.
Codes sources pouvant VOUS intéresser :
L’utilisation du clavier tactile vous savez que ça prend de la place sur l’écran donc réduisez le au maximum pensez plutôt à une utilisation du clique tactiles glisser déposer voilà. Pensez à l’utilisation comme sur les iPhones. Prenez modèle sur les interfaces des iPhones elles sont vraiment très, très, bien pensées pour une utilisation tactile et sur un petit écran. Créez des boutons larges pour ceux qui ont des gros doigts, si le bouton est tout petit, souvent l’utilisateur va cliquer à côté donc des boutons bien gros bien larges avec une police de caractères bien lisibles. Laissez évidemment suffisamment d’espace entre les boutons pour éviter d’appuyer sur celui qu’on ne voulait pas. Et un site mobile doit pouvoir s’afficher sur tous les appareils, les différents appareils que ce soit des Smartphones des tablettes ou des ordinateurs portables. Quel que soit le navigateur et quelque soit le sens dans lequel appareil est orientée soit en mode portrait ou en mode paysage donc pensez bien à ça, faites des sites compatibles multi-navigateurs et multi-périphériques. Dans les prochains cours je vais vous expliquer un petit peu comment gérer sa, sinon il y a des cours sur le framework Bootstrap trois qui est très très bien pour créer des sites multi navigateurs, multi périphériques et il y a également des cours sur jQuery mobile que vous pouvez consulter.
Votre plan d’actions !
Commencez déjà par mettre en œuvre ces bonnes pratiques pour développer vos sites en HTML 5, les rendre agréable pour vos visiteurs qui s’affichent quel que soit le navigateur quel que soit le périphérique, tablettes, Smartphones, ordinateur portable. Si vous avez des questions posez-les directement sous ce cours vidéo et maintenant je vous invite la juste au-dessus de moi, il y a une image un lien cliquez ici pour lancer la deuxième vidéo dans la deuxième vidéo ensemble on va aller beaucoup plus loin c’est à dire vous apprendrez justement à utiliser le framework BootStrap 3, jQuery mobile tout ça pour créer très rapidement très facilement des sites compatibles que ce soit sur les Smartphones, les tablettes, les ordinateurs de bureau, des sites compatibles avec le W3C. Vous allez découvrir tout ça dans la deuxième vidéo donc je vous retrouve tout de suite dans la deuxième vidéo. A tout de suite.
[/ppmtoggle] [/ppmaccordion]
Posez vos questions sur la mise en place de site Web compatible avec les mobiles
Utilisez la zone commentaire pour posez vos questions sur ce cours