Mobile web brought a lot of alternative ways to broadcast information to users.
We can build websites that perform well on mobile (being accessed through the mobile device’s web-browser), and there is the new option of creating platform-specific hybrid or native apps that users may install on their devices. Which solution is best (or if both of them in parallel) may depend on the case.
This article describes the different solutions that mobile-optimized websites may use.
Some of the following terms (namely 'adaptive' and 'responsive') may sound confusing, or not expressing enough distinction.
This situation's origin is that their naming came from their 'inventors', and were not subject of clarification on any organizational level.
Therefore these clarifying articles are quite common on the web. That's how it is with these concepts.
Methods to display website content on mobile
Separate mobile website
One can recognize such solution when example.com website has a sister site named mobile.example.com or m.example.com or alike.
In this case, practically there are separate backends/installations serving either the desktop-version and the mobile version. The separate sites can be configured differently and even their contens can be managed individually. This arrangement implies that there will be two websites that need to be maintained instead of only one.
Tendency shows that portals with huge visitor-base (e.g. news providers) prefer this arrangement.
A website with adaptive template adapts best to those display sizes that it was explicitly prepared for.
Before designing, a few frequent display sizes are being chosen (like e.g. 320px, 480px, 768px, 1024px) and then swappable templates are being designed and built, which will be applied automatically, depending on the detected screen size.
The spreading of really diverse display sizes in the most recent mobile (and other) devices impose a challenge for the adaptive templates approach, as designing and building too many explicitly defined layouts may not be really economical.
Perhaps today’s most popular approach to serve webcontent for diverse display sizes.
Here, a single website has a single template, which is capable of constant changing while it always fluidly fills the available width on the screen. (You can pick any width (e.g. resizing your browser window), and the layout will either be full-available-width (between a specified minimum-maximum range), and looking nicely under control.)
Items can be defined to drastically rearrange at arbitrarily specified display-widths (called breakpoints). This way page elements can always utilize available space optimally.
The additional workload of designing and managing these rearranged states of the content is still present, but here we get a wider coverage of display sizes (all/any of them, within our chosen range).