So now that we have a basic understanding of what mobile first design looks like.
It's time to create the project and actually go through the steps of designing a Web page, starting
form a mobile first approach.
And this is a project that we're going to work on, it's just as simple a page, it won't even have
a navigation up here, it will just take us through the steps of creating a mobile first website and
how this approach actually looks.
So let's just take you through the website.
It will have this starting page, then scroll down.
We'll have a service section.
With the services that we provide it just a simple Heather.
Some text and then an image.
And down at the bottom, we'll have a contact section.
Now, as I said previously, when we leave our mobile design and go to the next step, which would be,
for example, a tablet, we should rethink our arrangement of the items and is a perfect example.
The contact section from the mobile look to the tablet look is a bit different if it go back to our
mobile design.
And let me just enlargers, you see, the context section was in a column and also each and every item
was in a column, as if we go back to an iPad format.
Well, they're still in the column, but it take up much more space, so we must constantly think about
the arrangement in the page for our different approaches.
Now, if you take a look at the header section, the difference between the phone design and the tablet
design is the alignment again.
If you go back to the phone design, we have a title and the button at the top and underneath it we
have our image.
And if you go back to a tabloid format, tender side by side.
But this is by constantly taking into consideration the spacing of allowed.
Now, if you go in a completely responsive format.
We will maintain our side by side display, but the aspect ratio of the bottom, for example, would
change.
Also the title font size will change.
And if you go down to the contacts section, the contact session with the contacts section will be displayed
to the full width of the Web page, and the main content of the Web page will remain within borders
of one thousand two hundred pixels.
Also in our phone and tablet format will have no hover effects, let me just leave this toggle and if
you hover over the button, you see it has no effect.
Also, if we press it, it will have this.
Active effect.
Now, also, if I press this, this will take us down to recontact section, but if I would now go into
a phone format.
Or a tabloid format, as I said in our previous section, Hober Effects have no place in film formats
or in any small devices.
They're just unnecessary code that we type in, and no one would ever use it if it had something with
our fingers, we don't need any Hober effects, so it is redundant.
OK, so this is pretty much it about the project, and it is a simple project just to get us used to
the concept of mobile first design.
So I'll be excited.
Let's get started with the project.