Mobile First vs Responsive Web Design

Mobile First vs Responsive Web Design

Many people use the terms “Mobile First” and “Responsive Web Design” interchangeably.  Although some of the objectives of each are the same, there are some differences. The definition of Responsive Web Design is to have the layout change to fit the size of the device it is viewed on. Usually, this method started with the larger layout (desktop) and through removing or shifting elements, the layout was made to fit the device it was on.

With “Mobile First”, is responsive and the layout changes to fit the device it is viewed on.  The difference is the design starts with the smallest device (Cell phone) and then changes upwards. The key behind this layout is that designing for a 5″ screen forces the development process to prioritize what content is essential.  Then other elements are added as the screen increases in size. This is a total reverse from the responsive design model.

Yes, some audiences do require a larger canvas, but that does not invalidate mobile first. You have to force yourself to think of what is the most important thing to put on a 5″ wide canvas. This requires that you know the audience you are designing for.