Rethinking the way we design web sites for higher pixel density displays

  Follow me: Follow Bruce Kirkpatrick by email subscription Bruce Kirkpatrick on Twitter Bruce Kirkpatrick on Facebook
Sun, Jul 07, 2013 at 1:30PM

New laptops like the one I got and "retina" ones, and tablets above 200 pixels per inch are very hard to read when the web is viewed at 100% zoom.  All text is about 6 or 8 points like that.  These displays squeeze 1080p or higher resolutions into screens that are between 10 and 15 inches.  That's incredible small.  In my opinion, you need a 22 inch screen to view 1080p comfortably. 

I can't even read my laptop's screen when the DPI setting is at 100% dpi in windows unless I hunch over closer to the screen.  I don't think I need glasses, I think that the screen pixel density is just too high.

You have to view the web at somewhere between 125% and 200% zoom setting on these ultra high resolution screens to be able to read at a comfortable size.  In windows 8, you just type in "DPI" in the start screen and click on settings, and then click "Make text and other items larger or smaller".  This control panel lets you set the resolution for the entire system.  

Some applications must have the properties set to disable DPI scaling in the properties -> compatibility tab.  For example Dreamweaver CS5 is blurry with high dpi, so I set it back to not scaling and change the font size settings in Dreamweaver itself.  I found I was able to do this for all the software I need so whether using the global setting or individual app setting.  So you CAN avoid blindness when using high pixel density displays even in Windows despite many legacy apps not supporting high resolution correctly. 

Also note that the custom dpi option in windows 8 does have a 200% option already, which is appropriate for Apple's retina display if you use Windows with bootcamp on the new macbook pro.  Their display was designed for a 200% zoom setting and they changed OS X to support this more consistently a few years ago.  

In windows 8.1, they are going to have 200% as an option that is always visible on the first page, but it's already possible to use 200% setting on windows 7 or 8 if you click into the "custom sizing options".  They are also making windows 8.1 be able to set DPI for each monitor separately.  I will enjoy that update since I do still use a separate monitor with my laptop and the large monitor could have a lower zoom setting.

I noticed that when Windows is set to 150% DPI, most web sites designed for 960 pixels wide will fill the width of a 1080p screen very nicely and the fonts are much prettier on a high resolution screen since even zoomed in they are rendering without any harsh edges because on a high pixel density display, the harsh aliasing is too small to be visible to the eye.   However, all the images are not as crisp and there are sometimes glitches in javascript interactivity and the edges of images may have rendering artifacts with zooming.  So one of the things we're not always doing as web developers yet is testing the web site at different zoom levels - Most importantly 150% and 200% zoom setting should always be tested now.  A 200% zoom should not have as many artifacts since it doesn't have to deal with rounding error, but it may still have Javascript bugs because the way you measure the screen in javascript is slightly different when the browser is zoomed.  The most high-end customers will be using these new high pixel density displays.  We should give them the best experience possible.

While it seems logical that when someone has a higher resolution screen that you could design starting from a wider grid in your design application, that was only true when people were buying bigger 22 to 30 inch displays.  People are not buying those so much - they are buying laptops and tablet mostly, so by designing a wider web site, you are actually making it much harder for them to use it.  I don't think we should have a web site that REQUIRES more then 960 pixels width.  We should continue to use the standard size especially if a site isn't going to be responsive.  

When I view a wide HD design that is responsive when zoomed in, it will actually render at the 960 pixels width, but just larger text and blurry images.  This is functional, but not beautiful.   So designing for HD / zooming requires a different technique.  Instead of making the screen wider, what you really need to do is the make all the images have more detail available so that when they are zoomed or viewed on high pixel density screens, the extra detail makes them look better.    Building an entire application around this concept requires a lot of thought starting at the design stage, and continuing through to all the programming.   It's not easy to design at high resolution and then scale it down.

Instead of making the HTML/CSS wider, why not continue designing for 960 pixels, but build a photoshop file that 1440 pixels wide (150% zoom setting), with text that is easy to read when PHOTOSHOP's ZOOM LEVEL is set at 66.6% (to simulate 960 pixels at 100% zoom).  Modern browsers also make it possible to determine the pixel density of the display in your code so you can adapt your CSS font size settings to it better then simply allowing the default zooming to occur.  When the programmer converts this file to HTML / CSS, they will use percentage widths on images or background-size with background images to allow the extra detail in the images to be visible on a high resolution display while still rendering nicely when rendered at low pixel density.  The programmer will build the entire site to fit 960 pixels wide despite having oversized images.  The site should be responsive and render wider if the screen has low/standard pixel density all the way to 1440 pixels wide if they are using a large enough resolution.  Some images might require javascript to scale appropriately.   On browsers without support for background-size, you would lock the size to just 960 pixels wide.  (ie7 & ie8).   This would allow a web site to have beautiful images when zoomed in. 

A more advanced CMS system could recognize the browser DPI settings and serve different content sizes based on it to make the web site more bandwidth efficient as well.  Serving images that are 4 times larger when the user doesn't need it would make the web site slow, so consider that when thinking of ways to improve your CMS.  At the least, your CMS should attempt to preserve the original image that users upload so that one day you could generate new sizes from the original image.

In summary, nearly everyone using a high density display is going to be forced to raise their DPI setting or they will need glasses.  We must adapt to that emerging trend.  I do all my browsing at 150% dpi now to reduce eye strain.  If a site needs to be viewed at a different size, I set the zoom to 100%.  Chrome remembers the zoom setting per domain.  It is getting easier to deal with this and consumer will be very aware of this as more time passes.  Let's build the next generation of web sites to support resolution independence!

Bookmark & Share

Popular tags on this blog

Performance |