Jump to content

Web Standards - Resolution and Width


Mordent
 Share

Recommended Posts

Hi folks, just a couple questions about the current web standard for making pages work for the right resolutions and whatnot (I couldn't find anywhere better than in CSS to put this, so meh).Now, from what I can gather from various forum trawls is that the current standard resolution to work to is 800x600. Basically, make it work for that and any higher resolutions should be able to cope, right?So, despite having a fairly nice 1440x900 (wide-screen) monitor myself, I realised the other day upon looking at a browser page that wasn't full screen (probably taking about half of the screen up in both dimensions) that the page resized to try to accommodate my small window. This left things looking very odd, so I realised that clearly the web standard assumed people would be looking at the page in full screen.Now, that means pages should be designed to look "nice" when the window is 800x600 or more, correct? My next question, then, is about all of the sites that add lots of padding to either side of a page that's around 800px wide. They most likely do this because of images and whatnot being a fixed size, and I thought it looked pretty nice. If you make the page smaller (width-wise) after you've gotten rid of all of the padding the horizontal scrollbar comes in to play. Clearly web pages don't have to accommodate people who look at their sites with windows less than the standard width, so this seemed like a pretty fine solution: in wider resolutions it adds padding to both sides to fill in the gap (basically extra background color/image), and in smaller resolutions you get a scrollbar.Now, it then occurred to me that surely these pages can't themselves be 800px wide. While the resolution of the screen is 800px, what about the vertical scrollbar? There aren't any horizontal borders because of the fullscreen (at least in Firefox and IE), but surely the scrollbar takes up some of the width? If you have a width of 800px and have a site that requires vertical scrolling then you'll have an irritatingly small amount of horizontal page off-screen because it's covered by it (therefore requiring a horizontal scrollbar).In short, do all common browsers have a standard scrollbar width (and if so, what is it)? Should it be taken in to account when looking at the width of your page?Cheers for any help,MordentEDIT: Also, while I'm about it, I've been looking pretty much everywhere to find other web standards. Clearly font sizes should be defined as percentages (100% being the standard body text), but out of curiosity what is the standard font size people use? Naturally everyone's will be different, but for those who never both changing their browser from the default settings what would the standard font and size be?

Link to comment
Share on other sites

If you want to adapt a page for 800x600px you can give it a width of 760px. It ensures that a scrollbar won't interfere. Another thing you can do is have a completely flexible layout, I do that by simply putting the page in a container with about 20px left and right margin, and everything in between that will stretch when the browser does.About font sizes, it's recommended to give your body element 62.5% (that means that if the default browser size is 16px, it will use 10px). After that, you can use 1.4em for big text (like the <h2> or <h3> element) and use about 1.2em for normal text (<p> elements). You can leave menus and small things at 1em.Remember to be careful with ems and % because they're relative to the font size of their parents. You may apply 1.2 em to an element, and inside it apply 1.1em to another element and find that it's even bigger than the text of the parent element.

Link to comment
Share on other sites

Horizontal Scrollbars and WidthActually nowadays the most used resolution is 1024x768. 800x600 has dropped dramatically in the last 3-5 years and has been replaced by laptop resolutions like 1280x800 or 1440x900, etc. Here's a good list of laptop screen resolutions: http://www.prismo.ch/comparisons/notebook.phpI do ALL my designs now with a 1024x768 resolution in mind, and I apply the same principle I used to when creating my designs for 800x600: just cut it to where you're 100% sure you don't have to worry about horizontal scroll bars. In other words, if I was designing for 800x600 my design would have a maximum width of 750px. And now that I design for 1024x768 my pages are 1000px wide. These method reduces the width enough so I never have to worry about horizontal scrolls again for the entire project, but at the same time it doesn't 'cut' too much on the real estate of the page to start laying out the elements.Another solution is using a 'liquid' layout just like Ingolme explains in his first paragraph.Font SizesThe best way is to 'start from scratch', with this I mean that browsers have different ways of showing many of the HTML elements, so to 'start from scratch' one very nice way is to use a 'Reset CSS file'. A 'Reset CSS file' makes all the elements of a page 'start from scratch', where there are no paddings, no margins, no borders, no spaces in the tables, and finally, a 100% size for the fonts... or 1em which is the same thing. Here's the link to the 'Reset CSS file': http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/Now with this in place in your main CSS file, you can then proceed to establish how much space, size, width, etc you want for your elements, nothing will happen unless you specify it, this reduces more than 95% the issues of browsers showing elements differently, hence, more control over your font sizes.As you can see in the Reset CSS fonts are already set to 100% "font-size: 100%;" in the body: class, this means that your fonts will show at a normal size in user's browsers and now you can make your h1s, h2s, h3s, etc something like:

h1 {   font-size:2em; /* This is the same as 200%*/}h2 {   font-size:1.6em; /* This is the same as 160%*/}h3 {   font-size:1.2em; /* This is the same as 120%*/}

To answer both of your questions:

...do all common browsers have a standard scrollbar width (and if so, what is it)? Should it be taken in to account when looking at the width of your page?
Whatever the width of the scrollbar in Firefox, or IE6/7, or Opera, or Safari or any other browser, that doesn't really matter, in fact is not even relevant. What matters is the resolution you're designing for, that's is practically, the MOST important question the first second you start a web design project.This is the way I've done things for many years and it has worked for me flawlessly. Maybe there's something here that you can take for you :)Hope this helps.
Link to comment
Share on other sites

Cheers Ingolme and Ricardo, that was very useful. I love the Reset CSS File idea, and will almost certainly be adopting it myself. As for the resolution to work to, I'll admit I haven't seen a monitor that's not 1024x768 or more for a long time, so I'm almost certain it's the width I'm going to be working to. I just wanted to get some other opinions on it.Many thanks again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...