2020 Screen Resolution - desktop vs tablet vs phone

[Frolin]

Greetings,

Wondering for those designing for both Desktop and Mobile devices, how many are building for two platforms, and how many for three ?
...meaning, designing for a desktop monitor and for smaller mobile, or designing for desktop, tablet, and mobile ?

And what resolutions you are using for your two, or three, page designs ?


I searched the forum, did not find much in recent years except one post, but found several from over 5-7 years ago, so thus thought maybe just ask.

thanks in advance,
Frolin

[Chris M]

Since Xara introduced the 'Scale to fit Width' option (v16 or 17?) I'm finding that the default 960px scale to width 1280px coupled with a single variant of 480px is more than sufficient.

I have pondered over making the 960 a bit bigger, say 1100 as the stretch to 1280 looks fine in FireFox and Opera, but may be a tad large in the new Edge. Having said that, I have 3 sites on 960 and nobody has mentioned it. Sleeping dogs and all that.

[letsgofishing]

Makes for some interesting reading...I find it hard to believe that in 2020 most pf the cell phones out there have a 360x640 resolution

https://w3codemasters.in/most-common...n-resolutions/

..but this site shows half that amount....

https://gs.statcounter.com/screen-resolution-stats

[Acorn]

LGF, you are not working with the numbers properly. The Other(s) could all be ultra hires. The range could be 13 to 50 or 22 to 44 percent.
To be of any use, you need another plot of purchase power to determine who to target.

Acorn

[letsgofishing]

LGF, you are not working with the numbers properly. The Other(s) could all be ultra hires. The range could be 13 to 50 or 22 to 44 percent.
To be of any use, you need another plot of purchase power to determine who to target.

Acorn

Apologies Acorn, you are correct - should have said 2nd most used.

[pauland]

LGF

The web link says: "We have compiled a list of the viewport widths" then goes on to talk about screen resolution, but they are entirely two different things.

When designing for a web page it's the viewport width that matters not the screen resolution.

The actual screen resolution of a device may be 1x, 2x, 2.5x, 3x.. etc the viewport width.

My iPhone has a viewport size of 320x568 but the physical screen resolution is 640x1136.

You design for 320x568 not 640x1136.

The only reason people get away with the multiple sizes in Xara is because of scaling.

Older cheaper phones may have a screen resolution that matches the viewport.

Always design for viewport sizes not physical resolution.

[Chris M]

Since Xara introduced the 'Scale to fit Width' option (v16 or 17?) I'm finding that the default 960px scale to width 1280px coupled with a single variant of 480px is more than sufficient.

I have pondered over making the 960 a bit bigger, say 1100 as the stretch to 1280 looks fine in FireFox and Opera, but may be a tad large in the new Edge. Having said that, I have 3 sites on 960 and nobody has mentioned it. Sleeping dogs and all that.

I wrote that nearly a month ago. Just before I turned invisible

[Acorn]

I wrote that nearly a month ago. Just before I turned invisible

Who just said that?

Acorn

[behzad]

Here is a chart I use for mobile and tablet. (https://www.mydevice.io/) Remember some people will flip the phone or tablet therefor you have to take into account what will display at what res.
What I have been sucessful with is 700 for mobile and 1130 for desktop and tablet. I did not use the fit option in the following site.
See link


So as Chris was saying, if you do your mobile at 480, anything after 480 to 960 or if he goes to 1100 will be shown in mobile version. Which for me was not ideal, specially if they use a tablet and having the hamburger menu show up. Again you can see the chart info link I provided.
My ideal testing res. so far without any issue is 700 mobile 1130 desktop without the stretch to fit option. Just my 2cents. But now the new iphone x viewed horizontally is set to 812. I am sure the numbers will keep going up. I was told not many view wesbsites sideways on their phone. Not sure how correct that is.

[Egg Bramhill]

Behzad, the settings may be ideal for yourself but how about your visitors? My desktop has the resolution of 1680 x 1050 px. However I rarely view websites full-screen, but prefer to use a browser window of half to a third of the screen size.Why? I find on websites set to a width of over approx 1000px the text extends too wide to the exteremes of the web page which makes scanning multiple long lines of text uncomfortabe and following onto the next line difficult, often re-reading the same line or skipping the next line.

So in your example 1130px wide desktop site, when I open it in my preferred browser width size (approx 1014px wide) not all the page content is visible and the browser has the horrible horizontal scroll bar. I therefore need to resize my browser window to view all the content. Not ideal.