Responsive Web design

Figure 1: While pixel density is all over the place, the actual physical dimension nicely separates each device (gray line at 7in).

As I evolve closer towards the status of full-fledged professional, I continue to realize that my web presence should reflect that development. For this reason, I decided that it would be wise to re-tool my website. I need to separate the professional and less-professional aspects (though I’m not sure any of my content really is “professional”), and stick everything under a resume-like landing page. I have enough posts here that this will be a major project, especially since some posts still receive a few hundred views per month. And because I have forgotten most of the web design skills I used to have (which were minimal in the first place).

So I started re-learning CSS and HTML. In the process, I found this insightful post by Ethan Marcotte detailing a design strategy that he refers to as “responsive”. The point is, essentially, that with the continued movement to web-browsing with mobile devices, web developers (and their clients) need to re-think design strategies to better adapt to the huge array of device sizes. Initially (and currently), companies solved this problem by building an additional site specifically for mobile (usually with an m.domain.com-type subdomain). This is obviously a pain in the ass to maintain, and my own anecdotal experience shows that these sites tend to be hideousEthan Marcotte argues for a design strategy that responds to the dimensions of the devices that view the page. This is enabled by the CSS media types, which allow for a few simple queries about the viewing device. A stylesheet can then change the display rules for tiny devices, or for printers, etc.

Additionally, since many users are under bandwidth restrictions on their dataplans, web designers may want to reduce the number of images that have to load.

I decided to try implementing this sort of solution for my own web design, but ran into an early problem: devices come in many sizes and resolutions, so that it is not at all obvious what kinds of thresholds one should use to apply different CSS rules. Now, I could just go with what feels good, and choose some nice cutoffs like, for example, 300ppi (pixels per inch) or 3inches.

But I’m a scientist. So instead, I found a table of screen dimension data (from SpireLight Media), cleaned it up (using a table-capturing Chrome extension and Python), and plotted it in various ways (in R), in hopes that the visualization would lead to some insight (see Figures 1 & 2). (Note: I’ll happily provide the code upon request.)

Figure 2: Shown here are the device sizes in portrait mode (which is most important for phones and doesn’t actually make sense for notebooks/desktops).

So what do we do with this? The problem is that handheld devices are essentially random when it comes to their pixel density, though their physical dimensions do not cover that wide of a range (Fig. 1).

For phones, what we care about most is the minimum width, since phones are normally held in portrait orientation. In Fig. 2 we see that phones fall between 1.4 and 3 inches on the narrow side, and tablets fall between 3.5 and 5.8 inches (but I suspect they are mostly viewed in portrait). Looking at the longer side (not shown) for landscape orientation shows that phones fall between 1.9 and 4.8in, and that tablets are between 5.9 and 10.1in. I figured I could use these sorts of dimensions (either in inches or pixels) to choose cutoffs for how to display content.

But how important is the physical size of the device? Some of he small devices have incredible pixel density, which means that text will be be microscopic. To me, it seems that this is more important. As can be seen in Figure 1, the pixel density has much poorer separation within and between all groups. My eye sees (perhaps falsely) pseudo-groupings in the 100-200, 200-300, and 300+ ppi ranges. These correspond pretty well to the named pixel densities according to Wikipedia.

My conclusion, then, follows.

Font size should scale with ppi (@media dpi). For people to read the text without destroying their eyesight (and without having to zoom and scroll in a mobile browser), the text size should scale linearly with the pixel density. Since the low range (120-160) is what people commonly use on their browsers, the normal font size should scale up linearly from there, in however many gradations the developer wants to add. Alternatively, one can set the text size in physical units (e.g. by setting body{font-size:0.17in;} to have 12pt font be default, and then using ems to set other elements relative to that). Note that a smaller font-size may be required on the really tiny devices (otherwise a handful of letters will span the page!).

Page width should be based on device physical width (@media width). While the font size should scale with ppi (or be set in physical units), the width of text blocks (and images, and the page in general) should scale to take up the maximum possible physical width in mobile browsers, but only up to some hard-set maximum (around 4-6 inches; the most common book-page width range), for easy line-scanning on tablets or notebooks/desktops. Images should also scale (they can always retrieve the full-size image if they want).

Additional horizontal elements should disappear or be moved into the central flow of the page when in the size range of phones (and smaller tablets). When there is enough room for your 4-6 inch-wide blocks of text, plus margins, to add an inch or so of other elements, there is no reason not to do that.

Seems simple enough! Now I’m going to go try this out. I may be way off base, in which case I’ll be sure to add some comments to this post!