Image and text flow in a phone variant

[bwood]

I’m finally to the finer points of making my phone variants look good, in comparison to the wider desktop variant.
I’ve learned fit to scale and fit to width and why it’s an advantage on a phone variant. I understand responsive design.

Let’s say I’ve got two columns with a image and text next to it. Such as www.northeastspca.org - I’d like those “blocks” if you will to flow one after the other in a phone variant. Each image and text are soft grouped and shared.

I recall there’s a setting somewhere, with a diagram in the on line manual on how to make this happen. I found it once, but had decided to construct my own design in the phone variant.

Thanks from all the shelter animals.

-Bill

[Acorn]

Bill, flow from one Text Area to another is enabled by dragging the White Down Arrow in a Black Circle at the bottom-right of the first Text Area to the second when in Text Tool mode.
Text Areas can be daisy-chained.

Acorn

[bwood]

Sorry Acorn. I led you astray. My question is not text flow, but responsive flow from a larger variant to a small one. Part of this is described here … https://helpandsupport.xara.com/xara...about_rwd.html.

To make a variant responsive the fit to width has to be checked. But none of the elements from a larger variant is not showing on the phone variant. Do all the images and text have to be shared? Thanks.

[Acorn]

Sorry Acorn. I led you astray. My question is not text flow, but responsive flow from a larger variant to a small one. Part of this is described here … https://helpandsupport.xara.com/xara...about_rwd.html.
To make a variant responsive the fit to width has to be checked. But none of the elements from a larger variant is not showing on the phone variant. Do all the images and text have to be shared? Thanks.

Bill, you are probably going to be disappointed because Xara does not deliver Responsive website, only Adaptive.

Adaptive websites adapt to the width of the browser at a specific points. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout.

Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be.

Xara delivers Snap designs, adaptive is Smooth.

Scale to Fit Width blurs the distinction. All that is changing is the Scale of the page, there is no Smooth adaptation only Smooth Scaling, until a Snap is reached.
The Snaps are the mid-points between Variant widths.

When you create a Variant, the content of Main is clone, i.e., like-for-like in the same position, despite the Variant page sizes being different.
You have to manually delete, scale, merge or resize the objects and adjust the page length to fit your design concept and to still be readable.

Before you create Variant, you can select those items to Share. Subsequent changes to these, different picture or text, in any Variant is immediately reflected in the others.
If you have established when should grow or shrink with each shape and page height change, then the layouts will be mostly right. So Xara can be shown to be Responsive but only on the design page and probably where it is coming from in your Help link.
otherwise, you will have a lot of adjusting.
Items like repeating NavBars cannot be Shared. You use Repeating within Variants, mainly.

Adaptive makes you, the designer responsible at all points to ensure the design works.
Responsive is moulding the unique object within a set of boundaries, think Object Scale to Fit Width. Both used to require the same effort but Flex make responsive easier.

Acorn

[bwood]

Many thanks @acorn. Explains everything I've wanted to know. The only question remains on the "push" function; and what is does when I create a website from scratch.

All the above is very insightful and examining responsive templates I notice everything is "pushed" in the smaller 480 variant and also in the wide screen - I'll have to experiment. Many thanks again.

-Bill

[Acorn]

Many thanks @acorn. Explains everything I've wanted to know. The only question remains on the "push" function; and what is does when I create a website from scratch.
All the above is very insightful and examining responsive templates I notice everything is "pushed" in the smaller 480 variant and also in the wide screen - I'll have to experiment. Many thanks again.
-Bill

Bill, Push ensures objects do not overlap or touch (vertically0. If set up properly, Pushes adjust the page height.

There is a skill in using Push, which Xara has munged with its Web Blocks. Xara just made the entire Web Block a page-wide vertical Push. Clean but constrained.

You should really be considering Auto-fit to Page settings for each object.

Acorn

[bwood]

Many thanks again Acorn. Well described.