10 bonnes pratiques du développement web mobile avec une astuce

Avant d’entrer dans le vif du sujet avec le Framework jQuery Mobile, voici 10 bonnes pratiques à intégrer dans votre développement pour les périphériques mobiles.

Vous allez aussi connaitre une astuce très pratique…

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

10 bonnes pratiques du développement web mobile avec une astuce

Bonjour à tous et bienvenu sur Développement Facile.

On continue ensemble la série de cours dédiée à jQuery Mobile, avant d’aborder le Framework jQuery Mobile, je vous enseigne les bases pour l’utiliser correctement, surtout avec le Web mobile où il y a des contraintes à connaître et il faut s’adapter, il est nécessaire de s’adapter.

Les bonnes pratiques du Web mobile

C’est ce que vous allez découvrir dans ce cours les bonnes pratiques du Web mobile, comme je vous ai montré dans le cours précédent, vous pouvez aller très loin dans la mise en forme d’un site web avec le Medias Queries CSS c’est assez puissant, je vous remontre un autre exemple pour changer une mise en page d’un site Web directement avec les Medias Queries, au lieu de changer juste le fond d’écran, là on va carrément changer la position des éléments, il faut savoir que vous comme moi, en tant que développeurs, on est habitués à concevoir des éléments pour une interface en 16:9, les grands écrans d’ordinateurs de bureau. Et avec l’arrivée des smartphones, il faut s’adapter et réfléchir sur des écrans plus petits que nos sites Internet, ils s’affichent de manière optimale sur des écrans plus petits.

Le contenu est très important, donc voici plusieurs recommandations.
Utilisez peu de contenu de texte, allez droit à l’essentiel, pas besoin de raconter un roman sur le périphérique mobile, de toute façon l’écran est petit, la police de caractère est petite, l’utilisateur ne va pas s’amuser à lire un pavé de texte, il est pressé, il veut de l’information tout de suite.
Ne surchargez pas l’écran avec des images, des couleurs, libérez de la place autour des éléments utilisables de façon tactile, il faut savoir que les utilisateurs on les doigts gros par rapport à la taille de l’écran, quand il clique, il ne faut pas qu’il clique sur deux boutons à la fois quand ils veulent cliquer sur un avec leur doigt en mode tactile. Prévoyez toujours l’espacement sur les boutons, sur les zones cliquables, fractionnez, découper votre contenu en portions logiques, bien délimité, n’hésitez pas à séparer votre contenu en plusieurs pages, les caractères, pensez qu’on est sur des écrans petits pour l’utilisateur, ils doivent êtres bien lisibles, plus grands que les applications de bureau, il faut adapter la taille de votre police, bien évidemment, et limiter la manipulation de la page par l’utilisateur, il ne faut pas qu’il est à trop défiler, faut vraiment que vos applications mobiles soient simples. Pensez toujours à prendre en compte les avantages du mobile et ces contraintes, lorsque vous créez un site web pour les mobiles.

Le secret de la réussite d’un site web mobile réside tout simplement dans une navigation simple, intuitive, et efficace, simplifiez, éliminez, pour avoir un site Internet simple et agréable pour votre utilisateur. Voici d’autres recommandations, le menu de navigation doit être adapté pour une installation tactile, il doit être très intuitif, choisissez des termes qui parlent à l’utilisateur, vraiment et des gros boutons pour que l’utilisateur puisse cliquer dessus facilement. Il doit être accessible à tout moment de la navigation, vous avez avec jQuery Mobile, la possibilité de bloquer, le menu reste toujours en haut visible pour l’utilisateur, et n’hésitez pas à regrouper plusieurs éléments dans une barre de navigation horizontale, on va voir ça dans les cours suivants.

Une autre solution ça consiste à présenter tous les éléments de façon verticale avec des boutons sur la page d’accueil et toutes les autres pages proposent une icône pour revenir à la page d’accueil, au bouton navigation, vous avez votre page avec la navigation quand vous cliquez sur un bouton vous changez de page mais toutes vos pages ont une icone accueil qui permet de revenir sur l’accueil. Je vous conseille d’avoir un menu, je l’ai mis dans tous les exemples, je l’ai mis dans le bas de la page, quand on défile on voit toujours le menu affiché, ça permet de cliquer à chaque fois, quel que soit la page, de revenir là où on veut sur le site internet.
Vous pouvez le mettre soit en bas, soit en haut votre menu et qu’il soit bien fixe. Je vous ai mis une adresse d’un site qui vous propose de remplacer le menu classique par une liste déroulante en fonction de la taille de l’écran de l’utilisateur, je vais vous montrer un exemple, tout de suite, on passe à l’exemple.

Exemple d’application

Alors il y a plusieurs exemples de code source, le premier celui que vous voyez s’afficher sur votre écran, là juste derrière, utilisation standard 16:9 sur le côté, et qu’est-ce qu’on va faire ?
On définit, du CSS, si vous ne savez pas à quoi ça sert le CSS je vous renvoie, il y a une vingtaine de cours sur CSS 3, comment l’utiliser avec HTML5, je vous invite à consulter tous ces cours, je crois qu’il y en a 40, ils sont gratuits, et vous expliquent, avec des codes sources à l’appui, comment fonctionne le CSS, comment vous pouvez utiliser toutes les possibilités de CSS.
N’hésitez pas, naviguez sur Développement Facile, développement-facile.com, on utilise les Medias Queries avec les différentes tailles, je vous renvoie au cours précédent, là je vais passer assez vite sur les Medias Queries parce que je vous ai déjà expliqué cela dans le cours précédent, on définit différentes tailles, avec différentes positions des éléments en fonction de la taille de l’écran de l’utilisateur, tout simplement. On va utiliser une technique qui est ici, ça va permettre, en fonction de la taille de l’utilisateur, de positionner tous les éléments de la page, ne faites pas attention, ça je sais que c’est moche, ce n’est pas conseillé de l’utiliser, on est dans des exemples, le but c’est de vous montrer comment la page est redimensionnée en fonction de la taille de l’écran, et donc qu’est-ce qu’il se passe ?
On est comme ça, et quand l’utilisateur redimensionne l’écran, on passe à une taille réduite, vous pouvez rajouter des liens sur le menu, ce que je n’ai pas fait, et là on augmente, voilà, ça augmente à chaque fois, ici, petite taille, automatiquement réduit.

On passe au deuxième exemple, ça va utiliser le script jQuery, et on appelle des options de jQuery pour créer le menu en forme de liste. Vous avez votre menu classique ici, que vous voyez là, menu classique il suffit de cliquer dessus, vous choisissez vos zone, votre menu, et en fonction de la taille du navigateur, regardez on bascule en taille déroulante à partir d’une certaine taille, avec jQuery, ça va vous permettre automatiquement de créer votre liste déroulante, regardez, réduction de la taille, taille, le menu est normal, l’utilisateur navigue sur un iPad, un iPhone, le menu se transforme automatiquement en liste déroulante et tout ça grâce à jQuery.
C’est très pratique, si vous ne comprenez pas ce code source, je vous renvoie, il y a également une trentaine de cours sur jQuery, même plus maintenant, sur le Framework jQuery il y a des cours très complets qui vont vous permettre de comprendre ce code, je vous ai mis du commentaire, il n’est pas très compliqué pour créer un menu avec les options select, la liste déroulante et on ajoute le texte donc là on récupère les éléments de Nav A ici, balise nav, balise A, on récupère tous les éléments avec le href, les cibles, le texte et ont créé le menu.

Votre plan d’actions !

Maintenant, comme d’habitude, c’est à vous de jouer, vous pouvez maintenant utiliser le menu automatiquement sur vos périphériques mobiles en fonction de la taille de l’écran, soit un menu classique, soit un menu sous forme de liste déroulante, ça se fait beaucoup sur les périphérique mobiles, une liste déroulante, si vous avez des questions posez-les directement sous ce cours, vous avez également le code source complet et si vous souhaitez aller plus loin, à la fin de cette vidéo il y a un lien, vous pouvez cliquer dessus, ou il y a une image juste au-dessus de cette vidéo qui vous permet accéder à plusieurs cours professionnels pour connaître le Framework jQuery sur le bout des doigts, je vous invite à cliquer à la fin de cette vidéo sur le lien, pour découvrir ces nouveaux cours dédiés à jQuery, en attendant je vous dis à très bientôt pour le prochain cours sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple de code source

Et voici le code source commenté qui accompagne ce cours.

Le site css-tricks.com vous permet de remplacer automatiquement le menu classique par une liste déroulante de type <select> sur les périphériques mobiles.

Choisissez les prochains thèmes des cours jQuery Mobile

Profitez-en pour choisir les thèmes des cours jQuery Mobile qui vous aideront le plus. Utilisez pour cela, la zone des commentaires.