-1

I've read up a lot on adaptive design. All the sources I could find at some point mention server side approach or at least talk about how it makes faster loading times, because you only serve what the client needs. In contrast with responsive design, you deliver out one content that adapts on client side, by media queries for example. Fluid grids and layouts come to my mind.

However, I thought of a very basic, naive and (from my understanding) pretty boneheaded approach that I just could not find a pattern for. Probably because it's so dull.

My idea was basicly to craft a separate view for each device like you'd normally do with adaptive design, but put them into divs and just display the one that matches the device dimensions. This of course delievers, depending on the views, about n-times as much data as server side adaptive design would, with n being the number of different views. However the view could switch on the fly without reloading the page for example. Again, just an idea I had. From my understanding, it does what adaptive design does, just with another technical approach. Is this pattern still called adaptive design?

switches.css and index.html

    
    @media (max-width: 991px) {
        .phone {
            display: inline !important;
        }
        .tablet {
            display: none !important;
        }
        .pc {
            display: none !important;
        }
    }
    
    @media (min-width: 992px) and (max-width: 1199px) {
        .phone {
            display: none !important;
        }
        .tablet {
            display: inline !important;
        }
        .pc {
            display: none !important;
        }
    }
    
    @media (min-width: 1200px) {
        .phone {
            display: none !important;
        }
        .tablet {
            display: none !important;
        }
        .pc {
            display: inline !important;
        }
    }
    
    html {
        font-family: sans-serif;
    }
    
    h1 {
        font-size: 36px;
    }
 <!DOCTYPE html>
    <html>
      <head>
        <title>Am I adaptive?</title>
        <meta name="viewport" content="width=device-width" initial-scale="1">
        <link href="switches.css" rel="stylesheet">
      </head>
      <body>
        <div class="phone">
          <h1>on small screen</h1>
          <p>Here goes the view for small sized devices</p>
        </div>
        <div class="tablet">
          <h1>on medium screen</h1>
          <p>Here goes the view for medium sized devices</p>
        </div>
        <div class="pc">
          <h1>on large screen</h1>
          <p>Here goes the view for large sized devices</p>
        </div>
      </body>
    </html>

EDIT: Thanks to the comments so far! I want to emphasize: I totally agree on this being pretty much the definition of an anti-pattern. I hope my question makes that clear! I don't consider this a practical thing. However, I am interested in what this is called (if it is called anything at all), or if it is still adaptive/responsive by definition. If not, why?

Num Lock
  • 742
  • 1
  • 6
  • 32
  • 6
    No, this *pattern* is called *bad design*, for so many reasons, some of which you've already mentioned. It would probably take me an hour to write down all the reasons that come to mind when considering this. – connexo Jun 03 '15 at 08:40
  • This would be a worse version of responsive design. – Etheryte Jun 03 '15 at 08:42
  • 1
    `HTML` is about semantic. `CSS` is about styling. Your semantic has the same information 3 times. – Christian Gollhardt Jun 03 '15 at 08:42

1 Answers1

0

To me, this seems more like an anti-pattern, or the 'responsive' design pattern.

The point of adaptive design is to limit the amount of work the browser does, and also to reduce the amount of traffic to and from the device.

Think about how this would work on a device with poor bandwidth, such as a mobile phone with a patchy signal. It makes more sense, from a usability perspective, for the server to decide what to send to the device based on the user-agent, or other criteria.

Ed B
  • 785
  • 4
  • 9
  • I am quite surprised you mention responsive in this case, because what I did there is (from my understanding) anything, but not responsive. [related SO question](http://stackoverflow.com/questions/14831530/responsive-design-vs-adaptive-design) – Num Lock Jun 03 '15 at 09:47
  • It is only responsive in the broadest sense of the term, because the device is in control of the layout. Essentially, it is receiving the whole content, and then hiding the bits it decides it doesn't want to see, in other words, 'responding' to the display size. It is far better to only load the content that is required, for instance by having a landing page which determines the client's screen resolution and then redirects to the 'real' page, passing the screen size and other information to the server, which can serve up the appropriate content. – Ed B Jun 03 '15 at 10:14