1
00:00:00,000 --> 00:00:02,160
Très bien,
 techniquement, nous avons

2
00:00:02,160 --> 00:00:04,410
fini de construire notre site Web. 

3
00:00:04,410 --> 00:00:05,840
Nous avons la page d'accueil,

4
00:00:05,835 --> 00:00:07,335
nous avons la page du blog

5
00:00:07,335 --> 00:00:09,305
et nous aurons également
 une page de contact

6
00:00:09,300 --> 00:00:11,550
ainsi que l'
en-tête et le pied de page. 

7
00:00:11,550 --> 00:00:12,840
Mais il y a une chose très, très

8
00:00:12,840 --> 00:00:14,670
importante que nous
 devons prendre en charge et

9
00:00:14,670 --> 00:00:17,970
qui sera la conception
 réactive. 

10
00:00:17,969 --> 00:00:20,129
Rappelez-vous toujours
 que de nombreuses personnes

11
00:00:20,130 --> 00:00:24,060
utilisent
 aujourd'hui leur
 téléphone portable pour naviguer sur Internet. 

12
00:00:24,060 --> 00:00:25,640
Et si quelqu'un
 trébuche,

13
00:00:25,635 --> 00:00:28,665
tombe sur votre site Web
 sur le téléphone portable,

14
00:00:28,665 --> 00:00:31,455
vous voulez vous assurer
 qu'il a l'air bien. 

15
00:00:31,455 --> 00:00:33,065
Ce que nous allons faire dans

16
00:00:33,060 --> 00:00:34,380
la suite de cette
 section, c'est que je vais vous
 montrer comment

17
00:00:34,380 --> 00:00:37,760
reconstruire l'en-tête, la page d'accueil,

18
00:00:37,755 --> 00:00:39,275
le pied

19
00:00:39,270 --> 00:00:41,640
et les autres pages
 pour avoir l'air réactif. 

20
00:00:41,635 --> 00:00:44,285
Ainsi, s'il est affiché
 sur une tablette
 ou sur un appareil

21
00:00:44,285 --> 00:00:47,285
mobile,
 il aura fière allure. 

22
00:00:47,285 --> 00:00:48,205
Lambdas vous offre une
 démonstration
 très,

23
00:00:48,200 --> 00:00:49,430
très rapide en
 ce moment

24
00:00:49,430 --> 00:00:51,470
, c'est pour la vue tablette. 

25
00:00:51,470 --> 00:00:52,870
Vous pouvez voir que j'ai réduit

26
00:00:52,865 --> 00:00:55,265
la taille de mon écran
 à celle d'une tablette. 

27
00:00:55,265 --> 00:00:56,755
Et vous pouvez voir
 maintenant qu'il est toujours

28
00:00:56,750 --> 00:00:58,510
très, très, très bien. 

29
00:00:58,505 --> 00:01:00,865
Nous n'avons aucun problème
 avec l'espace dans l'en-tête. 

30
00:01:00,860 --> 00:01:01,870
Ça a l'air bien. 

31
00:01:01,865 --> 00:01:03,625
La
 section des notes de témoignage semble très bien. 

32
00:01:03,620 --> 00:01:04,930
La photo est très bien. 

33
00:01:04,925 --> 00:01:06,865
Mais maintenant, si je
 fais défiler jusqu'

34
00:01:06,860 --> 00:01:08,900
à la plus petite taille d'écran,

35
00:01:08,900 --> 00:01:11,260
qui
 sera généralement votre téléphone portable. 

36
00:01:11,255 --> 00:01:13,345
Permettez-moi de
 revenir en haut maintenant, vous pouvez

37
00:01:13,340 --> 00:01:15,260
voir que l'en-tête
 est différent. 

38
00:01:15,260 --> 00:01:16,720
Nous avons un fond noir. 

39
00:01:16,715 --> 00:01:18,845
Nous avons notre logo. 

40
00:01:18,845 --> 00:01:21,115
Nous avons le
 menu principal ici,

41
00:01:21,110 --> 00:01:23,030
qui est maintenant le menu des hamburgers,

42
00:01:23,030 --> 00:01:24,580
que vous avez déjà vu
 de nombreuses fois auparavant. 

43
00:01:24,575 --> 00:01:26,125
Et ensuite, si je fais défiler de nouveau vers le bas,

44
00:01:26,120 --> 00:01:28,520
vous verrez que c'est beau

45
00:01:28,520 --> 00:01:31,820
vous verrez que c'est beau
 jusqu'
au pied de page. 

46
00:01:31,820 --> 00:01:34,490
Le design réactif est donc
 extrêmement important. 

47
00:01:34,490 --> 00:01:36,200
À venir, je vais vous montrer
 comment vous

48
00:01:36,200 --> 00:01:38,980
pouvez apporter des modifications à

49
00:01:38,975 --> 00:01:44,125
votre site Web pour qu'il soit
 beau sur n'importe quel appareil mobile. 

50
00:01:44,120 --> 00:01:45,730
Lambda mentionne également rapidement

51
00:01:45,725 --> 00:01:47,275
que lorsqu'il s'agit
 d'un design réactif,

52
00:01:47,270 --> 00:01:49,610
il y a quelques concepts
 à prendre en compte. 

53
00:01:49,610 --> 00:01:52,880
Il s'agirait de réduire les
 marges comme

54
00:01:52,879 --> 00:01:54,469
les modèles que vous avez

55
00:01:54,470 --> 00:01:56,420
ajoutés dans la version de bureau.
 

56
00:01:56,420 --> 00:01:59,420
Par exemple, vous vous en souvenez
 avec la bannière de la page d'accueil. 

57
00:01:59,420 --> 00:02:01,280
Pour cette section, nous avons dû ajouter

58
00:02:01,280 --> 00:02:02,450
une marge
 négative scandaleuse
 et je pense qu'elle était de

59
00:02:02,450 --> 00:02:03,590
marge
 négative scandaleuse
 et je pense qu'elle était

60
00:02:03,590 --> 00:02:08,050
moins deux à deux pixels en
 ce qui concerne les versions mobiles. 

61
00:02:08,050 --> 00:02:10,340
Donc
 les versions réactives, vous
 devrez peut-être

62
00:02:10,340 --> 00:02:12,970
réduire cette
 taille ou
 Mabou,

63
00:02:12,965 --> 00:02:16,435
ou peut-être même dans certaines
 situations augmenter la taille. 

64
00:02:16,430 --> 00:02:19,040
Un ajustement aux images ou
 aux motifs sera nécessaire. 

65
00:02:19,040 --> 00:02:21,170
Il arrive
 également que vous ayez simplement besoin de
 masquer des types d'éléments de réglage
 lorsqu'ils sont

66
00:02:21,170 --> 00:02:23,690
masquer des types d'éléments de réglage

67
00:02:23,690 --> 00:02:26,420
affichés sur un
 appareil mobile, car ils

68
00:02:26,420 --> 00:02:29,390
peuvent avoir fière allure sur le bureau. 

69
00:02:29,390 --> 00:02:30,830
Un exemple
 serait qu'un éditeur vidéo

70
00:02:30,830 --> 00:02:32,410
aura fière allure sur le bureau. 

71
00:02:32,405 --> 00:02:33,995
Mais sur un appareil mobile,

72
00:02:33,995 --> 00:02:36,425
ce n'est peut-être pas forcément
 génial. 

73
00:02:36,425 --> 00:02:39,265
La même chose s'applique également aux
 animations. 

74
00:02:39,260 --> 00:02:41,210
Et les mesures seront bonnes
 sur un ordinateur de bureau,

75
00:02:41,210 --> 00:02:42,650
les passerelles d'un ordinateur de bureau,
 mais le

76
00:02:42,650 --> 00:02:44,210
téléphone mobile peut avoir

77
00:02:44,210 --> 00:02:46,010
du mal à afficher
 cette animation. 

78
00:02:46,010 --> 00:02:49,780
Le but de cette conception
 massive est donc le sacrifice. 

79
00:02:49,775 --> 00:02:53,845
Vous apportez des modifications, vous supprimez
 certaines fonctionnalités de sorte que

80
00:02:53,840 --> 00:02:57,830
lorsqu'ils sont affichés sur un
 appareil mobile, la grille Uber sera affichée. 

81
00:02:57,830 --> 00:02:59,030
C'est donc tout pour

82
00:02:59,030 --> 00:03:01,870
l'introduction très rapide
 à la conception réactive. 

83
00:03:01,865 --> 00:03:05,165
Commençons maintenant avec ça.