2012-03-20

Screen Density and Web Design Problems

Perm URL with updates: http://xahlee.org/js/web_design_screen_density.html

, 2012-03-20

Screen density is getting higher and higher. In the 1990s, CRT monitors from Apple Computers Inc is standardized at 72 ppi (pixels per inch), which became a de facto standard for desktop publishing (Apple started this field). But since ~2000, LCD replaced CRT, then came laptops, and now smart phones and tablets are more popular than desktop PCs. The iPad 3 has a density of 264 PPI. (See: iPad, iPhone, Kindle, Xoom: Pixel Dimension, Resolution, Density.)

This creates a problem for web designs. In html and CSS, there are 3 types of units for length:

  1. Physical: cm centimeter, mm millimeter, in (inch), pt (point = 1/72 inch), pc (pica = 12/72 inch)
  2. Pixel: px.
  3. Relative: % percent, ex (letter x of the font used of current element), em (current font height)

Physical unit is entirely useless. The problem with physical length such as centimeter is that usually the browser doesn't know the density of your display device. (i.e. it doesn't know how many pixels is a centimeter. Around ~2005, browser's preference pane lets you set it manually.) (has the situation improved today? i.e. are there some protocol or something that automatically sets the value?)

The more serious problem with physical length is that you don't really want to use it. Because, screen size varies. On big screen, you might want text be 1 cm in height. But on a hand-held tablet, you might want it to be just 0.2 cm.

The problem with pixels is that it's device dependent. On a desktop computer display, you might want text to be 20 pixels. But on a high-density tablet, 20 pixels needs a magnifying glass to see.

However, most web designers want exact layout. So, they just use pixels, and assume a particular display dimensions and density, based on what's most common. Around ~1998, it is 640×480. In ~2005, it's 800×600. Today, it's 1024×800. See: Web Design 2012: Minimal Windows Width of Popular Sites.

Due to the rise of high-density display starting with iPhone in ~2008 and now tablets, the web standard body seems to have retrofitted the meaning of px in CSS. It used to mean the pixel on your screen. Now, W3C seem to say that the pixel unit in CSS is meant to be a abstract pixel. (Question: was this “abstract pixel” meaning in the CSS 1 spec in the beginning?)

Here's a bunch of articles addressing issues related to screen density.

They are all giant hacks.

The bottom line of the problem is, that HTML is never designed for page layout. It is only meant to capture the meaning of content, mostly of the academic publications type. That is, you have Title, Chapter Header, Sections, Subsections, Paragraphs, Lists. But, most people actually need layout and exact appearance specification. The vast majority of web use is not academic papers. It's online stores, for-profit publishing, stocks, entertainment, random chats (online forums), and porn. So, font tag, tables, Spacer GIF, CSS, and all are hacked in, with various degrees of blessing by standard bodies or tech geekers.