Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Design annoyances

codefastdieyoung.com

Post reply on HN
Print view View original

21–30 of 30 posts

Re: Design annoyances

#21

Post by Joakal »

billswift wrote: post #3

Most of these have been pretty well known or obvious, which is why those that do them have little excuse. But I disagree strongly that #1 is a problem. Some things, like the header in his example, usually should be full width. While others, especially columns of text should be of a fixed maximum width to improve readability. Who cares about blank bars to the sides of the screen? Or at least, who cares as much as they…

If you have a wide monitor that displays 1200px or more and the fixed width is 800px, it becomes ugly as it gets bigger. The header needs a maximum-width.

Re: Design annoyances

#22

Post by glenjamin »

true_religion wrote: post #8

The reason for #1 is because fluid layouts can force text lines to stretch on wide screen monitors. As such, the line becomes harder to read.

There's no reason the logo couldn't be aligned with the content, while still allowing the header banner to be full width.

Re: Design annoyances

#23

Post by davej »

powertower wrote: post #19

"body {min-height:101%;}" will work much better than "overflow-y: scroll". Unlike the latter it's CSS2 (vs CSS3) and also works without bugs.

In practice this isn't true. As it turns out, the browsers that don't support overflow-y (certain versions of IE) happen to display a vertical scrollbar by default anyway.

Adding 'min-height: 100%' to the body will actually add a few pixels of empty space which the user can scroll to (confusing and ugly); whereas "html { overflow-y: scroll; }" will insert a placeholder for the scrollbar, the scrollbar itself will be grayed out. This is much better behavior in my opinion.

Also "html { overflow-y: scroll; }" is self-describing (i.e. the real goal is to add a vertical scrollbar to the html, not make the minimum height of the body 101%).

Re: Design annoyances

#24

Post by bigiain »

ugh wrote: post #11
billswift wrote: post #3

Most of these have been pretty well known or obvious, which is why those that do them have little excuse. But I disagree strongly that #1 is a problem. Some things, like the header in his example, usually should be full width. While others, especially columns of text should be of a fixed maximum width to improve readability. Who cares about blank bars to the sides of the screen? Or at least, who cares as much as they…

I think the problem is that things don’t line up when you mix full width and fixed width. It’s not supposed to be an endorsement of either full or fixed width.

Agreed. I think the fundamental underlying error is not having a reason why a particular elements is fixed or full width.

If you can answer the question "why did you go with a full width header and a fixed width body?", you're probably OK (unless that answer is something like "well, the theme I downloaded from themeforest was fixed width, but the client insisted I use their old header in the new design, so I just mashed it into the template...")

Like most "design errors", I think what the author of e article is ranting about is designs that aren't fully though out - if you've asked yourself the questions "fixed or full width, or both?", "what sized fonts should the forms have?", "how much of the site it going to be long enough to scroll, and do the scroll bars behaviour need to be considered in the design?", then you won't have made these errors, or at least will have good reasons why they are not "errors" but behaviours you chose.

Re: Design annoyances

#28

Post by Stormbringer »

Joakal wrote: post #21
billswift wrote: post #3

Most of these have been pretty well known or obvious, which is why those that do them have little excuse. But I disagree strongly that #1 is a problem. Some things, like the header in his example, usually should be full width. While others, especially columns of text should be of a fixed maximum width to improve readability. Who cares about blank bars to the sides of the screen? Or at least, who cares as much as they…

If you have a wide monitor that displays 1200px or more and the fixed width is 800px, it becomes ugly as it gets bigger. The header needs a maximum-width.

The problem there is the fixed width, not the header. People on big monitors shouldn't have to downsize their windows so that the content doesn't look goofy, that is back-assword.

Re: Design annoyances

#29

Post by Stormbringer »

jarin wrote: post #13
billswift wrote: post #3

Most of these have been pretty well known or obvious, which is why those that do them have little excuse. But I disagree strongly that #1 is a problem. Some things, like the header in his example, usually should be full width. While others, especially columns of text should be of a fixed maximum width to improve readability. Who cares about blank bars to the sides of the screen? Or at least, who cares as much as they…

I think the point of it is that you usually don't need a full-width header, so why mess up the alignment of elements on the page by using one?

No, the point is (or should be) that fixed width on a web page is almost always wrong. It will be either too big, or too small.

It is simply astounding the number of web pages that have poor appearance because the 'designer' never tested them on a different size monitor, or with different size fonts.

Re: Design annoyances

#30

Post by Stormbringer »

stellar678 wrote: post #4
Gorm-Casper wrote: post #2

I'm curious what others think about #3 (The vertical scrollbar). Traditionally it's considered messing with the defaults of the browser, and wasting precious screen space; but I hear from more and more (graphical) designers that they'd like me to stop the page from jumping by doing exactly this.

I think it's mostly just the usability perspective, like was mentioned in the article. If you don't force the vertical scrollbar and this causes elements that should be in a static position to move, you've got a frustrating usability issue. (Like on sites that have forward/back buttons that jump around so you can't repeatedly click the same button. How frustrating.)

That's not the usability perspective. Usability would be "don't mess with the semantics of the controls". E.g. if you're going to make something that looks like a button, it should do everything that buttons do.

Having the sidebar always on so as to avoid the bounce is not a usability thing. Usability would suggest that you leave the defaults the heck alone. In this case though, it is a pretty minor infraction.

Rather, it is an aesthetics thing. They've decided the default behaviour is 'ugly', and they've decided to override it to make it look better. In this case they've decided that prettiness trumps usability.

Post reply on HN