The concept of perceived rendering of CSS layouts

The concept of perceived rendering of CSS layouts

How users perceive our CSS layouts? Some things to consider.

When I got my first Mac (a glorious MacBook Pro with Tiger as OS), I was really impressed by the fact that all the common fonts I used on Windows really looked smaller. Arial, Georgia, Verdana and so on appeared almost etherial. I was using 16 pixels as the default font size on all browsers and only after a couple of months I recovered from the initial shock. On Windows I used to view my web pages on a 1024 x 768 screen and everything looked just fine. When I switched to my MacBook, I was forced to resize the browser window to 1024 x 768 because everything looked miniaturized (so to speak). After several years of web development I still have a strange feeling when I test something on different platforms. Recently I got an iPad, and I had (again!) the same feeling. This is what I call perceived rendering.

Usually when we think about page rendering, we consider this topic only from the code or browser point of view. Instead, psychologists teach us that everybody has a different way to view the web.

A person can actually perceive a font smaller or larger or a color brighter or darker than other persons. Have you ever stopped to think about how a web site looks like when your computer is in full light (e.g. in the early morning) and just after a couple of hours?

Another example is when you pick a color from a web page and then you paste it on your design. It's odd, but it often looks like a different color because of the surrounding design (which is different). #069 is amazing on Linkedin, but when I apply this color on the same white background on a different web site, it simply looks like a normal, plain blue.

The surrounding environment plays an important role in how a page rendering will be perceived by the user. In this case, environment and rendering share the same background. Another important thing to consider is our level of knowledge of the web. As web developers, we're the worst candidates for this kind of tests, because our technical background prevents us from being genuine or naive.

Naive users, instead, are our target, because these people constitute the overwhelming majority of our audience. In short: even if the rendering of your site looks identical in all browsers, it will be always perceived differently by users.

Thinking psychologically rather than technically is the key to understand the user's point of view. In that vein, remember that subjectivity is not a flaw or something to be afraid of, but the real essence of our being humans.