Web Page Variants - suggested PX pixel settings for PC, Tablet and Phones

[Frolin]

In learning XARA and planning a new event web-site, I want to take advantage of the web page Variants feature, to have the site auto adjust to the Visitors browser. In this case, if the person is coming in from a desktop PC with wide screen, using a common Tablet, or visits from their SmartPhone.

I have done some testing and found, the first obvious is this is not 'device' driver but screen resolution based. Which means that many Tablets will get the "PC screen" because the Tablet has a wide screen resolution. But when turned on side (portrait) they might switch to the mid-size screen variant.

Would like to have three formats, I think best to label them Small, Medium and Large, since not really device oriented but truly screen resolution sensitive.

There are many with a basic laptop with monitors that are 1360'ish wide, many newer laptops and desktop using monitors with over 1400-1500 pixel wide screen. Yet still some with older 'monitors' still 4x3 format and 1024x768 or 1280x1024, and then the various SmartPhones with normal 5 inch screens.

My testing seems to get confusing results. And the setting in the Variants screen does not help, when you set up say 925px and it says "screens up to 1146" (so what does the 925 really do).

So the question for a site with 3 format variants... small (phone), medium (older PC or tablet), and large (normal PC or big tablet).


What is the best pixel numbers to use, for loosely these formats...
A- screens over 1300 pixels wide
B- screens just under 1300 pixels
C- screens on an Android smartphone or IPhone ( maybe under 800'ish? )


thanks,
Frolin

[Egg Bramhill]

I really don't know the answer to this question Frolin.

The only way I can possibly understand it myself is to create an example site. This one has 6 variants, just to test the outcome, they range from 1,400, 1,200, 1,000, 800, 600 & 400 px variants and are effected by the viewers device and orientation . Total overkill and in no way practical!

The ruler only means anything on a 96dpi resolution screen. It's meaningless on a higher resolution screen

http://www.parkeston.com/resolutions/

[Egg Bramhill]

There's also this page that alerts you to the view-port size. How useful this is I don't remember .... I'm getting to old! I don't even remember where I got the alert code from.

http://www.parkeston.com/variant-sizes/

[Frolin]

Egg,

Thanks, this is really good information. Especially the Variant-Sizes link tool. If you find the coding, please share, might come in handing on the event site since many visitors will have various screen resolutions.

From my testing, and having friends test from different devices, I have not found a good comfortable 3 range set of numbers, the closest maybe 1340, 900, and your 480px.

Frolin