Surfin' Safari

High DPI (Part 2)

Posted by Dave Hyatt on Sunday, April 23rd, 2006 at 12:24 am

In reading responses to my initial post I noticed a bit of confusion regarding the proposal. In particular people seemed to think I was proposing some sort of mandatory changes (e.g., fix your Web site or it will break!). That is not what I was saying.

Designing for higher DPI screens is about making your Web site look better when presented in the same amount of physical space on a screen with more pixels. It is purely optional. If you do nothing at all, your Web site will still look essentially the same even when magnified (assuming your system has done a good job with scaling).

Think about TVs for a second instead of computers. In particular, consider DVD content vs. HD content. If you own an HD television set, you can still watch DVDs and have them look great… but you could also watch that same content in HD and have it look even better. Your DVD content is effectively being zoomed on an HD set. HD content will show you more detail because it displays more distinct pixels of information in the same amount of physical space.

The same thing should end up being true of Web sites when they are magnified on screens, and that’s what this proposal is trying to make clear. Note that I’m not even talking about particularly high DPI screens. Many people who own 1920×1200 laptop screens already wish they could easily scale their whole UI now. (This is something that computer geeks with keen vision sometimes can’t appreciate. :)

The fact that Web content will be zoomed (either via a browser-level feature or an OS-level feature) is inevitable. It’s important that browsers have agreed-upon behavior for how Web sites should behave when the content is magnified so that designers have the ability to present a higher level of detail to users who would like to have the “HD” Web viewing experience.

22 Responses to “High DPI (Part 2)”

  1. adriand Says:

    I don’t get it. Can’t you just adjust your screen resolution from 1920×1200 to something smaller (thereby increasing the size of each pixel) in order to scale up the whole UI?

  2. smilespray Says:

    adriand: This is less than optimal, as selecting a lower resolution on the aforementioned LCD-based laptop will result in a non-native pixel size. It would be much better to scale the UI up, using higher-resolution (or high definition, if you will) graphical elements. Both Microsoft and Apple have started preparing their OSes for this kind of functionality, but we’re not there just yet.

  3. guernica Says:

    Something does not exist without a name, so this needs a name, a proper easy to remember and easy to use name, that makes people understand this quickly. I therefore propose “HDweb” It stand for (H)igh (D)pi, but also references the HD video example from David. HDweb it is…

  4. jkporter Says:

    adriand: In addtion to smilespray’s comment it important to note regardless of what display same space + more pixels today typically means smaller display elements, however, the point of these last two articles is that it can also mean same size and clearer, smoother, higher resolution display elements.

  5. adriand Says:

    “clearer, smoother, higher resolution display elements.”

    Okay I can see the advantages – bumping down the screen resolution as I mentioned still keeps you at 72ppi quality graphics. I too would love to see the monitors display at closer to print quality.

    Beyond the CSS rules mentioned in the previous post, I think it would also be nice to have different css media types for hi and low res monitors. eg @screen, @HDweb :) Whilst SVG is good, scaling doesn’t work well for graphics such as icons where the “dots” need to have a very precise placement (1).


  6. daaku Says:

    While I couldn’t agree more about needing a way to create scalable interfaces (using a 1900×1200 LCD too) – I feel that creating content using current technologies will not degrade nicely with the most problematic browser: IE. With FF, Opera and Safari supporting SVG, creating scalable content is not an issue (things can always be better/simpler – CSS3). But using the exact same markup and style information will cause headaches in IE.

    Also, isn’t the end result of scaling CSS pixels to map to multiple native pixels similar to using em’s to specify the length/size on a known scale and have it automatically scale as the font size changes?

  7. Rob Says:

    daaku, I feel your pain. I think there’s still merit though in producing all the pretty graphics that we can for browsers that implement SVG. After that it will become apparent that there’s a real benefit to the end user and the pressure will be on IE once again to catch up. It’s also possible that some clever person will come up with ways to help with the issue of degrading gracefully for IE.

    I think you’re also right on the em comparison and that we could be in for a wave of confusion between “CSS pixels” vs. “Screen pixels”.

  8. db48x Says:

    hyatt, you should probably mention that browsers already have to do this sort of thing when printing webpages. It’s not like anyone complains about that. Indeed, I’d be rather miffed if I printed a webpage on my 1200dpi printer and it came out in a tiny little box three quarters of an inch on a side. Now if only we had 1200 dpi screens…

  9. nick cowie Says:

    Dave, one way of dealing with high dpi screens that works now, is to build sites in ems and use a little bit of javascript to detect browser window width and then scales the web site to fit the browser window. My blogdoes that in a limited way (note because it uses sIFR, you need to refresh after you resize your browser window).

    You do not need to wait for SVG support in the other browsers, you can use flash instead. See John Oxton’s Scalable Logos.

    You can also scale bitmap images, but you need to use big images and trust the browser to scale, which has its’ downsides. A little experiment from my blog.

  10. hyatt Says:

    The big problem with Flash is that you cannot use it anywhere an image can be used, e.g., in backgrounds, borders or list bullets.

  11. xenon Says:

    Using em units will still lead to browsers scaling up low quality images and it isn’t taking advantage of the full resolution of the display. (Unless you use a high quality image and let the browser scale down, but some browsers do not scale images nicely.) This is the advantage of media queries, the designer can specify multiple size images to fit the resolution of the display. This lets you feed the user the best representation they can display without choking their bandwidth and down-sampling.

  12. nick cowie Says:

    Probably the best way to scale a site now is to use javascript to feed a different style sheet for different browser widths

    You use tiny backgrounds, borders and list bullets for browser windows 500px and 1000px and 1500px

    The problem comes with images as content, only real solution is to use big images and scale them down, but you can use background images if necessary.

    But that does not solve the issue here, which is how should web content be zoomed. Three different philosophies on scaling pixel sized content:
    IE: Don’t resize – bad accessibility
    Webkit, FF: Resize text, but nothing else images and containers stay the same, which can break the layout.
    Opera: Scale everything, images look crappy enlarged, but site stays the same proportions.

    Personally the scale everything, keep everything in proportions is the best method.

    Next issues is getting people to build sites at one consistent size so people with small or large monitors (in dpi) can pick there prefered zoom-level, stick to it and all websites fit inside their preferred browser window and look ok.

  13. LL77 Says:

    what we did in good old times if the resolution of a monitor was too small??? e.g. 800×600 (and the page was programmed in 1024×768…)
    Scrolling? Yes. But a good programmer made the page for 2 resolutions and loaded a “pre”page where the resolution was questioned and afterwards linked automaticaly to the right page…
    index.html (wihich res?) -> link to 800.html or 1024.html or default…

    So today you have the same problem…

  14. jcdeering Says:

    If anyone is interested in seeing an SVG 1920 by 1080 scalable interface they can go to my web site and view the Adobe or Firefox demos. The Adobe demo shows the benifits of SVG best, in that the entire web site is only 104k. Make sure to resize your browser window. Enjoy!

  15. Pingback from Navarik : Building web browsers for true high resolution : The Marine Data Network™ :: Software for Maritime Shipping:

    [...] ms work with higher resolution displays, using a “scaling interface” (also see his followup). This would be particularly useful even now for people whose displays have lots of pixels o [...]

  16. Pingback from tdog blog » Nice Unit.:

    [...] Happy April | Home

    April 25, 2006 Nice Unit.

    Dave Hyatt recently posted (and again) about what webkit is considering doing concerning the inevitable high resolution displays of the f [...]

  17. Pingback from Nick Cowie » My CSS reboot delayed:

    [...] the work of artist Brent Harris in the colours and form. Dave Hyatt’s comments at Surfin’ Safari convinced me to make a truely elastic design, from 600 pixels on up. Andy Budd and [...]

  18. Pingback from BlueSparc design, technology news » Blog Archive » High Definition Web Sites, Elastic Layout:

    [...] definition displays! Update: Dave continue’s his aurgument for high DIP web sites in High DPI (Part 2), and CSS Units. This entry was posted [...]

  19. Jeffsters Says:

    All good but what we really need to make any headway in places such as my employer, when it comes to Safari compatibility and testing, is a Windows version or some major app based upon the engine, that will gain the way FireFox has. yeah…ok…wishful thinking….just sayin…

  20. 3ecomad Says:

    add oil…………

  21. Pingback from el factor humano » Archivo » Resolución de Pantallas: Marzo de 2007:

    [...] ás puntos por pulgada, dpi), además del tamaño (más sobre esto en High DPI Web Sites y High DPI (Part 2)).



  22. Pingback from Resolución de Pantallas « Cosas sencillas:

    [...] ás puntos por pulgada, dpi), además del tamaño (más sobre esto en High DPI Web Sites y High DPI (Part 2)). Visto en: FACTOR HUMANO Esta entrada fue publicada el [...]