What is the difference between M.dot, responsive layout and adaptive layout?

Question

Always when we search for responsive web development we find various ways to do the same thing.

Accessing the site of the same Sopt, we can see that it has a different layout for mobile devices and desktops, as the image below.

We can see that the layout type of Sopt is not only responsive, because if you access the site on a desktop, change the screen resolution but do not update it, the layout change does not occur.

With this doubt in mind, I did some research and three "terms" stand out, which are:

• Responsive Layout
• Adaptive Layout
• M.dot (this came of this chat conversation)

But after all, what are these "terms" and what are the differences between them?

Answer 1

Responsive ()

These may or may not make use of media-queries, what defines it is that the sizes of the objects accompany the screen usually based on percentage, so it fits as needed not having a set size for each element

Adaptive ()

Make use of media-queries generally (or perhaps other detection methods), what defines this type is that it works with fixed sizes and fits to specific measures.

For example if the screen is the size of 1024 the main element of the page (where the other elements are organized) would have fixed the value of with: 1000px, if the window is resized to 320 width a media-query will adapt applying to this element the fixed size of width: 300px;, then CSS would be something like:

.main {
     width: 1000px;
}

@media (max-width: 320px) {
    .main {
        width: 300px;
    }
}

This process can also be applied in other elements, for example menus, so if you access on a mobile phone the menu can be fully modified and will have a fixed size for that need.

Comparing responsive to adaptive

Here is a simple example of the differences:

<style>
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #cfcfcf;
}

#design {
    margin: 10px;
}
#design > div {
    background-color: #fff;
    margin-bottom: 15px;
    padding: 15px;
    margin: 0 auto 15px auto;
}
.simulate {
     width: 320px;
}
#adaptive {
    width: 1000px;
}

@media (max-width: 640px) {
     #adaptive {
         width: 520px;
     }
}

@media (max-width: 320px) {
     #adaptive {
         width: 200px;
     }
}
</style>

<div id="design">
    <div id="responsive">Responsive</div>
    <div id="adaptive">Adaptive</div>
</div>

Following test in jsfiddle https://jsfiddle.net/ta9r0qza/2/, simply resize the iframe to notice the difference.

Which to choose, responsive or adaptive?

I’m not going to talk about learning curve and/or degree of difficulty, I personally think this is case by case, there’s no telling which is best, if we look at many source codes of websites that use responsive techniques we will notice that in one place or another has been made use of the Adaptive, for example a menu that is responsive on all medium sized or large screens, but that on small screens is fixed at a place on the page and maybe is hidden and will also have its size fixed to avoid getting smaller than ideal.

So what I can say that I understand is that responsive self-adjusting, but there will be hours that will need to fix some sizes of certain elements, so it is not quite the layout that is responsive or adaptive, but rather the design for every need.

---

Other techniques

During the research I found the following techniques:

• M.dot (or Mdot or M.) which refers to creating a domain that delivers a mobile version of the page

• Browser sniffing, which is also known as:

  • browser Detection
  • user-agent sniffing
  • user-agent Detection
  • server-side sniffing
  • device Detection

---

Alternate domains and pages for different devices

The M.dot is simply an alternative domain, yet it can make use of the browser sniffing to make the HTTP redirect (302 Found), ie if the user accesses the Desktop site on a mobile phone he will be redirected to the sub-domain, as m.site.com.

There is an alternative to M.dot without using sub-domain, it depends a lot on what the developer has at hand, has developers who use the URL PATH, so:

 http://site.com/pagina.html
 http://site.com/m/pagina.html

Querystring (seriously I’ve seen this):

 http://site.com/pagina.html
 http://site.com/pagina.html?mobile

Or even totally different domains.

---

Browser sniffing

To understand this technique it is necessary to understand the header User-Agent, this header is sent to the site you are trying to access in all HTTP requests, for example if you try to open from an iPad to page http://site/foo-bar-baz will be sent to the server this:

GET /foo-bar-baz HTTP/1.1
User-Agent: Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

So on the server side is using an expression to detect the word iPad (and Android) in the middle of the string (you can use regex for example), so if it were in PHP it would be something like:

if (preg_match('#iPad|Android#', $_SERVER['HTTP_USER_AGENT'])) {
    //Entrega conteudo otimizado para mobile
} else {
    //Entrega conteúdo para Desktop
}

Or redirect:

if (preg_match('#iPad|Android#', $_SERVER['HTTP_USER_AGENT'])) {
    header('Location: http://m.site.com' . $_SERVER['REQUEST_URI']);
    exit;//Impede de carregar o resto da página
}

//Entrega conteúdo para Desktop

This technique however is used long before the mobiles, at the time that browsers like IE4/5.01 and Netscape dominated the market a lot was not compatible, so the use of user-agent to detect the browser was quite common, either to redirect to a page optimized for the specific browser or even to block access in that browser (believe me people unfortunately did this and sometimes still do).