Responsive Web Design Vs Mobile First

Would you be brave enough to launch a mobile version of your website, while ignoring the desktop users altogether? Well, it is your call after all… but from my personal experience, I can safely say that not many people would do that. It is quite customary for the business owners and even for the website designers to launch the desktop version, which is otherwise known as the standard version of the website, first.

Mobile version of the website comes next. When the desktop version of the website gets uploaded to the web server, web designers and the owner finally get their heads together to design a mobile version of that website so that the mobile users don’t feel left out.

Things have not changed much even after the rise in the popularity of responsive web design. People still start a web design project with the desktop version first and when they are done with that, they decide to delete some designing elements from the desktop version of the design and serve it as a mobile friendly version to the mobile users.

It is strange that some designers still don’t give much attention to the mobile users and the mobile devices. For them, mobiles are just some fancy devices that should be used as communication tools. But in the real world, things are just the opposite. Just go out and ask some random people in the street and you will realize the fact that a significant number of people are using mobile devices to browse the web.

Quite a shocker, is it not? You need to get this in your head that mobile websites are not something fancy that rich business organizations like to gloat about; rather they have become just as important as the standard version of a website.

In that case, let me inundate you with some mindboggling numbers

  • In the United States alone, 25% of the users have never used a desktop to browse a website.
  • Over 11 billion of time mobile apps have been downloaded by users.
  • Emerging markets like India and China are seeing a surge in the use of mobile phone.

Since mobile devices are easy to carry and as they are getting increasingly powerful and feature rich, we are more likely to see more traffic coming through mobile devices. This is the reason why we have to invest our time, energy and our hard earned money to design and develop a mobile website. However, if you don’t have the budget available to have the mobile interface designed and developed from scratch, you can check out some cool website builders like – MotoCMS available online.

Most of us are well aware of the importance of having a mobile version of a standard website but the problem is that we are not sure what approach we should be taking while developing a mobile version.

Should we be gracefully degrading a standard website to develop a mobile version? Or we should be aggressively tearing it down to create a water-down version of the standard website to cater to the mobile users?

Most of us are not sure about this. So, let’s take a deeper look at the two most popular methods of designing and developing a mobile website –

  • Responsive Web Design
  • Mobile First Approach

Both them have some advantages and disadvantages. So, take a close look at them first and then we will decide which the best approach is when it comes to design and develop a responsive design.

What is Mobile First After All?

Mobile First, as the name suggest, is the idea which advocates designing a website for the mobile users first and then keep on adding other designing elements as the screen size gets bigger and bigger and eventually designing a full-fledged website for the desktop users.

The obvious advantages of Mobile First Approach are –

  • Mobile users get the priority which is something unique as most web designers do exactly just the opposite. This approach will put a smile on the face of the mobile users.
  • The design will be more compact and there will be fewer distractions as the idea revolves around designing a clean interface for the mobile devices first and then keep on adding more functionality to cater the needs of the large screen devices.
  • The design will be more conversion friendly. Since designers will be adding different design elements on the interface after analyzing the requirements of the targeted device, there will be fewer elements interfering with the conversion.

But there are some disadvantages too that we should not be overlooking –

First of all, I have no idea why we should be giving this much attention to mobile devices. Of course, statistics show that 25% of mobile users have never used any other devices other than mobile to browse the web but does not that mean the rest of the 75% are using desktop devices? So, designing a website primarily for the 25% of users do not make any sense. We are not against mobile first approach rather we are against the idea of giving more attention to the mobile users at the cost of the desktop users.

Moreover, since the design is developed primarily for the mobile users, these websites tend to sport dull interfaces. So, if you are looking forward to design and develop a stunning website to woo the customers, probably the Mobile First approach is not your cup of tea.

What About Responsive Design

Responsive web design is exactly the opposite of Mobile First design approach. Designers first design the interface for the desktop devices and then they start removing elements as the screen size gets smaller.

Media Query is used extensively to target mobile devices or devices with small screen real estate. The best thing about responsive web design is that the mobile interface does not differ much from its desktop counterparts.

Some of the remarkable advantages of responsive web design are –

  • It is easy to implement. All we have to do is to create a separate style sheet to target smaller devices and then specifying the screen size via media query.
  • The look and the feel of the mobile website and the standard website do not differ much. The functionalities remain almost the same with some minor tweaks in the design to deal with the small screen sizes.
  • It is easy to hide elements that you may deem unnecessary for a particular screen size with responsive web design. All you have to do is to include a tag like – Display: hide; and it will do the trick.

Responsive web design has its own set of disadvantages but they are few and far between and therefore can easily be ignored.

So, basically both the responsive design and the mobile first approach has their own set of advantages and disadvantages but since desktop users still outnumber mobile users by a large margin, we believe that it we should be embracing responsive web design for the time being.

Author Bio

This article is contributed by Deb Dey, a blogger based in Kolkata, India. He does not like humans that much. He loves designing simple websites for small businesses and also helps them get some footholds on the web.