5

I'm building a website and I'm really strugling with what width to build the thing at. I've built it at 300px so that it can go on a mobile device comfortably.

However, as I'm planning on having a lot of images/videos, it could do with being larger, lets say at 420px. But the problem is the sheer range of mobile device dimensions that exist today.

I've tested 420 on my Samsung Galaxy S4 and I'm happy with it, because the phone has a Pixel density of 441? However, my mum just got a brand new phone which only has a Pixel density of 294, so the 420px design is way too large for this.

In an ideal world you would think that screens would only get bigger, or at least try to get to a standard size, like what we used to have on desktops, but this obviously isn't the case. So are there any charts out there that can give me some sort of idea of the sizes of modern devices, specifically Mobile.

And I'm not talking about what the box says, i.e. 720 x 1280, I mean exactly what the screen is capable of displaying nicely without having to scale up or down

closed as off-topic by John Conde Sep 23 '16 at 13:54

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking for recommended external websites, tools, resources, and software are off-topic as they tend to attract opinionated answers and spam. Recommendations for software are permitted on Software Recommendations, but be sure to read their quality guidelines before posting there." – John Conde
If this question can be reworded to fit the rules in the help center, please edit the question.

4

For responsive purposes, you can use the devices resolution conventions:

enter image description here

By using these dimensions, you cover a maximum of devices.

  • Very helpful graphic. I could have used this a while ago! Cheers!! – closetnoc Sep 22 '16 at 15:37
  • Thanks. This is very helpful. Just for extra clarity, do you know where the Samsung J3 fits into this graphic? A search on google suggests that it's 720 x 1280 pixels (~294 ppi pixel density) Clearly it's not a Tablet, so where does the 720px come from vs the 294? If I have worded that correctly. – Unhappy Blogger Sep 22 '16 at 16:46
  • @FootBlogger: CSS pixels aren't the same as actual pixels… – wb9688 Sep 22 '16 at 18:56
  • Thanks @wb9688, but that doesn't really answer my question. I've just tested my site on the Samsung J3 and it looks very much like it does on the S4, just that the text is a little bit smaller – Unhappy Blogger Sep 22 '16 at 19:13
1

You will not find a resolution that will fit all or one that works far better than others, you will need to use media queries or agent sniffing to detect which phone is being used.

It is now common to see smartphones using desktop resolutions, especially when the device is in landscape. Many smart phones sold in the last few years are capable of FHD (1080p), Some now support QHD 2K (1440p) e.g Samsung Galaxy 7, and even Sony have released a 4K UHD (2160p).

You shouldn't focus on making your website one site but rather use media queries to support a wide range of devices, if this is a mobile only site, then still you need to have a flexible layout.

Getting familiar with 5 sizes:

  • (XS) Extra Small
  • (S) Small
  • (M) Medium
  • (L) Large
  • (XL) Extra Large

Bootstrap determines these sizes as:

SOURCE

// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Zurb Foundation determines these sizes as:

SOURCE

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

Both Zurb and Bootstrap frameworks are used by millions of sites worldwide, these resolutions are tested, and work very well. You shouldn't need to do research, as the people behind these have done that for you. Make your site future proof, cater using media queries.

  • 1
    No offence, but back in 2009-10 I was building what we called "future proof" websites based on the screens we had back then. Skip forward a few years and those websites don't work effectively due to mobile devices and screens, so is there such a thing as "Future Proof" anymore? Bottom line is, I've built a site at 320px and it works on mobile, and actually looks good on desktop, but it's ability to display good video and photo gallery means I'd rather it be a little bigger. So I just want to know the next best size up from 320 that will work. Preferably, 420px – Unhappy Blogger Sep 22 '16 at 18:31
  • No offence taken and I hope you don't take offence but you sound like a old dog who can't learn new tricks. You should stop thinking about 'A' resolution and start thinking 'Resolution Range'. Media queries are future proof and if you incorporate media queries with max-width: rather than fixed width then your website will be future proof. Obviously, this isn't a forever thing, but it will last a hell of lot longer than using fixed. – Simon Hayter Sep 22 '16 at 18:45
  • I am capable of learning new tricks, and I've built responsive and mobile sites, but I'm at a point where I just can't be bothered catering for all the constant changes – Unhappy Blogger Sep 22 '16 at 18:48
  • Then have a website that works on a small portion of mobiles. You will not find a resolution to FIT all. – Simon Hayter Sep 22 '16 at 18:49
  • Meaning what exactly? 320px, or 420px? – Unhappy Blogger Sep 22 '16 at 18:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.