Responsive Web Design - Design Techniques
WYSIWYG Web Builder supports multiple ways to create responsive web sites. So, what is the best way?
There is not really a 'best way, it depends on your personal (or customer's) preference. For example, do you want to have full control over the layout or do you want objects to automatically scale?
Here is an overview of the different design techniques:
Fixed / Absolute Layouts (Adaptive Web Design)
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 because 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. This design technique is also known as "Adaptive Web Design".
Flexible / Floating Layouts (Re-flow)
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.
If you already created a website in a previous version of WWB and do not want to redo all your work then adding breakpoints is probably the quickest way to make your website(s) responsive.
For websites with a lot of text, it may become difficult to maintain the pages when using 'fixed' layout because text is not always rendered the same way in different browsers. See also: http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=10&t=34318
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.
WYSIWYG Web Builder also includes a dedicated mobile web site design tools. These tools are based on jQuery Mobile.
Unfortunately jQuery Mobile has not been updated since 2014, so this method may become obsolete in the future.
You can also use layers to implement advanced layouts:
The Flex Grid is a new way of creating flexible layouts based on CSS Grid Layout. The CSS grid layout allows web developers to create complex responsive web layouts more easily and consistently across browsers.
The idea behind the Flex Grid is to divide a web page into columns and rows. The columns and rows have named areas where you can drag & drop objects to. The layout can be different in breakpoints. Each grid area supports its own padding, (flexbox) alignment, border and background styling.