Le design web : Les méthodes modernes de création de sites

Étudier le processus de design responsif

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Concevez des mises en page qui s'adaptent aux périphériques variés. Vous allez suivre un processus normalisé qui va faciliter le développement.

Transcription

Le design web responsive, c'est-à-dire qui est adaptatif, il s'agit d'une mise en page qui va s'adapter aux différents périphériques mobiles, est aujourd'hui un incontournable ! Il s'agit d'aller beaucoup plus loin que le simple rétrécissement de la page. Effectivement vous constatez qu'ici lorsqu'on rétrécit la page ça fonctionne très bien. Ici ça fonctionne encore très bien mais lorsque l'on va arriver sur un téléphone portable, nous ne pouvons plus afficher le menu et donc nous allons utiliser ici un petit menu déroulant que l'on appelle le Burger menu ou le menu avec les trois barres. Le responsive design demande une adaptation à la fois des différents éléments en termes de typographie, d'image etc mais également en terme de structure de page. Nous allons voir quels vont être les principes du design web responsive qui vont guider notre travail, notre conception web. Le premier de ces principes est de concevoir pour le mobile en premier. Il s'agit, lors du travail de création, de travailler d'abord pour un petit écran type téléphone portable et puis ensuite de passer à des écrans plus grands progressivement. Cette méthode présente plusieurs avantages. Elle va permettre de prendre en compte au début quelles sont les contraintes les plus importantes, notamment des contraintes de taille de police de caractère et puis aussi le fait qu'avec des périphériques mobiles l'utilisateur ne va pas travailler avec une souris mais va utiliser son doigt pour se déplacer. Il est donc important de prévoir dès le départ des tailles conséquentes pour les boutons et les éléments qui seront des éléments cliquables ou glissables. On pourra ensuite, lorsque l'on passera aux écrans plus grands, adapter notre mise en page mais on aura pris en compte les contraintes les plus difficiles dès le départ et notre processus de création s'en trouvera grandement facilité. Le deuxième grand principe va être d'ajouter les media queries ou des requêtes média qui sont relatives à un élément à proximité de l'élément original. Ici l'idée va être bien entendu d'optimiser les temps de chargement et d'éviter d'avoir des chargements qui deviennent plus longs, simplement parce qu'à un moment donné sur un grand écran on va essayer de charger la mise en page pour des périphériques plus petits, pour finalement aller chercher la mise en page qui correspond à l'écran. À l'inverse, sur un écran plus petit ne pas commencer par aller chercher la mise en page qui correspond à l'écran d'ordinateur pour finalement se rabattre sur la mise en page qui correspond au périphérique concerné. L'idéal est donc d'aller systématiquement chercher la mise en page qui est adaptée au périphérique que l'on vise. Le troisième principe va être de ne pas créer de points de rupture prédéfinis à partir de taille d'écran, c'est-à-dire qu'on ne va pas dire à partir de tant de pixels on va passer sur une mise en page plus petite etc, au fur et à mesure que l'on va rétrécir les écrans. Nous allons donc ajouter des points de rupture qui ne seront pas liés forcément aux tailles d'écran mais qui seront liés à la présentation des éléments qui seront mis en page. En faisant varier les points de rupture en fonction des éléments, on va ainsi avoir un site qui va s'adapter à tous les écrans car si on crée des points de rupture prédéfinis on ne pourra jamais prévoir l'arrivée de tous les nouveaux périphériques qui sortent sur le marché. Il faut donc travailler les composants un à la fois et trouver des points d'arrêt qui sont naturels pour chacun d'eux et non en fonction des écrans !

Le design web : Les méthodes modernes de création de sites

Ayez une vue d’ensemble du processus de conception de sites web. Définissez la stratégie de contenu, le développement, la conception, les tests, pour finalement lancer votre site.

Aucun commentaire n´est disponible actuellement

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !