Solved

How do the new retina (high dpi) displays affect web design

Posted on 2014-11-28
8
186 Views
Last Modified: 2014-11-30
I, like many, am trying to wrap my brain around how the new retina displays (high dpi) affect web design. Fortunately I just "dabble" in it as a hobby. I don't design for a living. I'm hoping we can just have a little "back and forth" here for a bit. I think if I can just get some answers to a few basic questions I'll be good to go for my purposes. FYI, whenever I create images "from scratch" for something I'm doing on the web, I use a very old version of Photoshop (5.5). The default ppi setting (which I've never tinkered with or even considered doing so until now) is 72 ppi.

Okay. First question. If I create a banner image for a web page that is 1000px wide and 200px high, then load that page in Safari side by side on an iPad 2 and an iPad Air (Retina) , both with a 9.7 inch diagonal screen size, how will that banner image look different (BTW, for this example, this is without using any media screen queries and css)?  On the iPad Air, will the image just take up far less screen space (esp width), or will it take the same amount of screen space, but just look far less sharp and somewhat degraded? If it helps you, here is a link with the specs on these iPads.  http://www.iosres.com/
0
Comment
Question by:Thunderman54
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40470578
0
 

Author Comment

by:Thunderman54
ID: 40470611
Gary, I just kind of quickly scanned the content of the links you posted. I'll check them out more carefully later. Based on what I did read, however, I'm taking that your answer to my question above would be the latter, correct? That is, ". . .  take the same amount of screen space, but just look far less sharp and somewhat degraded?" (again, using my version of Photoshop and the default ppi setting of 72 ppi to create the banner image)
0
 
LVL 58

Expert Comment

by:Gary
ID: 40470618
Correct a 1000px image is a 1000px image no matter the display.
The only difference is when you are programming for retina displays you can use a double size image to give better clarity to the image
So for normal images 1 pixel of the image is dislayed over 2 x 2px
For a retina ready image then 1 pixel on the screen is equal 1 pixel in the image
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Thunderman54
ID: 40470690
Okay. Just to be sure we're on the same page, however . . . when you say "use a double size image," do you mean go ahead and create the actual image double size, but in the actual code itself you would cut those width and height dimensions in half . . . thus giving you the same size image but better clarity. Also, if this is what you mean, would doubling the ppi in Photoshop before creating the image accomplish the same thing?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40471072
You create an image that is 1000px wide and an image double the size - and you set the dimensions to be 1000px
Then you can either use a 1000px image or a double size image (taking into account you only serve the correct image for the display)
On a normal screen you just have a 1000px image, on a retina display you replace the image with the double sized image, but because it is a retina display all those extra pixels are used and you get the high resolution
I think this tut explains it quite well:
http://code.tutsplus.com/tutorials/the-right-way-to-retinafy-your-websites--net-31793
0
 

Author Comment

by:Thunderman54
ID: 40471499
Thanks for your patience.  I'm really trying to get a handle on this. I read the tut you sent via the link and it makes sense. The only think I'm confused about is this: the tut says you create only one image to get the job done, whereas you seem to suggest creating two images. What am I not grasping? Sorry, unlike the Retinas, sometimes I'm low density. :)
0
 

Author Comment

by:Thunderman54
ID: 40472260
Okay. I've done some more research on my own and now realize there are a number of ways to approach satisfying the retina displays . . . including javascript, to my surprise. Thanks for your help.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472514
I wouldn't suggest one image unless it was a relatively small size, especially so for mobiles/tablets - no point downloading a 1000px (200kb) image and then a 2000px (400kb) image for the same thing
Using js means you only have to download the one correct image or using css you use media queries load the correct image - though this can only be done as a background image
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress Security 29 111
How can I improve my website to a higher score via webometrics rules? 4 96
SQL to JSON 14 65
ASP.NET data base connection 35 96
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question