Scale to Fit Width

In a recent update to WDP, a new feature was introduced, named Scale to Fit Width. For anyone who didn’t notice it, if the feature is activated, the entire website scales up and down for different browser sizes, so that it always fits horizontally into the space available. Though it doesn’t replace using RWD variants, it can reduce the number of variants needed, and it is perhaps one step closer in giving Xara websites a more authentically “responsive” feel. It looks worth considering.

I wanted to ask if anybody has experimented with this feature and perhaps incorporated it into their websites; and if so, how pleased they are with the results.

And a second question: Something I noticed is that the entire page just grows and shrinks, as if it were under a magnifying glass. For example, the text doesn’t stay the same size and move around with respect to other elements. Rather, it passes through a range of font sizes that are non-integers. Does anyone know how this is accomplished… or more precisely, whether this is done completely internally without additional coding (other than the obvious coding associated with activating the feature)? My underlying concern is if it might affect efficiency, and as a result, how the site would be rated by search engines?

Thanks.

Edit: For anyone who has used the feature, did you notice a difference in the clarity of images and text when the page is shown at unusual widths? Blurriness, etc.?

I can't answer all your questions, but here's my take on a few of them:

I am now making my 'Main' width at 1280px with a 30px border for text and a 50px border for any images with pop-up or links. This allows a space to scroll with your thumb on a tablet. I still use 480px for the mobile variant.

When viewed on a tablet/netbook the pages look just as sharp and neat even with the MS default 120% zoom on the smaller devices. If you want to see a site made in Xara with Scale to Fit...here's one I did earlier. https://lukemumby.com.au/

As to the technical 'how is it done', I can only assume black magic.

Quote:

---

Originally Posted by gcellison

... the entire page just grows and shrinks, as if it were under a magnifying glass.

---

That's what scaling is.

Quote:

---

the text doesn’t stay the same size and move around with respect to other elements.

---

Xara lays out text as per your original design, one line at a time. Responsive sites take a different approach - the text layout is adjusted according to the size of the container that it sits in.

Xara as WYSIWYG program delivers your design faithfully matching it on the page, it won't re-flow text in the same way that responsive designs do.

Quote:

---

..Rather, it passes through a range of font sizes that are non-integers. Does anyone know how this is accomplished… or more precisely, whether this is done completely internally without additional coding (other than the obvious coding associated with activating the feature)? My underlying concern is if it might affect efficiency, and as a result, how the site would be rated by search engines?

---

I haven't looked, but I suspect they just scale the outer container for the page. I don't see why that would have any effect on SEO or search engines.

Quote:

---

..the clarity of images and text when the page is shown at unusual widths? Blurriness, etc.?

---

If you spread something across different numbers of pixels, the clarity is going to be compromised a little for some settings.

Thanks, Chris M.

First, I congratulate you on the page. Just from the visual perspective, it is really impressive.

Scaling the browser to different widths, I can see that the clarity doesn’t seem to be compromised. That was one of my concerns. I really appreciate your input.

Thanks for the response, Pauland.

My apologies if I gave too much description. As I couldn’t find any reference to Scale to Fit Width in the forum, I wasn’t sure if others were using it, or perhaps were even familiar with it. I have noticed as well that while some members of TalkGraphics are quite knowledgeable, others are novices. Thus, my attempt to be thorough.

As far as my concern for search engines, perhaps my question was not clear. In recent times, Google has changed its algorithms for determining how sites are treated, i.e., ranked. When they perceive that a site is not optimized in any way, Google will punish the site. This can be anything from images to coding. So, my question was directed more to whether Google, in particular, and perhaps others who might be following suit, would find the mechanism of the Scale to Fit Width feature a detriment. If it’s merely a container, as you suggest, it will probably not have an impact, as you suggest.

Fonts today can have units that automatically scale to the browser's width/height: https://www.w3schools.com/cssref/css_units.asp and vw & vh, for example.
As the browser is doing the work, there is no real impact for modern machines.

Fit to width is using a CSS 2D Transform - transform: scale(); method. something like document.getElementsByTagName("html")[0].style.transform = "scale("1.23457")";, where the number is calculated according to the bounds you set and the current viewport width.

Acorn

Quote:

---

Originally Posted by Acorn

Fit to width is using a CSS 2D Transform - transform: scale(); method. something like document.getElementsByTagName("html")[0].style.transform = "scale("1.23457")";, where the number is calculated according to the bounds you set and the current viewport width.

Acorn

---

Attachment 125800

Quote:

---

Originally Posted by Chris M

Attachment 125800

---

The actual "black magic".

Acorn