Hello,

 

I have a question to pose for the Web Design Forum and I was looking for some feedback.

 

I recently began working on a clients website and determined that I'd like to make their site "future proof". Although that's a relatively impossible task, their last site design lasted a whopping 9 years! So I'd like this next iteration to last at least 5-10 using some the latest techniques in 2013 and even stay ahead of the curve.

 

After a ton of research, I've decided to build the clients site to be a: Full browser width, Responsive design, that's also Retina ready.

 

I'd like it to look beautiful on the newer monitors like the recent MacBook Pro and Retina iPads. As Apple usually sets the tone, I'm sure more computer makers will also adapt the higher displays. Also because this clients site won't be updated as frequenly as some, I want to be sure I'm ahead of the curve.

 

Full disclosure, I have never worked on a full browser width, responsive design, or Retina ready site before... And I've been pretty overwhelmed with the amount of information there is to consume on the subject matter. So I had a few questions I'd like to pose and hopefully get your feedback.

 

Question #1. Is it necessary to provide a PSD mockup of each of your website design pages in all of the following scenarios?

 

MacBook Pro
2880 x 1800 @ 220 ppi

27" iMac
2560 x 1440 display @ 109 ppi

iPad with Retina display
2048 x 1536 @ 264 ppi
(vertical and horizontal)

iPhone 5
1136 x 640 @ 326 ppi
(vertical and horizontal)

 

Question #2. If the website design is image intense, does making it Retina ready cause a loadspeed deficit? That is a real concern of mine and I'm on the fence as to it's necessity especially because of the amount of images in the proposed design. They include full browser width background photos. I want to be ahead of the curve but I'm concerned about causing load time issues. Aren't Retina images massive?

 

Thanks... I look forward to your feedback!

 

Shaun

A digital agency who specializes in responsive design recommended that I produce my graphics at 72ppi/dpi making the images that scale full width around 1600-1900 pixels wide. That sounded odd to me because if an iPad has a resolution of 2048 x 1536 @ 264 ppi then wouldn't the image at full scale look blurry?

 

Of course I don't have a Retina iPad, I only have a first generation iPad and a Nexus 7 so I couldn't test the theory.

 

I did however research what others were doing by checking out some of the Retina, respoinsive themes at http://themeforest.net/search?utf8=%E2%9C%93&term=retina%2C+wordpress%2C+responsive

 

One theme developer had his background graphics at 1700 pixels @ 72 ppi. Another had his at 2000 pixels @ 72 ppi. So it seams like there is absolutely NO normalcy when it comes to creating retina graphics for responsive themes... The only takeaway I had was that apparently it doesn't matter if the iPad resolution is at 264 ppi because all of the background graphics are being created at only 72 ppi. Even on Apple's website where they have a download link to show you what a Retina screen will look like their download is at 2048 x 1536 @ 72 ppi. Now talk about confusing!? So I'm going to venture to guess that this 264 ppi resolution is either non-existant or just not being used except in specific applications?

 

In any regard, I decided to go with 2048 pixels wide @ 72 ppi for my Retina site mockups. I figure its a safe bet and only slightly higher than what was recommended by the digital agency so if needbe we can always scale down later if loadspeeds are taxed.

 

If anyone has thoughts or input I'm definitely open to suggestions?

 

Thanks,

Shaun

I'm actually curious about this too!!! i did some images at 96dpi for the iphone, and to be honest at those screen sizes that small it didn't make a difference and not many people will actually appreciate that you upped the DPI slightly.

 

But i would actually like to know if it is worth doing too?

http://www.sawayaconsulting.com/our-blog/responsive-design-links-pixel-density-vs-pixel-dimensions/ is a good link, the only problem with having 264 ppi is the file size, yes its going to look nice but is going to take a lot longer to download and eat the users data (if there on a cellular network) that is probably why most theme forest themes are 72 ppi as it still looks nice

Edited July 19, 201313 yr by D4Y0

inlinedivblock,

 

As a test I created an image 2048 x 1536 @ 264 ppi and in Photoshop "save for web" as jpeg with a "very high" 80 compression setting the image is about 528.8k.

 

The same image @ 72 ppi with the same settings was still 528.8k.

 

I'm not sure the ppi matters?

 

Shaun

inlinedivblock,

 

As a test I created an image 2048 x 1536 @ 264 ppi and in Photoshop "save for web" as jpeg with a "very high" 80 compression setting the image is about 528.8k.

 

The same image @ 72 ppi with the same settings was still 528.8k.

 

I'm not sure the ppi matters?

 

Shaun

I noticed the same thing...

I think the larger the image the more PPI you are going to want to incllude to keep it sharp.

 

As D4Y0 metioned above from that article,

 

 

D40YO,

 

Thanks for the article link! The writers resolution test makes sense. Unfortunately for me I don't have a Retina device to test it on so from his resolution test link I can't see a difference between the images. It almost makes me want to drop $500 on a new iPad just to have something to reference! Almost. ha!

 

On a side note, I pulled down his images from the test and all of the images have different file sizes. The interesting part is that all of the images are actually 72 ppi although the pixel dimensions are different which now I get what he is saying. A 500 pixel x 500 pixel image at 72 ppi versus a 500 pixel x 500 pixel image at 264 ppi does not make it Retina. You have to actually increase the pixels not the ppi.

 

Now I get it!

 

Thanks,

Shaun

Edited July 19, 201313 yr by Shaun B.

D40YO,

 

Here's a good question. So for desiging a website to look good on a Retina iPad that has a background image spanning across the entire width of the site... Do you create the background graphic at 2048 pixels wide @ 72 ppi or a pixel depth higher than that?

 

As a test I created a graphic 2048 pixels wide @ 264 ppi in Photoshop. Then changed the ppi to 72 which increased the pixel density to 7509 pixels. If I'm understanding correctly then to have a full browser width image that is Retina ready that's the dimensions the graphic should be at?

 

Shaun

Edited July 19, 201313 yr by Shaun B.