Difference between mobile site and web responsive? What should be the approach?

Question

There are so many sites that work on m-site particularly like makemytrip but one the same side, there are products that are web responsive which are manipulated using the CSS media queries.

One of the reasons that I know is to make the native apps for the android, and iOS using frameworks but I am not very much convinced with this solution.

I want to know the usability and the approach to making the m-site of the product. Are there any principles or set of requirements that you should meet before proceeding in making a dedicated mobile site.

Answer 1

Native apps are neither mobile sites or responsive sites. A native app might use mobile or responsive content but, ultimately, it is designed to be run directly from the device rather than through a browser.

<opinion> I don't like the half-way-house solutions utilising a framework to bring in a web page and calling it an app - it's always a compromise rather than a bespoke app and you might as well just build a mobile site.</opinion>

Mobile sites are purpose built for use with mobile devices. It's an older technology that dates back to the times when, if a server detected a mobile device, the device would be served a WAP or WML site.

As CSS and HTML, and mobile technology improved, WAP and WML was superseded by websites designed expressly for smaller screens.

As CSS and HTML underwent further improvements, it became possible to sense and target specific screen sizes or ranges of size - this is when 'responsive' became possible.

You can now use server-side sniffing to detect a mobile device and serve it a bespoke set of HTML/CSS or use client-side sensing to find the screen size and adjust your layout accordingly. Carefully written responsive CSS can also ensure that only the right stylesheets and assets are loaded onto the mobile device ensuring the minimum use of bandwidth and data consumption.

If you are considering using a mobile site (server-side sniffing) to deliver an app then you really need to consider the (often contradictory) conventions for each platform you are serving. Beyond that, apply standard mobile usability requirements, such as button size, page density, page length, etc, and you should be OK.

If you are building a site to be delivered via a browser then you need to consider the range of screen sizes available to your users and generate the best layouts in those ranges while paying attention to all the normal usability requirements for any mobile media.

Answer 2

I presume by "m-site" you mean sites which have both a mobile version and a desktop version. Often this occurs where the desktop site was too complicated or involved to allow the developers to turn it into a mobile site using, as you said, media queries and CSS. It was just easier to create a mobile site though, in the long run, it may cost them time and lost visitors who don't click or notice the mobile version.

The usual workflow now is to start with a mobile version of a site and build on that out to a full desktop version. It's easier to do as you have less space on mobile but, as the screen gets bigger, you can add elements to it. Taking a desktop version with all those elements in place can be more difficult as removing elements can destroy a layout making it unusable or unviewable.

Native apps can work well as they blend in to the environment of the mobile device. However, mobile devices typically have their own programming environment, also, thus requiring, for example, Java programming for Android and Swift programming for iOS. Thus the disadvantage there.

Today, there is a movement toward "Web Applications" where the programming environment is shifting toward cross compatible programming over the internet. Standardized web applications make it possible to write code to that standard and know it will work on all devices. This is relatively new but much of such functionality works and works well with modern browsers.

The general topic title would include "progressive web apps".

In our case, for new sites, we have designs laid out starting with mobile and building on that. Thus our programmers progressively add elements and functionality as the screen gets larger without limiting the user in their ability to use the service or perform a task.

One thing to keep in mind is the restriction placed on mobile devices beyond screen size. That usually means connectivity and upload/download speed along with the processing power of the device. Animation may not run well on a phone so if the animation isn't critical to the site then it may have to be eliminated on mobile. Dropped connections while riding in a car or train need to be taken into consideration, too.