Retina display websites

Discussion in 'Web Design and Development' started by Hexiii, Mar 30, 2013.

  1. macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #1
    Okay, I've read alot about making a website for retina displays, however, I have still some questions:

    1) Did I get right, that retina displays display the content twice as big, since it would be too small if it was displayed in normal size (e.g. 960px width)?

    2) The "retina" word is everywhere, although it's just a term by Apple for their displays. Does that mean that other high-density displays (Galaxy's 441ppi) work the same way or do they display it normally. Well... it's still a phone so the website wouldn't fit twice as big into the screen, so let's say there is a 441ppi computer screen.

    3) (If the first is true) The retina displays display the content twice as big, since the density is doubled from the original. But in which ratio (if the second question is true) do the other (441ppi) displays display the content?
     
  2. macrumors 6502

    UTclassof89

    Joined:
    Jun 10, 2008
    #2
    this is a helpful article discussing CSS pixels vs. Device pixels (web browsers display images using CSS pixels, regardless of device pixels, so, no-- a Retina display won't reduce or enlarge your web graphics' size)
     
  3. Hexiii, Mar 30, 2013
    Last edited: Mar 30, 2013

    thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #3
    I already read that article.

    What's standard density then? Is there some ppi line when the display is considered a high density and then 1 CSS pixel = 4 device pixels?
     
  4. macrumors 601

    Yvan256

    Joined:
    Jul 5, 2004
    Location:
    Canada
    #4
    PPI is for print. Don't start thinking about PPI for the Web unless you want go insane. ;)

    The browsers usually do everything for you. The regular displays use the usual 1 CSS pixel = 1 device pixel.

    A HiDPI display with twice the resolution (i.e. 4 pixels instead of one) would require an image at twice the resolution but still displayed at the usual 1:1 ratio.

    Example: you would use the following HTML code to display a 200x200 pixels image:
    [img src="/images/My-HiDPI-image.jpeg" width="100" height="100" alt="A nice HiDPI JPEG" /]

    Most recent browsers, I mean browsers which aren't 5+ years-old Internet Explorer browsers, will usually resample (instead of resizing) images in order to display them without jagged edges.

    So for your HiDPI HTML/CSS code, just use twice the resolution. You should use CSS to detect the device pixel ratio so that you don't send HiDPI images to users with regular displays.

    You might also want to think about mobile users because of monthly data caps, so don't go too heavy with graphics. A HiDPI JPEG, for example, can probably be saved at a lower quality setting since the compression artifacts are going to be smaller than usual.
     
  5. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #5
    PPI is not only for print, I was talking about ppi of a display not an image.

    HiDPI means (at least I think) that a certain display has high ppi (for example iPhone retina display - 326ppi).

    But I don't get the doubling pixel thing... Are the displays (computers with that displays) made in a way that they scale everything to the same size (real dimensions - cm, inches etc.) like on regular display and therefore you need double resolution? Because if it stayed in the same pixel dimensions, it would be really tiny because of the HiDPI?

    Or is it the browser which when detects HiDPI screen, it behaves that way?

    I am sorry, if these questions sound stupid, but I think I am missing something... :)
     
  6. macrumors 601

    Yvan256

    Joined:
    Jul 5, 2004
    Location:
    Canada
    #6
    But whatever the PPI of a display is, you'll never be able to know. The only information you will have access to is the pixel density. Displays are not like print, you don't control the physical size of what you display, that's why I said to forget about PPI for displays.


    Again, I don't use PPI to account for that. As soon as something has a pixel density over 1:1, I count it as "HiDPI".

    As far as the CSS and HTML are concerned, the displays are still 1:1, i.e. your 960 pixels wide HiDPI display is still 480 pixels wide in your code.

    But if you, as a coder, detect HiDPI via the CSS media queries, you need to supply double-resolution images. Everything else, coordinates, etc. are still 1:1 otherwise people would go nuts trying to maintain everything.

    It was also the easiest way to maintain compatibility with current non-HiDPI websites.

    So to make a "Retina" website, just code everything as usual but use CSS media queries to supply double-resolution graphics when appropriate. Also use media queries to supply normal-resolution graphics, to avoid either from having to download two sets of images.
     
  7. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #7
    But pixel density = ppi (pixels per inch)


    Yeah, but what decides which density is over 1:1? I know retina pixel density is doubled but where is the line when it counts as HiDPI? You can also double 50ppi and it will still be low number, therefore not counting as HiDPI.



    I know what should I do when making a website for retina displays, I am just trying to get the theory.
     
  8. macrumors 601

    Yvan256

    Joined:
    Jul 5, 2004
    Location:
    Canada
    #8
    No, it's not PPI. I'm sorry I used the term "pixel density" above, I meant to write "pixel ratio".

    The pixel ratio is a value which indicates the density versus a regular display. An iPhone 5 will have a pixel ratio value of 2.0 because it uses two pixels horizontally and two pixels vertically to display a single "regular" pixel.


    The CSS media query code will return the pixel ratio of the device, you're not the one deciding or calculating anything. A device could have a pixel ratio value of 1.5, that's not double the normal resolution but it's still higher than 1.

    As I said in my first reply, forget the PPI, it's not used in the code.

    Read about CSS pixel-ratio.
     
  9. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #9
    Oh.. that's it! Thank you :)
     

Share This Page