Navigation buttons do not zoom properly when previewing page

[techenthused73]

Hi everyone,

Brand new user to Xara Web Design 365. I have imported a web navigation bar from the online content catalogue. It looks fine in Xara but when I preview it in a browser window when I zoom in on the page the text is blurry. This does not happen for other elements on the page such as text boxes. Imported graphics/logos also don't zoom properly. What do I need to change in the setting for the navigation bar or other images.

Thanks.

[gwpriester]

Welcome to TalkGraphics

You're zooming in on the browser?

Images including navigation bars are exported as bitmaps at 96dip, and are meant to be viewed in the browser at same size. If you zoom in on a bitmap object that is 96dpi at say 200% then the resolution will be very fuzzy. Even at 125%.

That make sense?

[Egg Bramhill]

Welcome to TG tech. Navbars are exported from Xara as bitmaps. Similarly logo's & graphics are exported as graphics. By default these graphics are exported at 96dpi. You can also have Xara export them at HiRes images at 192ppi, but that's only useful if viewing on a HiRes device such as an iPad.

So when you zoom in (I assume you mean via the browser zoom feature?) these images will loose their sharpness and is only to be expected.

You could avoid this by creating your own buttons such that they retain the text as text and also use svg images for logo's etc

[Egg Bramhill]

Cross-posting & Snap Gary

[techenthused73]

Sure but when previewing in my browser I have a 3440x1440 34" monitor. I zoom in most web pages so I can fill the screen. Most web pages I view do not have blurry images or text when I zoom in. They just get larger. When I created and added text in a text box the text zoomed larger when zooming in on the page with no fuzziness.

[techenthused73]

How do you export them as 192ppi?

[Egg Bramhill]

Most web pages I view do not have blurry images or text when I zoom in.

Perhaps you can attach a screen-grab of one of these sites that don't blur?

[gwpriester]

In Web Properties, Check [X] Retina. I am not sure if this will work but it is worth a try. Retina is usually for tablets and mobile devices.

[Acorn]

The downfall of Xara's approach to a Navigation Bar is all the buttons end up as images.
I use CCS as this transforms fonts and boxes without introducing images needlessly.

Play with http://www.cssportal.com/css3-menu-generator/ and zoom to 500% in Chrome or 10000% in Edge to see what I mean.

Acorn

[techenthused73]

https://www.irs.gov/