Knowledge Base Overview

Developing for mobile devices, like iPhone, Android or Blackberry smartphones? Wondering how do you squeeze a webpage into this darn little screen? The first time I searched for information surprisingly a lot of information was about pixels and pixels per inch, aka ppi.

While most information is true and makes sense for the visual experience (the key term here is density) I didn't really buy that we have to know and worry about about ppi in terms of web design.

I've come to the conclusion it doesn't matter. Curious? Then read on why not!

Never did, never will, never could

As web designers or web developers we don't have to worry about pixels and inches because: we never did, never will and never could to begin with. I already wrote a long article with my general thoughts about ppi.

When you designed or developed a webpage before the dawn of smartphones you never wasted a thought about how many pixels per inch the user will see. So, why in the world should we have to worry about ppi now?

What you maybe—just maybe—want to know is what kind of screen resolution the user has. You get these numbers from the statistics in Google Analytics or other counters. Now I have an interesting question: Do you really care about it and does it tell us how a user sees our page? Probably no and definitely no!

The stats tells us that a lot of users still have screens with 1280 in width and a small but still significant number has a 1024 screen. Plus a handful with 800x600—shoot them!

Down the list you suddenly see that we have visitors with a lot of weird numbers; all below 1000 pixels in either direction. Those are most likely your mobile visitors but hold your breath for another minute.

If I would visit one of your sites you would see 1920x1080. You would not see and know though, that I have dual monitors (so actually 3640x1080) with my desktop or if I surf and watch from my living room with my HDTV. You also don't know (and care) if the browser is maximized or how large it is floating around.

The screen resolution alone does not tell us how the users sees the page.

Another example I used in my other article. I bring you the giant screen in the Dallas Cowboys Stadium—apparently 2423 x 1088 pixels. That's the number you will probably see in your stats. Do you want to know the number of pixels per inch? Actually inches per pixels would be more appropriate but the answer is no.

So, do we need to know the pixels per inch for a mobile device? NO!

What do we need

I hope you are convinced now but I understand that you still have some doubts or questions about pixels and mobile devices. You are right this is not the end and we could care about something in terms of pixels.

We could have some thoughts about what our eyes are doing.

When Apple started with their Macs a long long time ago they have spend some thoughts about how to show things on their first monitors. They have been very interested in a "What you see is what you get" (WYSIWYG) feeling from their screen to print output. That's why they became so popular with the printing and graphic people. They basically thought about duplicating paper and came up with the 72ppi which for many today is a conundrum.

If anything, these 72 pixels per inch are a very pleasing density of pixels for humans sitting in front of a desktop monitor screen. On a TV screen this number can be smaller because we don't sit that close and looking at the ever bigger screens in our sport stadiums it may be even a fraction of an inch. Looking to the other side of the spectrum and our tiny smartphone the density has to be higher.

Please, please me

So we could ask: "What is the pleasing pixel number for a mobile device?" If we look at an iPod or iPhone then Apple set the trend with 320x480 pixels. Now do we need to worry about this number? I don't think so because Apple with the retina display already doubled the dimensions.

What we have to learn and understand by this is that we don't have to worry about pixel dimensions at all. Especially not the physical pixels of a display.

There is a logical pixel unit and the hidden secret is that the browser will take care of this thing. Plus HTML and CSS have a few secrets of their own. One secret is named viewport. For testing and illustration how some of the viewport settings influence a mobile webpage I have created some special webpages. Don't look at those pages from a desktop, though. They must be viewed from a mobile device! I also have an article dedicated to the viewport that will discuss some of the things we need to know about it.

Still puzzled

If you are puzzled now about what is going on with this logical pixels and what we need to know about them, here it is: We don't care about pixels for mobile devices. It will only drive you mad.

If you have some images or graphics you have to watch out for these logical pixels, though. However, in terms of design you should free your mind from all pixels and don't care about them. Instead learn more about the viewport.