Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir le design responsive

Découvrir les frameworks à grilles fluides

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Passez en revue les systèmes de grilles responsives, les templates et les frameworks permettant de créer rapidement des sites responsives reposant sur des standards éprouvés.

Transcription

Plutôt que de tout construire from scratch, c'est-à-dire à partir de zéro, nous allons pouvoir nous appuyer sur des générateurs de grilles et des frameworks qui vont nous permettre de mettre en place car ils vont nous procurer tous les éléments nécessaires pour pouvoir bâtir des sites qui soient responsives sans avoir en fonction des différentes tailles des écrans. Le principe de la grille fluide et à partir d'une maquette qui va être définie par des colonnes et par des gouttières de pouvoir répartir ensuite ce contenu sur les différents écrans. Alors on a des mises en page qui peuvent être simples et constantes qui ne vont pas bouger mais on va également avoir des maquettes qui vont pouvoir évoluer avec des mises en page complexes et variables. À partir d'une grille fluide, on va donc pouvoir adapter le contenu à différentes mises en forme, à différentes mises en page. Le système de générateur de grilles fonctionne en nous fournissant une feuille de style CSS qui va nous permettre ensuite de pouvoir aligner ce contenu en appliquant des classes. Mais on peut également travailler avec des frameworks qui eux vont nous fournir beaucoup plus que cela. Ils vont nous fournir bien entendu la feuille de style CSS mais ils vont également nous fournir une feuille de style spécifique pour la typographie et puis également des templates, c'est-à-dire des modèles de mise en page et puis enfin les JavaScripts qui vont nous permettre de répartir le contenu en fonction de ce qui aura été détecté en termes de largeur d'écran. Voyons quelques-uns de ces frameworks qui sont particulièrement intéressants et qui vont vous permettre de gagner un temps précieux et une productivité certaine. Vous pouvez commencer par vous intéresser à Simple Grid qui est une grille CSS qui va vous permettre de créer des sites web responsives. Vous n'avez ici qu'à la télécharger et puis ensuite vous appliquerez les classes pour vos différents éléments. Vous notez que cette grille est basée sur douze colonnes et puis qu'elle permet de définir la taille des éléments en fonction de la largeur de ces colonnes. Le code est très simple à comprendre et vous allez pouvoir la tester pour voir si elle correspond à vos besoins. Mais Simple Grid n'est pas le seul système existant. Vous pouvez travailler également avec Grid Generator et ici on a un système qui est intéressant parce qu'il va vous permettre ici de déterminer à partir d'un nombre de colonnes et puis d'une marge qui est exprimée en pourcentage de procéder à un calcul de la grille. Et puis une fois que vous avez calculé votre grille, et bien vous allez pouvoir copier le code à la fois HTML et le code CSS et le mettre en application, en appliquant ensuite les différentes classes pour vos éléments. C'est un système qui va vous permettre de gagner un temps bien entendu précieux dans la réalisation de vos sites web responsives. Et puis on peut aller beaucoup plus loin par exemple avec Initializr qui a été créé par Jonathan Verrecchia. Nous allons pouvoir ici avoir accès à ce que l'on appelle un FrameWork complet, c'est-à-dire que on va nous fournir absolument tous les éléments pour créer notre site web, y compris les modèles de base HTML. Le principe de Initializr est que nous allons pouvoir travailler avec des standards du marché, comme par exemple Bootstrap et une fois que nous aurons choisi un système, nous allons ensuite pouvoir le régler finement, c'est-à-dire décider de ce dont nous avons ou pas besoin. Et effectivement ce système est intéressant car il va nous permettre d'alléger considérablement le code. Une fois bien entendu que vous aurez choisi ce dont vous avez besoin, et bien vous le téléchargerez et vous pourrez procéder à la création, à la conception de votre site web. Il n'y a pas que Initializr avec les systèmes Bootstrap. Il y a des concurrents qui sont également très intéressants en termes de légèreté du code. On peut par exemple travailler avec Skeleton qui fonctionne sur le même principe. Il s'agit d'un FrameWork complet mais dont le code est extrêmement léger. On fonctionne sur le même principe d'une grille de 12 colonnes sur 960 pixels qui a tendance aujourd'hui à devenir le standard. Il y a ensuite un code qui est relativement simple à appliquer et puis ce qui est intéressant également c'est que la typographie a déjà été prémâchée d'une certaine manière et vous allez pouvoir l'appliquer très facilement. Et puis si ces deux frameworks ne vous satisfont pas ou ne correspondent pas tout à fait à vos besoins, vous pouvez également vous intéresser à un autre FrameWork qui est également très connu et très utilisé qui est Foundation. Le principe de ce FrameWork est le même que pour les précédents : vous allez pouvoir travailler à la fois avec des outils qui vont être extrêmement faciles à utiliser et puis ce qui est vraiment très intéressant avec Foundation, c'est que l'on est dans un univers qui a été conçu de façon extrêmement sémantique, ce qui va permettre d'avoir un code extrêmement propre sans balises compliquées et qui vont faciliter le travail des moteurs de recherche qui indexeront ensuite votre site. Vous avez donc le choix à la fois en termes de générateur de grilles et de frameworks pour pouvoir vous mettre le pied à l'étrier et commencer à réaliser des sites responsives qui sont basés sur des standards solides. des grilles fluides et vous allez à entreprendre tout le travail de base de fondation de ce qui va permettre d'aligner les contenus

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

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 !