Percent or Pixels HTML/CSS

csshtmlweb

Coding a new website. Basically, for position elements using CSS I would use percents and figured that was the best thing to do since everyone's monitor was a different size. But I noticed a lot of big websites use pixels.

I don't understand how you can use pixels to position things since we all have a different size screen?

Best Answer

The fluid layout provides, in general, better user experience, but is not without flaws. When using fluid layouts, you are testing them on medium-small to medium-large screens, but you certainly can't do complicated fluid layouts with CSS2 (no JavaScript, no HTML5/CSS3) which works perfectly well on any device, from a small mobile phone to a 30-inches full-screen mode.

The fluid layout is also more expensive in most cases. This is true for the visual design, the ergonomics and the HTML/CSS development.

The fixed layout gives the ability for a developer to say:

  1. I gathered the statistics about the browsers of my visitors, and know that 95% of users of my website have a resolution width between 1024 and 1920 pixels. Instead of spending a month designing a fluid layout, I will target the resolution of my 95% of users, and spend the free time to implement some cool features instead.

  2. If I have enough time and resources, I'll do a dedicated version for mobile phones.

The fact that fixed layouts are easier to implement is important here. I have a choice: either I do a fluid layout which will in all cases look bad on very small or very large screens, or I spend the same amount of time and money creating two or three layouts for different resolutions.

Aside the cost, fluid layouts have also some issues you can't solve without HTML5/CSS3 or JavaScript.

  • Example 1: Programmers.SE has a fixed layout. This means that on any resolution, the main text I read (the questions and the answers) will be no longer than, say, 800 pixels in width. Given the current font size and the line spacing, this is ok to be able to read fast.

    If Programmers.SE moves to fluid layout, your current question would we 1 600 pixels width on my screen at this moment. This will be totally unusable, and I wouldn't be able to read a long text without requiring to minimize the browser window and adjust it for the website.

  • Example 2: in a recent project, I split the text in two columns for the browsers which support this. Given the font size and the line spacing, one column is not really readable, but two are perfect. Since I know the width of the page, I know how the text will appear in 93 to 94% cases: the other 5% are using browsers that don't support text columns, and the final 1 to 2% are using custom font sizes (i.e. people who don't see well and enlarge the fonts by default and/or people who don't have the font I use on the page).

    With a fluid layout, I wouldn't be able to do that without HTML5: on a 30-inches monitor full-screen, two columns would still be unreadable: it would require four or five columns instead. On a screen of a large mobile phone, two columns would be unreadable neither, since there will be one to three words per line.

  • Example 3: you have a topmost menu with the parts of your website. There are five parts, and the elements are float:lefted. With a fixed layout, it magically works, and fails if the user specifies the larger font for accessibility reason. With a fluid layout, what will happen with those elements if the user resizes the page to a width smaller than the total width of those five elements?