...

View Full Version : Pixels or Percents?



Norm850
02-17-2012, 04:35 AM
Hey guys,

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.

Please help!

Thanks
Norm Nasty

JustS
02-17-2012, 07:09 AM
http://www.w3schools.com/cssref/css_units.asp

if your answer isn't at w3schools, you won't find it anywhere.

majunior
02-17-2012, 10:58 AM
Hey Norm850,

You are correct, most websites indeed are using pixels instead of percentage. It is mostly 960 pixels wide. This is based on the 1024 x 768 resolution.
Think about browser resolutions (http://www.w3schools.com/browsers/browsers_display.asp) for a moment. Indeed, we do all have different screen sizes. But around 1% of all users have a screen size smaller than 1024. My guess is that the 1% of the users who do have a 800x600 resolution are old people, barely comfortable with the internet. So we can basically ignore that 1%.

We use the 960 width, because we can all control this. Lets say I have a 800px wide text block. I can play around with borders, background images, and text sizes, without having to worry about the screen size of my user.

If I make this text block 50%; The text block can range between 500px on a 1024 width, to around 1000 px on a 1960 width. This range makes it hard to control.

Percentage is always a good consideration, but most of the times, there is too much tweaking and the website on a large screen basically has too much differences when you compare it to a small screen.

So, thats why most sites use px and not %.

SB65
02-17-2012, 11:36 AM
Here's a decent article on the pros and cons of fixed and fluid widths:
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

960px is frequently used since 960 can be divided by 2,3,4,5,6,8,10 to allow the creation of many different sets of column widths that fit easily into the design.


My guess is that the 1% of the users who do have a 800x600 resolution are old people, barely comfortable with the internet. So we can basically ignore that 1%.

I worked in a place a couple of years ago where you'd have been escorted from the building for that....:D

majunior
02-17-2012, 02:35 PM
@SB65: lol :P
out of curiousity: why would I be escorted from the building for ignoring the 1%?

teedoff
02-17-2012, 03:19 PM
Hey Norm850,

You are correct, most websites indeed are using pixels instead of percentage. It is mostly 960 pixels wide. This is based on the 1024 x 768 resolution.
Think about browser resolutions (http://www.w3schools.com/browsers/browsers_display.asp) for a moment. Indeed, we do all have different screen sizes. But around 1% of all users have a screen size smaller than 1024. My guess is that the 1% of the users who do have a 800x600 resolution are old people, barely comfortable with the internet. So we can basically ignore that 1%.

We use the 960 width, because we can all control this. Lets say I have a 800px wide text block. I can play around with borders, background images, and text sizes, without having to worry about the screen size of my user.

If I make this text block 50%; The text block can range between 500px on a 1024 width, to around 1000 px on a 1960 width. This range makes it hard to control.

Percentage is always a good consideration, but most of the times, there is too much tweaking and the website on a large screen basically has too much differences when you compare it to a small screen.

So, thats why most sites use px and not %.


Not sure its wise to ignore any demographic just because they use older equipment or outdated surfing habits..lol

1% of 10 million ppl is no small group wouldn't you say? If you're running an ecommerce site, wouldnt't you want to, within reason, accomodate as many users as feasible?

SB65
02-17-2012, 03:36 PM
@SB65: lol :P
out of curiousity: why would I be escorted from the building for ignoring the 1%?

For discriminating against a minority and/or disadvantaged, or other group of people - this organisation was very right on and politically correct. Nothing whatsoever to do with web applications per se. :D

Aside: This whole thread seems to be heading in a similar direction to "why do you bother with people that have js disabled" and "why do you bother with IE6 users" - to which my general response is, because they're users too and might enjoy/use/buy from the website in question. But let's not go there on a Friday afternoon....

challapradyumna
02-17-2012, 03:36 PM
But for accomidating those 1% people you dont want to make your site discomforting for the remaining 99% . ( i hate those blogger sites which look like ribbons that run forever down the screen)

SB65
02-17-2012, 03:51 PM
One solution to all this is to use css @media queries of course, but if someone's using a tiny screen they're probably still using IEsomethingquiteold which won't support them.
However, they could also be on a mobile device, which is a whole dfferent debate.

(Had a client who used IE5.5 up to last summer, so his website had to work in that, even though nobody else used it.... He had an 800by600 screen too.)

Rowsdower!
02-17-2012, 04:19 PM
Why has nobody raised the specter of using % widths, with px min-width and px max-width?

I do this from time-to-time.

For example:
http://rowsdower.freehostia.com/layouts/?page=single_column_semi-fluid_width_%28html5%29

(Note: I know that particular page does not use a max-width for the #wrapper div, but it easily could in order to prevent super-wide displays from having a problem.)

Mobiles will break the mold given my specified min-width, but I suppose you can use media queries on them to handle that issue so you're covered on all bases.

Norm850
02-18-2012, 12:35 AM
I appreciate all the replies. One more question though. I have a background image that I created and it has words at the top of the picture for a banner at the top of my website basically. My nav bar (div element) collides with the words on my desktop (bigger monitor) after coding it to look fine on my laptop (smaller monitor). This is probably because i'm using pixels and I am wondering how can this be fixed? Is the background image a bad idea?

felgall
02-18-2012, 02:23 AM
Ideally you'd use % for anything you want sized relative to the viewport and em for anything you want sized relative to the text.

px is only useful for specifying borders where you want them as thin as possible.

Most big web sites are written by people who learnt how to create web sites for 20th century browsers who have not updated their skills to deal with the different approach required with modern browsers and non-computer devices. Also a lot of sites still teach how to write web pages for browsers such as IE4 and Netscape 4 rather than for the modern web (eg. w3schools).

With modern widescreen monitors and window-arrowkey functions in Windows 7 it is really easy to display browsers that take up exactly half the screen allowing something else to be displayed in the other half. With 1960x1080 being a common screen size this means that the browser gets 960 pixels width including the side borders and vertical scrollbar and so will have about 945 pixels viewport width - this is probably the most common viewport width currently in use but nowhere collects statistics on viewport size and even as the most common it is probably only 5% or less of the total).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum