Mobile app version of vmapp.org
Login or Join
Correia994

: Designers using 2400px monitor, coders using 1920px monitor, final sites not matching what designers invisioned Is there any issue with a graphic designer using a 2400px monitor and then a web

@Correia994

Posted in: #Graphics #Html5 #ScreenSize

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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Correia994

1 Comments

Sorted by latest first Latest Oldest Best

 

@LarsenBagley505

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme