Become a fan of Slashdot on Facebook

 


Forgot your password?
Close
typodupeerror
×

Next in Browser Development, High DPI Websites? 447

Posted by ScuttleMonkey 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.

Next in Browser Development, High DPI Websites? More

Next in Browser Development, High DPI Websites?

Comments Filter:

  • Please no... (Score:2, Insightful)

    by shadwwulf ( 145057 )
    ...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...

    • Re:Please no... (Score:5, Insightful)

      by Solra Bizna ( 716281 ) on Sunday April 23, 2006 @01:31AM (#15183529) Homepage Journal

      Nobody's forcing you to look at a website in high DPI, they're just enabling you to do so.

      -:sigma.SB

      • 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.

        • People have widely-differing screen sizes now. If you try viewing the same picture on a phone and on a 23" screen, things are going to look very different. Developers are already capable of setting height and width in measurements other than pixels(em, percent). It would be nice if in addition to that, it were possible to use measurements of centimeters or inches and possible to have images that look good at different resolutions. If it was possible to set the size of everything on a page in actual physic

      • I agree...something fundamentally wrong with this. (Score:4, Interesting)

        by Joce640k ( 829181 ) on Sunday April 23, 2006 @02:05AM (#15183636) Homepage
        To make this work you need more dots per inch on the monitor, not just "higher resolution". Current "high resolution" screens are bigger, not more densely pixelled.

        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.

        • BS. My first monitor was 640x480 14 inch jobby. It was ok, but the pixels were very visible. My current monitor is 19" and capable of 1600x1200. I never use that mode for two reasons though. The first is that it's only capable of that at like 50 fps, and the second is that everything seems to specify font size in pixels, so if i put the resolution all the way up to make things look sharper, all the text is tiny.

          The demand for better monitors is somewhat limited by the second contention. Why buy a high

          • 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.

            • 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! ;)

              Please don't spread misinformation. Windows certainly does let you specify the font size of menus. It's right there in the Appearance tab of the Display control panel: you can configure fonts and sizes individually for most UI elements. Alternatively, you can adjust font sizes globally from the Advanced dialog of the same control panel.

              (Note that thi
              • But nor do I know anyone who uses the theming engine in XP

                More fool them. The defaults are pretty lacklustre, but some excellent third-party ones exist.

                Anyway, in answer to your real point, yes the options are still available when using XP's theming engine, in exactly the same place they've always been.
        • I fully agree with the point you make, but there are exceptions. Like my current notebook (Fujitsu P7010D) which has only a 10.5 inch (wide)screen, but still with 1280x768 pixels. I can tell you, those pixels ar pretty small!! A nice side effect of higher pixel resolutions is also that when you have a dead pixel, it becomes much less visible. In my case I've one blue pixel constantly on. My dealer was willing to replace the screen, but I left it as it is. You simply don't see it.
          • 1280x768 , is that some kind of ultra ultra wide screen ? :p

            i've got a widescreen with 1280x800 over here (and luckily on a 15.4" screen, so i can see the pixels too)

            i use x11 with 100dpi fonts, usually size 10 or 11 ... so this means the text is tiny, but that's what i'm used to. maybe at 60 i'd really like to see 2x2 pixels ... but until then, hell no.
            • "1280x768 , is that some kind of ultra ultra wide screen ? :p"

              Well, obviously it is 1280:768, or after division by 256, 5:3, or 15:9. So it is almost regular wide screen as in 16:9. Does not seem overly wide to me. But don't take this from me, this is typed on a screen with 16:10 resolution.

              By the way, there is such a thing as a SHIFT key. You can find two rather largish keys on both sides of the alphanumeric part of most keyboards. Try and use them once in a while before posting something completely uninte
        • 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.
        • I have a 17 inch at work which runs at the same resolution as my 19 inch at home (1280x1024). They're LCDs, so they look like crap in anything other than native. The 17 inch makes most things really hard to see, not just fonts, but those tiny icons used all over moden operating systems. Oh, and i upped the DPI, which makes a bunch of programs misbehave and look all gross because they expect a certain standard DPI. I think there's a certain resolution at which monitors display things big enough to read t

    • Re:Please no... (Score:5, Insightful)

      by CODiNE ( 27417 ) on Sunday April 23, 2006 @01:45AM (#15183571) Homepage
      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 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 ... 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.

      Sounds damn good to me!

    • Re:Please no... (Score:2, Informative)

      by KDR_11k ( 778916 )
      Depends. Viewing 640x480 Flash movies is much better at 200% zoom. Zooming also helps when some retarded web designer chose to use a font size that hurts to read.

      Opera already had the option for years so I don't know why that's news.

    • Flexibility (Score:5, Informative)

      by jd ( 1658 ) <<moc.oohay> <ta> <kapimi>> on Sunday April 23, 2006 @02:16AM (#15183662) Homepage Journal
      I, personally, would prefer higher definition than more content. I don't want more space for crappy adverts, and the eye doesn't work well beyond 66 columns of text (which is why that is the standard for typesetting).


      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'll reach a point where you can't (Score:5, Interesting)

      by Sycraft-fu ( 314770 ) on Sunday April 23, 2006 @03:34AM (#15183840)
      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.
      • > However I think they are wrong in that web standards need to deal with this.

        i disagree: you need Graphics that scale well on webpages (SVGs) instead of plain old PNGs that wont scale (as good)

      • You're missing the point (Score:5, Insightful)

        by stewby18 ( 594952 ) on Sunday April 23, 2006 @12:17PM (#15185326)

        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.

    • Also, if you're doing your web design properly you only use pixels for specific tasks, everything else is in relative terms which should be made to look right by having the monitor's DPI set correctly. Linux (Most user-friendly flavours), OS X and Windows XP all do this either automatically (Macs) or with a nice on-screen ruler.

      Leave the bloody pixels alone!

    • Re:Please no... (Score:3, Interesting)

      by caffeination ( 947825 )
      My grandfather's monitor (at work) of resolution > 1024x720 is set at 800x600, because the magnifying effect makes it easier for him to read. This added detail would benefit him.

  • Wait... (Score:4, Insightful)

    by yoyhed ( 651244 ) on Sunday April 23, 2006 @01:31AM (#15183528)
    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...

    • They are talking about usability (Score:4, Informative)

      by Sycraft-fu ( 314770 ) on Sunday April 23, 2006 @03:45AM (#15183861)
      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.
    • The headline says "high DPI"... if each pixel was rendered as a 2x2 block, wouldn't that make it a lower DPI?

      I think you failed to read between the lines on that one.
       
    • he said one CSS PIXEL would become 2x2 real pixels.

      presumablly fonts will simply be drawn at that new bigger size not drawn at the web designer specified size and scaled. Images will have to be scaled unless they would previously have been scaled down but not nessacerally by something as crude as just repeating the pixels.

      basically the aim is to let you run your screen in a very high dpi mode without making your text unreadable. Right now on most machines the pixels are still the limiting factor in how smal

    • Re:Wait... (Score:5, Informative)

      by CTachyon ( 412849 ) <chronosNO@SPAMchronos-tachyon.net> on Sunday April 23, 2006 @07:06AM (#15184173) Homepage

      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.

  • Bad idea in so many ways (Score:5, Insightful)

    by Kasracer ( 865931 ) on Sunday April 23, 2006 @01:36AM (#15183542) Homepage
    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...

    • Re:Bad idea in so many ways (Score:5, Insightful)

      by JanneM ( 7445 ) on Sunday April 23, 2006 @01:53AM (#15183599) Homepage
      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).

      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.
      • That approach is already broken; when the user overrides font and font si[z]e with their own (a perfectly legitimate thing to do) this easily ends up looking like garbage.

        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)

          by JanneM ( 7445 ) on Sunday April 23, 2006 @03:28AM (#15183825) Homepage
          If a site requires the user to manually set their browser's font in order for the page to look good and be legible, then the designer of the page did not do their job properly.

          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.

    • Redefining what a css pixel is will make things stupid and unpredictable.

      But, you can write DPI independant sites now by using pt, em, and ex measurements. Want to test it? Just load up firefox and zoom in/out. If your site keeps the same look, just bigger/smaller (this means the size of columns etc too, not just text), then you are set. The trick comes with images which is basically impossible to do reliably right now as IE doesn't support SVG and Firefox's implementation leaves much to be desired.

      I we
    • 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.

      I do so desperately hope you do not think any webdesigner has "ultimate control" of their layout. They do not, and they should not. Almost every single web page I visit is changed a bit by my web browser to maximise my legibility and my usability. Fonts are over-rided, widths are changed, text is removed, links are underlined, oth

  • Compatible (Score:5, Insightful)

    by Kangburra ( 911213 ) on Sunday April 23, 2006 @01:36AM (#15183544)
    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.

  • Hold yer horses (Score:4, Funny)

    by Dachannien ( 617929 ) on Sunday April 23, 2006 @01:44AM (#15183567)
    I'm still running in 320x200, you insensitive clod!

  • A couple of things... (Score:3, Insightful)

    by Dracos ( 107777 ) on Sunday April 23, 2006 @01:48AM (#15183580)

    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.

    • 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);
      • The first few macs actually had 72 dpi screens. This was resolution chosen (among other reasons*) because the ImageWriter printer just happened to print at 72 dpi. It's also not a coincidence that the LaserWriter outputted 72 dpi. It made for some true WYSIWYG!

        *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 ;)
        • The first Macs had a 72DPI to match print point sizes (1/72th inch). The ImageWriter's output resolution was 144DPI. The resolution of the first LaserWriter was 300DPI. Look it up.

  • Small Screens (Score:5, Insightful)

    by ThePeices ( 635180 ) on Sunday April 23, 2006 @01:49AM (#15183582)
    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 Zoom (Score:4, Informative)

    by Anonymous Coward on Sunday April 23, 2006 @01:50AM (#15183585)
    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!

    • Re:Opera Zoom (Score:3, Interesting)

      by TeXMaster ( 593524 )
      Indeed, that's just one of the many Opera features that make it so much more extremely convenient that any other browser I've used (IE, Mozilla Navigator (now in SeaMonkey), Mozilla Firefox, Konqueror ...). (It's not open source? Who gives a damn, it's still light years ahead.)

    • Re:Opera Zoom (Score:3, Insightful)

      by fireboy1919 ( 257783 )
      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
  • Good, i have a 1680px wide monitor. You still hit websited that are only 800 wide all that time, and dont scale at all. Slashdot does through, theyre good like that. Mmm, widescreen.
    • There's a reason for this, and it's sitting in front of the computer. Assuming that you are human, the easiest column width for you to read is approximately 66 characters. Less than that and you spend a lot of time scrolling vertically, more than that and you begin to find it difficult to match the start and ends of lines. This has been known about in the typographical industry for decades; ever wonder why newspapers have columns, or why larger hard back editions of books use bigger print than the paperb

  • First, the OS probably needs to support it (Score:4, Insightful)

    by Jeff DeMaagd ( 2015 ) on Sunday April 23, 2006 @01:56AM (#15183609) Homepage Journal
    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.

  • gets it half-right (Score:4, Insightful)

    by eddeye ( 85134 ) on Sunday April 23, 2006 @02:11AM (#15183647)

    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.

    • The web is an information exchange conduit, not a graphic design medium.
      Unfortunately, what a lot of people *want* is a graphic design medium. If you don't give it to them, then they'll hack away at it until they get something like what they want, and the results will be... well, exactly like what we have now.
      • Unfortunately, what a lot of people *want* is a graphic design medium. If you don't give it to them, then they'll hack away at it until they get something like what they want...

        They already have it. Let them use pdf instead of corrupting html. I understand the pressure, but a compromise helps no one. The bastardized half-semantic, half-presentation system we have now is the worst of both worlds.

  • He calls upon other browser developers to take part in the discussion so that 'concrete standards in this area can be hammered out'.

    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?

  • Let's say the Web designer uses a 50×50 pixel image for the button. What if you could use a 200×200 image instead?

    Let me answer this one: the raster graphics in your site will be close to 4 times larger in bandwidth.

    The SVG solution is as viable as ignoring Internet Explorer for a site can be, but of course you can have Flash as a fallback as there are many SVG parsers and renderers written for Flash. Whether you want to do that is another question, as 2-3 pieces of Flash on a page can be ok, but
    • I currently use computers with 72dpi, 100dpi, and 225dpi screens. All of these are consumer devices. On the 225dpi screen, Opera is the only option for a browser, since most web sites use resolution-dependent units for many things and end up with something too small to read. Text, however, looks absolutely stunning when rendered at the correct size.
      • "On the 225dpi screen, Opera is the only option for a browser, since most web sites use resolution-dependent units for many things and end up with something too small to read."

        Images are resolution dependent, it's their nature. Even if all CSS used % and em, images would remain resolution dependent.

        Apparently the problem is with IE6 and Firefox not resizing images, not the sites. IE7 will also sport zoom mode so here's a second option for you.

        I have a question: what the 'ell is that consumer device with a 2
        • Even if all CSS used % and em, images would remain resolution dependent.

          With proper interpolation, an 72dpi NxN image will look about as good at NxN on a 200dpi screen as on 72dpi screen. Slightly worse, but not much.

          Apparently the problem is with IE6 and Firefox not resizing images, not the sites

          No, the problem is with them resizing images badly. They both use nearest-neighbour interpolation. This was a good design decision when people were running web browsers on 386-era machines with graphics

          • "With proper interpolation, an 72dpi NxN image will look about as good at NxN on a 200dpi screen as on 72dpi screen. Slightly worse, but not much."

            IE7 applies such proper interpolation - bicubic.

            On the contrary however it looks much worse, and to illustrate that try running 640x480 mode on a stock 1280x1024 LCD and on a CRT of the same size.. Even though modern LCD's apply bilinear or bicubic interpolation, it looks aliased and overall pretty bad, on CRT it looks just right.

            That's the same reason you can't

  • Device (in)dependent units (Score:3, Insightful)

    by stivi ( 534158 ) on Sunday April 23, 2006 @02:47AM (#15183742) Homepage
    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.
    • There are a few things, such as image sizes, that are only allowed to be specified in pixels by the current spec. Oh, and if you try specifying an image's dimensions as anything other than the source then Safari and FireFox (I didn't test anything else) seem to use nearest neighbour sampling for scaling. Since most graphics cards made within the last decade can do at least bilinear interpolation in hardware, there is no justification for not having a better scaling mechanism.

    • Unfortunately it's not that easy.

      • Most users/systems don't set their real monitor DPI, so all these "device independent" units are useless (and there's huge difference between defaults on MS Windows and X11).
      • Images are pixel-based and they don't scale well (most browsers have still same crap scaling algorithm since early '90).
      • CSS image backgrounds can't be scaled at all.
      • Support for SVG in current browsers is very limited

      and that's the problem - even if I wanted scallable website, I can't reliably imp

  • Comment removed based on user account deletion

  • He's posted a followup! (Score:5, Informative)

    by radicalskeptic ( 644346 ) <`moc.liamg' `ta' `x'> on Sunday April 23, 2006 @03:17AM (#15183806)
    This was just posted: High DPI Part 2 [opendarwin.org]

  • What's new? (Score:3, Interesting)

    by Lobais ( 743851 ) on Sunday April 23, 2006 @03:39AM (#15183851)
    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?

  • Article "doesn't get it"... (Score:3, Insightful)

    by Aphrika ( 756248 ) on Sunday April 23, 2006 @03:45AM (#15183860)
    The article is way off because of one simple reason:

    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:
    • Please sort out downscaling so that my web pages can take up less desktop space and still work
    • And someone sort out printing from web pages! I am fed up of having words missing off the right-hand side. Plus the last page is also useless, always containing just the footer...
    • No, it's more complicated than that. Think about images - if the page may be drawn with greater resolution, than web sites will want to provide higher resolution images. So ideally, we'd have some way to specify which image the client should download and display, depending on the user's resolution.
      • But if it's a resolution issue with images, than I'd consider it an image format problem, which impacts on a far bigger scale than just websites - icons, desktop scaling and the like.

        The solution would be to develop a new image format that can gracefully cope with scaling, or a format that contains metadata describing the image parameters - a bit like the RAW + embedded jpeg option you find on some cameras.

        Either way, I don't consider it to be a web standards issue as such.
      • Always provide the large image and scale down. Then when the browser artificially scales up, the image looks fine.

  • It's good start, but... (Score:3, Interesting)

    by Captain Perspicuous ( 899892 ) on Sunday April 23, 2006 @03:53AM (#15183879)
    It's good start, but I think it needs one change. They say about the img-element: "the only tradeoff being that the higher resolution artwork would be slower to load on low DPI displays that couldn't render all the detail anyway". To gain widespread adoption, this has to be solved first. A possible solution would be to add an additional "device-pixel-ratio" element to the http request header itself, so a server serves different size of images (jpgs, gifs, pngs) based on the resolution of a requesting device.
    • Here's a much simpler idea:

      Allow non-pixel units in specifying an image size, and then implement something better than nearest neighbour interpolation in the browser so scaled images don't look incredibly ugly. This needs only a very small change to the spec and makes it trivial to design resolution-dependent web pages by removing the last place where resolution-independent units are not allowed.

  • The web is for all media (Score:5, Insightful)

    by zoeblade ( 600058 ) on Sunday April 23, 2006 @03:58AM (#15183887) Homepage

    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.

    • 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.

      Adapting to different media requires much more than playing around with fonts, sizes, and CSS. Usually, the navigation structure and content itself need to change.

      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.

      People like you sho

  • 2x2 pixels? (Score:2, Insightful)

    by mrjb ( 547783 )
    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.

  • Fools (Score:5, Insightful)

    by Spazmania ( 174582 ) on Sunday April 23, 2006 @05:08AM (#15184002) Homepage
    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.
  • How many of you have jacked your monitor as high as it can go and THEN increased the size of the fonts so that they were as large on your monitor before you increased the resolution?

    What you find is that the fonts look INCREDIBLY better. Much more like reading paper.

    Most video cards and monitors can support MUCH higher resolutions and I'd love to surf the web with my monitor at super high resolutions with fonts to proportion (so that they are highly detailed). Problem is a LOT of web sites break horribly be

  • A designer's perspective (Score:3, Insightful)

    by foniksonik ( 573572 ) on Sunday April 23, 2006 @09:39AM (#15184600) Homepage Journal
    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.

Slashdot Top Deals

"Help Mr. Wizard!" -- Tennessee Tuxedo

Close