You have to login first in order to be able to post messages.
Click here to login or register if you are a new user.

Web Site Size

I've been working on my website and I can't figure out what size it should be. I've heard some people say 800x600 but that size was way to small for my browser. I ended up doing 1260 width for now because it fits in my particular browser. However, the website doesn't fit on other browser I've checked on.

So my question is, What size should my website be and how come I can't get the website to fit every browser like some websites I've seen?

Any help would be appreciated. Here's the site if anyone's interested.

Thanks! Gabe
Posted: 07/28/2008, 21:05:12 PM
1024x768 become the standard, most people are using this resolution. If you expect many users, you can do it for 800x600. For best results you should use a liquid layout, that expands to the maximum width (see our search results page).
Posted: 07/29/2008, 02:16:30 AM

And another good tip is to use a format that allows your page to center within the browser width so there is equal blank space on the left and right of your image page.

This works well as a person with a smaller browser window or a larger browser window get the best view of your page and the information on it without having to resize or scroll around.

Good luck and have fun doing it.
Posted: 07/29/2008, 05:36:51 AM
thank you both for replying. I had heard 1024x768 was becoming the standard but it was too small for my laptop.

I'm guessing a liquid layout is what I see on most sites. So can anyone tell me how to do this? I'm using dreamweaver.
Posted: 07/29/2008, 08:48:31 AM
The simplest way I think is to create a table and make the width set to '100%' instead of a fixed number of pixels.

Then, set the columns within that table to whatever percentage of 100% you want. So, you might have a left column with your navigation which is set to 20% and a centre column to hold your main content set to 70% and finally a right hand column for some graphics set to 10%.

Whatever the width of the users browser window, these percentages will hold true. You can also mix percentage columns with exact pixel ones. Using the example above again, it could be that the left col is 100 pixels, right col 50 pixels and then you would set your middle one to 100%, so that it always fills the remaining space.

These are just examples. Have a play with the values and see what you get.

Edited: 07/29/2008, 09:03:49 AM
Hi, Gabe! Good start on your website.
VRII, 18-70mm, 70-300mm, 28-300mm VR, 50mm / Light box...
Posted: 07/29/2008, 09:51:54 AM
I agree that you should create your website to use the full screen resolution.

I have a 27 inch screen and am I running at a 1920 by 1200 resolution, which is great when a site takes full advantage of the whole screen.

I do realize that most people aren't running at this high of a resolution, but most people are running at at least 1024x768. It depends on who your target audience is.
Canon 70D
Posted: 08/01/2008, 14:15:16 PM
I currently design all my client's website at 1000 pixels in width and centering the page. If you want better control of your layout, I suggest specifying the width instead of using 100% width on your table HTML tags.
Posted: 05/09/2009, 22:42:59 PM
That really depends on the contents also, if it fits the contents with good visibility, no matter the width...

Common now adays like some mentioned here is 1024x768 but the suggestion of 100% is not bad... I use it myself

Unfortunatly now adays you don't know when & where the visitors could browse your page!

- Firefox or IE some times makes a difference;

- Tool bars on the browser also makes the visible area different;

- LCD's or Plasma using windows media center makes it different;

- Maximized windows (It seems stupid but I know some people that want to tile windows so they can keep watching while chating or something)

Conclusion: make to the left side as you have a large bottons menu and use a width 90% fill the 10% with a color matching the header!

Opinion: You have big letters & bottons... It would be nicer if you make them smaller

Good luck,
My PC with Adobe Photoshop & Illustrator, Nikon D3100
Posted: 05/18/2009, 07:31:29 AM

As a long time professional web designer I noticed, and cringed at some of the advice given.

First, just because a site will fit your large wide screen monitor obviously doesn't mean it'll fit others. By setting your maximum width to fit 1000px your site will be sized appropriately to fit the most common browser/screen resolution, 1024x768. However, you mustn't stop there. You might get the background to fit the width at 1024 wide but you must be careful with text, buttons, graphics and animated elements.

I took a look at your current website and the text, logotype and buttons are very large. You should keep text at no more than 80% in your CSS. By using percentages you allow your visitors to increase or decrease the sizes however they need. You also need to shrink your buttons by half. A button needs to be no larger than for a standard cursor to fit on it height wise.

Another person said to set a table width to 100%. That is a huge no no in web design. You should never use tables to create a website layout. Tables are designed for tabular data. You should start designing your website in CSS. There are numerous tutorials on CSS or you could purchase a CSS/xhtml/php template online if you cannot write CSS. Also, you could hire a designer to create a custom gallery for you.
Canon EOS T2i 18MP.
Posted: 06/26/2009, 04:25:51 AM
It's all very well telling someone to design their site in CSS, but when their just trying to put together their own site rather than do it for a living, do you really expect them to learn a whole new programming language?!

Using tables is a perfectly valid method for creating simple websites, and if used correctly can ensure consistent layout across browsers and platforms.

Posted: 06/26/2009, 04:56:24 AM
Many web designers aren't coders, and wysiwyg is how we work. I have a very basic grasp of CSS, but switched to it years ago as it enables so much more flexibility. There are millions of free templates available, as well as tutorials on CSS/PHP so my advice would be to grab one, and then make small changes in the style.css file, all the time checking the result and reversing if it isn't what you want. Experiment, find what changes colours, widths of columns, size of text etc. until you like what you have. The major advantage of CSS is you can make a global change across a site's pages, so you retain a consistent look without having to go through all the pages altering things.

Getting a site to resize according to the browser width is easy with CSS, and remember a lot of people have a browser nav bar down the left side, which trims the screen width.

Olympus E-1 DSLR Canon T80 SLR Kodak DX7440
Posted: 06/27/2009, 05:37:58 AM
i wrote my website in width of 1000px aligned to center, height is dependent on content. I display my pictures with longest side of 900px (and the quality has been cut). I know that some laptop users with low resolution cannot see the full size vertical images as their resolution is lower than 900 in height. But i don't care. IMO laptop is for work, larger monitor with greater resolution should be used for entertainment and images. I use 24" 1900x1200.

My site: www.hundiurg.eu (sorry, i haven't set up English version yet. It's only in Estonian).
My tired eyes.
Edited: 07/21/2009, 13:22:59 PM