Hello and welcome to Mobile First Design, as the name suggests, mobile phones means that we start
the production design from the mobile and which has more restrictions, then expand its features to
create a tablet or desktop version.
So what is mobile first?
Well, first of all, let's start by talking a bit about how in the last couple of decades, mobile
Internet usage has surpassed desktop usage.
In approximately 2016, 16 people have spent more and more time on the Internet from the mobile and.
The mobile first approach is a tenet of progressive enhancement.
It is the ideology that mobile design as the hardest should be done first.
Once the mobile design questions are answered, designing for another device will be much easier.
What it boils down to is that the smallest of the design will have only the essential features.
So right away you have designed the heart of the user.
The opposite approach is graceful degradation.
This incorporates all of the complexities right from the start, then strip them away later for the
smaller devices.
The problem with graceful degradation is that when you build the all exclusive design right from the
start, the core and supplementary elements merge and become harder to distinguish and separate.
The entire philosophy runs on the risk of creating mobile design as more of a alter, since you're cutting
down the experience.
These are just a few steps you should take into consideration when taking a mobile first route.
Steps which are content inventory, visual hierarchy, design with the smallest breakpoints and scale
up enlarging touch targets don't count on hobbies, think EMP, avoid larger graphics test in real device.
So let's go through each of them content inventory.
I want to just create to create a document containing all of the elements you want to include.
Visual hierarchy, we should prioritize the element in the content inventory and determine how to display
the most important element prominently.
Design with the smallest breakpoint and then scale up.
Build a mobile wireframe first, then use that as the model for large breakpoints, expand the screen
until there's too much white space.
Enlarged, touched targets, fingers are much larger than pixel precise mouse's cursus.
And so need large elements on which to tap.
Don't count on Hober, it almost goes without saying, but designers often rely on hover and mouseover
effects in their interactive work.
If you're thinking mobile friendly, then don't.
There's no hope of control for finger tips yet.
Think app mobile users are accustomed to motion and a modicum of controls in their experience.
Think about all the cameras, navigation, expendable widgets and AJAX calls and other elements on the
screen with which users can integrate without refreshing the page.
Avoid large graphics, Lansky's photos and complex graphics don't display well when your screen is only
a few inches across, catered to mobile users with images that are readable and handle screens.
Testing real devices now, although we cannot test in this course, but I would suggest that you test
your designs in real life situations.
Nothing beats discovering yourself how useful a website is or isn't a step away from your desktop or
laptop computer and load up your product on a real phone or tablet.
Tap through the pages is decidedly easy to navigate.
Does it load in a timely fashion or text and graphics?
Easy to read.
These are some important questions that you need to ask yourself before launch your product.
If your site is good on a mobile device, it translates better to all devices.
More important is that the mobile first approach is also a content first approach.
Mobile has the most limitation screen sizes and bandwidth, to name just a few.
And so designing with these parameters will force you to prioritize content ruthlessly.
The mobile first approach organically leads to design that's more content focused and therefore user
focused.
The heart of the design is the content.
That's why the users are therefore in.
An important thing to realize is that mobile users sometimes require different content than desktop
users.
Device specific content can be caused by considering context, whatever given situation and in a given
environment, will your users appreciate more?
The best way to plan ahead for this is creating user scenarios.
OK, so it's time to go mobile.