Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default 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.?

  2. #2
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Scale to Fit Width

    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.

  3. #3
    Join Date
    Sep 2000
    Location
    Bracknell, UK
    Posts
    8,659

    Default Re: Scale to Fit Width

    Quote Originally Posted by gcellison View Post
    ... the entire page just grows and shrinks, as if it were under a magnifying glass.
    That's what scaling is.

    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.

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

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

  4. #4
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Scale to Fit Width

    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.

  5. #5
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Scale to Fit Width

    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.

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,743

    Default Re: Scale to Fit Width

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Scale to Fit Width

    Quote Originally Posted by Acorn View Post
    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
    Click image for larger version. 

Name:	Captain Kirk.jpg 
Views:	89 
Size:	12.7 KB 
ID:	125800

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,743

    Default Re: Scale to Fit Width

    Quote Originally Posted by Chris M View Post
    Click image for larger version. 

Name:	Captain Kirk.jpg 
Views:	89 
Size:	12.7 KB 
ID:	125800
    The actual "black magic".

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •