html - What is this pattern called? Adaptive design? -


i've read lot on adaptive design. sources find @ point mention server side approach or @ least talk how makes faster loading times, because serve client needs. in contrast responsive design, deliver out 1 content adapts on client side, media queries example. fluid grids , layouts come mind.

however, thought of basic, naive , (from understanding) pretty boneheaded approach not find pattern for. because it's dull.

my idea basicly craft separate view each device you'd adaptive design, put them divs , display 1 matches device dimensions. of course delievers, depending on views, n-times data server side adaptive design would, n being number of different views. view switch on fly without reloading page example. again, idea had. understanding, adaptive design does, technical approach. is pattern still called adaptive design?

switches.css , index.html

          @media (max-width: 991px) {          .phone {              display: inline !important;          }          .tablet {              display: none !important;          }          .pc {              display: none !important;          }      }            @media (min-width: 992px) , (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 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 view small sized devices</p>          </div>          <div class="tablet">            <h1>on medium screen</h1>            <p>here goes view medium sized devices</p>          </div>          <div class="pc">            <h1>on large screen</h1>            <p>here goes view large sized devices</p>          </div>        </body>      </html>

edit: comments far! want emphasize: totally agree on being pretty definition of anti-pattern. hope question makes clear! don't consider practical thing. however, interested in called (if called @ all), or if still adaptive/responsive definition. if not, why?

to me, seems more anti-pattern, or 'responsive' design pattern.

the point of adaptive design limit amount of work browser does, , reduce amount of traffic , device.

think how work on device poor bandwidth, such mobile phone patchy signal. makes more sense, usability perspective, server decide send device based on user-agent, or other criteria.


Comments

Post a Comment