AnDevCon – San Francisco – Day 2

The most interesting thing that came up today was the vast number of devices that Android developers have to potentially deal with. 286 (and counting) devices now use Android in one flavour or other (and I do mean “flavour” – with a choice of OS releases named after Google’s favourite desserts such as “gingerbread” or “ice cream sandwich”).

The number of devices itself isn’t that interesting, but the variety of screen resolutions and densities, and the ideas and techniques on how to deal with them in one, easy way, is. Android has “layouts” that define rules which say when to change, for example, a 3 column layout on a tablet, into a 2 or 1 column layout when the same page is shown on a smaller screen. But I can’t help feeling that this is just another way to solve the same problem that we’ve had for many years in the web arena, which is only now being solved with the introduction of CSS3.

CSS3 is the way to go for anyone wanting to allow users to view the same web page on multiple screen sizes. In the past, before smart phones came along, web sites tended to be designed for a minimum screen size of, say 800 x 600. As time progressed and technology improved (i.e. screens got bigger) web sites started to support resolutions of 1024 x 768 – but very few  sites use much more of the real estate available to them on bigger resolution screens. Instead, the designers preferred to keep the width the same and simply centred the content and added flexible margins either side.

Now, in defence of this approach, I’d like to say that the main reason for doing this is that eventually, it gets much harder for the human eye to follow the flow of content if the space it takes up goes too far across the screen. One of the reasons we have serif-based fonts, short paragraphs  and multiple columns of text in newspapers is to aid the eye in being able to easily read it. Equally, if there are too many columns used for an article you end up with the same problem. I think this is down to the fact that the eye is good at focussing on information in portrait. So, with the advent of widescreen monitors, which are really designed to allow us to watch movies on our computers, we have to fill this extra width either with multiple columns of unrelated content, or blank margins.

Anyhow, getting back to CSS3 and the present day, what does all this mean now that we’ve got to support much smaller resolution screen sizes?

Well, smartphones have all sorts of tricks up their sleeves to help us to view existing web content – the iPhone certainly has a great way of allowing you to double-tap on a portion of the screen to zoom into that area – making it easier to read. But that’s only part of the solution.

CSS3 introduces @media tags that act in a similar way to the layout controls available in Android. These allow you to specify CSS rules that should only be applied when the screen (or printer for that matter) that the page is being viewed on supports certain resolutions. This allows you to decide what to show and where to show it. This means that the same web page can be rendered in a completely different way depending on the screen resolution – from the largest Apple Cinema display (2560 x 1440) down to the smallest Sony Ericsson Xperia X10 mini Android phone (240 x 320). As long as the device has a modern browser that can render CSS3 properly, you only ever need one set of rules.

A good example of this in action is The Boston Globe (http://bostonglobe.com).