Rethinking the way we design web sites for higher pixel density displays
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.
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.
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
Most Popular Articles
- Mass virtual hosting security tip when using a reverse proxy to connect to other servers
- Solution for MariaDB Field 'xxx' doesn't have a default value
- How to lock Windows immediately upon smart card removal
- Stop using sleep mode with Windows Bitlocker for better security. Learn how to use hibernate in Windows 8.
- Is Google Public DNS actually better then your ISP?
- Planning a system to visually create responsive data-driven web page layouts & widgets in the Jetendo CMS browser interface
- My dog survived eating a box of Oreos
- Pros and Cons of CFML vs PHP and other languages