Designing for High DPI sites
Consider a Web page that is designed for an 800×600 resolution. Let’s say we render this Web page such that the pixels specified in CSS (and in img tags and such on the page) map to one pixel on your screen. On a screen with 1920×1200 resolution the Web site is going to be tiny, taking up < 50% of the screen's width and half the screen's height. In terms of absolute size, the text will be much smaller and harder to read. Now this may not be a huge problem yet, but as displays cram more and more pixels into the same amount of space, if a Web browser (or any other application for that matter) naively continues to say that one pixel according to the app’s concept of pixels is the same as one pixel on the screen, then eventually you have text and images so small that they’re impossible to view easily.
Considering that 800×600 is a dying beast and 1024×768 is starting to become the norm, it’s only a matter of time for the trend to continue. It’s always nice to have more space to design with, but being smart about what goes where and how to handle multiple scenarios is always important. Those designers and developers who can gracefully handle the majority of scenarios will be the ones who rise above the masses…
A 1440×1200 design is much different than something constrained to 800×600.



One Response to “Designing for High DPI sites”