What about the monitor?

[Isabel]

I must be still under the rock.... Recently I went to a client to discuss website development and they showed my websites up on a who know's - 60 inch horizontal screen and also on a laptop with a horizontal screen and I was horrified, intrigued, curious and then back to horrified .... since that was my work and here I am trying to present myself. Saving Grace! Well I died on the inside, they went and showed me that most websites were all messed up on these monitors... what a relief! So now that we finally have the browser differences pretty much under control and we are all playing nice in the sandbox, along come these monitors. So how do we stay sane from Blackberry to laptop to 60" horizontal -- is there a little list of Tricks to the Trade for minimizing the differences in ''viewing pleasure'' on that one?

[lspence]

The short answer is liquid design. I've also heard it referred to as fluid/flexible/no resolution design.

In general, you would not use fixed width's in your tables, or divs. There would be exceptions, such as columns used for navigation or gutters, that would have a fixed width.

As a side note, since you're now testing your websites at different resolutions, be sure to check them out in different browsers. That could be another shock. Test your web design in different browsers - Browsershots will show your pics of your website using multiple browsers and operating systems, and you can set the image resolution from 640 pixels wide to 1600 pixels wide.

[imvain2]

Lspence is correct, fluid design.

Although... That works great for the general layout of the website. But the images will not be fluid. So your images will be smaller on the larger monitors and larger on the smaller monitors.

Some other suggestions to help:

1). If you plan on a significant amount of traffic coming from handhelds (pdas/phones), I suggest building a separate design specifically geared towards the pda's/phones.

2). For width/font sizes use px and not pt. Px fonts will resize better depending on the size of the monitor. Pts should really only be used for CSS print.

3). What I try to do is: Find the most common aspect ratio (which I believe is 1024 x 76 and build for that. And explain to your customers that you build websites for what the most people are using. I usually: build a max of 955 wide and center that or left justify.

There is no 100% way to determine the most popular resolutions, and W3C can't be 100% because it bases its stats on its own visitors. However, I believe its the best we got at the time.
Browser Display Statistics

[alwazup]

I have run into this problem too. I have been using the max-width css tag on the main parts of the page to limit the width. Now I know that IE doesn't support this, but I have run across a few tricks to get it to work until they do support it. This can allow some fluid design for most resolutions up to a specific width (I usually us max-width of 1024px). This covers the majority of screen resolutions from the visitors to the sites I work on.

[tombstoneweb]

I long for the days-gone-by when the only thing I had to worry about is how my website would look on a monitor viewing at 800 X 600!!

[katandmouse]

Originally Posted by alwazup

I have run into this problem too. I have been using the max-width css tag on the main parts of the page to limit the width. Now I know that IE doesn't support this, but I have run across a few tricks to get it to work until they do support it. This can allow some fluid design for most resolutions up to a specific width (I usually us max-width of 1024px). This covers the majority of screen resolutions from the visitors to the sites I work on.

I'm with you. I don't think fluid design without restriction is a good idea. It's important to keep line lengths at a reasonable width for easy reading. Readers should be able to see the entire line length in a comfortable range that their eyes can follow.

I like max-width and am interested in your tricks to get around the IE problem.

[obietemp]

how would someone read a webpage on a 60 inch if it was fluid width. On a screen like that, does the whole page enlarge, text etc? or just spread across the size of the screen. Isabel...what specifically was wrong with what you saw on the large screen? Were pics misplaced? Did the whole page resize to fit the 60 inches or just parts of it.

So far, I like to limit the width to a specific size and the page kept in the center. I may have to reconsider.

[craigmn3]

Yes, I recently went through the same thing and your choices are as stated. Make a static table range in the center of the screen at @900 pixels wide, which looks just odd in the wider configurations but will keep your page format. Or use that liquid table that will adjust to the size of the screen and stack your content. I tend to us the former rather than the latter because I like using different format techniques. The 900 will work for all but the smallest configurations. People who use 480 x 600 are used to scrolling around their pages

[ran_dizolph]

I totally agree with the posts about readability on wide monitors. You can only read so far across before it becomes too much.

To ease your concern, I'd check the stats on who's viewing your sites, and what the average size/resolution of monitors they're using.

If you find that there are a lot of people looking at your sites with some ridiculously huge resolution, perhaps you need to redesign...if not, don't worry about it.

I personally build most of my sites to around 950px width. I just prefer the control I have over a fixed width site.

Hope this helps.

[kevkin]

A number of years ago when I built my website I used a fluid design. I thought it would look better on wide screen monitors. I think it does. My site link should be here somewhere, it's in my profile. If you would like to see it. Truro NS CA - Our Town of Truro in Nova Scotia presented for you

I also designed it so it looks OK in 800 by 600 resolutions. This, in case a person has 2 windows tiled vertically. If there resolution is at or near 1600 by 1200 my site still looks good.

You could still limit the widths of text columns and have a fluid design.

I like the fluid design good from 800 by 600 up so that it can be tiled vertically. This is something I don't think too many people take into consideration.

[rms7design]

hello,

I asked myself the question a few years ago. What I did is look at my statistics to see what resolution my visitors have in the majority of the case. I use fixed width towards 1024x768 resolution monitor as those are the majority of the users coming on the numerous sites I maintain.

Fluid design is interesting too and can help but you will run into some problems when it comes to websites with heavy images. Also, if you use let's say a flash gallery, you cannot use fluid as your images won't resize by themselves.

I would keep it under 1000px width and explain to your client that because they use such large monitor does not mean that the majority of Internet users do the same. In the end, they want there website to be seen correctly by the majority of users, not the 1% who can afford such sizes... (I personally work on 1600x1200

Have a good one

[puamana]

Something I've also wrestled with... and since my designs tend to be heavy on
the graphic design side, here are a couple of ways I've dealt with it...
take a look:

Hawaii Healing Ohana - For the Healing of Your Life ... (center justified.. plenty of negative space ok, and it also displays well on smaller/squarer monitors)

Garden Island Granite - Lihue, Kauai (left justified - in process, but you can see the extended background to avoid big white spaces on the right side...)

About Kenneth Lee, Realtor Broker, www.kennethleehawaii.com (left justified, top and bottom of page's grapics extend 100% across browser window)

I have increased the width of my pages in recent years from a standard size of 850 to 950 or 1050, to accommodate the wider format screens as well, but for those with 'standard' resolutions, going much wider than that makes the layout look too 'big'.

The fluid design technique works great for sites that are mostly text, with a few images, but for graphic design sites, it's problematic, and difficult to keep the same look across all browsers and monitors...

- Puamana

[lspence]

Originally Posted by rms7design

I would keep it under 1000px width and explain to your client that because they use such large monitor does not mean that the majority of Internet users do the same. In the end, they want there website to be seen correctly by the majority of users, not the 1% who can afford such sizes... (I personally work on 1600x1200

Have a good one

I agree to keep it around 1000px width. Even though I have a large monitor (2560x1600), I don't have my browser maximized. I don't know anyone with a large monitor who does. However, you want to make sure you webdesign doesn't fall apart as it's resized, as happened at your client offices.

[subsystems]

I struggled with the fluid design method and was never happy with the looks of the sites I made. There was always something wrong somewhere. Text didn't wrap nicely around pics in every condition.
I didn't like the fixed sites either because on some small screens the user must scroll left and right a great deal. On larger screens with the browser maximized the page looks like a postage stamp in the middle of a bed sheet.

Then it hit me. There are really 2 seperate issues here. Text and image sizes need to be scaleable and the width of the content needs to not overfill or underfill the browser.

First thing that is not too difficult to address is the text and image scaling. Basically you give the visitor 4 different predefined choices of text size that they can choose from and you also adjust the image sizes so things scale well. Somewhere near the top of the page (maybe in the header block) have several small graphic rectangles with different sized capital A's in them, smaller to larger. When you hover over the different sized A's have it say Small, Medium, Large and Largest. Corrisponding with the 4 different sized A's, you have 4 different css files. One with fonts at say 8px on up and images that whose height and width are set small. On up to the largest css file where the font size is 20px and the image height and width are set larger. If the visitor clicks the smallest A on the page, it sets a temporary cookie called contentsize and sets it to small. Then when the page loads dynamically replace the linked css file in the html tags containing the small text sizes with whichever one corrisponds to the value of the cookie.

So now the visitor can change the text size but only to predefined and pretested settings. Now you can bullet proof each of the content sizes and be sure things look nice no matter which of the 4 choices the visitor wants.

Sounds good so far but there is another trick that works really well.
Often the most desireable layout is the 3 column design with menus in the left column and content in the middle and right columns. On pages where you want more detail in a larger area you just combine the middle and right columns into 1 double wide column.
But with the fixed width columns on wide monitors you end up with the postage stamp problem.
The solution is similar to the way to fix the text sizes. The trick is to have predefined column widths and allow the user to change the number of columns to predefined numbers. Say 2, 3, 4 and 5 column layouts. So in the 2 column layout you have the left menu in the first column and the content in column 2. In the 3 column layout you have the content in columns 2 and 3 or combine columns 2 and 3 and drop a panel so it fills columns 2 and 3. Then in the 4 column layout you add in column 4 a series of panels containing other info. Like top 10 lists, or promotional items etc.

Now to change the layouts it is trickier. You use little column graphics like the text ones above except these control the number of columns in the layout. You need to set a cookie for the number of columns 1, 2, 3, 4 or 5. You then dynamically adjust what to include in which column for each of the layouts. If you make your content in panels you can simply drop the panels into which ever column you like for each layout.

The key here is to have a standard column width in px. Say 180 or 200px. So your 2 column layout will be 400 px in total width. The 3 column layout is 600px, 4 is 800px and 5 is 1000px. Lastly, for handheld screens you can just use a 1 column layout. Make life easy.

The advantage of this layout method is you always know the width of the columns so you always know your left menu is 200px wide you can premake everything to fit and you know it will look good. If you need a section that is wider than 200 px simply make it 2 columns wide or 3 columns wide etc. You adjust your layout so a panel drops in to 2 or 3 columns instead of just one. Once you get your panels to look good you know they will drop into the different column numbers and nothing will get messed up.

One last point, since you have 4 text sizes to test and 5 layouts you'd think you may have to test 4 x 5 or 20 different looks. Not really, since the column widths are known you only need to make sure the 4 text sizes fit well in the standard column width. Then you only need to test the 5 different column layouts.
It really doesn't take that long to bullet proof the site. You bullet proof the panels for cross browser issues. Check the layouts and text sizes as well and you are good to go.

[crossland]

It is funny but this has got trickier with time; I remember when the solution was to have a fixed width table centered within a 100% width table. This actually worked well with most screen sizes. Doing the same thing in CSS is also achievable; it is just a bit more fiddly.

messsage broker

[imvain2]

This almost sounds like over complicating for the sake of creating more work for yourself.

Yes, I admit that fixed width and fluid design have their flaws. As there is no perfect solution, however I'm not sure if this is better or worse then the fixed width fix.

Essentially, to simplify subsystem's post:

1). Give the visitor ability to select font size
2). Allow the visitor to hide columns of random information that was put there to take up the full screen.

Originally Posted by subsystems

I struggled with the fluid design method and was never happy with the looks of the sites I made. There was always something wrong somewhere. Text didn't wrap nicely around pics in every condition.
I didn't like the fixed sites either because on some small screens the user must scroll left and right a great deal. On larger screens with the browser maximized the page looks like a postage stamp in the middle of a bed sheet.

Then it hit me. There are really 2 seperate issues here. Text and image sizes need to be scaleable and the width of the content needs to not overfill or underfill the browser.

First thing that is not too difficult to address is the text and image scaling. Basically you give the visitor 4 different predefined choices of text size that they can choose from and you also adjust the image sizes so things scale well. Somewhere near the top of the page (maybe in the header block) have several small graphic rectangles with different sized capital A's in them, smaller to larger. When you hover over the different sized A's have it say Small, Medium, Large and Largest. Corrisponding with the 4 different sized A's, you have 4 different css files. One with fonts at say 8px on up and images that whose height and width are set small. On up to the largest css file where the font size is 20px and the image height and width are set larger. If the visitor clicks the smallest A on the page, it sets a temporary cookie called contentsize and sets it to small. Then when the page loads dynamically replace the linked css file in the html tags containing the small text sizes with whichever one corrisponds to the value of the cookie.

So now the visitor can change the text size but only to predefined and pretested settings. Now you can bullet proof each of the content sizes and be sure things look nice no matter which of the 4 choices the visitor wants.

Sounds good so far but there is another trick that works really well.
Often the most desireable layout is the 3 column design with menus in the left column and content in the middle and right columns. On pages where you want more detail in a larger area you just combine the middle and right columns into 1 double wide column.
But with the fixed width columns on wide monitors you end up with the postage stamp problem.
The solution is similar to the way to fix the text sizes. The trick is to have predefined column widths and allow the user to change the number of columns to predefined numbers. Say 2, 3, 4 and 5 column layouts. So in the 2 column layout you have the left menu in the first column and the content in column 2. In the 3 column layout you have the content in columns 2 and 3 or combine columns 2 and 3 and drop a panel so it fills columns 2 and 3. Then in the 4 column layout you add in column 4 a series of panels containing other info. Like top 10 lists, or promotional items etc.

Now to change the layouts it is trickier. You use little column graphics like the text ones above except these control the number of columns in the layout. You need to set a cookie for the number of columns 1, 2, 3, 4 or 5. You then dynamically adjust what to include in which column for each of the layouts. If you make your content in panels you can simply drop the panels into which ever column you like for each layout.

The key here is to have a standard column width in px. Say 180 or 200px. So your 2 column layout will be 400 px in total width. The 3 column layout is 600px, 4 is 800px and 5 is 1000px. Lastly, for handheld screens you can just use a 1 column layout. Make life easy.

The advantage of this layout method is you always know the width of the columns so you always know your left menu is 200px wide you can premake everything to fit and you know it will look good. If you need a section that is wider than 200 px simply make it 2 columns wide or 3 columns wide etc. You adjust your layout so a panel drops in to 2 or 3 columns instead of just one. Once you get your panels to look good you know they will drop into the different column numbers and nothing will get messed up.

One last point, since you have 4 text sizes to test and 5 layouts you'd think you may have to test 4 x 5 or 20 different looks. Not really, since the column widths are known you only need to make sure the 4 text sizes fit well in the standard column width. Then you only need to test the 5 different column layouts.
It really doesn't take that long to bullet proof the site. You bullet proof the panels for cross browser issues. Check the layouts and text sizes as well and you are good to go.

[subsystems]

Originally Posted by imvain2

This almost sounds like over complicating for the sake of creating more work for yourself.

Yes, I admit that fixed width and fluid design have their flaws. As there is no perfect solution, however I'm not sure if this is better or worse then the fixed width fix.

Essentially, to simplify subsystem's post:

1). Give the visitor ability to select font size
2). Allow the visitor to hide columns of random information that was put there to take up the full screen.

The point is not to simply make extra work. It is to make a better site. For E-Commerce sites the extra time spent on layout and font choices can easily mean an increase in sales. The extra columns do give you the ability to add more useful content to a page. Lets think about page of an E-Commerce site. For smaller browser windows you only want the most important things above the fold. (in the window) When you have more columns you can add things like panels for testimonials, featured products, top sellers, sale items, promotions, shopping cart summaries, similar items, upsell items, other people who purchased this also purchased the following, product reviews, it goes on and on. Would I do the multiple layout option on a simple site or a blog etc.? Not likely.

Overly complicated is a matter of perspective. To me it is less complicated because to make a fluid design look really good in a wide range of sizes requires quite a bit of tweaking. Then you end up with that email saying I can't click on such and such because the link is covered up by something else. Because you never thought to narrow down the browser window to 400px or less as a test. You may end up between a rock and a hard place if the fluid layout is unable to resolve certain issues correctly.

You are not "hiding columns of random information". You are prechoosing what is important in each layout.
You are making it sound haphazard when the whole point is to have 100% control yet be flexible.

A better simplification is this.
1) Give the visitor several predefined, pretested choices of font size.
2) Allow the visitor to choose between several different layouts with different numbers of columns. The idea being give flexibility but with predefined, pretested choices only.

[DONtk]

I had the same problem about a week ago, at least that's when I noticed it. My site look great on Firefox. But when I went into Internet Explorer my text was all the way left and my navigation buttons were on top of my text and picture.
what I found out was we had changed our logo on the top of the page and enter the picture in the center of the page.
in doing so we changed our pixels from 725 pixels with to 875 pixels with. By doing this with the logo and the picture it distorted the page. So it showed up different on different monitors. As soon as we brought the logo and the picture back to 725. Everything fell back in line and we haven't had anymore problems.



DON
San Francisco, the city made for discovering, over & over again!

[Rod Abbotson]

I design for 1024 x 768 resolution as dictated by my browser stats..making my max width 982 on the wrapper..this works well. Layout all fixed in pixels with CSS after trying various fluid layouts..for this I would have to do a completely different design for my website...albeit not e commerce...basically a brochure website for a service industry..browsers want to see what they are getting so its very image heavy..


I generally handcode in notepad and view in Firefox, Explorer 7 & 8, Safari and Opera... I check still Ok with IE 6 at a local internet cafe after uploading new pages...I validate pages before uploading which also saves time.

I have visted many people with large monitors and to date have never seen anyone trying to view one site at the full size of the screen they are usually browing several sites at once all open in different sized windows..they can also drag these over two or three large monitors as they want!

Now imagine trying to design for that... usually these browsers are computer savvy and will resize etc how they want and will be able to mess up most sites one way or the other!! In other words they will just size your site appropriate for their own browsing...new browsers are all giving more control on this.. eg adjusting the font size to largest totally screws up my layout but browsers expect this!

All gets down to trying to please all the people all the time an impossible feat!

Go with the majority and think what the majority of the browsing audience will be for any sites you design...


Rod

[webmax]

Thank you, subsystems, i'm definitely going to try your method.

Regardless of what you endo up doing, fixed tables or fluid whatever, it's a good idea to write down on the contract that this site is being designed for optimum viewability in such and such resolutions and browsers A, B, and C, versions X, Y, Z, operating systems 1, 2 &3, speed of the connection, etc. Normally that should cover most end users. Say so on the contract. If the client wants more browser versions and resolutions to be tested, you should charge some more. If it is cost effective, like if a lot of traffic is being expected out of handhelds and such, then it works out nicely for both parties. The clients get their website to look good where they want to and you get paid for the extra work.

There is another advantage of writing down the technical requirements of the end users on contracts. If a new version of a browser rolls in and makes something in your website not look good, it is easier to prove to your client that it was not your fault. You can then fix it and get paid for it. Same thing with movie players. Write down what player is required, and if the user needs to enable javascripts. The fact that we write these obvious things in the contracts makes them very long and boring but it has helped in many cases eliminate friction with the client.

[Stinkfoot]

As larger screens become cheaper so more people will be using them. But the majority of users will not have upgraded to the most modern equipment, especially considering the economic climate world wide.

1024 x 768 is now a standard that should be considered for fix sized web pages. 800 x 600 admittedly will allow accessibility to the now very small minority that use this definition. However depending on who you are targeting with your site, you give these people a priority. That priority would be minimal, if you are running a commercial website selling ocean going yachts and slightly larger if you have a community information site for pensioners.

If you are aiming your site at techies, then perhaps you should consider using higher resolutions or javascript to access your users resolution and multiple css to change your layout accordingly. This is lots of hassle but if your clients are willing to pay for it .. go go go!

Realistically until monitor resolutions become much higher definition, perhaps similar to that of good quality printed page, I would not look to change from 1024 x 768. Those people who are trawling the web with these higher resolutions are not going to enjoy the experience. They should learn what resolution most pages are written for and stick to it. Unless of course they are trying to make a pedantic point about something they know little about. As it would seem your clients did.

Take them in some logs from one of your well used sites, with screen resolutions on, and then, my own comments would be something along the lines of "I understand what you are saying but, no one else really uses high screen resolutions yet. In 5 years time we can certainly look at these figures again and update as necessary."

In the mean time use fixed width pages using relative values for borders padding and font sizes in CSS to allow resizing of text in browsers. This solves the accessibility issue. Changing your pages to suit people with very high resolutions should not be done yet, unless your clients of course want it and are prepared to pay handsomely for it.

[MuNKyonline]

Why on earth would you use a 60" screen for the internet anyway?! Surely that must be for watching videos or playing games?

The current most popular screen resolution is 1024x768 which makes the browser window 955px when maximised. So I always make my pages have a width of 955px. This will accomodate for the majority of internet users.

If you wanted to target mobile devices too then, as has already been said, make a sub domain with a mobile friendly version of the website. Or just use a handheld CSS file that strips out most of the images, sets tables to display:block and brings the page back to basic styling.

Another method, although complicated, would be to use javascript to detect the visitors screen size and them deliver them a stylesheet based on their screen resolution. This would however would not be very cost effective and will take a lot of time.