Andrea Gandino

In one word, that would be flexibility, but I guess I should dip a little deeper into the topic.

Given that we want it or not, Web design world takes a lot from the print world, and so does the Web in general. Think of the simple fact that we talk about Web pages, not using some other word to describe what you’re looking at, this very moment.

I find this thing to be fairly logical, but also quite a bit disorienting, and the metaphore is, eventually, kind of misleading: if you read a book and its pages (proper paper pages!) you instantly and clearly have physical indications about how big it is (tactile, with weight, or visual, how many pages the book has), a rough indication of how much content is stored in it (eg. the type size), and a number of other things that may include graphic aspects regarding the edition of the book.

This isn’t true for Web pages. With search engines often pointing straight to Website’s sub-pages, even the symbolic link between a book’s index and a Website’s home page is lost, and with it another orientation tool inside of a site. Visiting one only page, we have no way to know how big a Website is, nor how much content. Again, the metaphore isn’t working.

On the design side, in print looking for pixel precision is a legitimate thing, while on the Web, due to its ever variable nature, it is not, because we browse it through very different setups (browsers, resolutions, operative systems, mobile phones, and so on).

I tend to think that the two key actions that take place in a browser are the resizing of the viewport and the manual changes to the text size, and when designing taking them into account is mandatory.

No layout should break upon a resize of either the browser window or the text. And with this fact, comes another consideration that occurred into my mind the other night.

I was designing a column based layout with the text leading set at 20 pixels, and I really wanted the spacing between columns to be 20 pixels as well: it’s easy to do it with percentages widths, and even more using ems, but I realized that using a fluid approach, this wasn’t possible if not for the default layout width.

The moment the browser window was resized, the 20 pixels could become 18, or 16, and there went all my good plans for a consistent grid.

What matters

Then I realized that my plans were actually not that relevant.

It’s actually much more important to ensure that the layout doesn’t break, that the contents are still fully accessible by everyone, than focus on little not-so-important things like being pixel perfect concerning the spacing between columns.

Maybe one should create a default version (eg. a default layout width) that has that kind of precision, but in the end we can do nothing but accept that we cannot possess the full control over how people will browse our website.

Hence we must work with what we have (using CSS at their full power in this sense is very helpful), sharpening our wits to preserve the only thing that counts in Web design: flexibility.