• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Découvrez l’importance du mobile dans les pratiques des internautes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Découvrez les pratiques des internautes

En 2019, le World Wide Web a fêté ses 30 ans ! Il porte bien son nom en tant qu'élément indispensable de la vie de milliards de personnes dans le monde entier.

Une seconde technologie est devenue tout aussi indispensable à de nombreuses personnes : le smartphone.

Il n'est donc pas surprenant que les deux tendances se soient combinées de sorte que, selon Statista, en 2018 plus de la moitié des pages web dans le monde étaient consultées sur des téléphones mobiles. Et tout porte à croire que ces chiffres sont voués à augmenter davantage d’année en année. 

Pourcentage des pages web utilisées sur les téléphones mobiles de 2009 à 2018
Pourcentage des pages web utilisées sur les téléphones mobiles de 2009 à 2018

De quelle manière ces tendances ont-elles un impact sur mon travail de développeur frontend ?

En dehors de la multitude de périphériques, vos utilisateurs peuvent utiliser une application sur l'un des nombreux navigateurs à leur disposition.

Avec tant de périphériques et de navigateurs disponibles, chaque combinaison périphérique-navigateur requiert potentiellement ses propres ajustements pour garantir un bon affichage des pages web.

Les navigateurs peuvent prendre en charge des standards du web, tels que HTML et CSS, de manière différente. Cette prise en charge complexe peut même parfois différer entre deux versions d’un même navigateur. Cela implique que vous devez prendre en compte ces variations lors de la création des pages web, pour vous assurer qu'elles s'affichent et fonctionnent correctement.

Au-delà la complexité des navigateurs, le smartphone requiert beaucoup de flexibilité dans l’affichage de vos pages web. En effet, il existe de nombreuses tailles d’écran. De plus, les utilisateurs peuvent lire le contenu de votre site web en format portrait ou paysage.

Pour répondre à cela, vous devez créer des mises en page responsives, c’est-à-dire qui répondent dynamiquement à la taille et à l'orientation des différents écrans.

Par exemple, si vous utilisez des plateformes de réseaux sociaux, vous verrez que les développeurs les ont créées de manière à ce que l’interface s’affiche différemment lorsque vous y accédez sur votre ordinateur plutôt que sur votre téléphone.

C'est la même chose pour le site OpenClassrooms. Essayez d'accéder à cette page sur un autre périphérique : si vous la consultez sur votre téléphone, ouvrez la page sur votre ordinateur, ou vice versa. Vous verrez que la mise en page change afin de s'adapter à des tailles d'écran différentes. C'est ça, le responsive !

En tant que développeur frontend, vous devez garder ces différences de périphérique et de navigateur à l'esprit lors que vous créez un site web. Heureusement, de nombreuses bibliothèques de composants frontend ont été développées afin que vous puissiez passer plus de temps sur l'implémentation et les fonctionnalités de vos sites, et moins de temps sur le débogage et la refactorisation pour prendre en compte toutes ces variations.

Bootstrap est la bibliothèque de composants frontend la plus connue.

Dans les chapitres suivants, nous examinerons plus en détail le framework, afin que vous puissiez décider si celui-ci convient à votre projet.

En résumé

  • L'accès aux sites web via des téléphones mobiles est une tendance croissante que vous devez prendre en compte en tant que développeur web.

  • Il est recommandé de créer des mises en page responsives pour vos sites et applications web.

  • Des bibliothèques frontend, telles que Bootstrap, vous aideront à créer des interfaces utilisateur qui fourniront des expériences utilisateur adaptées.

Maintenant que vous comprenez les tendances dans l'accès web mobile et l'utilité des bibliothèques frontend, il est temps d'examiner plus attentivement Bootstrap.

Exemple de certificat de réussite
Exemple de certificat de réussite