Responsive design breakpoints

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?

Hi Gary, got a url?

Quote:

---

Originally Posted by Egg Bramhill

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.

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.

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

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

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

Quote:

---

Originally Posted by Acorn

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.

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.

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

It turns out that you can change the breakpoint. I found this guide on Magix's support site, but it's only accessible once logged in, so I'm reproducing it here in case it helps other users:

• Close Xara (Important! The steps below will not work if Xara is open)
• Open the registry by pressing the Windows key + R or Start > Run and typing "regedit". Press Enter.
• Navigate to the following key in the right-hand tree: HKEY_CURRENT_USER\Software\Xara\HTMLFilter\7.0\Mul tiWidthBreakpoint
• Right-click the key in the folder > Modify and change the value there 100 to change the percentage at which it decides which variant to show. Then click OK.
• Exit the registry by selecting File -> Exit.

This achieves exactly what I needed: each variant only shows is the browser is wide enough to show it, otherwise a smaller variant appears. Why this isn't the default behaviour is beyond me, but at least this fixes it for me!

Agreed, should at least be an accesdible option, not a registry hack.

Quote:

---

Originally Posted by sculptex

Agreed, should at least be an accesdible option, not a registry hack.

---

Agreed. I'd already raised a support request about this before I found the information above about the registry hack. I'll update the ticket to request that this feature be made available through the UI, rather than requiring users to edit the registry.

Thank you for this, but I am not sure exactly what it does or what your trying to achieve? Could you explain in detail. I did change it to 100, but what does it accomplish. An example is great!

The problem with Magix/Xara suggesting the change can be made in the Registry is: the Registry is not a thing to be poked at; you have to remember the change as republishing an earlier site with different setting might confuse.

I had a poke around the @media statements and shifted the 720px break-point to 960px (similar I think, to the 100% Registry tweak) [and 719px to 959px] with reasonable success.
I had intended to write some JavaScript to allow any break-point value but didn't get around to it.

Getting Magix/Xara to include a UI solution will be a miracle.

Acorn

I agree re Acorns suggestion that it's a forlorn hope to get Xara/Magix to include a UI solution.

Further I would question this quest to get responsive design break points from within Xara. Xara creates adaptive websites, not responsive websites. So if you achieve a break point that makes your site as you designed it to look on your iPhone10 say, it would not do the same on my iPhone5 or other releases between the two. Nor on an of the various iPad's and Android tablets/mobiles. I believe that if you're looking for this then you would be better off using software that creates responsive sites.

It's akin to the problem members run into when viewing their site on a mobile/tablet and changing between portrait & landscape serves up either the mobile or desktop site. ;)