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

[Acorn]

I am not a proponent of Auntie Xara knows best and I raised these issues when Variants appeared.

While you are testing, you can readily resize a PC browser window and get the manifestations.
I have suggested two breakpoints between Variants transitioning up and down and user-selectable.

As nothing became of it, I returned to separate websites with my own JavaScript to do the switching.
This is also more successful as the the payload of four Variants is not sitting in one page file and I can add or delete pages that I chose.

However, I rarely do this as most devices have a fixed viewport so incremental changes are a rare happening.

Four Variants is overkill. If I was that concerned, I might build the Main site in Xara and deliver the other content with an adaptive approach like WordPress or a lighweight CMS.

Acorn

[garycwood84]

Four Variants is overkill. If I was that concerned, I might build the Main site in Xara and deliver the other content with an adaptive approach like WordPress or a lighweight CMS.Acorn

I think the "problem" is that I'm trying to transition to Xara WD from Adobe Muse, after Adobe announced that it's discontinuing development. Muse creates truly responsive sites so that as the browser window scales, the contexts scale with it. I'm trying to replicate that within the limitations of having fixed variants. I'm pretty happy with what I've created with Xara except for these breakpoint problems that just make the site look poor if you view it at a size that's above the breakpoint and below the page size. Why anyone would want that behaviour, I've no idea. I'm afraid it means that I've started to look for an alternative package.

[behzad]

Do what i o, use Main at 1130 px and mobile at 500 px.

This way any res up to 815 is on mobile including the new iphone x. and your still getting good real-state from 1920 px screens.

[sculptex]

I know its cool to see a site automatically adjust by dragging a window, but really you should cater for common screen (full) sizes. AFAIK it jumps from 1024 to 1280 then 1366, so I'd say there's not much between 1024 and 1280 so make sure it looks good on those and don't worry if scrollbars appear on a size in between. Less is generally more in this case, try to just have two variants, three is a max and use stretch width backgrounds etc, so the background still fills the width on larger screens