The right page sizes for proper transistions

Hello all (again :( )

Sorry might be a stupid question....

I have a 3 size site

Mobile 500px (says to 690)
Tablet 880px (says to 1000)
Main 1000px (an up)

Issue is as you may guess that pages 690 an up jumps to the the 880 size and do not fit.

No idea what to do to fix it. I did not tell it to go to 690 and change to the 880 version

ps to see the issue https://steamqualityinnovations.com/index.htm

Thanks

One last question is it possible to make xara generate html not htm files?

TimAttachment 130215

Ok I think I see the issue trying a fix

Sorry to waste anybody time on the page size html question still valid

NOPE did not fix it back to asking for help...

Tim, when you export your website you can name it index.html to load it to your hard-drive, rather than the default index.htm
Then if you go publish website to your hosts server it will upload as index.html and contain a subfolder index_html_files (not index_htm_files) as well as contact.html, about.html pages etc

Tim, would exporting your site with Scale-to-fit-Width resolve the scale issue?

Gary

Hi Gary

Scale to fit worked to an extent but the issue now is that the nav bar does not keep to the same size as the rest of the page and the main page does not keep centered as the page gets larger than the set width. It hugs the left side.

Tim

Tim,

Maybe post a XAR/WEB file here with the issue?

Gary

Hi Seems the file is to big for here

I placed it on my drive

https://drive.google.com/file/d/13-T...ew?usp=sharing

Tim,

Try changing export Scale-to-fit-Width maximum to be at least the size of your main page 1120px. I changed this from 1000px to 1200px and the scaling issue across your 3 variants looked OK on the index page.

In the version I downloaded, on the mobile variant, MobileGif.gif would not render (checked via Inspect) and it cannot find it. Looked OK in the original URL you posted.

Gary

EDIT: downloaded the gif from your site and all now looks OK.

Cheers Gary

That fixed it!

Many many appreciations!!!!

Tim

Well I thought it was fixed...

In a PC browser, its resizes great. But going from portrait to landscape on phone it does not work.

Tim

Its live on the web now.

Quote:

---

Originally Posted by TimBox

Its live on the web now.

---

"About us" is blank.

Verity is about truth, variety is about variation.

Nothing on the resources page seems to result in a downloadable resource!

Quote:

---

Originally Posted by TimBox

Well I thought it was fixed...

In a PC browser, its resizes great. But going from portrait to landscape on phone it does not work.

Tim

Its live on the web now.

---

Tim,

I changed the Scale-to-fit-Width in your shared TG copy as I advised to a maximum 1200px and published it (temporarily) here as a test: https://initiostar.co.uk/demo/TB/

Appears to work in a mobile landscape format on my mobile (though not sure why someone would do this other than for a video).

For completeness:

Attachment 130226

I can't tell what you else you may have changed after you shared the file on TG; it seems to work for me, but I've not looked at anything else on your site.

Gary

Following a link from "steamqualityinnovations". A very poor experience on my iPhone.

Attachment 130227

and from the https version..


Attachment 130228

Attachment 130229

Paul, do you get a better experience with the test https://initiostar.co.uk/demo/TB/ ?

Just from looking at the deployed site, the smaller variant has a carousel sitting off right (https://www.talkgraphics.com/attachm...7&d=1627121404) where it is cut off by Clip to page edges.
This clipping is also telling me your page width sizes are (1280, 880, 875). On the smallest variant the NavBar is far too wide.
There is no Scale to fit width applied.
You seem to have different published material in http:// & https:// presentations.

I have no interest in having to check into your design as well until you have normalised what it presently askew as indicated.

Acorn

Quote:

---

Originally Posted by Initiostar

Paul, do you get a better experience with the test https://initiostar.co.uk/demo/TB/ ?

---

Initiostar, your rendering is fully functional across Desktop browsers. I only have Android but I see two of the sizes fitting perfectly.

Acorn

Quote:

---

Originally Posted by Initiostar

Paul, do you get a better experience with the test https://initiostar.co.uk/demo/TB/ ?

---

It now works as I would expect though the product page is not fit for purpose on my iPhone - product images with exclamation marks and no information.

Attachment 130231Attachment 130232

Good job.

Quote:

---

It now works as I would expect though the product page is not fit for purpose on my iPhone - product images with exclamation marks and no information.

---

If I hit the explanation mark (I personally think this needs to be an 'i') the information pop-up's work on my iPhone Paul. It would possibly be better if if the pop-up's weren't set to automatically close though.

Quote:

---

Originally Posted by Egg Bramhill

If I hit the explanation mark (I personally think this needs to be an 'i') the information pop-up's work on my iPhone Paul. It would possibly be better if if the pop-up's weren't set to automatically close though.

---

My initial big finger stabs at the exclamation mark did nothing, but you are right - hit it in the right place and the pop-up appears.

Right it works but from a UX perspective it really is poor.

It requires that I as a user understand that hitting a small explanation mark will give me more information, but initially I thought that the explanation mark denoted an error.
It's a really small target to hit - way smaller than is good mobile practice.

Finally.. THERE IS NO NEED TO HIDE THAT INFO IN A POPUP.

Put the info under the picture so only scrolling is required. This is why we have variants.

Egg, did you manage to download any resources?

Quote:

---

It requires that I as a user understand that hitting a small explanation mark will give me more information, but initially I thought that the explanation mark denoted an error.

---

Agreed Paul. That's why I suggested an 'i' as that is a more universal symbol for information.

Quote:

---

Egg, did you manage to download any resources?

---

No, but I didn't expect it too. This is a draft site posted by Gary. Not even Tims site has working links at present.

Quote:

---

Originally Posted by Egg Bramhill

Agreed Paul. That's why I suggested an 'i' as that is a more universal symbol for information.



No, but I didn't expect it too. This is a draft site posted by Gary. Not even Tims site has working links at present.

---

I agree that "i" is clearer. If there was an insistence that a (unnecessary) pop is used it would be clearer but the whole of the graphic area should be the hit target.

As far as using top-level domains for testing, I am going to say that is also bad practice. Always use a sub-directory - call it TEST or whatever and host your test sites there. Sites in development sitting on a top-level domain is never a good look. The visitor to a top-level domain for a business expects a completed site.

Quote:

---

Originally Posted by pauland

As far as using top-level domains for testing, I am going to say that is also bad practice. Always use a sub-directory - call it TEST or whatever and host your test sites there. Sites in development sitting on a top-level domain is never a good look. The visitor to a top-level domain for a business expects a completed site.

---

+1

Acorn

I think I'm missing the point here. Gary's draft site resides at "https://initiostar.co.uk" under a subdirectory "/demo" with a further subdirectory "/TB/"

Right or wrong?

Quote:

---

Originally Posted by Egg Bramhill

I think I'm missing the point here. Gary's draft site resides at "https://initiostar.co.uk" under a subdirectory "/demo" with a further subdirectory "/TB/"

Right or wrong?

---

Follow the link in the first post..

So Tims site as a draft is a nono. Garys draft is fine. Correct? ;-)

Quote:

---

Originally Posted by Egg Bramhill

So Tim's site as a draft is a no-no. Gary's draft is fine. Correct? ;-)

---

Not sure where we are headed here: Tim (OP) explained he had 3 variants; with Scale-to-fit-Width he had render issues with a main variant page size of 1120px and a maximum StfW of 1000px. This will not work! I simply pointed out the maximum cannot AFAIK be logically less than the largest page width - suggested maximum of 1200px and it worked.

I cannot see any difference now between https://steamqualityinnovations.com/index.htm and the demo/test I created to check the StfW issue was resolved - https://initiostar.co.uk/demo/TB/

There are other issues for the OP to sort for sure; true it would have been better to resolve these before the site was published and where necessary to temporarily restrict the menu to those pages that are complete.

We would likely all come up with a different design; I have simply tried to address the specific issue based on the XAR the OP provided.

Gary

Quote:

---

Originally Posted by Egg Bramhill

So Tims site as a draft is a nono. Garys draft is fine. Correct? ;-)

---

Err.. no

I'm not sure where we are going with this, either.

Tim I think you have a few pointers going forward and I wish you all the best with it.

Quote:

---

As far as using top-level domains for testing, I am going to say that is also bad practice. Always use a sub-directory - call it TEST or whatever and host your test sites there. Sites in development sitting on a top-level domain is never a good look. The visitor to a top-level domain for a business expects a completed site.

---

Quote:

---

Err.. no

---

Things are getting very muddied here.
So we have two sites, Tims original which points to his top level domain is stated as being bad practice and I'd agree
The second is Gary's (Initiostar) draft site in a subdirectory of a subdirectory which I thinks fine.

So what is it?

Quote:

---

Originally Posted by Egg Bramhill

Things are getting very muddied here.
So we have two sites, Tims original which points to his top level domain is stated as being bad practice and I'd agree
The second is Gary's (Initiostar) draft site in a subdirectory of a subdirectory which I thinks fine.

So what is it?

---

Gary's site solved the issue that Tim first mentioned. Good job.

As you say, top level domain as a test site -no, no, no.

I then went on to mention things I had found an issue. Some of the things which I mentioned were because the site is incomplete, but my mindset was that this was a finished site with an issue (otherwise why was it "live"?).

Forgetting the empty pages..

We had a discussion about the product page info - which is a very poor experience on my iPhone.
- Exclamation marks made me think there was an error
- The buttons for more info are tiny and hard to hit (if you use buttons in this context make the whole graphic the button)
- The pop-ups add friction to the user experience while adding the popup info below the image would allow easy access via scrolling because the necessity to click on something is gone.

I did go on to the resources page which doesn't seem to have any downloads enabled -but OK, a work in progress.

Tim you've not done anything people haven't done before so I raise the issues simply to try and make your site a better experience for the user - on mobile at least.

The temporary test site I setup has served its purpose and has now been deleted.

Gary

Thanks for the further clarification Paul. With you now.