24 April 2006 1 Comment

Designing for High DPI sites

The good folks on Apple’s Webkit team have posted a thoughtful article on the future requirement for handling high DPI websites.

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.

Social Bookmarks:
  • Digg
  • del.icio.us
  • Reddit
  • Technorati
  • Fark
  • email
  • Facebook
  • StumbleUpon
  • Twitter

One Response to “Designing for High DPI sites”


Leave a Reply

Thanks for reading the fuzzz blog by Andre Gaulin