Header Logo and company name only partially displayed in preview mode.

Hi Everyone. I'm Simon, and Iv'e been using Designer Pro X 19.0.0.64291 since May 2022. While I do love the software, it can be frustrating at times.
Often I have tried for weeks to be able to do something, only to find out how later on the internet, or laterly here. But this time, after one week, I am stumped ! My website looks good on the pasteboard, up until I preview it. At that point the logo and company name get cut off, and only display 60% of the lower portion. I deconstructed the header piece by piece. taking a look at all the elements that go to make it up. Ive also compared it with the header from the template I used, apollo. I cannot see any difference whatsoever. Nothing I can discern is causing the problem.
I cleared browser caches, checked to see what layers all elements were on, etc. Meanwhile, I am now having to start rebuilding the website again.(all 17 pages of them...so far. In the new incarnation the headers of both pages thus far recreated are displaying perfectly. What could I have previously been doing wrong ? If I could learn what I did wrong in the first instance, then maybe I could save the first incarnation of my website. Could anyone please offer any advice ?

Simon, welcome to TalkGraphics.

The only 'apollo' template I can find is the Apollo Theme, which is a Print template. This is not a web template and as such will not have MouseOver and MouseOff layers.

If something is cut off, showing the lower part only of a header logo then the rest is probably off the page.
At some point you may have moved the Page background Rectangle up so check what the co-ordinates of the logo are.

Without seeing your original, we can only speculate.

Acorn

Hi Acorn, and thank you for your welcome message. And wow, your response was super quick ! I made a mistake when I specified the website template I am using. I am actually using the Trader themed website.This started out as an 8 page website, but is now 17 pages.

I will try to understand what you mean when you refer to moving the retangle. and will move it a little to see what effect this has.

You mentioned seeing my original. How would I go forward in sending this to you please ? The same problem manifests on all 17 pages identically. Thank you so much

Quote:

---

Originally Posted by Simon Baber

You mentioned seeing my original. How would I go forward in sending this to you please ? The same problem manifests on all 17 pages identically. Thank you so much

---

Simon

• Copy your entire design file, rename it to TG Test, or anything really. You'll have a file like TG Test.xar.
• Ensure you are working on this file and not your original:
  
  • Delete all but the first page.
  • Save TG Test.
  • Close Xara.
  
  
• In this Thread:
• Click the Reply button.
• Next, click the Go Advanced button.
• The toolbar now has a Paperclip icon, click on this.
• In the File Upload Manager, click the Add Files button.
• Pick TG Test.xar.
• Follow the instruction, click the Insert In-line button.
• Complete your Reply.
• Close the pop-up window.
• Sit back.

Acorn

Hi Acorn.

Thank you so much for taking the time to type those instructions for me. It makes me feel part of the community. And when I'm in a better position with my abilities with Xara software, I will make a point of helping others who may make enquiries.

Hopefully you now have the file, marked TG Test. I followed your instruction exactly, I think. The only thing that stumped me was after I had attached the file,as it said "click the Insert In-line button". This instruction made me think that I was attaching the same file twice. However, I followed the instructions.

The file I sent is a copy of the original, containing the problem with displaying correctly during preview mode. I did what you said and deleted all pages(16 of them), except for the first page.

Thank you again.

Simon.

Quote:

---

Originally Posted by Simon Baber

Hi Acorn.

Thank you so much for taking the time to type those instructions for me. It makes me feel part of the community. And when I'm in a better position with my abilities with Xara software, I will make a point of helping others who may make enquiries.

Hopefully you now have the file, marked TG Test. I followed your instruction exactly, I think. The only thing that stumped me was after I had attached the file,as it said "click the Insert In-line button". This instruction made me think that I was attaching the same file twice. However, I followed the instructions.

The file I sent is a copy of the original, containing the problem with displaying correctly during preview mode. I did what you said and deleted all pages(16 of them), except for the first page.

Thank you again.

Simon.

---

Simon, one of us got something wrong as there is no attachment.

Now you have your TG Test.xar, I'll take you on a trip to the dark side.

Reply again in this Thread. This time, click on the Insert image (tree) button and locate and pick your XAR file.
Despite saying it is for images, the Xar will be uploaded.

Acorn

Hi Simon & welcome to TG.

As there's been a couple of members asking how to attach a file on TG here's a video I made years ago:

VIDEO

Hi Egg Bramhill.

Thank you for your welcome message. And thank you for the video showing how to upload a file.
Iv'e watched the video twice, and will do the same again when I get back home from the hopital.
I feel confident that this time I will successfully upload my file.

@Simon, I hope your trip to hospital was all right. Some advice. Do all your exercises as advised and treat the computer as a treat and not a crutch.
Your health is far more important.

Acorn

Hi Acorn.

I went and looked at the video link thar Egg Bramhill kindly provided for me. In the video he says hit "Reply to Thread", whereas previously I hit "Reply", which is the first button under your instructional message. This time I will follow the video instuctions as set out. Hopefully this will send the website page....I'm crossing my fingers !
Simon.

Quote:

---

Originally Posted by Simon Baber

Hi Acorn.
I went and looked at the video link thar Egg Bramhill kindly provided for me. In the video he says hit "Reply to Thread", whereas previously I hit "Reply", which is the first button under your instructional message. This time I will follow the video instuctions as set out. Hopefully this will send the website page....I'm crossing my fingers !
Simon.

---

Simon, I typed up from memory so sorry I misled you.

Your problem is exactly as i guessed in my first Reply.

You moved the Page background rounded Black Rectangle from origin.
It shows as:

Attachment 134499
The two negative values should be (0, 0).
You also should never work with the Page background unlocked, as you can move it in error.

In passing, your landing page is far too wordy, few will read; Google will flag the font size as too small. You have a fair few typos to correct. Purple prose on purple will flag up poorly in Google's Accessibility.

You could improve the site's download and performance by not using a Shadow on the Page background Rectangle.
Your biggest gain will be to tick Web Properties > Website > Other > Shapes as SVG. This alone gives a three time speed gain on loading the page. Useful if your other 16 pages are similar.

Acorn

That's the way to do it. Success!

Quote:

---

Originally Posted by Egg Bramhill

That's the way to do it. Success!

---

The Fat Lady's still got to sing.

Acorn, a deconditioned older adult

Quote:

---

Originally Posted by Acorn

Your biggest gain will be to tick Web Properties > Website > Other > Shapes as SVG. This alone gives a three time speed gain on loading the page. Useful if your other 16 pages are similar.

Acorn

---

That’s a vital tip Acorn. I’m going to try it on melfortmuseum.org. Too many pics and notoriously slow.
Thank You.
Bill

Quote:

---

Originally Posted by bwood

That’s a vital tip Acorn. I’m going to try it on melfortmuseum.org. Too many pics and notoriously slow.
Thank You. Bill

---

Bill, you have to be a lot more forensic in your analysis. Look at the total site download: https://www.melfortmuseum.org/index_...s/xr_files.txt.

Take your NavBar:

• It appears on 19 pages and has 22 images @ ~1k each. Although duplicated, each has its own filename so just your Navbar is half a megabyte of wasteful cache storage and downloads. You could rework as Text & CSS into a few kBs.
• It should be Sticky.

Your index page:

• Has two videos. This is a killer for YT downloads and delays. Hide until needed. At least, set the IFRAMEs to lazy loading.
• Similar for the Map.
• These two above are effectively loading three separate HTML pages before your can complete.
• Pop-up photos create two images, the thumb & the pop-up. I would use a image filenamed large image on its own pop-up layer and a smaller copy on the MouseOff layer. The trick is to turn the thumb into a Placeholder with an <img> tag for the image filename. Add a link to the pop-up and you only use one image, instead of two. You also avoid the need for invoking the HighSlideJS library.

Buttons and bottom logo:

• Best served as SVG and not images.
• Logo should be Sticky top, SVG and used as your site favicon.

Other pages:

• Similar treatments...

You'll probably half your downloads and speed things up.

Acorn

Totally agree with Acorn on this. I've done a mock up of your home page and as it's the landing page I've removed the google-map and the two videos to their own pages. Some other suggestions:

Don't use Xara's navbar, they create hurendous amount of images with to many requests back and forth to the server. My example home page has 19 images in total. My links only link to #.

Get in the habit of naming your images, it stops Xara continuously renumbering image names, gives a meaningful alt title etc and if you do a 'Veiw Image Info' you can see what your images are named and it's far easier to find and view than looking at image2158.jpg. Also good for accessability viewers.

Give your website & webpages meaningful names, not just index.html

Fill in website & web page descriptions, it helps with seo and looks better on web search pages..

Use a favicon. The one I've used isn't great but I included it just to show the difference.

Quote:

---

You'll probably half your downloads and speed things up.

---

In fact better than that. See attachment showing speeds from Page Speeds Insights of your site and my demo site.

The video loadings on the mock up pages take just under 2 seconds for desktop and nearly 8 seconds for a mobile. Simarly the google map takes 1 sec on desktop & 4 secs on a mobile so including them all in your own home page can lead to a 18 second page render. There are further methods of speeding up the youtube video loading but I haven't looked at this.

MOCKUP SITE

Attachment 134532

@Egg, thank you for validating my suggestions with a demo file and website.
I hadn't even considered the SEO side as it doesn't impact performance but it is one of the other facets to getting a site spot on.

The techniques we are both describing are: image filenaming, favicon generation, page pruning, lazy loading and Xara NavBar avoidance.

Acorn

Thanks Acorn and Egg for the suggestions. I am thinking of reworking the nav bar for sure. The Yt videos I’m already in the process of reworking.

@acorn. Regarding lazy loading. Is that a tag I put in the placeholder code?

-Bill

Quote:

---

Originally Posted by bwood

Thanks Acorn and Egg for the suggestions. I am thinking of reworking the nav bar for sure. The Yt videos I’m already in the process of reworking.
@acorn. Regarding lazy loading. Is that a tag I put in the placeholder code?
-Bill

---

Bill, some YT LL detail: https://www.talkgraphics.com/showthr...516#post656516.

Acorn

Acorn and Egg. I continue to decide what kind if nav bar I want, and prefer a sticky up arrow to the sticky nav bar, but adding lazy loading to YT and the map offers some excellent results on desktop. Still working on mobile.
Also the addition of meta data, and favicon gives me some great results.
Thanks for the push

Hi Acorn.

I've had that file uploaded for a week or so now. And I was wondering if you have had the time to take a look at it to see why it is not previewing properly ?
I have already looked at why it could be behaving badly, but I simply cannot understand the reason for it !

Quote:

---

Originally Posted by Simon Baber

Hi Acorn.

I've had that file uploaded for a week or so now. And I was wondering if you have had the time to take a look at it to see why it is not previewing properly ?
I have already looked at why it could be behaving badly, but I simply cannot understand the reason for it !

---

Simon, I answered when I saw your attachment in under 90 minutes in https://www.talkgraphics.com/showthr...353#post659353.

Did you miss it?

Acorn

Acorn,I'm so sorry ! I didn't see your reply, as I'm not used to how these forums work. I was expecting your reply to appear under my message to you. As it turned out, it was on another page. I really am so sorry. Im going to go read your reply now and try and get my head around it. Thank you so much.

Simon.

Hi Acorn,

I have read everything you said and will take it onboard. One thing I don't understand though is when you said "The two negative values should be (0, 0)". I don't know what this means. If I set these negative values to 0, 0, will this address my original display issue ?

As regards the font size, I stuch with the original that was in the template I used, I figured that if it was there already, then it must be right ! If not, what is the correct font size(same question for variant too)?

Also, when you said "to tick Web Properties > Website > Other > Shapes as SVG", what does this actuallt do ? I really don't know.

I have a day off work tommorrow. I will sit at my computer and try to apply what you said. Again , thank you so much.

Simon.

Quote:

---

Originally Posted by Simon Baber

Hi Acorn,
I have read everything you said and will take it onboard. One thing I don't understand though is when you said "The two negative values should be (0, 0)". I don't know what this means. If I set these negative values to 0, 0, will this address my original display issue ?
As regards the font size, I stuch with the original that was in the template I used, I figured that if it was there already, then it must be right ! If not, what is the correct font size(same question for variant too)?
Also, when you said "to tick Web Properties > Website > Other > Shapes as SVG", what does this actuallt do ? I really don't know.
I have a day off work tommorrow. I will sit at my computer and try to apply what you said. Again , thank you so much.
Simon.

---

Simon, look at the image in Post#11. The easiest way is to select the Page background Rectangle and move it to origin X: 0 & Y: 0. The lock it
Your can then select all and drag it back into the Rectangle's expanse.
If your NavBar is Repeating on all pages then for the other pages you only move the background Rectangle and then lock that and move everything but the NavBar.

Open Sans 12pt is way too small for a wordy website. I would put it at 16pt.
For the Variant, I would go from 18pt to 22pt.
You would need to changes Heading One and the other Paragraph Styles.

I'm sorry but there is no v19 SVG Support for HTML rendering. It appeared in XPro+ v21.6.
It will be in the new Xara Perpetual versions as well.

Acorn