Welcome back to another new section, and in this section, we're going to be discussing some more advanced
ways of making your website responsive.
So our first topic for the section is going to be mobile first versus desktop first design.
So before we go on to describe what a mobile first or desktop first approach is, we need to correctly
understand what the term responsive web design means.
Now, I know we've done this before, we've created a responsive website in when we were creating the
digital project, but since this is the advance section, I want to speak about responsive design in
a little more detail.
So the term responsive design was first coined by Ethan Markert, I hope I'm pronouncing that correctly.
So it's a method by which you create a website such that its view gets automatically adjusted depending
on the size of your user's screen.
So in this way, your users can browse your website seamlessly, irrespective of what device or browser
they use.
So true responsive design.
You only need one website, not one for each device or one for desktop computers and one for mobile
devices.
But you can have two approaches to making your website responsive, and that is the mobile first approach
and the desktop first approach.
So which approach do you go for, mobile first or desktop first?
Well, again, before coming to that decision, you need to first understand what each of these approaches
mean and when is the best scenario to apply them.
So let's think about the desktop first approach first.
The desktop first design involves designing for a typical desktop computers monitor, which is usually
somewhere between 12 hundred to eight hundred pixels.
And Whip, once you've designed for a typical screen of this width and it looks perfect and works great,
you can then start moving downwards.
You can then think about how it's going to look on a tablet device, which is around a nine hundred
twelve hundred pixels in width.
When you think about this, you also need to think about whether this is going to be on portrait or
landscape mode because your website might look different at different width.
And finally think about different mobile phone widths, which can go to any width between four hundred
and nine hundred pixels.
So the desktop first design is based on the assumption that your visitors or most of your visitors will
browse your website on a desktop computer, so you modify the website to adapt different devices, including
smartphones and tablets, once you're done designing for the desktop.
You scale it down step by step, it's important to note here that the desktop first approach involves
the use of the max width property.
In your media queries, because you're scaling downwards, I think by now you understand that so far
we have been using the desktop first approach, right.
We want to introduce you to the max with property.
So I'll take you back to our previous project that we had created, the digital project.
And I'll open the media query docs file.
And just to show you, you'll notice in this project, the Maxford property is being used everywhere.
See Max with, Max with.
We first designed for the desktop and then we move downwards for twelve hundred pixels max with one
thousand twenty three pixels, then max at seven sixty seven pixel.
So we went further down, we started from the biggest screen and then we moved downwards towards the
smallest screen.
So we've used the max with properties in all our media because we wanted to specify what should be applied
when the device width is at most this many pixels.
So we used the max with property in all our media ways because we wanted to specify what should be applied
when the device width is at most these pixels first at most.
If it's a twelve hundred pixels, this should be applied when the width of the screen is at most one
thousand three pixels.
We want these things to be applied.
OK then when it's maximum 767 pixels, we want these things to be applied.
So that's why it's pretty clear that so far we've been using the desktop approach and I'll also tell
you why we've been using desktop approach.
I personally like to use the desktop first approach, but yeah, it depends on your situation.
It's not like you always should use the desktop first approach.
Now, then, what is the mobile first approach, the mobile first approach design process is just the
opposite of the desktop first approach.
That means you initially designed the website for the smallest mobile devices possible and then scale
upwards to adapt to desktop computers.
So you design for smaller fonts, then optimize them for tablets.
Then finally, for larger screens are desktop computers.
In other words, you scale your website up step by step.
You are moving in reverse here.
So it's important to know that the mobile first strategy involves the use of the Menwith property in
your media, which contrary to the max with queries that we used to use in that we have been using in
the desktop first approach.
This is because once you've made the design for a smaller device, you want to scale up.
So each time you want to specify what should be applied, when the device width is at least this many
pixels, when it is at least twelve hundred pixels, when it is at least nine hundred pixels.
All right.
You can usually tell if a website has been designed for mobile devices are not from the you are allowed
the site, usually mobile phones, websites start with an M, for example, M dot Facebook dot com.
So let us look at what the difference is between the two approaches are.
So when do you use mobile first approach, when you want to create a good user experience with the mobile
and user in mind?
And when do you use the desktop first approach when you're thinking about the desktop user first?
OK, content of the mobile first approach is of high priority and design comes later.
Whereas for desktop, first approach, content and design are more or less the same priority.
In fact, sometimes design is of more priority than content in your store.
First approach, your mobile first approach requires more time and effort to develop since you have
to take a lot of mobile devices into consideration.
Whereas the desktop first approach requires less time to develop, you can consider a series of mobile
phones with similar width as like one unit.
All right.
Download time mobile first approach websites usually takes less time because they have less clutter,
they have less design elements and are more optimized.
The images and everything are also a lot more optimized in mobile first websites, whereas for desktop,
for websites, they usually take a more resources because you have a lot of animations and you have
a lot of interactivity and you know where things moving from here to there and stuff.
And you usually have high resolution images.
High resolution images are there for both, but usually for desktop for you require larger images.
And so it requires a higher load time.
Mobile first designs are usually scaled up.
When you scale up a mobile first design to a desktop, it usually looks a little dry because you've
considered mostly the content.
You've not considered the design so much.
And usually when you're designing for the phone, you have less elements on it, less design elements,
less clutter.
And so what happens when you scale it up?
Those design elements become a little too sparse for your desktop.
And so because of the lack of design elements, larger screen areas remained unused and sometimes functions
also are left unexpended because there aren't much functions, functionality inside designs for the
smaller devices.
Whereas if you're using desktop first approach and you're scaling down, it's easier to strip down design
elements from a desktop, like if you have a lot of design elements, you have a lot of things going
on on the screen for your desktop.
It's easier to remove those elements and just make it simple when you're scaling down.
So it's easier to scale down than to scale up.
So now comes the question, when do you use desktop and when do you use mobile phones devices?
So first, let's look at when do you use desktop for design?
So you use desktop first designs when you have more than 60 percent of your traffic coming from desktop
devices.
That's an obvious thing.
You use it when your website interface needs to be feature rich and design rich and you want it to have
complex and enhanced visuals.
Also, you use desktop first approach when your product is intended for use on a desktop, for example,
when you have some sort of a productivity tool or a software, the service.
So anything that you require to be run on a desktop rather than a mobile phone device, it's better
to use the desktop for support for that.
And when do you apply the mobile first approach when you have more than 60 percent of your traffic coming
from mobile devices?
Obviously.
When you need just a simple and minimalistic interface with just a few core features and when your product
is one of the on the go categories like entertainment, lifestyle, news, so you have a small news
app, you don't require much in it.
You don't need it to be very nicely designed with lots of design elements in it.
Just a few things instead of just the news is enough.
People just want to see the news.
Nothing else, right?
Similarly, when you have a lifestyle app, people just want to see maybe one or two images.
They don't want to see lots of designs.
But let's say you have something like a perfume store, like an online store which sells perfumes.
Now, this could go both ways.
You could either want only if you want your users to mainly see images of the perfumes, then a mobile
first design is fine.
But if you want them to be enticed by the whole by the look of your website and you know you want it
to be really attractive, then you would rather want to go to the desktop approach.
Right.
But again, it totally depends on your requirement.
If you think most of your traffic comes from mobile phones, if you think most of your clients will
access your website through mobile phones, then obviously a mobile phone design is better.
But if you think most of your traffic is going to come from desktops, then of course a desktop first
approach is better.
So this was a whole rundown about mobile first design and the rest of us design ultimately is going
to be up to you to decide which one you want to go for.
But we are not going to discuss the mobile first approach in this course because it's going to be a
lot time consuming.
And at the same time, it's more design based because discourse is about designing.
Right, using system design.
So I want to show you different ways in which you can design websites, create more design elements
into your page.
And that's why I feel a desktop first approach is better than a mobile first approach, at least when
you're learning.
All right.
So we're going to move on to the next lesson where I'm going to show you how you can make your website
responsive.
Our Lakeview website responsive and make it so that it's nicely and seamlessly accessible in different
types of devices as well as browsers.
So I'll see you in the next lesson.