Whats the recommended screen resolutions of PC, Tablet and mobile

Hi,

I have been trying to get the right resolution using web variants to set the right resolution for 3 display types

The issue has been is that you set a base resolution, then xara says it will cover the range of x to x. My issue is that the range it works out is out of my control and not what I'm looking for.

So my questions is what is recommended? My issue is that menu bars are getting covered over and I'm trying to arrange the resolution to prevent that. The issue seems to be at around 800px and I cannot force the tablet range to get up to 800px.
(Might be wrong on the exact number, I'm away from my work pc at this time.)

Thanks

Tim

Quote:

---

Originally Posted by TimBox

Hi,
I have been trying to get the right resolution using web variants to set the right resolution for 3 display types
The issue has been is that you set a base resolution, then xara says it will cover the range of x to x. My issue is that the range it works out is out of my control and not what I'm looking for.
So my questions is what is recommended? My issue is that menu bars are getting covered over and I'm trying to arrange the resolution to prevent that. The issue seems to be at around 800px and I cannot force the tablet range to get up to 800px.
(Might be wrong on the exact number, I'm away from my work pc at this time.)
Thanks Tim

---

Which is why Scale to Fit Width is so useful.

Acorn

I'm an absolute novice here. I've posted just one question on this site and this is the first one that I've attempted to answer. However I believe in trying to give back help, and not to just take it, so (for what it's worth) here's a possible pointer in the right direction for you:

While trying to find out for myself what the best size to design a website is, I came across this link:
https://www.hobo-web.co.uk/best-screen-size/
It includes up-to-date information about the screen sizes that people around the world are actually using (which, I hope, might assist you in deciding what to opt for yourself when designing your site).

In particular, with regard to tablet usage, these figures are quoted there:

"Most Common Tablet Screen Resolution Sizes Worldwide

768×1024 – 51.98%
1280×800 – 7.11%
800×1280 – 5.34%
601×962 – 4.47%
600×1024 – 2.85%
1024×1366 – 1.96%"

I hope that might help but I apologise if I've simply wasted your time by telling you something that you already know.

Quote:

---

Originally Posted by Struggler

I hope that might help but I apologise if I've simply wasted your time by telling you something that you already know.

---

Not at all a waste of time. I used a similar website that gave information on the prevalence of various screen sizes in Mexico and the US (and other countries). It helped me to choose my breakpoints.

Thanks as always

I have to say that its beating me. I cannot get this right.

I think I need to go back to basics and work on this using proper design guide lines and really get to understand it all.

Cheers

Tim

PS if anyone is looking to be paid to set up a template, I need to you.

Tim, if you are only using Xara Web Designer (XWD) you are going to be limited by what Xara has included and probably excluded.
Most manage with two variants - Main 960 up to 1280px. Variant 640px.

For 960, the Variant covers up to 800 befor switching.
For 1280, it is 960.

By introducing Scale to Fit Width (STFW), which I think we have established is not part of XWD, you probably would achieve all your requirements.

If I produced a template that is set up for STFW with a Variant, could you advise what dimensions you want for Main & Variant?
We could try again to see if XWD will handle it - you just would not be unable to deselect STFW.

Acorn

Hi Acorn

I would be happy with just 2 sizes. The issue that I think is there is the site is not scaling correctly

I have a test site up http://www.steamqualityinnovations.com/index.htm

If you resize it you see the problem.

What I want to commision is a template set up to handle the transitions
Ideally it will have guidelines in a dedicated layer so I'm not forever figuring out where to aline my images etc.
Also text sizes etc etc

I'm also looking for advice on how to set up the blog so its manageable. I have a number of articles I need to add and really need some sort of index. I'm cr&p at design so need guidance.

I'm using The last version of Xara Designer Pro X


Tim

Hi Tim, here's an example site that uses only a single variant, no navbar. Notice how it scales to fit from a mobile to any tablet to a desktop (max width is set to 1200px but this can be altered to whatever max size you want)

https://parkeston.com/xara2021/stfw/

Thanks Bramhill

It does indeed scale. I have to admit that I think squishing 3 pictures aside into a mobile site will be an issue.

If it could squish to a set size then jump to a mobile format and then squish would be ideal.

Is that possible?

Thanks

Tim

Have a play with this. I only spent 20 minutes on it so don't expect a professional polish.

Default 960 with 480 variant. Stretch to width size is 1280.

>>> Attachment 129373 <<<