Très bien, techniquement, nous avons
fini de construire notre site Web.
Nous avons la page d'accueil,
nous avons la page du blog
et nous aurons également une page de contact
ainsi que l' en-tête et le pied de page.
Mais il y a une chose très, très
importante que nous devons prendre en charge et
qui sera la conception réactive.
Rappelez-vous toujours que de nombreuses personnes
utilisent aujourd'hui leur téléphone portable pour naviguer sur Internet.
Et si quelqu'un trébuche,
tombe sur votre site Web sur le téléphone portable,
vous voulez vous assurer qu'il a l'air bien.
Ce que nous allons faire dans
la suite de cette section, c'est que je vais vous montrer comment
reconstruire l'en-tête, la page d'accueil,
le pied
et les autres pages pour avoir l'air réactif.
Ainsi, s'il est affiché sur une tablette ou sur un appareil
mobile, il aura fière allure.
Lambdas vous offre une démonstration très,
très rapide en ce moment
, c'est pour la vue tablette.
Vous pouvez voir que j'ai réduit
la taille de mon écran à celle d'une tablette.
Et vous pouvez voir maintenant qu'il est toujours
très, très, très bien.
Nous n'avons aucun problème avec l'espace dans l'en-tête.
Ça a l'air bien.
La section des notes de témoignage semble très bien.
La photo est très bien.
Mais maintenant, si je fais défiler jusqu'
à la plus petite taille d'écran,
qui sera généralement votre téléphone portable.
Permettez-moi de revenir en haut maintenant, vous pouvez
voir que l'en-tête est différent.
Nous avons un fond noir.
Nous avons notre logo.
Nous avons le menu principal ici,
qui est maintenant le menu des hamburgers,
que vous avez déjà vu de nombreuses fois auparavant.
Et ensuite, si je fais défiler de nouveau vers le bas,
vous verrez que c'est beau
jusqu' au pied de page.
Le design réactif est donc extrêmement important.
À venir, je vais vous montrer comment vous
pouvez apporter des modifications à
votre site Web pour qu'il soit beau sur n'importe quel appareil mobile.
Lambda mentionne également rapidement
que lorsqu'il s'agit d'un design réactif,
il y a quelques concepts à prendre en compte.
Il s'agirait de réduire les marges comme
les modèles que vous avez
ajoutés dans la version de bureau.
Par exemple, vous vous en souvenez avec la bannière de la page d'accueil.
Pour cette section, nous avons dû ajouter
une marge négative scandaleuse et je pense qu'elle était de
marge négative scandaleuse et je pense qu'elle était
moins deux à deux pixels en ce qui concerne les versions mobiles.
Donc les versions réactives, vous devrez peut-être
réduire cette taille ou Mabou,
ou peut-être même dans certaines situations augmenter la taille.
Un ajustement aux images ou aux motifs sera nécessaire.
Il arrive également que vous ayez simplement besoin de masquer des types d'éléments de réglage lorsqu'ils sont
masquer des types d'éléments de réglage
affichés sur un appareil mobile, car ils
peuvent avoir fière allure sur le bureau.
Un exemple serait qu'un éditeur vidéo
aura fière allure sur le bureau.
Mais sur un appareil mobile,
ce n'est peut-être pas forcément génial.
La même chose s'applique également aux animations.
Et les mesures seront bonnes sur un ordinateur de bureau,
les passerelles d'un ordinateur de bureau, mais le
téléphone mobile peut avoir
du mal à afficher cette animation.
Le but de cette conception massive est donc le sacrifice.
Vous apportez des modifications, vous supprimez certaines fonctionnalités de sorte que
lorsqu'ils sont affichés sur un appareil mobile, la grille Uber sera affichée.
C'est donc tout pour
l'introduction très rapide à la conception réactive.
Commençons maintenant avec ça.