Flux Web Design Layout (FWD) & Zoom Web Design Layout (ZWD)

Adaptive Flux & Adaptive Zoom



What Is Adaptive Flux & Zoom Design?


Adaptive Web Design (AWD)  uses  multiple  design  layout  and  serves  the best layout for the device. 
A adaptive web page server works to detect the screen size when a request is sent to th Web server, and Server-side scripting detects what appropriate layout to serve the user.

Adaptive  Zoom:   is to scale the page  from a  smaller  canvas.

Adaptive  Flux  Zoom: is to scale a page from a midpoint size fluctuating the size in either direction

Enhanced  Flux Zoom:  also changes  the page  design  when  switched to a landscape  view. 




We recommend this type of layout for adaptive web design only, or when a portion of your page needs to maintain the design layout without pushing elements down the screen



Benifits?


The benefits are mind boggling, first you are released from the linear grid layout of responsive, yet the page acts in a responsive fashion, you have full use layers found in every design  program worth using,

Concept?

Maintains perspective by scaling height and width when using absolute position of all block level objects. Targeting the break points of the mobile viewport screen  size and  adjusting the scale of the top block level object.  This works inside a responsive templates also.


Video Example

Many  developers see this video  and say that is Responsvie, its  not Responsvie  Web Design, but it is  responsive.  The responsive  nature is  set at the top level  block object and takes the page of the linear grid  model onto  the  XYZ chords  .   allowing for  layers based editing  found  in all  major design  programs,  while   responding in a responsive fashion.






Formula & Code

This is  a example  of a block level object  450px at normal scale,  being zoomed out to  359 px .


Devide the  New Width  of the  object by the Original Width.


359 / 450 = .797


CSS Transform the block level New Scale=  by .797

With our program we have a spacer for the height ,  I do not see the  need for  a spacer  under  normal conditions.
In this example the spacer is sized by, Original Width X  Scaled New Scale.

If using  a spacer the height  would  be set by Original Height multiplied by New Scale.


450  x .797 = 358.65  px


@media only screen  and (min-width: 359px) and (max-width: 374px) {
.FluxResponsiveCanvasMid {
    -ms-transform: scale(.797);
    -ms-transform-origin: 0 0;
    -moz-transform: scale(.797);
    -moz-transform-origin: 0 0;
    -o-transform: scale(.797);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(.797);
    -webkit-transform-origin: 0 0;
    transform: scale(.797);
    transform-origin: 0 0;
    display: block;
}

#MidFluxMobileSpacer359 {

       display: block;
}



“Z-index” and absolute “position” properties are available, it allows for overlays and transparencies to work correctly.


What is Enhanced  Flux Design
Enhanced Flux design is  a  content system  that is able  to change  designs when resized  from landscape to  portait, 

We will be publishing the example library on Jan 1, for targeting device screen widths of known devices,  70kb with Javascript assist, for scalling responsive to all sizes.  It works without javascript but targeted to device screen widths by CSS.





copyright@2023 plugnedit.All rights reserved