Is there any issue with a graphic designer using a 2400px monitor and then a web developer coding their web design on a 1920px monitor, and it looking the same?

Say the artboard of the graphics file is 1920px wide.

The problem I'm having is a designer is telling me the sites she designs that I code don't look the same, and stuff is to big. Well she designed at 1920px wide, and I coded it at 1920px wide, but her monitor is 2400px wide, mine is 1920px wide. In my code, all the graphics match the pixels and fonts sizes in her file exactly. But the graphic designer says "It doesn't look the same". I asked her, did you design this at 100% view, and not zoomed out? And she says yes. Her artboard is 1920px wide. Why then is the exact coding of her design on a 1920px monitor look "zoomed in"?

The only reason I can see why there may a difference in her design and the final code look is she uses a mac retina display, and I'm using a normal 1920 pixel wide monitor. So what she designs will look bigger on any monitor not 2400px wide, since a monitor that is 2400 has more pixels?

Is my theory on this feasible? And if so, since 2400 is 480 x 5, and 1920 is 480 x 4, making a 20% difference, if I shrink her file down to 20% less than 1920 (which is 1536) will I see everything at 100% view the same exact size it appears on a 2400 pixel retina display?

  • 1
    Can you get screenshots from them to show you? Is this the same browser & OS? – Andrew Lott Dec 2 '15 at 18:03
  • They always export a JPG of the final design for clients. A screenshot would look the same on any monitor. The point is do the pixel difference in the monitors make a difference in the literal size of what is being viewed on the monitor. If I take a tape measure, and measure 1920 across on a retina display, its only 20 inchs or so (Im guessing), but on my 1920 monitor its the full 30 inches across. – OB7 Dec 2 '15 at 18:07
  • So is what is being designed on the retina displays looking to big in the final coding because of their monitors, and how can we resize the art boards to match what the designers physically see in size on their 2400 monitor on a 1920 monitor. – OB7 Dec 2 '15 at 18:07
  • 2
    "A screenshot would look the same on any monitor." - "But the graphic designer says 'It doesn't look the same'"??? – MrWhite Dec 2 '15 at 18:25
  • A full screenshot will show you where the boundaries are, and how it looks different. It might also highlight a difference in browser rendering. – Andrew Lott Dec 2 '15 at 18:35

The fact is, nothing will be perfect, because not all monitors are equal, especially with the various sizes of rectangular monitors. In fact, I own a new small flat-screen monitor that allows the standard square screen mode and a rectangular screen mode.

The best thing you could do is make the image responsive like I do with images on my site. As a bonus, offer the original image as a download so that if your client is picky, at least he/she will see the original image as well as a nicely rendered image on multiple screen sizes.

If your client is extra picky, then use the largest image size possible and then use CSS to scale it down to the size of the user's screen. If the base image size is too small, and the image is scaled up, then the quality will be lower. To see this for yourself, use a drawing program (like mspaint for windows), and paste a high-quality picture into it, then shrink and then expand the picture then you'll see what I mean by dotty.

Try inserting this code in the webpage you're working on to load the image (assuming the image is 1900 x 480 pixels):

<image src="someimage.jpg" width="1920" height="480" style="width:100%;height:auto;">

The style parameter resizes the image to fit the entire width of the screen and the scaling will be maintained.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.