Resolutions to Consider for Fluid Layouts

I made these charts to help me decide at which resolutions my fluid layouts should link to different stylesheets. I haven’t quite settled on a solution but I think these charts offer a good visual understanding of Apple’s resolution intervals. Things to consider:

  1. I omitted a few resolutions including the Hi-Res Non-Retina 15″ MacBook Pro (1680×1050), the 11″ MacBook Air (1366×768), and the iPhone 4S (480×320).
  2. All resolutions are in points, not pixels, as this is what we as web developers are interested in (I just divided the retina resolutions by 2).
  3. Should new stylesheets target exact resolution intervals, the pixel before, or the pixel after? Is there even any difference between these?
  4. Which resolutions should be discarded? It gets pretty tight around 15″ (especially if you’d like to account for Hi-Res 15″), which resolution would keep the intervals most uniform?

I understand that Apple computers are a small percentage of the market share but in the end fluid layouts are designed to make the experience pleasant on any screen size.

Apple Resolutions Apple Resolutions Left-Aligned

Leave a Reply

Wordpress theme JaeDubya © 2019 | All Right Reserved | Designed & coded by J. Arthur Wetenkamp