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
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