⬅ Back

MOBILE FIRST APPROACH

The order of steps in a task matters.

When building a responsive website, an important question appears:

Where should development begin?

The modern standard is: Mobile First

That means:

So the direction is:

small screen -> medium screen -> large screen
mobile       -> tablet        -> desktop

1. What Mobile First means

Mobile First means:

Mobile First flow

Step 1       Step 2       Step 3
Mobile   ->  Tablet   ->  Desktop
320px        768px        1024px+
Start here:
+------------------+
|  MOBILE VERSION  |
+------------------+

Then expand:
+--------------------------+
|     TABLET VERSION       |
+--------------------------+

Then expand again:
+--------------------------------------+
|          DESKTOP VERSION             |
+--------------------------------------+

Main idea:

Base styles = mobile styles
More space  = add more styles later

2. Why design starts from mobile

Modern websites are heavily used on phones.

So designers usually think first about:

Then they gradually add more complexity for bigger screens.

Design priority

Phone first:
[ important content ]
[ main button       ]
[ short navigation  ]

Then tablet:
[ more space ]
[ more layout options ]

Then desktop:
[ full layout ]
[ side blocks ]
[ wider spacing ]

3. Advantages of Mobile First

The main advantages are:

Let’s look at them one by one.

4. One website = one project

With Mobile First, we do not make:

Instead, we create one responsive project.

Old difficult idea:
mobile site   + tablet site + desktop site

Better idea:
one responsive site for all devices
One codebase
   |
   |- mobile layout
   |- tablet layout
   +- desktop layout

This usually means:

5. Interface convenience

Mobile screens are small.

That forces the developer and designer to think carefully:

Small mobile screen

+------------------+
| Logo             |
| Main heading     |
| Important text   |
| Main button      |
+------------------+

Because space is limited, the layout focuses on essentials.

Then, on larger screens, extra elements can be added.

Mobile:
[ essential content only ]

Desktop:
[ essential content ] [ extra sidebar ]
[ more decoration ]   [ more tools    ]

So Mobile First often improves clarity.

6. Loading speed

Mobile First often helps performance.

Why?

Because the mobile version usually:

Mobile version
   down
fewer heavy elements
   down
faster loading
Phone:
small screen + simpler interface -> faster page

Desktop:
more space + more enhancements -> more resources possible

Main idea:

Start simple
then enhance

7. Search ranking

Search engines such as Google prioritize mobile-friendly websites.

Mobile-friendly site
        down
better modern web standard
        down
better search visibility potential

So Mobile First is not only about design.

It also supports discoverability and modern web expectations.

8. Mobile First in implementation

Technically, Mobile First is simple.

The rule is:

Base CSS
   +- mobile styles

@media (min-width: 768px)
   +- tablet styles

@media (min-width: 1024px)
   +- desktop styles

This means:

default = mobile
from 768px = tablet changes
from 1024px = desktop changes

9. Standard Mobile First structure

Code pattern:

selector {
  /* Base styles */
}

@media (min-width: tablet-width) {
  selector {
    /* Tablet styles */
  }
}

@media (min-width: desktop-width) {
  selector {
    /* Desktop styles */
  }
}

How to read it:

First:
all small screens use base styles

Then:
if width becomes at least tablet size,
add tablet styles

Then:
if width becomes at least desktop size,
add desktop styles

Range diagram:

0 ------------ 767 | 768 ------------ 1023 | 1024 ------------------>
mobile styles        tablet styles            desktop styles

10. Why min-width is common in Mobile First

min-width means: FROM this width upward

That matches the Mobile First idea perfectly.

min-width logic

@media (min-width: 768px)
-> FROM 768px and wider

@media (min-width: 1024px)
-> FROM 1024px and wider

Visual:

Start on the smallest screen
       down
add more styles as width grows

So Mobile First usually means:

base styles + min-width breakpoints

11. Advantages of this implementation style

This approach gives:

Let’s explain that.

12. Clean code

When we start from the mobile version, we often rely on:

Mobile layout

[ block 1 ]
[ block 2 ]
[ block 3 ]

This is naturally simple.

Then larger layouts extend it:

Tablet:
[ block 1 ][ block 2 ]
[ block 3 ][ block 4 ]

Desktop:
[ block 1 ][ block 2 ][ block 3 ]
[ block 4 ][ block 5 ][ block 6 ]

So the layout grows naturally instead of being forced from large to small.

13. Inheritance from narrow to wide

This is one of the biggest benefits.

Example idea:

Base styles
   |
   |- font
   |- colors
   |- spacing
   +- basic structure

Tablet inherits base styles
   + adds tablet rules

Desktop inherits both previous layers
   + adds desktop rules
mobile layer
   down
tablet layer on top
   down
desktop layer on top

This reduces repetition.

14. Minimal overriding

When styles grow from small to large, we often only need to:

We do not need to constantly destroy earlier desktop assumptions.

Good:
mobile base -> add more

Bad:
desktop base -> reset many things for mobile

That is one reason Mobile First is cleaner.

15. Range styles problem

In most cases, Mobile First with min-width is enough.

But not always.

Sometimes a style is needed only in one specific range.

Example situation:

Let’s visualize this:

Viewport ranges

0 ------------ 767 | 768 ------------ 1023 | 1024 ------------------>
border            shadow                  no shadow

This is a range problem.

16. Bad solution using only min-width

Bad code:

/* ❌ BAD */
.box {
  border: 1px solid black;
}

@media (min-width: 768px) {
  .box {
    border: none;
    box-shadow: 2px 2px 4px 2px black;
  }
}

@media (min-width: 1024px) {
  .box {
    box-shadow: none;
  }
}

Why is it bad?

Because we must keep resetting old styles:

Step 1 mobile:
border

Step 2 tablet:
remove border
add shadow

Step 3 desktop:
remove shadow
border -> reset
shadow -> reset

Too many resets make code harder to read.

17. Better solution with exact ranges

Good code:

/* ✅ GOOD */
@media (max-width: 767px) {
  .box {
    border: 1px solid black;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .box {
    box-shadow: 2px 2px 4px 2px black;
  }
}

Why is this better?

Because each style lives only in the range where it is needed.

Range-specific styling

0 ------------ 767 | 768 ------------ 1023 | 1024 ------------------>
border            shadow                  nothing special

No reset is needed for desktop, because the shadow rule simply stops applying.

18. When max-width is useful in Mobile First

So even in Mobile First, max-width is sometimes useful.

Use it when:

Do I just need to add styles for larger screens?
-> use min-width

Do I need a style only inside one exact range?
-> max-width or min+max range may be cleaner

19. Adaptive grid idea

Now let’s look at an adaptive grid.

Goal:

HTML:

<div class="container">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
</div>

We will use two breakpoints:

20. Mobile grid: base styles

Base styles:

.container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 1170px;
  min-width: 320px;
  margin: 0 auto;
}

What this means:

Mobile layout

+---------+
|    1    |
+---------+
|    2    |
+---------+
|    3    |
+---------+
|    4    |
+---------+
|    5    |
+---------+
|    6    |
+---------+

This is the mobile-first base layout: one column

21. Why mobile base has no element positioning styles

Notice:

Why?

Because on mobile, a simple one-column layout is often enough.

Base mobile strategy

Container:
column direction

Elements:
natural full-width blocks

This keeps the code simple.

22. First breakpoint: 768px

At 768px, the layout changes.

Code:

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .element {
    flex-basis: calc((100% - 10px) / 2);
  }
}

What changes?

23. Tablet grid diagram

Tablet layout:

+---------+ +---------+
|    1    | |    2    |
+---------+ +---------+

+---------+ +---------+
|    3    | |    4    |
+---------+ +---------+

+---------+ +---------+
|    5    | |    6    |
+---------+ +---------+

Now the grid is: 2 elements per row

Breakpoint diagram:

0 ------------ 767 | 768 ---------------- 1023 | 1024 -------------->
1 per row          2 per row                next layout

24. Why the tablet formula works

Formula:

flex-basis: calc((100% - 10px) / 2);

Explanation:

One row

|---- item ----| gap 10px |---- item ----|

Total:
100%

Item width:
(100% - 10px) / 2

This is a classic responsive grid formula.

25. Gap can also change by breakpoint

Notice:

This is important.

Spacing can also be responsive.

Mobile:
[item]
gap 5px
[item]

Tablet:
[item] gap 10px [item]

So do not assume only widths change.

Sometimes:

26. Second breakpoint: 1024px

At 1024px, the layout changes again.

Code:

@media screen and (min-width: 1024px) {
  .container {
    gap: 15px;
  }

  .element {
    flex-basis: calc((100% - 30px) / 3);
  }
}

What changes?

27. Desktop grid diagram

Desktop layout:

+---------+ +---------+ +---------+
|    1    | |    2    | |    3    |
+---------+ +---------+ +---------+

+---------+ +---------+ +---------+
|    4    | |    5    | |    6    |
+---------+ +---------+ +---------+

Now the grid is: 3 elements per row

Breakpoint diagram:

0 ------------ 767 | 768 ------------ 1023 | 1024 ------------------>
1 per row          2 per row                3 per row

28. Why the desktop formula uses 30px

Formula:

flex-basis: calc((100% - 30px) / 3);

Why 30px?

Because in a row of 3 elements with gap 15px, there are 2 gaps:

Total:

15px + 15px = 30px
|--- item ---| 15px |--- item ---| 15px |--- item ---|

Remaining space for items:
100% - 30px

Each item:
(100% - 30px) / 3

29. Full adaptive grid evolution

Complete layout progression:

Mobile:

[1]
[2]
[3]
[4]
[5]
[6]

Tablet:

[1] [2]
[3] [4]
[5] [6]

Desktop:

[1] [2] [3]
[4] [5] [6]

This is a perfect example of Mobile First growth.

30. Full CSS structure diagram

Base styles
|
|- mobile
|    |- flex-direction: column
|    +- gap: 5px
|
|- @media (min-width: 768px)
|    |- row layout
|    |- wrap
|    |- gap: 10px
|    +- 2 items per row
|
+- @media (min-width: 1024px)
     |- gap: 15px
     +- 3 items per row

31. Why Mobile First grid is clean

This grid is clean because:

Simple base
   down
add tablet changes
   down
add desktop changes

This is easier to maintain than starting from desktop and stripping things away.

32. Practical way to think about Mobile First

A useful mental model:

Step 1:

Ask: What is the simplest possible version for a phone?

Step 2:

Ask: What should improve when more space appears?

Step 3:

Ask: What should improve again on desktop?

Question flow

Phone:
What is essential?

Tablet:
What can be arranged better?

Desktop:
What can be expanded further?

33. Common mistakes

Mistake 1: Starting from desktop and then forcing everything to shrink.

Problem: too many overrides and resets.

Mistake 2: Using only min-width even when a style belongs to one exact range.

Problem: extra reset code.

Mistake 3: Forgetting that spacing can change at breakpoints too.

Problem: layout may not match design.

Mistake 4: Making mobile layout too complex.

Problem: base styles stop being simple and clean.

Mistake 5: Ignoring content priority on mobile.

Problem: important information may be hidden under less important blocks.

34. Mini cheat sheet

Mobile First     -> start with mobile styles
Base styles      -> mobile styles outside media queries
min-width        -> add styles for larger screens
768px            -> common tablet breakpoint example
1024px           -> common desktop breakpoint example
1 column         -> common mobile layout
2 columns        -> common tablet layout
3 columns        -> common desktop layout

35. Final summary

The Mobile First approach means starting with the mobile version and then expanding the layout for wider screens.

Important things to remember:

Super short memory line:

Mobile First = build small first, then enhance for larger screens
⬅ Back