Mobile Device – Screen Size Dimensions

[nathan]

I am looking for any input on screen size dimensions.

I opened photoshop to start working on an (ANDROID) mobile version of a site and I got a slew of resolutions …

I went online to samsung .com to get the specs which were listed as 1920 x 1080 (this happens to be the size of my desktop monitors) so this cant be right …

any input on android dimensions or if anyone knows about a list of different screen resolutions that would be great …

thanks

[Paulie_D]

I went online to samsung .com to get the specs which were listed as 1920 x 1080

Without seeing what the actual device is it’s hard to comment but the response you will get most often around here is…don’t worry about px dimensions.

A responsive site only requires breakpoints (I assume that’s why you are asking) when the design actual breaks.

[nathan]

yea … the mobile site is geared towards the galaxy S4 model as the base model

[Paulie_D]

Yeah…I think we’re getting into a pixel isn't a pixel thing again.

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

I do know what web developers are interested in, however. They need CSS pixels. That is, the “pixels” that are used in CSS declarations such as width: 300px or font-size: 14px.

These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.

[nathan]

in my old Galaxy S3 I could get both the pixel dimensions and the screen resolution … but im unable to locate the pixel dimensions …

I did find this … but i dont know how accurate these dimensions are …

http://viewportsizes.com/?filter=

[nathan]

I read through the article you presented me with … I understand what is being said … what im looking for is the actual dimensions that we would use as developers … since I am not in a browser right now … I cant really use media queries :(

does anyone know the pixel dimensions of a galaxy S4 phone ???

[__]

does anyone know the pixel dimensions of a galaxy S4 phone ???

Yes — you do. You included them in your original post.
You said you got this info from the manufacturer. Further, 1080p is an increasingly common resolution for 7″ (and even smaller) devices. Why do you assume that they “cant be right”?

Some other things you might want to consider to help resolve this problem:

First, while you might do mockups, wireframing, or concept art in photoshop, it is not a web design tool. It’s a graphic design tool. I know the practice persists, and if you want to (or are required to) use photoshop I don’t hold it against you. Nonetheless, you need to be aware that it is not a wholly suitable tool for web development.

Which leads to the second point: if you’re designing for the web, you’re designing for the browser. Why exclude the browser from your design process, at any stage?

Finally, the dimensions you need to use as a designer/developer aren’t the dimensions of the screen. They’re the dimensions of the design.

So an S4 is 1080p — that doesn’t mean that your site’s layout should change at 1080p. Your site’s layout should change wherever it looks good changing. That might be at 800px or 1100px… either way, it will look good on a 1080p screen.

There are far too many screen sizes to consider only designing for one of them (and likewise, designing for all of them individually is impractical as well). In many cases,* there’s no reason that you can’t serve every browser the same, responsive site. And even if you do make a separate mobile site, it still needs to be responsive.

* not long ago, I would have said “there’s never a reason,” but then I had a lengthy discussion with @Joe_Temp. In any case, I do understand that project requirements might demand a dedicated mobile site, regardless of anyone’s opinion on the matter.
So, that’s okay. : )

[nixnerd]

Everything @traq said is on point. The ONLY reason I’ll test on various devices is to see how the default browser handles things. I literally don’t even care what screen the screen resolution is. Sure, there are some considerations for high pixel density devices… but that’s really simple to work with. As far as tailoring a site to every device out there… it’s just not practical.

Do what the man said and tailor your breakpoints to your design… not devices.

If I were to build a device lab, I’d have one phone and one tablet for each OS. That’s it.

not long ago, I would have said “there’s never a reason,”

Keep in mind too that this will occur in a very small minority of cases. Really, this only occurs when you’re trying to push the boundaries of design and functionality to a point that modern mobile browsers just don’t really support or handle all that well. I don’t really recommend it per se. But… letting device limitations stifle creativity and innovation is never a recipe for success.

[nathan]

NEVERMIND … this is a lost cause … ill find help some where else where people actually pay attention … DUMB ASSES

[nixnerd]

Whoa… slow your role @nathan. You came in here not knowing your ass from your elbow and the people of this community took the time to point you in the right direction. The least you could do is show some humility and NOT call us names. Go ahead and try that approach on Stack Overflow or IRC and see what happens. This is probably one of the friendliest webdev communities you’ll ever find.

[__]

what im looking for is the actual dimensions … does anyone know the pixel dimensions of a galaxy S4 phone ???

Once again, just to be clear: 1920 × 1080.
Just like you stated in your original post.

The rest of my answer was also meant to be helpful. I was offering ideas that could help you streamline your process, now or in the future. If you don’t want to, you don’t have to.

[Paulie_D]

OK…let’s assume he’s gone….I think we can assume he’s gotten the point.

I’m tempted to close this one but I think I leave it for now in the hope he might wish to return and apologize.

[f7brian]

I can kinda relate to Nathan’s frustration a little, being pretty new to responsive concepts myself, but his attitude toward people trying to help him was totally not cool. Maybe he just needs to understand why that pixel width spec he found is REAL. Here’s a link that talks about how the Galaxy s4 has a screen resolution of 441ppi as opposed to the iPhone 5’s 336ppi. And since its so big 1080p is what it really is.

http://www.gizmag.com/iphone-5-vs-galaxy-s4-comparison/27710/

I think that some of us who still need to start our design in Photoshop just need an actual canvas-size pixel point of reference to start from. I would like to graduate from this myself, but I’m just not there yet.

[Alen]

[Author]

Posts