Free Advanced Web Design Tutorials

Responsive Web Design - Mobile First Approach

There are two methods through which one can develop a website,

  1. Desktop First Approach
  2. Mobile First Approach.

What's the difference?

Desktop First Approach

In Desktop First Approach, the web page design is targeted for the desktop users. The design is later manipulated using CSS3 media queries as explained before to respond itself to different screen sizes of devices.

Mobile First Approach

In Mobile First Approach, the web page design is targeted for the mobile users. The design is later manipulated to respond to bigger devices.

Why Mobile First Approach is best?

Going with mobile first approach will save a lot of time in design compared to desktop first approach. For instance, if you start the design with desktop first approach, obviously you will try to use as many design elements as possible in your design like sticky panel, etc. when the design is moved to smaller devices, such design elements will be no use, you have to re-design some parts to make it work for both mobile devices and desktop.

But if you start with mobile first approach, you won't consider design elements like sticky panel which is good only for desktops. This way you can create an amazing design without re-dos for both mobile devices and desktops.