Responsive Design

Published on Slideshow
Static slideshow
Download PDF version
Download PDF version
Embed video
Share video
Ask about this video

Scene 1 (0s)

[Audio] Bonjour, Dans le cadre du module Outils Web Avancés, Responsive Design, CMS et Cloud Computing, Nous allons travailler aujourd'hui la deuxième partie concernant notamment la technologie Responsive Design. Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d' écran particulière. Si l' utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l' espace..

Scene 2 (38s)

[Audio] Le Responsive Web Design est une conception permettant à un site web d'adapter son affichage sur chaque type d' écran. De nos jours, la consultation d'un site web peut se faire avec un ordinateur de bureau, un ordinateur portable, un smartphone, une tablette, une tv, etc. Les tailles de tous ces écrans sont multiples et variées, c'est la raison pour laquelle il est important de s'assurer que l'affichage de son site web est bien correct et ajusté à chacun de ces écrans. Pour obtenir une expérience utilisateur renforcée, il est nécessaire d'apporter du confort visuel à l' internaute sans scroll ( barre de défilement horizontale) et sans que la manipulation d'un zoom soit nécessaire. Le Responsive Web Design est de plus en plus incontournable et demandé par les clients lors de la création d'un site web..

Scene 3 (1m 33s)

[Audio] La question qui vient de se poser, pourquoi opter pour une telle approche ? Etudions ensemble 2 Cas de périphériques d' affichages à savoir : l' écran d' ordinateur et le smartphone. -Sur écran d'ordinateur, vous disposer d'une surface d'écran très large, vous pourriez les afficher côte à côte. -Sur smartphone, la surface est très réduite, vous pourrez donc faire le choix de les empiler les unes en dessous des autres pour profiter de la largeur maximum de l'écran. Ainsi, les avantages du Responsive Design sont multiples : - Une page web unique ajustable et compatible avec de différents supports. - Meilleure indexation et référencement naturel ( Google accorde de l' importance aux sites web prévoyant une adaptation pour les mobiles, depuis 2015) - Moins de maintenance (une seule version globale adaptable à modifier pour la faire évoluer).

Scene 4 (2m 35s)

[Audio] Voici un tableau récapitulant la taille des principaux écrans : Ça peut aller de 768 pour des smartphones au 1200 pixels voire plus pour les écrans du bureau. Ce choix n'est pas aléatoire, La largeur est souvent de 768 car ce nombre est divisible par 1 2 3 4 6 8 12 16 20 24 32 48 64 96 128 192 256 384 et 768. Cela offre beaucoup de possibilité de mise en page !.

Scene 5 (3m 17s)

[Audio] Parmi les différentes unités de taille il existe des unités qui sont à éviter pour un affichage sur un support d'affichage. Vous pouvez néanmoins utiliser ces unités pour des supports haute- résolution ou bien pour les supports d' impression. Le pixel: une unité relative à la résolution et à la taille de l' écran sur lequel il est affiché. Le pourcentage: Cette unité notée « pourcentage » est relative à son élément parent. Un élément avec une taille de « 50% » et qui a un élément parent avec une taille de 50px aura alors une taille de 25px. Le pourcentage sera à utiliser à chaque fois que vous souhaiterez définir une taille en fonction de son élément parent. Le em: Le « em » correspond à la taille de la police de caractère de l'élément en cours et si cette taille n'est pas redéfinie alors cette taille correspondra à la taille de la police de l'élément parent. Par exemple, si la taille de la police est définie à 20px alors 1em sera égale à 20px. Cette unité pourra vous permettre de définir les marges intérieures « paddings » ou extérieures « margins » qui seront liées à la taille du texte et ainsi les redimensionner en fonction de cette dernière sur différents supports. Ainsi sur un grand écran, les marges seront plus grandes tout comme la taille du texte et à l' inverse sur un petit écran (comme un écran de smartphone) les textes seront plus petits et les marges aussi. Le rem L'unité « rem » signifiant « root em » reprend le principe de l'unité « em », c'est-à-dire correspondre à la taille de la police d'un élément et cet élément est l'élément racine du document ( root). Ainsi le « rem » permet de définir une valeur constante tout le long du document égale à la taille de la police de l'élément racine..

Scene 6 (5m 18s)

[Audio] 1 Un site web fixe est créé dans des mesures fixes souvent exprimées en pixels La taille ne change pas selon les situations. 2 Un site web fluide est créé dans des mesures variables souvent exprimées en pourcentage. Unité de mesure privilégié : pourcentage, em, vh, vw, etc. 3 Un site web adaptatif est créé dans des mesures fixes mais diffère selon la taille d' écran. Dans la plupart des cas, nous pouvons éliminer la 1ère solution consistant à créer un site web avec des mesures fixes. En effet, l' utilisation des tablettes ou smartphone pour consulter des pages web n'est pas une " mode", cela continue d'augmenter chaque année selon les statistiques..

Scene 7 (6m 9s)

[Audio] Plusieurs solutions possibles peuvent aider à la création d' un site web complétement responsive design, plusieurs d'entre eux sont régulièrement utilisés. 1 CSS3 : La plus ancienne de ces méthodes de mise en page est multicolonnes dans laquelle il faut indiquer en combien de colonnes vous voulez que votre contenu soit divisé. Dans Flexbox et Grid, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l' espace dans leur conteneur, en fonction de leur comportement initial. 2 BootStrap: qu'il représente un Framework conviviale permettant de manipuler plus aisément des fichiers CSS, HTML, PHP, XML, et JavaScript, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. Nous avons retenu la dernière solution consistant à installer l' extension Elementor dans WordPress..

Scene 8 (7m 13s)

[Audio] Elementor est la principale plate-forme de création de sites Web pour WordPress, permettant aux développeurs Web de tous les niveaux créer des sites Web professionnels au pixel près avec un constructeur visuel intuitif, avec un contrôle total sur chaque élément, sans écrire une seule ligne de code. Il existe deux version (une gratuite avec des fonctionnalités essentiels et une payante ou propriétaire offrant des fonctionnalités avancés comme la manipulation de Widgets et d'autres éléments particuliers), nous nous limitons aujourd'hui sur la version gratuite (elle contient le nécessaire pour élaborer nos projets)..