3 ms·

Pixel perfect is not possible in HTML/CSS. Stop spreading this. But it is very possible to make websites look very good and inline with what was designed. But

by pasta 8y ago

Pixel perfect is not possible in HTML/CSS. Stop spreading this. But it is very possible to make websites look very good and inline with what was designed. But good luck making an input, button and select the same height. It's just not going to be pixel perfect. What is pixel perfect in your browser isn't in others. But what designers should now is it doesn't matter as long as it looks good for everyone.

mattkevan 8y ago
The key part of my point was "as long as the designer is aware of the constraints and opportunities of the medium they’re working in." Designers coming from print often get caught out when designing for the web as they tend to think of a webpage as a fixed layout, rather than a flexible system of components. It's also important to understand where the design and development budget should be effectively spent. For example, unless there's a real business or usability reason for doing so, there's little point in trying to custom-style form elements like selects as doing so is difficult and time consuming and system defaults look better and provide a more consistent experience. We demand pixel-perfect accuracy at work between design and code – but the developers must approve the designs first to confirm that it's achievable. I guess it comes down to what we define as 'pixel perfect'.
- DanBC 8y ago
  > I guess it comes down to what we define as 'pixel perfect'. When the customer hears "pixel perfect" they don't think "different on different browsers and on different OSs and on different devices", they think "the same everywhere".
  - loa-in-backup 8y ago
    Sometimes the target is a known browser version on a known OS (eg. intranet sites). Those are a lot simpler and (arguably) fun to make.
  - mattkevan 8y ago
    That should be one of the first conversations had with a client. It's all about managing expectations. During the pitch meeting we'd point at the big TV in the meeting room, their laptop and smartphones and (maybe) watch, and explain that while we could make their site look great on everything, it wouldn't look the same.
perilunar 8y ago
> Pixel perfect is not possible in HTML/CSS. Stop spreading this. It absolutely is possible—we used to do it all the time back in the table layout days—but it is not desirable. They are inherently fragile (often users can break them just by changing the default text size), and they do not adapt to different screen sizes very well.
_bxg1 8y ago
> But good luck making an input, button and select the same height. It's just not going to be pixel perfect. What is pixel perfect in your browser isn't in others. It's... actually incredibly easy to do that. You just disable the browser's default styles for those elements and then set their height explicitly. There is a certain interpretation of "pixel perfect" which, I agree, isn't really feasible or worth trying to achieve, and that's when it comes to layout. You can hardcode the dimensions of "atomic" elements like buttons and inputs all you want, but if you start giving hard pixel widths to containers that should be adjusting their size according to their content and surroundings, you're going to get yourself into trouble real fast. I think designers these days have mostly started to grasp this, though.
goto11 8y ago
> But good luck making an input, button and select the same height. It's just not going to be pixel perfect. Sure you can. Just see how Bootstrap does it. It is true that for a long time, input controls were rendered using the native platform controls, so there were are a lot of differences and limited styling capabilities. But these days all browsers (as far as I am aware) use the browser rendering engine for input controls, and they are fully stylable.

by pasta 8y ago

mattkevan 8y ago

The key part of my point was "as long as the designer is aware of the constraints and opportunities of the medium they’re working in." Designers coming from print often get caught out when designing for the web as they tend to think of a webpage as a fixed layout, rather than a flexible system of components. It's also important to understand where the design and development budget should be effectively spent. For example, unless there's a real business or usability reason for doing so, there's little point in trying to custom-style form elements like selects as doing so is difficult and time consuming and system defaults look better and provide a more consistent experience. We demand pixel-perfect accuracy at work between design and code – but the developers must approve the designs first to confirm that it's achievable. I guess it comes down to what we define as 'pixel perfect'.

DanBC 8y ago
> I guess it comes down to what we define as 'pixel perfect'. When the customer hears "pixel perfect" they don't think "different on different browsers and on different OSs and on different devices", they think "the same everywhere".
- loa-in-backup 8y ago
  Sometimes the target is a known browser version on a known OS (eg. intranet sites). Those are a lot simpler and (arguably) fun to make.
- mattkevan 8y ago
  That should be one of the first conversations had with a client. It's all about managing expectations. During the pitch meeting we'd point at the big TV in the meeting room, their laptop and smartphones and (maybe) watch, and explain that while we could make their site look great on everything, it wouldn't look the same.

perilunar 8y ago

> Pixel perfect is not possible in HTML/CSS. Stop spreading this. It absolutely is possible—we used to do it all the time back in the table layout days—but it is not desirable. They are inherently fragile (often users can break them just by changing the default text size), and they do not adapt to different screen sizes very well.

_bxg1 8y ago

> But good luck making an input, button and select the same height. It's just not going to be pixel perfect. What is pixel perfect in your browser isn't in others. It's... actually incredibly easy to do that. You just disable the browser's default styles for those elements and then set their height explicitly. There is a certain interpretation of "pixel perfect" which, I agree, isn't really feasible or worth trying to achieve, and that's when it comes to layout. You can hardcode the dimensions of "atomic" elements like buttons and inputs all you want, but if you start giving hard pixel widths to containers that should be adjusting their size according to their content and surroundings, you're going to get yourself into trouble real fast. I think designers these days have mostly started to grasp this, though.

goto11 8y ago

> But good luck making an input, button and select the same height. It's just not going to be pixel perfect. Sure you can. Just see how Bootstrap does it. It is true that for a long time, input controls were rendered using the native platform controls, so there were are a lot of differences and limited styling capabilities. But these days all browsers (as far as I am aware) use the browser rendering engine for input controls, and they are fully stylable.