-
2020 Screen Resolution - desktop vs tablet vs phone
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
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
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.
-
2 Attachment(s)
Re: 2020 Screen Resolution - desktop vs tablet vs phone
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 :-O
https://w3codemasters.in/most-common...n-resolutions/
..but this site shows half that amount....
https://gs.statcounter.com/screen-resolution-stats
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
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
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
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
Apologies Acorn, you are correct - should have said 2nd most used.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
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.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
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.
Thanks for the clarification Pauland
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Folks, thanks for replies... I guess, as received some confusing off-site stats and graphs, and discussion about view ports... but not direct answers to what I asked.
I agree, there are odd stats for phones in 2020, but remember a phone is still a small screen to view stuff on, in my opinion.
But as my inquiries, what resolutions (per the Xara Variant screen setting) are (you) using here in 2020 ?
And, are people building for two or three variants still in 2020 (what with tablets often up to desktop screen specs) ?
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
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 :D
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
Chris M
I wrote that nearly a month ago. Just before I turned invisible :D
Who just said that?
Acorn
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
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.
-
1 Attachment(s)
Re: 2020 Screen Resolution - desktop vs tablet vs phone
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.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Following on from that, this is where 'Scale to Width' comes to the rescue. Here's a mock-up of part of your site using 'Scale to Width'. Notice regardless of the visitors browser size it accomadates the browser width to fit the content, so no horizontal scroll bars and no reason for the visitor to resize their window to fit the content ;)
LINK
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
Egg Bramhill
Following on from that, this is where 'Scale to Width' comes to the rescue. Here's a mock-up of part of your site using 'Scale to Width'. Notice regardless of the visitors browser size it accomadates the browser width to fit the content, so no horizontal scroll bars and no reason for the visitor to resize their window to fit the content ;)
LINK
Great job with that. A big improvement.
For a moment I thought it was a responsive site!
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
All praise to scale to width then =D>
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Egg I have taken your suggestion and did the fit to screen and the slider and footer is cut off now to the width of 1130 which I have specified.
See link here
Also as I had explained in other thread with fit to screen, the mobile version loads to the left side and then when fully loaded expands to cover the whole page.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
behzad
All praise to scale to width then =D>
+1
I find it definitely helps.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Yes Bezhad that's far better. As Paul states it's more like but in my opinion better than a responsive site. I'll have a look at the other thread mentioned.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
behzad
Egg I have taken your suggestion and did the fit to screen and the slider and footer is cut off now to the width of 1130 which I have specified.
See link
here
Also as I had explained in other thread with fit to screen, the mobile version loads to the left side and then when fully loaded expands to cover the whole page.
The magenta background at max size is rather lively! ;) But I think the resizing works perfectly.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Oh LOL, I did that so I can see if there is any items on that area that may be producing the issue. It should be white, but like I have mentioned the stupid image slider by xara gets cut off with the feature of fit to screen.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
960px and 460px for me. I do not use the scale to fit option as yet. I need to experiment more with this function.
W
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
@bwood me too. I think scarel to fit was made when using a large monitor or tv. For what I cater, like you my clients use a regular monitor and 1130 suffices. For my next site I might use 480 for mobile, if not I will stick with 700.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Have tested and played with the 'Scale to Fit Width' option some with mixed results and issues.
Going to Web Page Properties, Website, Web Export Options, I could not select 'Scale to Fit Screen' unless I first enabled the 'Supersite' option.
When I did this, the site seemed to auto fit on mobile screens, but the Navigation tabs to go form page to page did not respond.
Found the 'Scale to Fit Width' option would do other odd things.
The 'Help' pages in Xara seem to be written in Tech English and not layman English, at times using words and steps that don't match screen wording, so...
My goal is to have a desktop format and a single general mobile version, and per your response maybe I misunderstand the use.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
@ Florin: Perhaps it would help if these 'odd things' were explained.
@ Behzad:
Quote:
I think scarel to fit was made when using a large monitor or tv.
Why do you say that, it works very well on scaling website down to fit any visitors browser size?
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Egg,
Whose 'Florin' ? ha ha
Maybe I missed some options in my tests to use, Scale to Fit, missed other things needed for it to work.
From reading, it is tad confusion on if the site size 'Variation' is still needed or not.
Am wanting to provide standard big screen looks for desktop/laptop users, and a similar screen for Tablets, but also options for those on a smartphone.
So maybe can clarify... A - is a variation still required for smaller screens, tablet and or phones ?
B - steps to enable the 'scale to fit' other than go click the single box to enable ?
Frolin
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Whoops, sorry about that Frolin but it only matches up to who's Egge ....
Quote:
Egge,
I am happy to look at RomanCart again.
I'll get back later.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
For the new iphone, do we still use 480 for mobile variant?
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Egg, thought maybe the 'e' would have you notice my name spelling was off - ha.
Thanks for your replies and options, does help and is appreciated.
Frolin
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
behzad
For the new iphone, do we still use 480 for mobile variant?
I've been using 1200px and 600px for about a year now - no problems so far....
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
letsgofishing
I've been using 1200px and 600px for about a year now - no problems so far....
Would you mind sharing a link of your site ?
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
behzad
Would you mind sharing a link of your site ?
I've been reading stats on user devices - for the site below 82% of visitors use "hi res" smartphones and tablets.
Did this one at 1280 and 800
http://www.34south.biz
Here's one of mine done about 6 months ago
http://www.turnedwoodenbowls.co.za
-
1 Attachment(s)
Re: 2020 Screen Resolution - desktop vs tablet vs phone
LGF om visiting your site 34south.biz i get the following:
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
Egg Bramhill
LGF om visiting your site 34south.biz i get the following:
Really weird Egg! Never ever seen that before or been reported from anyone.
So your browser guard doesn't like the .biz???
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
I've no idea LGF. Perhaps other members can report on their experience visiting this site?
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Egg is using Malwarebytes and it's throwing a hissy because the 34south site doesn't have an SSL certificate. It isn't the .biz domain, it's the lack of SSL.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
Chris M
Egg is using Malwarebytes and it's throwing a hissy because the 34south site doesn't have an SSL certificate. It isn't the .biz domain, it's the lack of SSL.
OK - thanks for that Chris - will get their webmaster to get one.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
I don't think that's the case Chris. I visit many non ssl sites without issue. As an example LGF's second link http://www.turnedwoodenbowls.co.za is also a non ssl which loads no issue.
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Looked a bit further and I found:
Quote:
TLD
Is short for Top Level Domain. This is the right hand part of a domain name. Examples are .com, .gov, and . info. In the hierarchical structure of the
DNS system these are at the highest level, hence the name. A complete
list of valid TLDs can be found at the ICANN.org site.
However .biz is on this list so I don't know why Malwarebytes is kicking up.
Quote:
BIZ domains are used for the
business and computers category. Many registrants are
business leaders of small companies with 59% being President, CEO, or Owner.
Sample .
biz websites include:
www.mqm.
biz,
www.billboard.
biz,
www.badtothebone.
biz,
www.cmic.
biz, and others!
Malwarebytes blocks all of the above domains as well. Go figure? Can anyone else using Malwarebytes confirm this?
-
Re: 2020 Screen Resolution - desktop vs tablet vs phone
Quote:
Originally Posted by
Egg Bramhill
I don't think that's the case Chris. I visit many non ssl sites without issue. As an example LGF's second link
http://www.turnedwoodenbowls.co.za is also a non ssl which loads no issue.
You're right. I simply added the https:// to both sites and the 34south still returned a 'Not Secure' whereas turnedwoodenbowls didn't. I put 2+2 together and came up with something that was obviously not 4.