160 px Column

160 Pixels: Unified Column Width for Designing Responsive Layouts

Months ago, mostly by accident, I started to design responsive websites within 160 px columns. I came to this idea because:

  1. responsive design is a must
  2. mobile-first is great as a design mindset
  3. narrows scope and boosts effectivity
  4. I needed to overcome fixed page size

If you remember CS4, it lacks support for flexible page size. By using multipage feature, you can have various page width within inDesign CS4.

Since than I realized, that’s it’s probably even more, than a pretty column size.

From 320 px to 160 px

Here’s how my setup looked like:

320px Columns

I was using 320 px page width for mobile layout. Than adding more spreads I added 640 px and 960 px widths, and so on.

This change came pretty immediately. I wanted more flexibility in page sizes. Changing page size to 160 px lowered number of columns to 2, but added up more pages to spreads to get widths back to same width.

160px Columns

Now I was able to get page width breakpoints of multiplier of 160 px:

  • 160 px – base for 2 col layout or really tiny screen, module
  • 320 px – small phone, portrait
  • 480 px – small phone, landscape / larger phone, portrait
  • 640 px – larger phone, landscape / phablet, portrait
  • 800 px – phablet, landscape / tablet, portrait
  • 960 px – phablet, landscape / tablet, portrait
  • 1120 px – tablet, landscape
  • 1280 px and up – desktop

My inDesign responsive website document setup:

Designing Responsive Websites in Indesign: Document Setup, Set Your Own Height

Note: I refer to px as units, but use pt for designing in inDesign.


Physical size matters

More devices I can put my hands on, I realise the physical size matters. Not only the physical size of the device, but also the rendered size of the design. I still can remember the CRT displays, I remember my first LCD. Those were not hight density displays.

First websites I designed were targeted for max-width (and fixed-width) of 1024 pixels. My first laptop was 15″ from HP, had resolution of 1024 × 768 pixels. The PPI was 85 pixels per inch.

85 PPI = you need 85 pixels in a row to be 1 inch long

Physical size of Design or Designing for Touch/Click Targets

Most interface guidelines for humans, specify targets around 7—14 mm (more means more comfort).

First iPhone released had screen dimensions of 320 px width and 480 px height, and diagonal screen size of 3.5 inches. Using Pythagoras formula, screen attributes were as follows:

Device Screen
[in]
Width
[in]
Height
[in]
PPI
[px / in]
iPhone 3, 3G, 3GS, 4 3.5 1.941 2.912 164.83

See the PPI, pixels per inch? It’s around same 160 pixels I used as column width. My column roughly corresponds to 1 inch (or 2.54 mm). How many pixels will make the optimum target size?

160 PPI = you need 160 pixels in a row to be 1 inch long

With iPhone 4S, the screen pixels doubled, but the device still reported screen size of 320×380 pixels. Consistency.

Width Targets @ 164 PPI Table

target width [mm] pixels width [px]
5 32
6 39
7 45
8 52
9 58
10 65
11 71
12 78
13 84
14 91
15 97

Apple specified minimum target of 44 × 44 pixels, hence thinking of 7 × 7 mm (see table) as optimal.

Looking for a System

Media Queries

I don’t know how, but some clever folks realised, that either the device would report low-density resolution or the internet will break. And some other folks when writing W3C proposal for @media back in the 90s baked that in too.

First time I came across the fact was when I wrote simple console.log(window.screen) to see my iPhone 4S screen object reports same resolution as iPhone 4 would do to render the websites at size intended.

Result: @media queries are cleverly designed and work as expected. That also means that device producers need to set some aspect ratio they think is best suited for normal scale.

Note: The pixel dimensions in tables below are not real pixels when marked Simplified. Let’s say those are pixel dimensions as if all devices were just @1× density and before downsampling (hello there iPhone 6+). These are the values you are probably familiar with from @media queries.

Phones PPI Table (Simplified)

Model Screen
[in]
Width
[px]
Width
[in]
Height
[px]
Height
[in]
PPI
[px / in]
iPhone 3–4S 3.50 320 1.941 480 2.912 164.83
iPhone 5 4.00 320 1.963 568 3.485 162.98
iPhone 6 4.70 375 2.303 667 4.097 162.81
iPhone 6+ 5.50 414 2.696 736 4.794 153.54

As you can see, most of the values oscillate around the 160 PPI value. With bigger screens the targets gets bigger because of the lower pixel density. That adds to a more comfortable use.

Pads PPI Table (Simplified)

Model Screen
[in]
Width
[px]
Width
[in]
Height
[px]
Height
[in]
PPI
[px / in]
iPad 9.70 768 5.820 1024 7.760 131.96
iPad Mini 7.90 768 4.740 1024 6.320 162.03

With the introduction of iPad, Apple increased the tap target by keeping 44px target specification, but lowering the pixel density. Size of objects increased +22%. When iPad Mini was introduced, PPI was increased, but not pixel count, causing the screen to shrink. But still, comfort of use was not bellow 160 PPI.

Watches

New device, new ratios? Not exactly.

Watches PPI Table

Model Screen
[in]
Width
[px]
Width
[in]
Height
[px]
Height
[in]
PPI
[px / in]
Watch 38 1.32 272 0.825 340 1.031 329.86
Watch 42 1.50 312 0.937 390 1.171 332.96

See the DPI around 320 PPI? That means that’s @2× screen density. Let’s see the table with pixels Simplified:

Watches PPI Table (Simplified)

Model Screen
[in]
Width
[px]
Width
[in]
Height
[px]
Height
[in]
PPI
[px / in]
Watch 38 1.32 136 0.825 170 1.031 164.93
Watch 42 1.50 156 0.937 195 1.171 166.48

Adding Google Android to the Game

If you read Supporting Multiple Screens , you’ll discover Google thinks in terms of pixel independent on screen density. And more over Google sets baseline for designing at 160 PPI.

Coincidence? I don’t think so. Apple is consistent and rules the devices, design and OS and Google knows that. Device screen fragmentation for iOS is not that much of a deal. Unlike for Android with multiple manufacturers, right?

1 Pixel of Design = 1 screen pixel at 160 PPI

Let’s redo the list of breakpoints:

  • 1 column – watch
  • 2 columns – small phone, portrait
  • 3 columns – small phone, landscape / larger phone, portrait
  • 4 columns – larger phone, landscape / phablet, portrait
  • 5 columns – phablet, landscape / tablet, portrait
  • 6 columns – phablet, landscape / tablet, portrait
  • 7 columns – tablet, landscape
  • 8 columns and up – desktop

If you have any questions, ask in the comments.