Slashdot Log In
Next in Browser Development, High DPI Websites?
Posted by
ScuttleMonkey
on Sun Apr 23, 2006 01:23 AM
from the more-dots dept.
from the more-dots dept.
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.'"
This discussion has been archived.
No new comments can be posted.
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
Full
Abbreviated
Hidden
Loading... please wait.
Please no... (Score:2, Insightful)
I run at a high resolution so I can fit more on the screen, not make it more detailed.
1600x1200 is not a high-def 800x600!
Geez...
Re:Please no... (Score:5, Insightful)
Nobody's forcing you to look at a website in high DPI, they're just enabling you to do so.
-:sigma.SB
Parent
Re:Please no... (Score:3, Insightful)
Nobody's forcing you to look at a website in high DPI, they're just enabling you to do so.
I get the feeling it's just another way to screw up a webpage.
I agree...something fundamentally wrong with this. (Score:4, Interesting)
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.
Parent
Re:I agree...something fundamentally wrong with th (Score:3, Interesting)
The demand for better monitors is somewhat limited by the second contention. Why buy a high
Re:I agree...something fundamentally wrong with th (Score:3, Informative)
For menus at least, every desktop environment save windows lets you specify the font size of menus and other parts. So grap your upgrade of your OS today! ;)
For much of the remaining text, setting the DPI correctly helps a lot. That leaves the px specified fonts... webdesigners who use these should be summarily shot (with chocolate, e.g.), but the only help there is the zoom, as you write.
I run 1600x1200 on a 21" and 19", and I am quite happy about it. But I don't use windows anymore.
Re:I agree...something fundamentally wrong with th (Score:3, Interesting)
Re:I agree...something fundamentally wrong with th (Score:5, Informative)
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.
Parent
Re:Please no... (Score:5, Insightful)
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!
Parent
Re:Please no... (Score:2, Informative)
Opera already had the option for years so I don't know why that's news.
Re:Please no... (Score:2)
Flexibility (Score:5, Informative)
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".)
Parent
It'll reach a point where you can't (Score:5, Interesting)
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.
Parent
You're missing the point (Score:5, Insightful)
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.
Parent
Re:Please no... (Score:3, Interesting)
Wait... (Score:4, Insightful)
They are talking about usability (Score:4, Informative)
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.
Parent
Re:Wait... (Score:5, Informative)
If you're not aware, the CSS "px" unit is defined in the standard as a specific angle of the viewer's vision. In the case of a user sitting ~18in from a ~90DPI display, that works out to one device pixel per "px", or 3/4 of a point.
Parent
Bad idea in so many ways (Score:5, Insightful)
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...
Re:Bad idea in so many ways (Score:5, Insightful)
That approach is already broken; when the user overrides font and font sie with their own (a perfectly legitimate thing to do) this easily ends up looking like garbage. IF you want "ultimate control over your design", publish a PDF.
Fortunately, and unlike your assertion, most sites do not do this, and adapt quite well already. In fact, quite a lot of sites (nytimes.com, for example) look distincty better once you overrride their font choices.
Parent
Re:Bad idea in so many ways (Score:2)
I would argue that you're wrong, or that at the very least this reasoning does not apply universally. This site [darkicon.com] (shameless plug) looks just fine regardless of the font size, or whether you use a serif or sans-serif font. The whole thing scales quite well, and does use transparent GIF spacers for "ultimate control". So where's the proble
Re:Bad idea in so many ways (Score:5, Informative)
But that's sort of the qhole point of this article: the designer just don't have the information needed to make sure the page looks good and is legible for all its users. Ultimately, you can not know what size and typeface I prefer or need. So you do need some solution to make it look reaonable across a wide range of device parameters and preferences.
Really, _tight_ design control on the web is a pipe dream. The successful designs are made to still look good despite a great deal of unanticipated variation in the end result. Those designers who go all posterior orifice over it and create brittle designs that may look "pixel perfect" on a narrow range of outputs, and fail badly on the rest.
Parent
Compatible (Score:5, Insightful)
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.
Hold yer horses (Score:4, Funny)
Re:Hold yer horses (Score:5, Insightful)
Parent
A couple of things... (Score:3, Insightful)
The web will render text just fine for people who set their screen's dpi correctly. Gone are the days of 72px (96 for Macs) == 1 physical inch on a screen. It's just the images and backgrounds (or anything else with fixed dimensions) that won't scale with the text.
While I agree to a point (being able to cram SVG into everywhere it could possibly work will be awesome), any hi-def web design will take a back seat while the next generation standard is decided upon... I vote XHTML2 over HTML5.
Re:A couple of things... (Score:3, Interesting)
In mozillaoid browsers you would therefore enter this into your user.js:
user_pref("browser.display.screen_resolution", 98);
Re:A couple of things... (Score:3, Informative)
*let's face it, with only 128 Kibibytes of system RAM shared with the bitmapped display, you really don't want to push the resolution
Small Screens (Score:5, Insightful)
Opera Zoom (Score:4, Informative)
Re:Opera Zoom (Score:3, Interesting)
Re:Opera Zoom (Score:3, Insightful)
Some images obviously still come out looking rough. I use it to show our graphics designer why we shouldn't make fonts out of graphics. She still thinks it's worth it for some reason.
Opera is not light years ahead. Like Firefox and IE it has its limitations. So far, I've yet to find one from Firefox that I can't work around easily. My pet peeve with IE is that option elements don't send or recieve their
Sweet. (Score:2)
First, the OS probably needs to support it (Score:4, Insightful)
gets it half-right (Score:4, Insightful)
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.
Hey, good idea (Score:2)
A fully scalable, vector-based browsing experience would be nice.
Toss in support for animation, full-motion video, and client-side programming in something other than JavaScript, please. And 3D [microsoft.com], while we've got the hood up.
Let's call it XAML [microsoft.com]. Is that good with everyone?
Device (in)dependent units (Score:3, Insightful)
He's posted a followup! (Score:5, Informative)
What's new? (Score:3, Interesting)
Why all this new standards/browsers/websites talk?
Article "doesn't get it"... (Score:3, Insightful)
The browser determines how HTML is rendered.
And that pretty much sums it up. This is not a web standard that has to be introduced on a element level within a page - that would be useless as you want to upscale the whole thing. This is a browser rendering issue pure and simple, and can be handled however the browser writers see fit.
However, before thinking about upsclaing, they need to think about a few 'related' issues:
It's good start, but... (Score:3, Interesting)
The web is for all media (Score:5, Insightful)
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 [w3.org]. 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.
Fools (Score:5, Insightful)
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.
A designer's perspective (Score:3, Insightful)
What this means is that we designers are very concerned about proportions and the size/scale relationship between type on the page and graphics on the page.
Given this statement, the existing option of using relative sized type that will scale relative to other type on the page and maintain that relationship... is only half of the equation.... the compositional layout still ends up broken, ie: the important graphic on the page no longer has the hierarchical and visual importance it was supposed to have in the design because all the text on the page is suddenly 2X bigger and the visual combination of text and graphic no longer communicates the message effectively and has become a cramped, chunky, messy version of what it was intended to be.
This explanation is why a designer may choose to use pixel sizes for a particular layout instead of using relative sizes.
Additionally, a designer would modify a compositional layout of the same content, given the option, if there are two or more set dimensional targets... simply because each dimensional size may have a optimal layout to best communicate the message, ie: a landscape design compared to a portrait design or better yet a letter page sized design compared to a magazine page design.... and this is due to the fact that there is more space available and a different balance of space and content is required, which means different margins, different graphic sizes, etc, etc... but not simply a scaled up version.
An analogy for the uber geek would be to think in terms of physics and nature.... the bumblebee, we all know that the bumblebee at any other scale would not be able to fly with it's current proportions of wing/body/mass... basically a given design won't always continue to work if you simply scale it up proportionally.
To sum up, any tools that will allow us to more effectively do our job of communicating will get our support. This doesn't mean the tools won't be abused by some, in fact some designers will take it as a challenge to abuse the tool to the extreme and will simply call this 'cutting edge' design, even though the more experienced designers will look at it and call it 'cutting room floor' design.
So flame on about standards and liquid designs, just know that until the standards and technology accomodate good visual design practice and methodology (which has been around a lot longer and has a much more mature heritage, more research done and more results in real use) then designers will continue to ignore them when they get in the way.
Re:A designer's perspective (Score:3, Insightful)
If that's what you read then read it again. I said that fixed proportions are often essential for communicating a message which combines graphic and textual elements and that designers will prefer using pixel sizes on the web until an alternative method is adopted.. one which allows both graphic and textual elements to scale proportionally together. The current alternative is to make the text part of the graphic... which is an o
Re:A designer's perspective (Score:3, Insightful)
Many comments were denouncing this capability as something that should be left up to the browser to do or the OS to do.
Yet without some way to specify images which can be scaled, in a way that doesn't degrade their quality, ie: SVG or PNGs with multiple resolutions, or simply a CSS declaration that provides for two or more images with differing quality... then the user experience is going
Re:hammer out standards? (Score:2)
Re:hammer out standards? (Score:2, Interesting)
Re:I don't like my browser maximized! (Score:2, Insightful)
Guess What? (Score:5, Insightful)
-jcr
Parent