Hi all
If I develop a site so it’s a pixel perfect copy of the photoshop file will it display that way in all browsers.
I thought the “pixel perfect” concept was something of the past? If I change the size of the browser windows or use a different device (pad or phone) what will happen to your pixel perfect copy of the photoshop image?
Maybe. It depends on many factors although I would say no, it will not look exactly the same.
The short answer is no.
Browsers all interpret page rendering slightly differently to each other, and then you have user preferences such as altering fonts/text sizes which change things again.
If you’re working from an image then the best you can do is make an accurate representation, don’t get too obsessed with pixels!
2 Likes
When designing/developing for the web you should be thinking in ems not pixels, here’s a good website for converting → pxtoem.com
There is no such conversion. Pixels are based on the screen resoltution while em are based on the default font size.
Converting between them is like converting between inches and pounds.
There is no fixed relationship between the two.
I quite like the idea of 100px as the default font size. Nice big easy to read text - provided the screen isn’t set to too high a resolution.
They’re both just forms of measurement. I understand the benefits of using em’s over px’s, but if you still think in pixels, it’s not necessarily a bad thing.
Back to the OPs original question: it’s really dependant on the design. If the design is simple enough, you could get it close, but it may never be “pixel perfect”. If the client has specifically requested that it looks identically in every browser, they’re setting unrealistic expectations in my opinion.
@felgall It’s for converting pixels to em for responsive web design is all I was getting at, so if you think there’s no relationship (font-size for example) at all between the two you must like having your websites stuck in the 90s. It’s also funny they have a website page solely devoted to it, but I am just a simpleton compared to your highly experience knowledge. 
I guess I don’t know what I’m talking about, after all I only have taken two college courses of Photoshop among many other graphic design classes.
Responsive web design is the only way to make websites nowadays. Ems are based on the user font size as felgall said. The default user font size is 16px or so. If the user decides to zoom in on chromes text enhancer or go into the user stylesheet and change the values (perhaps he wants 25px as defualt) then the 1em value would change. You can “sorta” equate 1em to a pixel value but only as a sort of reference tool since it’s so easily changable and not exactly a fixed value to rely on and get pixel perfect designs.
1 Like
I agree, but that isn’t want fegall was referring to, he said quote “There is no such conversion” meaning pixel to em, well then why is there a website devoted to such a thing if there isn’t? There is no “Fixed” conversion to it, I’ll give him that if there was a fixed conversion to it then what would the point in having ems? The OP poster if he made the the entire website solely made of pixels (or a ton of media queries but that wouldn’t be practical) then it wouldn’t be responsive. However having a conversion to ems what would normally “viewed” @ 100 percent by the average visitor of a website is possible and is practical, and converting between them ISN’T like converting inches and pounds. The website that does the conversion do gives you a base that you can change, so if you don’t want it base on lets say 16px then you can set it to whatever you want too.
Basically, due to a misconception that it’s possible to do so—it would seem. Those conversions are really just random numbers. While they might be a handy starting point for using ems instead of pixels, they mask the reality that we are talking chalk vs cheese here, or perhaps the length of a piece of wood vs the length of a piece of elastic.
It’s hard to say what people do to their system fonts. I visited some clients once, and all the sites we looked at on their computers were broken—because they had set their system font size to about 150%. (It was back in the days before responsive design.) It was very instructive for me. I asked why they had done it, and they said that everything on the web was just too small. Probably a lot of people feel this way, so who knows how many of them reset the system font size?
The only misconception is when it comes to designing, what looks good for one person might look bad to another. An having something to at least go by isn’t a bad thing in my book. Sure you might get people who set their fonts at different height, but if you can please the majority then you should be fine, unless you are specifically targeting a certain group.
I agree that a “close” “most all” starting point is better than naught.
But if a designer thinks the web pages will look like print media for all site visitors always they’re likely in store for a shocking surprise at some point in the future.
Yes, I confess that I use 16px as my mental starting point when using ems. It’s certainly useful to have some kind of reference point. It’s just useful to remember that it’s only a guide.
It’s hard to keep up with best practice in these things. There’s long been scull and crossbones warnings about setting a px value on your body font size, which I guess would set a px value for your ems. I’m not sure how many users might be adversely affected by that practice these days, but I don’t do it just to be safe.
Well since ems have been around sfor about 500 years and pixels have been around for nowhere near as long if there was a relationship between them then it would be pixels that wouldn’t exist.
Now think about what you wrote and what I meant, yes ems has been around longer that, but what is the point of only having a non-responsive website done in pixels and not being able to convert it over to ems (to get an approximation or a better way to put it a starting point - I have to make myself clear with people who take everything literally). Your not the only who knows about typography, it dates at least to the roseate stone and I have to apologize for going Off-Topic.
ems is an entirely different approach to web page layout to pixels - you are far better off rebuilding it completely rather than just trying to “convert” it since any conversion will only match at one screen resolution and zoom setting out of the millions of possible ones.