Forum Moderators: open
As a newbie, I am totally confused by the different sized browser windows, screen resolutions etc etc..
Can anyone point me to a good tutorial that explains the latest thoughts on these ?
What I would like to know is what is the current best practice - to fill the browser window or to have your website indented or centered ?
Where does one make any settings to decide what screen res your site will use ?
I currently have access to a desk top and a laptop. ON my laptop my website shows up very small and I think it could be much bigger. But I do not know how to do this.
Thanks
Any help will be much appreciated.
Digby
So you need to find a balance for yourself, taking into account how others view your website (how you view it is nearly irrelevant, it's the visitor that counts).
Screen size:
About the smallest screen size you'll get as a visitor is the iPhone (480px by 320px) but it's got a great zoom and is usable for most if not all websites.
Next there's a generation of computers that's slowly dying out that had a screen of 800x600 and is used mostly in full screen mode by their users.
The next step up is 1024x768, still mostly used in full screen mode. These are slowly becoming the smallest screens.
Beyond that exists as well, but once you get above 1600px wide, the users tend to NOT use the browser in full screen mode anymore and might make it only half as wide as their screen allowing for other things next to it, pushing you back to that 800px or 1024 wide usable width.
Very large screen sizes exist, most of those users will take care of themselves. But if you do use a "fluid" layout take care not to go overboard in width as very long text lines of text in a small font are very hard to read.
fluid or not?
Fluid means just adapt to the width the window of the browser has (viewport size).
It's relatively easy to achieve, but there are constraints when your content starts to act funny: too small and too wide. A min-width and a max-width in CSS can help your site from being squashed or stretched too much.
It's not always easy to do this. E.g. if you have a panoramic picture you want as a banner, not having control of the size of the box where it will need to be put in is making it very hard depending on the picture.
centering or not
a matter of taste but the consensus (and hence what the visitor expects is centered when the viewport is wider than the content you want to use.
advanced stuff
CSS3 is adding "media queries" that allow you to detect the size of the viewport (important) and of the screen (not so important) and react with a different layout in CSS depending on that size.
It's not yet all that widely supported but e.g. the iPhone's safari browser does support it, allowing you e.g. to replace a 3 column layout with a single column and make it a better fit on the iPhone and iPod touch.
fixed width
If you do fix your width you want the majority of your users to not need to scroll sideways. 800px (770 or so) and 1024px (900px or so) wide are popular choices in this.
Do check your statistics on e.g. google analytics to know how many users you're forcing into scrolling sideways before you make this number larger.
Note: unfortunately analytics measures screen size, not viewport size (the more important one)
Hope this helps to get you started.
1024x768, still mostly used in full screen mode. These are slowly becoming the smallest screens
I tried that resolution on an EeePC netbook (7 inch screen) and had to get a magnifying glass.
These devices - which are increasingly popular - seem happiest at 800 x 600 resolution.
All modern browsers now offer a zoom function, but this is less than ideal.
Viewport detection cannot come too soon in my opinion.
...
