Question

I have read somewhere that when you build a Website and also want to use media queries to make it Responsive, general convention is that you build the Mobile Interface first then build the UI for desktop browsers after. Why is this recemmended over building Desktop UI first?

Answer 1

You have pointed out a vital issue in the approach towards Mobile and Desktop interfaces.

Which I agree but have found that your Desktop UI will end up with too
little features because you built your site with Mobile Browsers in
mind. I thought you build for desktop first then build a Mobile
Version with all unnecessary features removed??

Just because I’m using a mobile device does not mean that I don’t want a full experience with your web application. In fact, doing so will probably cause me to bail on your web application altogether.

With the ever increasing number of people accessing websites through mobile devices (smart phones and tables would fall into this category) you will begin to find that some users will not have any other means of internet access. Why buy a laptop if you can do everything you need on your smart phone or tablet device.

You should instead approach your web app (or general website) with progressive enhancement in mind.

1. Provide all web app functions to a user on mobile
2. Enhance the functions where possible by detecting device capabilities (geo-location, touch etc)
3. Enhance the design to suit the screens viewport.
4. ?????
5. Profit

By providing all functions to a mobile interface you ensure that this will also be accessible via the desktop, and then using media queries you can ensure that users have the best possible display of content and interface to interact to the website/webapp based on the viewport they are currently using.

One of the major benefits of approaching the mobile first is for speed. You want to ensure that it is as light as possible because often mobile devices will be running on less bandwidth than a laptop or desktop.