Untill now, I have never given screen resolution any thought when constructing a Web site. Can anyone tell me about this topic, please? What should I know? What are the best practices? Rep points will be awarded for any useful responses.
Well first things first, my opinion is that it's pretty safe not to consider 800x600 any more, as a very small percentage of users still use it. (More info re: browser stats: http://www.w3schools.com/browsers/browsers_display.asp). My preference when designing websites is fixed width (one central block in the middle of the page, with margins down either side). By using this method and keeping the overall width below 1024px means I'll accommodate 96% of internet users. An example of this technique would be download.com , you can see that by dragging the window smaller, the main content stays in the center of the page. The other alternative is using a fluid layout. Fluid layouts normally always fill the whole page, and instead of using fixed widths in the stylesheet, they use percentages instead. Check out amazon's website, you can see it fills the whole page although this time when the window is dragged to a smaller size it continues to fill the browser window and maintains its structure. Fluid layouts are probably harder to code, in that you have to take into consideration min-width on the main structural divs and other small things like repeat-x on background images etc... Hope this helps.
Thanks, guys. One rep point each. I have to admit that I didn't exactly understand what screen resolution even meant. But I think I do now. Screen (or display) resolution refers to the pixel dimensions being used on computer screens. The only dimension that need concern us as Web developers is width. If I build a site with a fixed width, I must make sure to use a width below 800px. If I exceed 800px, a horizontal scroll bar will appear on the screens of visitors whose screen widths are 800px. Likewise, if I exceed 1024px, a horizontal scroll bar will appear on the screens of visitors whose screen widths are 1024px. Is that correct? On the other hand, if I build a site with a fluid width, I need not worry about screen resolution, because my site will automatically appropriate a designated percentage of the screen. There will never be any threat of producing a horizontal scroll bar. Am I right?
Close, but not exactly. You must consider the browser pane and other on-screen items. If you create an 800px width an 800x600 resolution will require a horizontal scroll bar because the browser needs 8-16px on the left and 24-30 px on the right where the vertical scroll bar is. I think 768 px will get it for most windows browsers, but that's pretty tight. 968-980px whould leave you a decent margin on 1024x768 browsers. Also, when you craft a fluid layout, you must consider min-width. If a user resizes their browser window to 64px wide for some reason, your layout will try to become a vertical column, it can look really bad. Unless you have images or other items that will hold the desired min-width for you, you probably want to set something. It's unreasonable to expect no horizontal scroll even when someone goes to <600px wide display.
Right. That's one of the reasons why 960gs is so popular today, while 1024x768 takes the biggest share of people's screen resolution. Back to the time of 800x600, YUI also had a 750px-wide layout. Necessary blank space lets visitors breathe. Nobody wants to choke his visitors right?
In some cases... As you know, some visitors are using extra large monitors today, for example 1920px wide, or wider. Part of them even have two or more moniters. How does it feel to read such a long line text? It's OK for titles or slogans, but for paragraphs, that really hurts. So I think a nice fluid width layout must have a max-width (min-width as well, actually).
Do some research on your target audience and see what screen resolutions they use. Normally older ppl have smaller screen resolutions because it's harder for them to see. And vice a versa
Most widely use resolution is still 1024x768. So, the most ideal width is 980px. ( We cut scroll bar width and extra space for precaution ) You might also consider using fluid width, but your content will look different in different resolution.
I take it you all haven't heard about netbooks? They have SMALLER screens, not larger ones. And that doesn't even include the people with larger monitors who prefer not to maximize their browser windows so they can view multiple apps at the same time. I strongly suggest you guys read The Definitive FAQ on Screen Resolution by Simon Pieters.
Newer computer screen conformations and smaller viewing devices are necessitating more flexible/fluid Markup & CSS (style sheet) authoring these days. Of particular interest is the use of cell phones to browse web pages. The Opera Web pages, Opera Mobile Browser, and Small Screen Rendering Technology are excellent references, the latter one being especially valuable for Windows O/S Web authors. The Apple IPhone uses a mini Web Browser by Safari Mobile/Small Screen Rendering: Hand-held mobile devices such as the Blackberry (8800, Curve, Pearl), and the Palm Treo 650, employ Web Page Small Screen Rendering which can be emulated in Firefox via the top drop-down menu: Tools> Web Developer> Miscellaneous> Small Screen Rendering (or via Miscellaneous> Small Screen Rendering from the drop-down menu in Chris Pederick's Web Developer add-on). The same facility is available in Opera, another excellent developer tool, via View> Small screen (toggle) from the top drop-down menu. Although some of the following principles are applicable to good Web page design in general, the tabulation includes considerations that are especially important for successful Web page rendering in Mobile/Small Screen devices with their narrow windows and columnar displays: * Structure pages utilizing header markup - use h1 for the page title and h2-h6 for section headings. * Keep images small - large ones take too long to load and do not render well. * Use short Link titles and URLs - long ones will truncate. * Use proportional, rather than absolute, sizing and dimensions (% and em rather than pixels). * Use basic font styles - PDAs only use the most common ones (Times new-Roman, Arial, etc.) * Avoid using Tables for layout - they may not work well. * Avoid Frames - they do not work on small screens. * Be judicious in the use of client side scripting - It causes severe battery drain. NOTE: the foregoing information relates to generating or changing "regular" Web pages to accommodate Mobile/Small Screen device rendering, or at least optimize their display in such devices, as much as possible. Designing specifically for Mobile/Small screen rendering requires different approaches and techniques. Two basic references are: Designing for the Mobile Web and W3C XHTML Basic 1.1 There are large numbers of cell-phone sales vendors in shopping malls. I have found that sales reps are only too happy to demonstrate how their products render web pages -- of course you specify yours. You can see how your web pages actually render in just about every hand-held device during one visit to a mall.
Important thing for me is getting the background image right (if you use one). If you have an image that is only ~1200px width it can suck on a larger monitor.
www.smashingmagazine.com is probably the best resource you'd need to know everything about web design, just go to that site, and type web design principles in the search box and there you have it. Anyway, generally most websites are built on xhtml/css just so to let you know, with the main 'box' around 960px in width, centered to the screen using css 'margin: 0 auto;' element.