FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


The new norm for website height/width?





Stoicus
So yea, working on making my website and its been a while. Whats the norm for the actual layout height/ width with so many people using different resolution. Any advice as to how to go about starting on my base Size / idea for my layout.
ncwdavid
Well I would usually create a site with a width anywhere between 720px to 900px and the height I dont really think of at the start because the height just kind of gets defined as yuo ass more and more stuff. 900px would be good if your site was going to have alot of content and information on one page and 720px is maybe for a site that does not need too much content on one page. Its really up to you and what your site is about and what it needs.
{name here}
ncwdavid wrote:
Well I would usually create a site with a width anywhere between 720px to 900px and the height I dont really think of at the start because the height just kind of gets defined as yuo ass more and more stuff. 900px would be good if your site was going to have alot of content and information on one page and 720px is maybe for a site that does not need too much content on one page. Its really up to you and what your site is about and what it needs.

Using pixels to define width is a NO NO! That means your site is fixed in width, and people with higher resolutions will have your site too small on their screens, and people with lower resolutions will have a site that's too big for them. Try to use percents for divs, points for fonts, and the occasional em. They'll work better. 100% wide would be the best ideally, but usually 80% width in the wrapper would be used.
Stoicus
{name here} wrote:
ncwdavid wrote:
Well I would usually create a site with a width anywhere between 720px to 900px and the height I dont really think of at the start because the height just kind of gets defined as yuo ass more and more stuff. 900px would be good if your site was going to have alot of content and information on one page and 720px is maybe for a site that does not need too much content on one page. Its really up to you and what your site is about and what it needs.

Using pixels to define width is a NO NO! That means your site is fixed in width, and people with higher resolutions will have your site too small on their screens, and people with lower resolutions will have a site that's too big for them. Try to use percents for divs, points for fonts, and the occasional em. They'll work better. 100% wide would be the best ideally, but usually 80% width in the wrapper would be used.


Got any links as to how to set this up im not familiar with using % for layouts. Im old school were as i used to photoshop my site, slicing it up and bamb theres the layout
{name here}
Stoicus wrote:
{name here} wrote:
ncwdavid wrote:
Well I would usually create a site with a width anywhere between 720px to 900px and the height I dont really think of at the start because the height just kind of gets defined as yuo ass more and more stuff. 900px would be good if your site was going to have alot of content and information on one page and 720px is maybe for a site that does not need too much content on one page. Its really up to you and what your site is about and what it needs.

Using pixels to define width is a NO NO! That means your site is fixed in width, and people with higher resolutions will have your site too small on their screens, and people with lower resolutions will have a site that's too big for them. Try to use percents for divs, points for fonts, and the occasional em. They'll work better. 100% wide would be the best ideally, but usually 80% width in the wrapper would be used.


Got any links as to how to set this up im not familiar with using % for layouts. Im old school were as i used to photoshop my site, slicing it up and bamb theres the layout

In the CSS rather than using px you use %. Percents go to 100% based on the width of the screen. It is dynamic.
Donutey
I've used a fluid layout on my site for a while (before that one that was ~900px) and it's worked quite well. However, the one thing that I would like to note is that it's a good idea to put a min-width and a max-width in pixels for your site (styling the body tag works well in most cases)

For example, my site collapses into an unorganized jumble (the menus and the fluid header collapse on themselves) at around 520px; and on a widescreen laptop, its almost unreadable because so many words are on a single line.

Fluid layouts are great but putting a min and max width is also a good idea (although not supported in IE6).
coreymanshack
Donutey wrote:
I've used a fluid layout on my site for a while (before that one that was ~900px) and it's worked quite well. However, the one thing that I would like to note is that it's a good idea to put a min-width and a max-width in pixels for your site (styling the body tag works well in most cases)

For example, my site collapses into an unorganized jumble (the menus and the fluid header collapse on themselves) at around 520px; and on a widescreen laptop, its almost unreadable because so many words are on a single line.

Fluid layouts are great but putting a min and max width is also a good idea (although not supported in IE6).


I always used fixed pixel's i really don't care if people on higher resoultions see my site as smaller, the text will still be the same size.. and while people on lower resoulutions see it bigger, the site will still be the same.. just bigger... i don't see the big deal about that... and this way i also dont have to worry about min and max width because the browser will add scrollbars to my site instead of collapsing all of the content.
{name here}
coreymanshack wrote:

I always used fixed pixel's i really don't care if people on higher resoultions see my site as smaller, the text will still be the same size.. and while people on lower resoulutions see it bigger, the site will still be the same.. just bigger... i don't see the big deal about that... and this way i also dont have to worry about min and max width because the browser will add scrollbars to my site instead of collapsing all of the content.

When you get into people with resolutions at 1600x1200, then they have to squint to see your text due to their high resolution and your dinky font size. Scaling with the browser doesn't really do so good at these resolutions. 1440x900 would still be within the readable realms, though now your site would be shifted off center because of the use of a widescreen monitor. Also, for people of lower resolution, it is irritating for them to have to scroll to see your entire site. Imagine if someone were to post a horizontal long cat. That would be roughly how people would view your site.
Digital Thoth
Huh. It's kind of odd, I'm personally at fault for using points, instead of pixels or percentages. It's a bad habit of mine, to use 800pt, instead of 800 px. I know it's for printing, but I just learned to use it and have always used it. Embarassed
imagefree
If you want to make a page/site friendly with all classess of People, you may use a Flexible table.

for the part you want to keep flexible, set the width in percentage, now if someone looks it on a big screen will see the whole screen covered. Now its upto you how to manage.

Another technique that currently most of the web designers use is that you can also ccenterallize your page/site.

Make a table and center align it and then start putting data inside the table. Alo set the table width in percentage or Pixels according to your requirement in this case. This is just hint. Everything is to be done by you and you have to use your own mind for complex designs.

God Bless You.
dbhai
Will 100% fluid will be good
Donutey
Thanks for saying what I was about to {name here}.

You can always ignore certain users to simplify your design, but try to be as inclusive as possible (ie you might not specifically design for mobile web, but your site degrades well without CSS)
{name here}
imagefree wrote:
If you want to make a page/site friendly with all classess of People, you may use a Flexible table.

for the part you want to keep flexible, set the width in percentage, now if someone looks it on a big screen will see the whole screen covered. Now its upto you how to manage.

Another technique that currently most of the web designers use is that you can also ccenterallize your page/site.

Make a table and center align it and then start putting data inside the table. Alo set the table width in percentage or Pixels according to your requirement in this case. This is just hint. Everything is to be done by you and you have to use your own mind for complex designs.

God Bless You.

If you want, it might be even better to make the table one/two large div wrappers so then you can stay more current in web designing.
littlegiant
coreymanshack wrote:
Donutey wrote:
I've used a fluid layout on my site for a while (before that one that was ~900px) and it's worked quite well. However, the one thing that I would like to note is that it's a good idea to put a min-width and a max-width in pixels for your site (styling the body tag works well in most cases)

For example, my site collapses into an unorganized jumble (the menus and the fluid header collapse on themselves) at around 520px; and on a widescreen laptop, its almost unreadable because so many words are on a single line.

Fluid layouts are great but putting a min and max width is also a good idea (although not supported in IE6).


I always used fixed pixel's i really don't care if people on higher resoultions see my site as smaller, the text will still be the same size.. and while people on lower resoulutions see it bigger, the site will still be the same.. just bigger... i don't see the big deal about that... and this way i also dont have to worry about min and max width because the browser will add scrollbars to my site instead of collapsing all of the content.


Yeah, right on! Standards schmandards! Liquid layouts can really blow away the aesthetic appeal of web site design. I'm all for fixed width layouts. People with wider screens are used to tiny text and the bottom line is, not even the big corporate sites give a rat's arse about this. Go take a look at the New York Times at 1280 x 1024. That being said, I personally like to set my font size so that it accomodates a wide range of screen resolutions, i.e., I'll set it so that it displays fairly big on 1024 x 768 (still the norm) but it won't be too tiny on 1280 x 1024.
{name here}
littlegiant wrote:
Yeah, right on! Standards schmandards! Liquid layouts can really blow away the aesthetic appeal of web site design.

That's funny, because every liquid layout I've ever done never had its "aesthetic appeal blown away". I can make a design that looks decent on all resolutions 800x600 and above using only percents to define sizes. I also detest your anti-standards view. You know what? Screw standards! I'm going to write my website in .txt format! Screw web browsers! FTP clients are the future!

Quote:
I'm all for fixed width layouts. People with wider screens are used to tiny text and the bottom line is, not even the big corporate sites give a rat's arse about this. Go take a look at the New York Times at 1280 x 1024.

Look at Wikipedia. The monobook template uses a liquid layout, and will display with perfectly good text on just about every screen size 800x600 over. How about Slashdot, Digg, Frihost's forums, Linux.com, Kernel.org, osFree, Phat Code, the Free Software Foundation, GNU, and ?

There's a reason why corporations fix their designs. They put these stupid flash animations and use outdated techniques like using images to curve borders. If they didn't fix their design, their website would go to pot because of their poor techniques.

Quote:
That being said, I personally like to set my font size so that it accomodates a wide range of screen resolutions, i.e., I'll set it so that it displays fairly big on 1024 x 768 (still the norm) but it won't be too tiny on 1280 x 1024.

Without proper scaling, it's just going to make your design ugly on larger resolutioned and smaller resolutioned monitors.
coeus
Liquid designs are nice in theory, but the wider the screen the more stretched out paragraphs become. If you have a lot of text on your screen and an entire paragraph is now just a line that's 1600 pixles wide, it isn't very user friendly. You have to find a happy medium. Currently most people surf with 1024 width , those with 1600 width live in a 1024 world and they know it and know how to not full screen their browser window. It's impossible to please everyone in todays world of pcs, macs, widescreen, and ada complaince. Too many different things out there, pick your target audience and adhere to what they have, try to be flexable but when it comes down to it, sacrafices are going to be made.

fixed width to 1024 center aligned is what I currently favor.
littlegiant
Quote:
I also detest your anti-standards view. You know what? Screw standards! I'm going to write my website in .txt format! Screw web browsers! FTP clients are the future!


Sheesh, don't have a litter of kittens there... I hate to break it to ya buddy but you've got a titanic task ahead of you in your crusade to 'clean up' the web.

I posted this list in February (2007) on another thread. I think it bears repeating:

Let's see how some of the W3C members measure up to their own online validator:

Adobe
http://www.adobe.com/
Failed validation, 19 errors

Creative Commons
http://creativecommons.org/
Failed validation, 34 errors

Google, Inc.
http://www.google.com/
Failed validation, 67 errors - No DOCTYPE found! (ouch...)

Microsoft
http://www.microsoft.com/en/us/default.aspx
Failed validation, 24 errors

Sun Microsystems
http://www.sun.com/
Failed validation, 28 errors

Verisign, Inc
http://www.verisign.com/
Failed validation, No Character Encoding Found! Falling back to UTF-8.
Sorry! This document can not be checked.


Yahoo, Inc
http://www.yahoo.com/
Failed validation, 37 errors


And like, all of these guys should know better! But anywho, whaddaya gonna do? Once again, standards schmandards. BTW, on my own main site and that of a client's funded by the government, I take great care to validate all the pages. I often also use tableless designs so I'm not totally against web standards. I just don't think it should be taken to an extreme.

Moreover...

thecodeyouneed.us.to
http://www.thecodeyouneed.us.to/main/
Failed validation, 6 errors

OUCH! (That's gotta hurt...)... Maybe you should practice what you preach there, {name here}... It helps build credibility.. Wink


coeus wrote:
Liquid designs are nice in theory, but the wider the screen the more stretched out paragraphs become. If you have a lot of text on your screen and an entire paragraph is now just a line
that's 1600 pixles wide, it isn't very user friendly....


Took the words right out of my mouth. {name here}, you should check your infrosoft site at 1280 x 1024. You're averaging 30 words per line there. And unless you've got max-width set in your CSS somewhere, 1600 x 1200 is going to be even worse...
{name here}
coeus wrote:
Liquid designs are nice in theory, but the wider the screen the more stretched out paragraphs become. If you have a lot of text on your screen and an entire paragraph is now just a line that's 1600 pixles wide, it isn't very user friendly. You have to find a happy medium. Currently most people surf with 1024 width , those with 1600 width live in a 1024 world and they know it and know how to not full screen their browser window. It's impossible to please everyone in todays world of pcs, macs, widescreen, and ada complaince. Too many different things out there, pick your target audience and adhere to what they have, try to be flexable but when it comes down to it, sacrafices are going to be made.

fixed width to 1024 center aligned is what I currently favor.

That is why you scale the text as well.

Quote:
Took the words right out of my mouth. {name here}, you should check your infrosoft site at 1280 x 1024. You're averaging 30 words per line there. And unless you've got max-width set in your CSS somewhere, 1600 x 1200 is going to be even worse...

I run my resolution at 1400x900 (and test at this resolution), and I see no problems with it. Squeezing it to about 1280 width I don't really see anything wrong either. I might have to go through the CSS and try to see if I missed some stupid point/pixel marks on the fonts. The whole thing will probably be scrapped in favor of InfroPortal anyways.

Quote:

thecodeyouneed.us.to
http://www.thecodeyouneed.us.to/main/
Failed validation, 6 errors

OUCH! (That's gotta hurt...)... Maybe you should practice what you preach there, {name here}... It helps build credibility..

Currently the site is using a cookie cutter template with some CSS I've made thrown into the mix. I'm currently trying to juggle 4 wikis, and 5 sites. The Code You Need isn't my priority task currently because I've just signed to administrate the Gothic Wikipedia and clean it up in a span of only a month and another site, which I will help a webmaster who doesn't have the time to create a full CMS by himself. Just to humor you, I've hacked the template so it's 100% XHTML strict valid.

Quote:
Let's see how some of the W3C members measure up to their own online validator:

They're also sucking up to try and make it render correctly in IE.
littlegiant
Quote:
I run my resolution at 1400x900 (and test at this resolution), and I see no problems with it.


Technically no, but I've read studies that have shown that the optimal line length for reading on web pages is between 10-12 words per line and I definitely agree with this. When the line length gets too long, you tend to lose your place as the eye moves from one line to the next which gets very tiresome.

Quote:
Just to humor you, I've hacked the template so it's 100% XHTML strict valid.


Ha! Ha! Very Happy Well thanks anyway but I'm one of those who doesn't really give a rat's arse. Or rather, I cater to web standards when it suits me. But if it gets to be too much of a pain in the posterior, I just say to hell with it. And I certainly don't go around thumping a web standards bible preaching the end of the internet as we know it if we keep on using tables for design, pixels for font sizes and fixed width layouts.
coreymanshack
{name here} wrote:
coreymanshack wrote:

I always used fixed pixel's i really don't care if people on higher resoultions see my site as smaller, the text will still be the same size.. and while people on lower resoulutions see it bigger, the site will still be the same.. just bigger... i don't see the big deal about that... and this way i also dont have to worry about min and max width because the browser will add scrollbars to my site instead of collapsing all of the content.

When you get into people with resolutions at 1600x1200, then they have to squint to see your text due to their high resolution and your dinky font size. Scaling with the browser doesn't really do so good at these resolutions. 1440x900 would still be within the readable realms, though now your site would be shifted off center because of the use of a widescreen monitor. Also, for people of lower resolution, it is irritating for them to have to scroll to see your entire site. Imagine if someone were to post a horizontal long cat. That would be roughly how people would view your site.



Well everyone can't be winners, especially when your site is in fixed proportions for a reason. Some things just simply will not display correctly done in percentages.

http://www.xsquareddev.net


{name here} wrote:
Without proper scaling, it's just going to make your design ugly on larger resolutioned and smaller resolutioned monitors.


Lets take a trip down to the local "Best Buy" why don't we? Let's see, there are 1024*768, and whatever that widescreen resolution is. Nothing much else. Our more avid computer users that are likely to be viewing our sites more than likely have a computer not more than 3-4 years old. Meaning, their resolutions are probably not much different from what we have now. In fact, I have a computer monitor from the year '98 and 1024*768 looks just fine. In worst case scenario, websites nowaday's will be viewed in 800*600, So is making your website conformable to every resolution and screen size illegitamate and just a big pain in the arse? Why yes it is. Design for the majority not the minority.

Some statistcs, showing that there really isn't a whole lot of wierd resolutions here,

http://www.utexas.edu/teamweb/reports/screen_resolution/index.php?log=Dec2005.log
http://www.onevision.co.uk/xq/ASP/id.789/qx/default.htm?CT=LeftNav
http://www.tamingthebeast.net/blog/web-development/screen-resolution-statistics-0707.htm

So in conclusion, if your website looks good in 800*600, it's gonna look good in anything else. Don't listen to someone when they say that the text is going to be smaller at higher resolutions. As long as you use pt values in text, instead of px values, text is not going to undergo a noticable change in higher resolutions.

Although your site may look good in 800*600, and if you are one of those people that just has to have everyone being able to view your site. Include scroll bars for resolutions lower than 800*600.
{name here}
Quote:
Lets take a trip down to the local "Best Buy" why don't we? Let's see, there are 1024*768, and whatever that widescreen resolution is. Nothing much else. Our more avid computer users that are likely to be viewing our sites more than likely have a computer not more than 3-4 years old. Meaning, their resolutions are probably not much different from what we have now. In fact, I have a computer monitor from the year '98 and 1024*768 looks just fine. In worst case scenario, websites nowaday's will be viewed in 800*600, So is making your website conformable to every resolution and screen size illegitamate and just a big pain in the arse? Why yes it is. Design for the majority not the minority.

I bought my computer recently from Best Buy. Widescreen resolutions vary from 1088x768 to 1400x900. Most 4:3 monitors there were running at about 1280x960 or so.

I don't find designing for larger screen resolutions a pain. I try to keep images to a minimum because people should focus on content more than design. It makes the page simple, but likeable - like Google's page. It works on practically every resolution, as it isn't using fixed width. There is no need for fixed width unless your design is going to be a rediculously gaudy waste.

Not even I support resolutions under 800x600, due to the fact those computers are most likely going to use dated software that don't support CSS. Of course, I'm still supporting text browsers, as I do not want to descriminate agaisnt the blind, nor do I want to break any laws in foreign countries due to websites being descriminating against the blind by the lack of normal text and excess use of images without the alt attribute.
coreymanshack
{name here} wrote:
Quote:
Lets take a trip down to the local "Best Buy" why don't we? Let's see, there are 1024*768, and whatever that widescreen resolution is. Nothing much else. Our more avid computer users that are likely to be viewing our sites more than likely have a computer not more than 3-4 years old. Meaning, their resolutions are probably not much different from what we have now. In fact, I have a computer monitor from the year '98 and 1024*768 looks just fine. In worst case scenario, websites nowaday's will be viewed in 800*600, So is making your website conformable to every resolution and screen size illegitamate and just a big pain in the arse? Why yes it is. Design for the majority not the minority.

I bought my computer recently from Best Buy. Widescreen resolutions vary from 1088x768 to 1400x900. Most 4:3 monitors there were running at about 1280x960 or so.

I don't find designing for larger screen resolutions a pain. I try to keep images to a minimum because people should focus on content more than design. It makes the page simple, but likeable - like Google's page. It works on practically every resolution, as it isn't using fixed width. There is no need for fixed width unless your design is going to be a rediculously gaudy waste.

Not even I support resolutions under 800x600, due to the fact those computers are most likely going to use dated software that don't support CSS. Of course, I'm still supporting text browsers, as I do not want to descriminate agaisnt the blind, nor do I want to break any laws in foreign countries due to websites being descriminating against the blind by the lack of normal text and excess use of images without the alt attribute.


Most of the sites I build look fine in these widescreen resolutions, width=100% then I create a little box within that, and it becomes centered.
{name here}
coreymanshack wrote:
{name here} wrote:
Quote:
Lets take a trip down to the local "Best Buy" why don't we? Let's see, there are 1024*768, and whatever that widescreen resolution is. Nothing much else. Our more avid computer users that are likely to be viewing our sites more than likely have a computer not more than 3-4 years old. Meaning, their resolutions are probably not much different from what we have now. In fact, I have a computer monitor from the year '98 and 1024*768 looks just fine. In worst case scenario, websites nowaday's will be viewed in 800*600, So is making your website conformable to every resolution and screen size illegitamate and just a big pain in the arse? Why yes it is. Design for the majority not the minority.

I bought my computer recently from Best Buy. Widescreen resolutions vary from 1088x768 to 1400x900. Most 4:3 monitors there were running at about 1280x960 or so.

I don't find designing for larger screen resolutions a pain. I try to keep images to a minimum because people should focus on content more than design. It makes the page simple, but likeable - like Google's page. It works on practically every resolution, as it isn't using fixed width. There is no need for fixed width unless your design is going to be a rediculously gaudy waste.

Not even I support resolutions under 800x600, due to the fact those computers are most likely going to use dated software that don't support CSS. Of course, I'm still supporting text browsers, as I do not want to descriminate agaisnt the blind, nor do I want to break any laws in foreign countries due to websites being descriminating against the blind by the lack of normal text and excess use of images without the alt attribute.


Most of the sites I build look fine in these widescreen resolutions, width=100% then I create a little box within that, and it becomes centered.

I do myself see many sites okay at the highest resolution that I mentioned, but I do occassionally see some site that in a microfont shifted right and looking absolutely terrible. Some of the Macintosh displays I saw at the store are tons wider than my monitor, and I have to wonder how terrible it is trying to browse those sites on the web with that monitor. I'd imagine scaling could only work so much to make those sites work - eventually the zoom would pixellate the images.
coreymanshack
{name here} wrote:
coreymanshack wrote:
{name here} wrote:
Quote:
Lets take a trip down to the local "Best Buy" why don't we? Let's see, there are 1024*768, and whatever that widescreen resolution is. Nothing much else. Our more avid computer users that are likely to be viewing our sites more than likely have a computer not more than 3-4 years old. Meaning, their resolutions are probably not much different from what we have now. In fact, I have a computer monitor from the year '98 and 1024*768 looks just fine. In worst case scenario, websites nowaday's will be viewed in 800*600, So is making your website conformable to every resolution and screen size illegitamate and just a big pain in the arse? Why yes it is. Design for the majority not the minority.

I bought my computer recently from Best Buy. Widescreen resolutions vary from 1088x768 to 1400x900. Most 4:3 monitors there were running at about 1280x960 or so.

I don't find designing for larger screen resolutions a pain. I try to keep images to a minimum because people should focus on content more than design. It makes the page simple, but likeable - like Google's page. It works on practically every resolution, as it isn't using fixed width. There is no need for fixed width unless your design is going to be a rediculously gaudy waste.

Not even I support resolutions under 800x600, due to the fact those computers are most likely going to use dated software that don't support CSS. Of course, I'm still supporting text browsers, as I do not want to descriminate agaisnt the blind, nor do I want to break any laws in foreign countries due to websites being descriminating against the blind by the lack of normal text and excess use of images without the alt attribute.


Most of the sites I build look fine in these widescreen resolutions, width=100% then I create a little box within that, and it becomes centered.

I do myself see many sites okay at the highest resolution that I mentioned, but I do occassionally see some site that in a microfont shifted right and looking absolutely terrible. Some of the Macintosh displays I saw at the store are tons wider than my monitor, and I have to wonder how terrible it is trying to browse those sites on the web with that monitor. I'd imagine scaling could only work so much to make those sites work - eventually the zoom would pixellate the images.


Ouch yea, I bet it sucks to be a mac user. ALTHOUGH IF I HAD A MAC, I would probably use that for production purposes not entertainment. I would have a seperate machine running microsoft windows xp or greater. .... This is a little off topic though. But yea, I would hate to be surfing the web on a mac.
gerpg
make the site into percentages so any resolution can view it, download a program from somewhere like download.com that will allow you to quickly change your screen resolution to check them all, a site that is able to adjust for every resolution looks more professional.

Louis.
Related topics
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.