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.'"
...tell me they aren't going to do this.
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...
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
how about they hammer out existing css standards and compatability between browsers before they start trying to create new standards.
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
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.
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.
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.
It's interesting that nobody complains much when a browser does this scaling when printing a webpage. I'm pretty sure they'll let you turn the feature off, but suppose you had a display with a resolution of 600 DPI? Any browser that assumed 1 css pixel = 1 device pixel would render a webpage that has a maximum width of 800 pixels as just under 1.5 inches wide, and quite unreadable.
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.
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.
same here... on my cell phone.
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:
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.
Excuse me but isn't a pixel an elementary PICture ELement? If a pixel is rendered as 2x2, this changes the very definition of what a pixel is. While we're at it, we might as well change the metric system so that a meter really means 2 meters.
Visit http://ringbreak.dnd.utwente.nl/~mrjb/growingbettersoftware to download your free copy of the book
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.
It rerenders the images at the present resolution, and text is vector graphics, so no problem there.
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 own events - only their parent select boxes can do that. I really wish they did, because I'd like to make a combo box into a thing that you can use to reorder elements, and it can't be done without that.
My pet peeve with Opera is far worse - iframes are always on the top layer (so you can't have, for example, a menu system in one IFrame that shows the menu that runs into another). The "standards" don't matter - only those standards met by other browsers are real standards that need to be met. The fact that Opera doesn't meet this standard means that I either have to design sites differently, or not support Opera.
Where I work we do the latter because Opera's marketshare is so little.
Mod me down and I will become more powerful than you can possibly imagine!
A lot of /. seems to look at this issue as a technology or even a web technology issue.... but from a designer's POV it's always been a communication arts issue having to do with compositional layout, not html layout.
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.
A fool throws a stone into a well and a thousand sages can not remove it.
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.