Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 30, 2013, 08:09 AM   #1
Hexiii
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Retina display websites

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?
Hexiii is offline   0 Reply With Quote
Old Mar 30, 2013, 10:51 AM   #2
UTclassof89
macrumors 6502
 
Join Date: Jun 2008
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)
__________________
Flash will be around a lot longer than Steve Jobs will.
UTclassof89 is offline   1 Reply With Quote
Old Mar 30, 2013, 12:00 PM   #3
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by UTclassof89 View Post
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)
I already read that article.

Quote:
On standard-density displays, 1 CSS pixel corresponds to 1 device pixel.
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?

Last edited by Hexiii; Mar 30, 2013 at 12:09 PM.
Hexiii is offline   0 Reply With Quote
Old Apr 2, 2013, 11:55 AM   #4
Yvan256
macrumors 601
 
Yvan256's Avatar
 
Join Date: Jul 2004
Location: Canada
Quote:
Originally Posted by Hexiii View Post
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?
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.
Yvan256 is offline   0 Reply With Quote
Old Apr 2, 2013, 12:14 PM   #5
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by Yvan256 View Post
..
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...
Hexiii is offline   0 Reply With Quote
Old Apr 2, 2013, 01:20 PM   #6
Yvan256
macrumors 601
 
Yvan256's Avatar
 
Join Date: Jul 2004
Location: Canada
Quote:
Originally Posted by Hexiii View Post
PPI is not only for print, I was talking about ppi of a display not an image.
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.


Quote:
Originally Posted by Hexiii View Post
HiDPI means (at least I think) that a certain display has high ppi (for example iPhone retina display - 326ppi).
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".

Quote:
Originally Posted by Hexiii View Post
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...
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.
Yvan256 is offline   0 Reply With Quote
Old Apr 2, 2013, 03:43 PM   #7
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by Yvan256 View Post
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.
But pixel density = ppi (pixels per inch)


Quote:
Originally Posted by Yvan256 View Post
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".
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.
Hexiii is offline   0 Reply With Quote
Old Apr 3, 2013, 11:16 AM   #8
Yvan256
macrumors 601
 
Yvan256's Avatar
 
Join Date: Jul 2004
Location: Canada
Quote:
Originally Posted by Hexiii View Post
But pixel density = ppi (pixels per inch)
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.


Quote:
Originally Posted by Hexiii View Post
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.
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.

Quote:
Originally Posted by Hexiii View Post
I know what should I do when making a website for retina displays, I am just trying to get the theory.
As I said in my first reply, forget the PPI, it's not used in the code.

Read about CSS pixel-ratio.
Yvan256 is offline   0 Reply With Quote
Old Apr 3, 2013, 11:59 AM   #9
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by Yvan256 View Post
No, it's not PPI. I'm sorry I used the term "pixel density" above, I meant to write "pixel ratio".
Oh.. that's it! Thank you
Hexiii is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Retina display - do you have issues with blurryness on websites/office 2011? dex91 Mac Basics and Help 6 Jan 11, 2014 01:11 AM
Retina websites: how do they work Ultra AleM MacBook Pro 9 Mar 15, 2013 10:57 AM
Making Photography Websites Retina Ready? Regaj MacBook Pro 12 Jul 5, 2012 03:55 PM
Websites and the retina display cclloyd MacBook Pro 3 Jun 12, 2012 02:39 AM
Websites on Retina Display iPhone4UK MacBook Pro 1 Jun 11, 2012 07:04 PM

Forum Jump

All times are GMT -5. The time now is 09:36 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC