Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
iPad 1/2 viewport

So, one thing that I don't think anyone has mentioned: By default, the iPad 1 and 2 both render all webpages as though they are being viewed on a 980px screen. This is overridable in meta tags, if the page is specifically designed to be compatible with iPads. Most pages don't use this, though of course some do.

So, on an iPad 1/2, in portrait mode, you're seeing an image rendered for a 980px screen and downscaled to a 768px screen. In landscape, you're seeing it upscaled to 1024px. Therefore, you're already seeing most images on websites rescaled anyway, and it sounds like most people haven't even noticed.

So don't worry, the iPad 3rd gen will make websites look just fine.

Edit: Meant 980px, not 960px.
 
Wow this thread is getting long. I'll add my 2 cents to the pot. All websites that use XHTML/PHP/CSS will be compliant to Retina display. They will actually look great. Also all HTML5 variants will also look great on a Retina display. The websites that are not written in those 2 variations will probably have issues. Any websites that draw using raster type graphics will have degradation on a retina screen. That is all. Why worry about this when you can't do anything about it? Smart web designers also use bitmapped images that are larger and then rescale using CSS anyways. Not everyone will do the same but every good website, will undoubtedly look good on a Retina display.
 
Perhaps we should all wait until we get our New iPad to verify the concerns and ranting about how great/bad it will actually be. I for one have learned from many reads on forums such as this, that most of them are posted by those that don't have a clue in what they are claiming on many subjects, not just this one. I for one will see for myself.

:p
 
Apple, I want to see 1:1 ratio, make the screen useful please.

That's not down to Apple, that's down to a web developer. CSS media queries can identify a display and 'suggest' to the browser how to display the content. Apple assumes that, without any additional information provided by CSS rules, it should simply scale the content for best fit on the screen, which is fair enough. If as a web designer you want to change this behaviour it is in your hands to do just that. Google CSS media queries.

If I designed a site that matches the iPads new screen resolution, it would not get scaled and you would see 1:1 pixel ratio.

(ps, my day job: I'm a web developer and UI specialist, desktop and mobile)
 
Last edited:
WEB PAGES WILL LOOK LIKE THEY WOULD IF YOU PRINTED THEM OUT ON YOUR PRINTER!


its the same basic idea...


our printers are at least 300dpi...which is actually greater than the dot pitch of the new retina screen.
whenever you print out a webpage with pics and other graphics along with text...it comes out basically like viewing it on the retina iPad would look.

all of the text is sharp due to it being rendered at the higher dot pitch..but the images will all have some sort of pixelation unless they are 300dpi or more



THIS IS THE PROBLEM, higher res pics and graphics will solve it eventually


stop arguing..everyone on this thread is arguing the same point in different ways and its just a cluster now!

----------

I've been updating all the sites I work with for Retina displays since January. I've chosen a mixture of media queries, JavaScript and SVG resources.

My personal site is http://www.andrewkendall.com/ and that is ready, I also run http://www.digitalphotogallery.com/ and I'm making sure that everyone's site is updated for Friday. All of the templates on the system are already working great like http://fullscreen03.templates.digitalphotogallery.com, if anyone gets their iPad early let me know how it looks.

I'm especially excited about galleries on the system like http://photos.secretgardenparty.com/, they are going to look amazing once updated. So far I've only seen things in the emulator so I can't wait for my new iPad to arrive on Friday!

Check out the web interface in the emulator, the resolution is incredible http://media.digitalphotogallery.com/cswfymthaxhy/downloads/dpg_retina_1.png and http://media.digitalphotogallery.com/cswfymthaxhy/downloads/dpg_retina_2.png.

NICE WORK..i will definitely bookmark those to try with the new ipad

----------

There are a bunch of reviews out now, and I'm not seeing any that complain about pixelated/muddy graphics on websites. If it were that bad, then I imagine we would def be hearing about it.

wrong..

FROM THE VERGE IPAD REVIEW:

"The display is so high resolution that it can actually be distracting in some ways. I began to notice just how low in quality and resolution graphics can look in certain apps and web pages. I even started making a list of graphic elements we need to update on The Verge."

----------

We should make a list of the users in here who have absolutely no idea what they are talking about...so in the future we wont waste our time reading their banter... ;)
 
That's not down to Apple, that's down to a web developer. CSS media queries can identify a display and 'suggest' to the browser how to display the content. Apple assumes that, without any additional information provided by CSS rules, it should simply scale the content for best fit on the screen, which is fair enough. If as a web designer you want to change this behaviour it is in your hands to do just that. Google CSS media queries.

If I designed a site that matches the iPads new screen resolution, it would not get scaled and you would see 1:1 pixel ratio.

(ps, my day job: I'm a web developer and UI specialist, desktop and mobile)

Can you provide me some sample websites that do this autoscaling and some websites that will just render at a 1:1 ratio no matter what resolution your panel has?
 
On the left, an iPhone 4 showing a non-retina icon. On the right, an original iPhone. The one on the left is sharper.
Image

The point is that the image on the left looks worse than the one on the right because it is sharper and so each pixel of the image is a sharp square-edged shape formed from four screen pixels. On the non-retina display each pixel of the image is rendered as a single pixel which gives a blurred, subjectively smoother, image.

That's why non-retina iPhone graphics look worse on the iPhone 4/S than the same graphics on the iPhone 3GS and below. They do not look identical, and I just can't understand why people insist on arguing that they do, when we've been able to compare iPhone retina/non-retina displays for nearly two years now...
 
Can you provide me some sample websites that do this autoscaling and some websites that will just render at a 1:1 ratio no matter what resolution your panel has?

Tomorrow I will knock together a demo (once I have one in my hand!). I can't think of any commercial sites off-hand, but here are some references for you:

http://www.w3.org/TR/css3-mediaqueries/ (feeding specific stylesheets to platforms)

And the specific bit of CSS we're interested to do this is 'pixel density':

http://www.fiveminutes.eu/targeting-hight-screen-densities-with-css-media-queries/

You could use these to either scale your content (higher-resolution, sharper content) or 'expand' your site to always be the max size allowed in the browser viewport (giving you 1:1 pixels).
 
Can I muddy the waters a bit by mentioning that every single image design tool on the planet will save out web-ready images at 72dpi unless you specifically change it? You can't design art for the multitude of screen resolutions and dpi rates out there. You just can't.

Most of you seem to have a pretty good understanding of one side of the issue or another. Any web developer that actually cares whether or not their site will look good on the retina display already has a pretty easy solution at hand. Just double the DPI of their images. They can code them to the same pixel widths, but the images will retain all of their detail on a retina display.

That said, most won't, because it's going to increase the size of their webpages, reducing performance. So what many (including Apple) will do is selectively load retina graphics for images when they detect the iPad 3. But this makes for an even worse experience as they get the low-res image first, then the higher-res image pops in when it's done downloading. This REALLY bloats page sizes for iPad 3 users. If you're browsing on LTE, do you really want a few web pages eating up your data bucket?

So until internet speeds get to the point where buckets go away and 2MB pages load quickly, I don't expect to see much change.
 
Tomorrow I will knock together a demo (once I have one in my hand!). I can't think of any commercial sites off-hand, but here are some references for you:

http://www.w3.org/TR/css3-mediaqueries/ (feeding specific stylesheets to platforms)

And the specific bit of CSS we're interested to do this is 'pixel density':

http://www.fiveminutes.eu/targeting-hight-screen-densities-with-css-media-queries/

You could use these to either scale your content (higher-resolution, sharper content) or 'expand' your site to always be the max size allowed in the browser viewport (giving you 1:1 pixels).

Thanks a lot! I can't wait to see your demo tomorrow.
 
@SuperRob good points.

I for one will *not* be doubling image sizes for any of the projects I'm working on, but other dynamic elements constructed via CSS or Canvas/WebGL could be easily adapted on the fly with no increase in download at all.

Web developers & designers are (slowly) moving away from prescriptive units like 'pixels' anyway as they have little relevance with todays multitude of platforms and viewport sizes. The advent of Apples super-high resolution screens can only be a good thing for all, as naturally other platforms will imitate, and in turn developers will adapt - end result far more responsive, platform-agnostic designs that suite a wider range of folks.
 
For UI elements, I think it's a good idea to start thinking seriously about SVG or other vector-based tools. That said, a lot of design work still gets done in Photoshop, and the file sizes are going to continue to be a limiting factor for the foreseeable future.

It'll take some clever designers to find ways to reuse as many elements as possible to minimize the amount of data that needs to be served, as well as trying to minimize the number of calls made.
 
It comes down to this.

IF the images on the screen are at a greater native size than their physical size on their screen (aka, ratio of image's natural size to image's size on screen > 1), they will be rendered at a higher DPI than iPad 1.

IF the images on the screen are at an equal or smaller native size than their physical size on their screen (aka, ratio of image's natural size to image's size on screen <= 1), they will be rendered at an iPad 1 level DPI or worse.
 
Standard definition content looks terrible on larger HDTVs.

Yes, but SD content still looks far better on my HDTV than it does on my analog SDTV.

Nothing changes here. EVERYTHING will look better. Stuff that looked like crap before will still look like crap, just better crap. The iPad 2 is incredibly pixelated. It will be night and day.

ALL of the reviews out should put to rest the fears of anyone who doubts that.

One day to go until that display is in my hand :)

Oh hellz yes!
 
I think folks here are confusing the terms "blurry" and "pixelated".

Non-retina images on the iPad will not be blurry. They will be pixelated - they scale precisely.
 

Attachments

  • Blur.png
    Blur.png
    85.4 KB · Views: 81
Thanks. This is great. Not only are you updating your websites to look as sharp as possible on the new iPad, you're also making zooming in and out in Safari on my Mac look a lot better.

----------



I read a couple reviews today. Both mentioned the website issue.

The Verge's review


Daring Fireball's review


This obviously is unavoidable, and it's something Apple can do nothing about. It's definitely not a deal-breaker, that's why I was so mellow in my original post. I was hoping other web designers or developers would post helpful info about how they're dealing with it.

I won't make the mistake of posting technical questions that require any sort of critical thinking on this forum again.

Like I said before, when I posted about this a year ago many people just didn't get it. As you posted, the reviews definitely state the issue as real. The internet is just not ready for this amount of pixels. Many sites will have to jquery their way to pulling 2 different image sizes if they even care to. Bandwidth is costly and just takes that much more time to load. Facebook for example, already compresses the hell out of all images to save bandwidth and faster loads, so they will just look even that more worse.

But of course, this won't affect me from wanting a new iPad. It just a disappointing reality.
 
The point is that the image on the left looks worse than the one on the right because it is sharper and so each pixel of the image is a sharp square-edged shape formed from four screen pixels.
No, you're conflating a whole pile of different issues and arguing against yourself. The post you're quoting was in reference to someone claiming that a retina display made images blurrier. Exactly the opposite is true, as you spent more than one post arguing. Images are manifestly sharpened by tighter pixel pitch. I'm not interested in your subjective feelings about which is "worse" given the choice between higher clarity and greater blur.
They do not look identical, and I just can't understand why people insist on arguing that they do, when we've been able to compare iPhone retina/non-retina displays for nearly two years now...
No one is saying that they look identical as an end result, just that they are identical in alignment, proportion, and level of information per unit of space, among other objective metrics. There are always minor differences present from display to display.

That's the point many of you are ignoring. The slight blur or pixellation evident on some images at some zoom levels is something that every display can and does replicate. The improvement of most elements surrounding it may call greater attention to it, but that is not the same thing as creating a problem. It's just lowering the threshold.
Can I muddy the waters a bit by mentioning that every single image design tool on the planet will save out web-ready images at 72dpi unless you specifically change it?
You're not muddying the waters at all. That's been a key point in the discussion, albeit one that a number of people here can't seem to grasp.

The problems with targeting displays you outline far outweigh the negligible benefits provided by doing the work, and most websites just aren't going to do it. It's not fundamentally an issue or a step backwards or worse, no matter how many times the handwringers jump up and down.

Not being able to grasp the fundamental science of it, they're left with nothing but repeated appeals to some undefined quality they're not willing to confront. The inescapable reality is that improving nine things and leaving the tenth as is does not equate to making the tenth thing worse.
It comes down to this.

IF the images on the screen are at a greater native size than their physical size on their screen (aka, ratio of image's natural size to image's size on screen > 1), they will be rendered at a higher DPI than iPad 1.

IF the images on the screen are at an equal or smaller native size than their physical size on their screen (aka, ratio of image's natural size to image's size on screen <= 1), they will be rendered at an iPad 1 level DPI or worse.
Yes, although you can drop the iPad from the equation entirely, as that applies to any display on the web.

The problem identified in this thread is a result of imperfect scaling by people looking at elements at different physical scales and refusing to face the fatal error of that approach, along with a peanut gallery of posters who flip their arguments to the opposite of their previous claims and contribute nothing.
I think folks here are confusing the terms "blurry" and "pixelated".

Non-retina images on the iPad will not be blurry. They will be pixelated - they scale precisely.
Yes. You're going to get a wholly authentic reproduction on a retina display. All the cheats and imperfections are more easily inspected, and low dpi artwork won't stand up to very much zooming.

It will, however, continue to be serviceable and of equivalent quality to the same scale on non-retina devices. There's already a clear image showing this, and there will be even more photos to demonstrate it tomorrow.
 
No, you're conflating a whole pile of different issues and arguing against yourself. The post you're quoting was in reference to someone claiming that a retina display made images blurrier. Exactly the opposite is true, as you spent more than one post arguing. Images are manifestly sharpened by tighter pixel pitch. I'm not interested in your subjective feelings about which is "worse" given the choice between higher clarity and greater blur.
Um, you seem to have replied to the wrong person, and you seem very angry about it :confused:

I haven't spent more than one post arguing anything; my single post just pointed out that for lower resolution raster graphics, a lower ppi display gives a more pleasing result than a high ppi display, directly contra the point you seemed to be trying to make. Given that the whole thread is about subjective opinion, it's somewhat odd not to be interested in people's opinions :)

The OP's use of "blurrier" was not the best choice of words, but it was clearly intended to mean "making the raster image pixels more evident": and yes, your use of "sharper" can be taken to mean the same thing. However, there's no point in wilfully misinterpreting what the OP posted, unless you're just seeking a pointless argument...

It will, however, continue to be serviceable and of equivalent quality to the same scale on non-retina devices.
No. It will look more clearly pixellated on the higher ppi display, as with the pre and post retina iPhones.
 
I haven't spent more than one post arguing anything; my single post just pointed out that for lower resolution raster graphics, a lower ppi display gives a more pleasing result than a high ppi display, directly contra the point you seemed to be trying to make.
You quoted a direct display of an image in response to a claim that the retina display was "blurrier", which is absolutely not the case.
Um, you seem to have replied to the wrong person, and you seem very angry about it
I'm not angry about anything, and I meant "you" in the collective sense.

I don't mind people not understanding the issues--I just mind people who don't want to understand the issues.
Given that the whole thread is about subjective opinion, it's somewhat odd not to be interested in people's opinions
As I said, I'm not interested in opinions on whether a wider pitch is preferred or not preferred by a person, because that's not a factual difference. Your opinion that a sharper image is "worse" or that a lower ppi display is "more pleasing" isn't true and isn't what the thread is about.
The OP's use of "blurrier" was not the best choice of words, but it was clearly intended to mean "making the raster image pixels more evident": and yes, your use of "sharper" can be taken to mean the same thing.
No, it was intended to mean exactly what he called "ridiculous", that the edges of upscaled images would have sharper lines purely by virtue of the pixels being closer together. The claim that it would be "blurrier" is by definition contraindicative of making anything more evident.
No. It will look more clearly pixellated on the higher ppi display, as with the pre and post retina iPhones.
No, again, it is mathematically impossible. The image suffers no loss of any objective measure of quality. Your subjective opinion on whether you'd prefer wider pixel spacing for a smoother look, or tighter spacing for a more defined look, is not an assessment of image quality.

And again, there are some technical differences, and as I said in my very first post, the OP is not technically wrong, but is grossly exaggerating effects to present a tempest in a teapot.

To wit: here are side-by-side images, at 100% normal scale and in roughly double size, of a new iPad and an original iPad showing the MacRumors home page. Are you really saying that the images on the new iPad are significantly worse such that it has a really meaningful impact on browsing?
 

Attachments

  • IMG_1111.JPG
    IMG_1111.JPG
    2.7 MB · Views: 111
  • IMG_1110.JPG
    IMG_1110.JPG
    1.3 MB · Views: 109
Last edited:
^ On a lighter note, your 'Pad seems to be suffering from some yellow tint issues, no?
 
^ On a lighter note, your 'Pad seems to be suffering from some yellow tint issues, no?
It is definitely warmer than the original iPad, but the whites are still appreciably white at full brightness. I'm giving it a few days to see if I'm bothered by it, because other than that, the screen is flawless. No backlight bleed, no light leaks at the edges of the frame, no dead or stuck pixels.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.