1
00:00:01,700 --> 00:00:06,230
So now that we have a basic understanding of what mobile first design looks like.

2
00:00:07,820 --> 00:00:13,460
It's time to create the project and actually go through the steps of designing a Web page, starting

3
00:00:13,460 --> 00:00:15,410
form a mobile first approach.

4
00:00:16,780 --> 00:00:22,120
And this is a project that we're going to work on, it's just as simple a page, it won't even have

5
00:00:22,120 --> 00:00:27,790
a navigation up here, it will just take us through the steps of creating a mobile first website and

6
00:00:27,790 --> 00:00:29,310
how this approach actually looks.

7
00:00:29,950 --> 00:00:31,950
So let's just take you through the website.

8
00:00:32,590 --> 00:00:36,370
It will have this starting page, then scroll down.

9
00:00:36,580 --> 00:00:37,810
We'll have a service section.

10
00:00:38,840 --> 00:00:42,800
With the services that we provide it just a simple Heather.

11
00:00:43,750 --> 00:00:45,610
Some text and then an image.

12
00:00:46,830 --> 00:00:49,320
And down at the bottom, we'll have a contact section.

13
00:00:50,770 --> 00:00:56,620
Now, as I said previously, when we leave our mobile design and go to the next step, which would be,

14
00:00:56,620 --> 00:01:02,710
for example, a tablet, we should rethink our arrangement of the items and is a perfect example.

15
00:01:02,720 --> 00:01:10,420
The contact section from the mobile look to the tablet look is a bit different if it go back to our

16
00:01:10,420 --> 00:01:11,380
mobile design.

17
00:01:12,260 --> 00:01:18,620
And let me just enlargers, you see, the context section was in a column and also each and every item

18
00:01:18,860 --> 00:01:23,060
was in a column, as if we go back to an iPad format.

19
00:01:26,640 --> 00:01:31,050
Well, they're still in the column, but it take up much more space, so we must constantly think about

20
00:01:31,050 --> 00:01:34,590
the arrangement in the page for our different approaches.

21
00:01:36,930 --> 00:01:43,260
Now, if you take a look at the header section, the difference between the phone design and the tablet

22
00:01:43,260 --> 00:01:45,390
design is the alignment again.

23
00:01:46,740 --> 00:01:53,490
If you go back to the phone design, we have a title and the button at the top and underneath it we

24
00:01:53,490 --> 00:01:54,270
have our image.

25
00:01:55,660 --> 00:01:59,200
And if you go back to a tabloid format, tender side by side.

26
00:02:00,410 --> 00:02:05,000
But this is by constantly taking into consideration the spacing of allowed.

27
00:02:06,100 --> 00:02:08,620
Now, if you go in a completely responsive format.

28
00:02:09,940 --> 00:02:15,460
We will maintain our side by side display, but the aspect ratio of the bottom, for example, would

29
00:02:15,460 --> 00:02:15,940
change.

30
00:02:15,990 --> 00:02:18,400
Also the title font size will change.

31
00:02:22,290 --> 00:02:27,720
And if you go down to the contacts section, the contact session with the contacts section will be displayed

32
00:02:27,720 --> 00:02:33,960
to the full width of the Web page, and the main content of the Web page will remain within borders

33
00:02:34,260 --> 00:02:36,720
of one thousand two hundred pixels.

34
00:02:39,380 --> 00:02:47,630
Also in our phone and tablet format will have no hover effects, let me just leave this toggle and if

35
00:02:47,630 --> 00:02:50,150
you hover over the button, you see it has no effect.

36
00:02:50,180 --> 00:02:52,670
Also, if we press it, it will have this.

37
00:02:53,540 --> 00:02:54,500
Active effect.

38
00:02:55,630 --> 00:03:01,640
Now, also, if I press this, this will take us down to recontact section, but if I would now go into

39
00:03:01,640 --> 00:03:02,650
a phone format.

40
00:03:07,120 --> 00:03:15,460
Or a tabloid format, as I said in our previous section, Hober Effects have no place in film formats

41
00:03:15,460 --> 00:03:17,440
or in any small devices.

42
00:03:19,910 --> 00:03:25,520
They're just unnecessary code that we type in, and no one would ever use it if it had something with

43
00:03:25,520 --> 00:03:28,760
our fingers, we don't need any Hober effects, so it is redundant.

44
00:03:30,500 --> 00:03:35,420
OK, so this is pretty much it about the project, and it is a simple project just to get us used to

45
00:03:35,420 --> 00:03:37,310
the concept of mobile first design.

46
00:03:37,670 --> 00:03:39,030
So I'll be excited.

47
00:03:39,050 --> 00:03:40,570
Let's get started with the project.