Web development for rMBP

[joewillmott]

Still got 2 weeks to wait for my rMBP (despite buying the day after WWDC), and building websites is a small part of my job. I had a play with a rMBP yesterday and images on websites looked pretty ****.

If I want my websites to look good on rMBP will I need to make them double the height/width (4x DPI) for them to look good on rMBP? Also will this mean I should insert them onto HTML pages as 1/4 their actual size to make sure they look normal on regular screens?

In my mind this is how it works, or am I wrong? (Having slower loading times doesn't bother me atm, I will cross that bridge when I come to it).

 

[killmoms]

If you want to develop websites for Retina-class displays, there are a couple solutions to present them to the world. Apple uses JavaScript to detect if the browser is running on a Retina-class machine and then loads 2x images to replace the 1x images it already loaded on the page. This makes pages load faster initially, but then there’s a noticeable “blip” where everything suddenly pops into higher resolution. Alternatively you can use CSS media queries to load one image or the other.

In any case, it’s better to target Retina vs. non-Retina displays separately, so you’re not forcing all users of your website to load much larger images than they have to.

 

[MH01]

I agree with you, images on websites look like ***** on the restina, well the low quality ones anyway. The issue is that they are not going to change in a hurry if ever, cause corporations are not going to be updating their websites just for the retina display in one laptop. I plan to pick up a retina within the next 4 weeks and I accept the fact that surfing the web is going to look worse on it. Im getting it for photo editing though.

If your building webpages, ask your client if they really care about the retina display, performance is more important then such a small markert segment of users (retina laptops)

 

[joewillmott]

Thanks guys, both a great help. I will keep developing for non-retina for now. I was just thinking ahead really and it got me wondering.

 

[mikeo007]

When developing websites for retina, don't forget that your audience is larger than just the rMBP early adopters. iPad 3 has the same problem when viewing websites without hires images.

Case in point, everything on this site looks like crap except the MR logo which seems to be displaying at hires for me.