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

Responsive

These can make use of media-queries , which defines it is that object sizes accompany the screen generally based on percentage, so it adjusts as needed not having a size defined for each element

Adaptive

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

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

.main {
     width: 1000px;
}

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

This process can also be applied to other elements, such as menus, so if you access in a cell phone the menu can be totally modified and will have a fixed size for that need.

Comparing responsive with 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>

Follow the test in jsfiddle link , just 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, can not say which is better, if you look at many source code sites using responsive techniques, in either place the use of the adaptive was made, for example a menu that is responsive in all screens of medium or large size, but that in small screens is fixed in a place of the page and perhaps is hidden and also will have its size fixed to avoid getting smaller than ideal.

So what I can say I understood is that responsive self adjust, but will have hours that will be necessary to fix some sizes of certain elements, then it is not well 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. ) that refers to creating a subdomain 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

Domains and alternate pages for different devices

M.dot is simply an alternate domain, but it can still use browser sniffing to do HTTP redirection (302 Found), that is, if the user accesses the Desktop site on a cell it will be redirected to the sub-domain, as m.site.com .

There are alternatives to M.dot without subdomain, this depends a lot on what the developer has in hand, there are developers who use the URL PATH, like this:

 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 an iPad the http://site/foo-bar-baz page 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

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

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

Or redirects:

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, when browsers like IE4 / 5.01 and Netscape dominated the market a lot was not compatible, so using user-agent to detect the browser was quite common, either for redirect to a page optimized for the specific browser or even to block access on that browser (believe people unfortunately did this and sometimes they still do).