Responsive design breakpoints

[garycwood84]

I am new to Xara, and am experimenting with it as a replacement for the excellent-but-discontinued Adobe Muse.

I've created a test design that currently has 4 variants. The main design is 1200px main design, and the next smallest variant is 760px. Xara WD is automatically inserting the breakpoint between these two. So, if I preview and shrink the width of my browser down, I start to see the 760px variant once the width gets to 980px (i.e. halfway between 1200 and 760px). This results in odd behaviour, because when the browser width is between 980-1200px wide, the left and right page edges are not visible, and the page scrolls horizontally.

A better approach would be for Xara WD to always show the biggest variant that it can fit on the screen without horizontal scrolling. So, in my example, if the browser width is 1200px or greater, then I'd see the 1200px design. If the page is narrower than 1200px but greater than 760px, then I'd see the 760px variant, and so on.

Is it possible to configure Xara WD in this way?

[Egg Bramhill]

Hi Gary, got a url?

[garycwood84]

Hi Gary, got a url?

Hi Egg,

My actual site isn't yet ready to share, but here's a quick example that illustrates the problem: www.wood-net.co.uk/garywood/xara/rwdtest/master.htm

Try resizing your browser, and you'll see that you hit a point at which the page is too wide and it starts to scroll horizontally. Keep resizing, and you'll hit the breakpoint, and the site starts to fit again, and so on down through the four breakpoints I've included.

Ideally, what I'd like is for the site to always display the biggest variant possible but never to scroll horizontally.

[garycwood84]

Anyone got any ideas? If I can't get around this problem, it's likely to be a deal breaker for my using Xara Web Designer.

Thing is, I can't understand why anyone would ever want the program to behave in this way. If the browser width is smaller than the page width, then it's going to scroll horizontally, so surely the expected behaviour would then be to show the next smallest variant that fits? In other words, if I've got a variant that's 760 wide and one that's 1200 wide, then as soon as the browser window is 1199 or less pixels wide, the 760 variant should display.

Because WD puts the breakpoint halfway in between -- at 980 in this example -- there are 220 pixels (980-1199) where the page is too wide for the screen.

[Merlin_AZ]

I use 980px and 480px variants, and I think it works well.

[garycwood84]

Thanks, @Merlin_AZ.

The reason I want more than two variants is that most people today using a desktop computer will have at least a 23" screen, running a horizontal resolution of 1920. Given that your widest variant is 980px wide, that means that more than half of the viewer's available screen space is wasted.

I want a wide variant (1200px), and then narrower versions for smaller screens. The problem is that Xara WD doesn't allow the user to control the breakpoint (i.e. the point at which the browser switches to a different variant), instead automatically placing it at the mid-point between each variant size. It would be infinitely more useful if either WD allowed the user to specify the breakpoint, or at the very least, allowed the breakpoint to be set at the page size (so that the 1200px variant would only be used on browsers at least that wide).