Everything is a grid

bjango.com reporting:

When you design or build a website, app, icon or UI element, you’re designing to a grid. It doesn’t matter if that grid is pixels, points, percentages, inches, centimetres or some other kind of measurement. It can be as abstract or specific as you like. It’s still a grid.

The unit of measurement, the positioning and how the design grid relates to the way things are eventually displayed on the screen make a big difference to the image quality of the result. This is true if you’re drawing everything in code, everything with vectors, or using bitmaps. The important factor is how the design grid relates to the screen grid.

If the design and screen grids don’t match, pixels get blurred. Quality is lost. Every single element on the screen is subject to these rules — elements drawn in code, as a vector or as a bitmap (if they’re scaled, bitmaps lose even more quality than things drawn in code or as vectors).
The rise of mobile OSs like iOS, Android and Windows 8 Metro have ushered in a large range of display sizes and pixel densities, as well as various methods to cope with the variations. Mobile device pixel densities range from about 160ppi to 320ppi. Apple took the high road and limited UI scaling to two sizes, with newer displays being exactly double the pixel density of the first generation of their devices. This is ideal for scaling. Android and Windows 8 can’t easily do that, due to the range of devices they’re run on. Their business model dictates variety. Variety dictates non-ideal scaling. Non-ideal scaling dictates blurry pixels or non-ideally placed pixels.
Android uses density-independent pixels as its preferred design grid, and scales UI to match the resolution of the device’s screen. Assets are often created at 160ppi, 240ppi and 320ppi, which relates to scales of 100%, 150% and 200%.
http://bjango.com/articles/everythingisagrid/