6

Regardless of whether it is HTML, XHTML or HTML5 you find those annoying percentages littered throughout the place. Yet... I see an awful lot of websites dare not go near them. Yet I was always encouraged through uni to use them.

So which should I be using? Which would lead to better site design and why?

I'm aware to avoid the use of height although HTML5 really doesn't like me not specifying height if I want to use percentages.

Thanks for taking the time to read.

Ravenshade
  • 109
  • 3
  • 9
  • 5
    The answer is it depends. But tell me, why do you think percentages are annoying? – Mr Lister Feb 20 '12 at 09:33
  • 1
    depends on what you want to do. There is no universal answer for that. – mas-designs Feb 20 '12 at 09:34
  • _I'm aware to avoid the use of height..._??? – elclanrs Feb 20 '12 at 09:34
  • 1
    There's a very good answer here that also covers em: http://stackoverflow.com/questions/609517/why-em-instead-of-px – Aram Kocharyan Feb 20 '12 at 09:36
  • And "HTML5 really doesn't like me not specifying height if I want to use percentages." ??? – Mr Lister Feb 20 '12 at 09:36
  • I personally stick to using px for making sure the dimensions don't change with font or the size of the window. However, I use % when I need a fluid design for part of the site. I have never used em... – Aram Kocharyan Feb 20 '12 at 09:37
  • @AramKocharyan but `em` vs `px` is an entirely different discussion than this. At least that one makes sense. Or wait, unless Ravenshade means font-size (of, e.g., headers) in pixels rather than percentages? – Mr Lister Feb 20 '12 at 09:38
  • Nothing wrong with using height, so long as it is used appropriately (and in a way that changes in font size won't break things) … but HTML 5 doesn't do anything to encourage the use of it, let alone demand it, and even more when it comes to using percentages as, quite a lot of the time, a percentage height will be resolved as `height: auto`. – Quentin Feb 20 '12 at 09:38
  • @Mr Lister #1, percentages are annoying because they don't always do what you expect them to do. They tend to limit or expand unexpectedly. Thus I've been having to use floats to counter some of the 'unexpected'. elclanrs especially where text is concerned. I haven't met a developer that advocated the use of specifying height yet. Mr Lister #2. Yes. If I declare div height: 30%...html5 asks: 30% of what? Html4 doesn't ask as the body and html are already 100%. – Ravenshade Feb 20 '12 at 10:40
  • 1
    @Ravenshade Now I see. You think you're seeing the difference between HTML4 and HTML5, but in reality you're seeing the difference between quirks mode and strict mode. In Quirks mode, `html` and `body` do have the height of the window by default. But in Strict mode (both in HTML4 and HTML5) they behave like all other block elements, getting the height of the content by default. So you should specify the height on them explicitly if you want them to have the height of the window! – Mr Lister Feb 20 '12 at 11:29
  • a whut mode!? I thought w3c were trying to get stricter >_>; – Ravenshade Feb 21 '12 at 00:47

2 Answers2

4

It really depends on what you do you want to build up.
Sometimes I need to build a website which could be read by people with certain disabilities. If for example also older people visit your site its good to use % so that they could zoom in your page and the layout still looks pretty.

Fixed Design Layouts Fixed design layouts have a specific width and do not scale to fit the browser window. Websites that make use of it can be aligned to the left, centre or even aligned to the right as and when required.

Benefits of Fixed layouts: With fixed design layouts you have control over the line length, flow and placement of the elements on the web page. The designer has a fixed space to work with and the line lengths of the text and the placement of images can be designated easily.

Drawbacks of Fixed layouts: Fixed design layouts tend to leave lots of empty space on either side of the design when viewed on high screen resolutions. This dwarfs the size of the web page and gives an impression that it is floating on the screen.

Fluid Layout Fluid design layouts use percentages instead of pixels to define their width and they fill the entire browser window. They are also called fixed or dynamic designs.

Benefits of Fluid layouts: One of the major benefits of fluid design layouts is their accessibility features. They cater to more number of users. This is because, whatever may be the screen resolution or device of the user, fixed design layouts adapt better. It makes use of the entire browser window by spreading out. This maximizes the area for the content to e displayed and more information can be seen at one go. Therefore, there is no empty space on the window screen. This is a better bet as compared to fixed layouts that leave a great deal of empty space.

mas-designs
  • 7,498
  • 1
  • 31
  • 56
  • I thikn with a bit of js, you could find a balance between fluid and fixed – Aram Kocharyan Feb 20 '12 at 09:39
  • 1
    sure you do ! but I always want to seperate styling from css because for me html is for describing the markup, css for styling and js for functionality. but you are right ! – mas-designs Feb 20 '12 at 09:40
  • very true, I was thinking maybe you could set up css so that it works without js at all, but if js is enabled then it finds the best layout for the window size. I think some sites use this technique, although a purely css solution is always best. – Aram Kocharyan Feb 20 '12 at 09:43
  • 1
    yeah sure I mean, why shouldn't you use the advantages of js when you are able to do ;-) but building website which are readable to blind people and websites which you can scale so one letter is as big as the screen is really hard :D – mas-designs Feb 20 '12 at 09:46
  • Ah..no it's not hard to get one letter as big as the screen. What's hard is preventing that same letter from leaving its parent div >_> – Ravenshade Feb 21 '12 at 00:48
2

For fonts, you should use percentages (or em's, or rems) if you don't wish to fix the font size in Internet Explorer. If you use pixels, then users of Internet Explorer who change their default font size in their browser settings won't see the fonts increase/decrease. So this makes your text potentially less readable for users in that browser.

A great resource for this is the first chapter of Dan Cederholm's Bulletproof Web Design.

For layout, using percentages or em's will make your design more flexible to changing font sizes/localization etc. This is also covered in the book.

devdigital
  • 34,151
  • 9
  • 98
  • 120
  • I.E...haven't we grown out of that yet? *shakes head*. Thanks for the heads up on that though. – Ravenshade Feb 20 '12 at 10:43
  • 1
    @Ravenshade there is no way that you are a webdesigner for large companies, because if, you still would know that a large amount of people still use IE and especially companies. – mas-designs Feb 21 '12 at 08:11
  • Of course I'm not a web designer for large companies...I can't see where I ever inferred as such. That said, IE is going down in use. I don't know one company that uses IE anymore, none of the organisations that I do work with, use IE as a default browser. – Ravenshade Nov 11 '12 at 00:26