Slashdot Mirror
Next in Browser Development, High DPI Websites?
Joost de Valk writes "In a post at the WebKit blog, Dave Hyatt raises interesting points about the future of web development and browsers. He says, that with screens getting more and more pixels, it is imperative website design takes the next step: High DPI Website rendering. This could mean that a CSS pixel (px) is rendered as a 2x2 pixelblock. In the article he also mentions WebKit will be providing possibilities to use SVG for all kinds of purposes, like backgrounds. He calls upon other browser developers to take part in the discussion so that 'concrete standards in this area can be hammered out.'"
The headline says "high DPI"... if each pixel was rendered as a 2x2 block, wouldn't that make it a lower DPI? Correct me if I'm wrong...
WHO NEEDS SHIFT WHEN YOU HAVE CAPSLOCK/ DAMN1
Nobody's forcing you to look at a website in high DPI, they're just enabling you to do so.
-:sigma.SB
WARN
THERE IS ANOTHER SYSTEM
This is going to be a nightmare for web developers like me. Not only will I have to test my website in Internet Explorer 5, 6, 7, Opera 6, 7, 8, Firefox 1, 1.5, 2, Konquerer/Safari, Netscape, etc... but also test in the SAME browsers on monitors with a high resolution to make sure the High DPI rendering doesn't mess up navigation.
This is just a bad idea. Not only is this not going through the W3C as it should to be standardized, but many sites do pixel positioning to have ultimate control over their design. This could throw that out of wack (it looks like this only affects CSS and not pictures/spacers some developers use). Also, I can guarentee you if this is standardized, it'll be like Microsoft's Alpha-Transparent PNG support... it'll come... eventually...
I think maybe we should wait until the current standards are, erm, standard.
Even today I have to tweak valid code to make all the browsers see it the same.
Get the basics right first, like float, tranparency, opacity etc then add to it with whatever is needed.
Common sense is not so common
I'm still running in 320x200, you insensitive clod!
An eagle-eyed developer may enjoy being able to have many open windows crammed into the same amount of space, but many of us would like our apps to remain more or less the same size and don't want to have to squint to read text.
... that is vector graphics as a BACKUP image to be used IF and only IF the user has configured their browser to "zoom" the websites for higher DPI. That way fonts look good and larger images look good too, yet they won't be sending huge GIF's and JPEGS, or even compressed PNGs, instead you'll get a nice smooth 30k image that looks beautiful no matter what your resolution.
That part is talking about YOU.
The full solution to this problem therefore is to allow your user interface to scale, with the scale factor being configurable by the user. This means that Web content has to be zoomable, with the entire page properly scaling based off the magnification chosen by the user.
This part is talking about ME. People with high DPI and not so great vision would like to be able to scale pages. If you RTFM you'd see that it's optional and he's suggested SVG
Sounds damn good to me!
Cwm, fjord-bank glyphs vext quiz
There should be more focus on developing websites to be compatible with smaller screens than desktop monitors. How many times have people tried to view some useful website on their PDA or cellphone or other small screened device, only to have it practically unusable due to formatting issues with such a small screen real estate. There is a far higher need for small screen compatability than large screens due to the fact that a bigger screen does not screw up formatting, and therefore is not an issue for the user.
Opera has a zoom function that scales the entire page already. Images smooth as they are enlarged and do not look pixelated while text takes on a larger font size without losing detail. Basically it works just like this guy describes and it already exists!
The OS, or at least the OS API seems to be the one rendering text, stock buttons and such, and there is no way to take a linear unit of measurement to make an object of a certain size and expect it to be the same on all computers, 1cm on one screen is .75 on another. I would like a 12 point font to show up as a smooth font on a higher DPI display, but what that does is screw up a lot of dialogue boxes. I think Vista supports this. Whether IE7 would support it is a different issue, it will only if there is a demand for it.
Without changing the dot pitch 2x rendering would make the ducument twice as wide, and that's going to make things worse, not better.
FWIW, I currently see no industry interest in higher pixel density screens, in fact I see the total opposite. Most 19" screens on the market have the same number of pixels as 17" screens. This maybe good for filling a gamer's field of view but documents are much less readable on a 19" LCD than on a 17" one. The only big change which might happen in the near future is that 19" monitors catch up with 17" ones in terms of pixel density.
No sig today...
Scaling is the right approach, but it's the user (*not* the developer) who should be in control. No one else has any right (or even ability) to set pixel sizes on my display. Am I 320x200 or 1920x1440? 3" handheld or 27" plasma? How far from the monitor am I? How many arcseconds per pixel? How good is my eyesight? What colors and contrast levels do I prefer? What font faces am I most comfortable with? If you don't know for absolute sure, then stay the hell out of my settings.
Any page that says "designed for resolution X" is done by a hack. Current web designs scale ok if you stay away from absolute units. Scaling images properly is a royal pain in the ass. But turning browsers into pixel-perfect rendering devices (even by translating CSS pixels into real pixels) is not the answer. Pixel units should be abolished from the CSS spec (along with points, picas, inches, and cm). Everything should be done with em/ex. Just adding rounded corners to CSS would make a lot of image scaling problems disappear. SVG can pick up the slack.
The web is an information exchange conduit, not a graphic design medium.
Democracy is two wolves and a sheep voting on lunch.
However, I would much prefer a standard whereby those wanting higher def could have higher def, and those wanting more content visible could have more content visible. It's all a matter of scaling, once the resolution has been defined.
The main problem with the web - and with GUIs in general - is that they assume that the designer knows better than the user how the user wants things. There are good image formats out there, but very few people use them. SVG has been around for a while, but is rarely implemented. VRML fared no better. Some page styles only work at all at certain resolutions, relying on specific interactions between unscaled pixel-based images and scaled vector fonts.
Part of the problem is that designers have required more and more features, and that different parties have supplied those features in totally incompatible ways - sometimes deliberately so. (JScript was intentionally different from Javascript, for example.) There again, sometimes parties (notably the WWW Consortium) manage to mess things up so much that features never get implemented at all (some HTML standards suffered this fate), only ever get implemented by one very small group (multicast Mosaic, anyone?) or end up being deliberately avoided (font tags, blink tags, backgrounds in tables or table cells, bi-directional text, Java applications as opposed to applets, etc)
As it stands, there is so little agreement on anything and so little uniformity in implementation on the few things that are agreed on, it's a wonder that the web works at all for anyone for any of the time. (Many pages are designed to only work on one specific version of one specific browser on one specific OS with one specific set of utilities installed, so I guess that it is really misleading to call the WWW "world-wide".)
It's a small world and it smells funny; I'd buy another if it wasn't for the money; Take back what I paid (SoM)
Lots of web designers fuck up. It's an issue.
-jcr
The only title of honor that a tyrant can grant is "Enemy of the State."
Using px for 2 (or any other number of) pixels per pixel is plainly stupid. Pixel is just a pixel. If web developers used px as measurement, and now they are realising that their design would not work with higher resolutions, it is their stupidity. They should have used device independent units, such as points, millimeters, inches, centimeters, furlongs, miles or whatever is possible to use in CSS.
First they ignore you, then they laugh at you, then they fight you, then you win.
The default setting is 72 dpi for Macs and 96 dpi for Windows, not vice versa. Actually, neither is true for most of the displays available nowadays. Put a ruler to your screen and measure the pixels to an inch. My 23" Apple Cinema Display has 98 dpi, the PowerBook it's attached to 106 dpi.
In mozillaoid browsers you would therefore enter this into your user.js:
user_pref("browser.display.screen_resolution", 98);
This was just posted: High DPI Part 2
WARNING: If accidentally read, induce vomiting.
FWIW, I currently see no industry interest in higher pixel density screens, in fact I see the total opposite.
I have no idea what you are basing this on, because manufacturers currently offer a wide variety of displays with a huge range of true DPI.
Many laptops for years have been coming with 15" screens that have 1600x1200 resolution, while the standalone 15" LCD you buy at a store might only have 800x600. I'd say that's a pretty significant difference -- enough that IBM shipped their thinkpads with the "large text" setting as default for many years.
There has been a gradual trend towards increasing physical DPI in devices, simply because we all want crisper text and manufacturing limitations are the only reason we don't. Maybe you're happy seeing individual pixels, but when the average customer sees the quality difference between a 96dpi LCD and a 300 dpi LCD, he'll always prefer the higher -- assuming it doesn't make everything hard to see.
Recursive: Adj. See Recursive.
Let's say you have one of the ultra high rez wquxga monitors that's 3840x2400 in 24" (those are real by the way). At a size developed for normal monitors, you wouldn't be able to see anything. One pixel is just not visible with the naked eye. It's the kind of dsiplay you can literally hold a magnifying glass to to get more detail.
However I think they are wrong in that web standards need to deal with this. What should deal with it, and what will allegedly deal with it, is OSes. As OSes gain hardware acceleration of their desktops, real resolution independance becomes easy to achieve. You know the rez of the monitor and its' size (monitors report how large they are). Then you just need the user to specify zoom level. At 100%, a 12 point font is rendered as 12 points, at 50%, it's rendered as 6 points. Graphics could likewise be scaled.
Vista is allegedly supposed to be able to do this, though I'm not sure it'll actually make it in for release. Either way, I suspect it's something comming for all OSes sooner rather than later.
Opera has for a long time supported page "zoom", that allows you to make things bigger, without messing up the layout. IE7 will, as far as I know, have this feature too.
Why all this new standards/browsers/websites talk?
On high DPI displays. For example:
A normal 19" LCD monitor you buy for a desktop is usually 1280x1024. Do the math, it works out to around 90dpi, or perhaps ppi (pixels per inch) is a better term. Ok but now a friend of mine has a laptop that has a screen that's only 15" but 1600x1200. That's about 130dpi. So an image on a typical desktop monitor appears much larger than the same image on that laptop. Actually, when you get down to it, text is hard to read on it, it's so small.
Thus what you need is to scale it up so that if something requests to be displayed as 10 pixels, it's actually displayed as more so it appears larger. This of course goes to even larger extremes with higher resolutions displays. You can get displays that are in excess fo 200dpi. Gets real hard to see anything at a normal size, when normal is made for displays in the 80-90dpi range.
Ever since the seperation of style and content via CSS, the web has been moving much faster towards the goal of being equally well rendered in every medium. This is why you should measure fonts in ems rather than pixels, and measure other elements in percentages or ems. That way, your site will look just as good on a projector as it will on a mobile phone. With a move to liquid layouts and SVG, and a lack of references to pixels, the devices the webpage will be rendered on should become completely irrelevant to web developers.
Consider a Web page that is designed for an 800×600 resolution.
Okay, this is your first mistake. When you design a web site for a particular resolution you're guaranteed that it will display undesirably on more than 50% of your visitors' screens. Even if my screen is exactly your projected size there is a very good chance I'll be annoyed by having to resize my browser.
In fact, if I have to make my browser window any other size than the one I've set it to in order for your web site to be useful then you've already pissed me off. I'm the customer. You don't want to piss me off.
Its not like this wasn't understood from the first days of NCSA Mosaic nearly 15 years ago. That's why the original specs for html intentionally offered no way to specify pixel placement.
Moderating "-1, Disagree" is simple censorship. Have the guts to post your opinion.
Graphics could likewise be scaled.
Yes, they can--but scaled graphics will never look as good as higher-resolution source graphics. The entire point of what he's talking about is enabling web developers to have pages with images that look fantastic when scaled up, rather than looking like a page with small images that have been automatically scaled by the OS/browser.