Should I use % or 'px' in HTML

Question

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.

Answer 1

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.

Answer 2

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.