Which layout mode should I choose?

Frequently Asked Questions about WYSIWYG Web Builder
Locked
User avatar
Pablo
 
Posts: 22472
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Which layout mode should I choose?

Post by Pablo »

WYSIWYG Web Builder supports several layout modes.

FIXED/ABSOLUTE LAYOUT
By default layouts are fixed using absolute positions. This means that you can place objects anywhere you like, so you have complete control over the layout. The downside of this layout mode is that it will be harder to make the page responsive because the layout will only look perfect on the screen size it was designed for.
And since there is no 'structure' in the layout (objects can be placed anywhere in random order), there is no way for the browser to automatically re-position and/or scale the content based on the view port.
So to make sure the page content looks good on different viewports (screen sizes), you will have to implement breakpoints (different layout variations) of the same page.

Related tutorials:
http://wysiwygwebbuilder.com/responsivewebdesign.html
http://wysiwygwebbuilder.com/rwd_basics.html

Related FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817

Note:
If you have a lot of text then it may become difficult to maintain the layout, because text is not always render the same way in different browsers.
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=34318


FLEXIBLE/FLOATING LAYOUT
You can implement flexible layouts by using Layout Grids and/or Flexbox. This make it possible to create Bootstrap-like layouts. When using layout grids, the layout is controlled by the grids. Objects will automatically resize based on the available space in the viewport and the grid column size.
The downside of using layout grids is that you have less control over the layout. All objects will be positioned and resized automatically. So you are forced into a structured layout.

Related tutorials:
http://www.wysiwygwebbuilder.com/layoutgrid_part1.html
http://www.wysiwygwebbuilder.com/layoutgrid_part2.html
http://www.wysiwygwebbuilder.com/layout ... anced.html
http://www.wysiwygwebbuilder.com/flexbox.html

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=71391

Note:
If your pages have a lot of text then this is probably the best option because the text will be flexible, so it will automatically adjust to the available space.


Mobile design
WYSIWYG Web Builder also includes a dedicated mobile web site design tools. These tools are based on jQuery Mobile.
http://wysiwygwebbuilder.com/mobilewebdesign.html
Unfortunately jQuery Mobile has not been updated since 2014, so this method may become obsolete in the future.


Using Layers
You can also use layers to implement advanced layouts:
http://wysiwygwebbuilder.com/using_layers.html
http://wysiwygwebbuilder.com/anchored_layers.html
http://wysiwygwebbuilder.com/floating_layers.html
http://wysiwygwebbuilder.com/morelayers.html
Locked