Design for 800 px wide. Now, people are going to poo-poo this, and say it’s so 2001. Ignore them.
Thanks so much for taking the time everyone.
I only have a minute as I’m still working, and I will post again later this evening. I had the site ‘shrunk’ today from 1240 px down to the present 1050ish. Apparently I have more to do. 
Thanks again for all the constructive advice and criticism. I’ll post more later. more comments are welcome.
I second the percentages recommendation that dhkendall made.
Consumers/laymen. Educated/ discriminating consumers. The NPR crowd.
Home mostly I surmise. Although I receive many calls from consumers during the work day and I know they’re calling me from work. many.
Mostly desktops, and some (perhaps a fair amount…) laptops. My average customer is 40-70, middle aged suburbanites. Few of them are finding me with smartphones.
Both. The nature of my business is that there is no e-commerce to speak of. The “call to action” for us is to have them call us to schedule either repair service, or an appointment to purchase a new HVAC system. It is critical to me that the site be highly informative; much more than any HVAC contractor’s site you’ve seen. Our sales process (which works for us) is to educate/inform and build trust/relationships. The sales come naturally when we do that well. It’s a low pressure environment.
I design so that a site looks ok 800 pixels wide, but tend to make them fluid designs that can expand larger if the person’s browser window is larger. I don’t worry about making them look good smaller than 800 wide though.
I never use any programs maximized, and my browser window is usually only about 2/3 the width of my screen, so your site gives me horizontal scrolling issues.
I am only a “week-end” web designer, not a professional by any means. I am sure that the people that are helping you design your site know a lot more than me.
As mentioned repeatedly in this thread, there are two ways to design web pages:
fixed width: meaning that if you resize the browser window horizontally, making it narrower, some of the text on the right will be chopped off, and you will have to scroll horizontally to see the right side of the page.
variable width: meaning that if you resize the browser window horizontally, the text / pictures will move to the right to adjust to the size of the browser window, until you make the browser window so narrow that some of the content will eventually be chopped off on the right.
Example of fixed width: your site as it is now
Example of variable width: the straight dope (or, another very simple example, the sdmb picture gallery)
From all the examples I’ve seen, most websites nowadays go with a fixed width layout (like the one you have now.) Without being an expert, from all the coding examples I’ve seen, it seems that on more complex pages with many design elements (e.g. several columns of content, navigation bars on both the right and the left) it is easier to design the page as fixed width, partly because of the differences in web browser rendering of the page.
Your page may seem wide to someone with a laptop, but when I compare it to amazon.com or cnn.com or latimes.com (Los Angeles Times) or nytimes.com (New York Times), it is almost exactly the same width as those sites. Your website is not out of line, sizewise, with current major sites. To test: go to a popular site, like amazon.com, resize your browser window to the narrowest size where you don’t get a horizontal scrollbar, then go to your site to compare.
With that being said, on a Windows laptop with 1024x768 resolution (a still common standard), I have to expand the browser window to the full width of my screen to see everything on your page. So if you could make your page a little narrower, that would be good. But keep in mind that other major sites do the same thing as yours.
P.S. Your page as it is now is just a little bit wider than amazon.com (only a few pixels): at a window size where the amazon.com site shows with no horizontal scrollbars, your site has horizontal scrollbars. It has those horizontal scrollbars even when the browser window is as wide as it can get on my laptop without maximizing the window.
Fluid design is the best. It actually was the default, and that is why the SDMB uses it. Now, though, as CSS and tables have made things more complicated, a lot of sites have lost this ability. You very much need it if you are wanting to avoid extra space on higher resolutions.
Working with percentages is one way, but so is letting your sections float. A good example is something with a three column layout that reduces to two at smaller resolutions.
The bigger problem I see with your site is that you have three navigation bars. That is definitely too many for my tastes. I’d believe it would be overwhelming, even to people who have a wide enough resolution to handle it. The “Choosing A New” navigation bar could be a drop down for what they are choosing, and then take you to the “Start Here” page with the other navigation links in the sidebar for that, probably hierarchical. You know, like:
[ul][li]Main Page[/li] [LIST][li]Choosing a New A/C or Heating Solution[/li] [LIST][li]Getting Started[/li] [li]Selecting a Contractor[/li] [li]Choosing the Best Brand[/li] [li]A/C Terms[/li] [/ul]
[/LIST]
[/LIST]
Hopefully you get the idea. Each would be a link, and take you back up the chain. Each page would include a next or previous button at the end.
But you don’t need the hierarchy on the main page itself. That will eliminate everything in the left navigation bar below “Choosing a New…” That will give you enough room to move the right navigation bar over. All that’s left is the image over there, (and the credit card/Facebook thing which can go below the main text or wherever). You can push that into the main text, flush right, and then only have two columns, which addresses the width problem.
And Arnold is right that your page is now 768px wide–if you use the smaller fonts, which a lot of people don’t anymore. But resizing the text also resizes the page itself, which is bad. The columns need to be fixed percentages of the screen, not based on text size (or ems).
I’d also consider using a thinner top navigation bar, as right now, the last one drops to the second line at 1024x768, even using default (i.e. small) fonts. Remember, even fixed pages use that resolution and font size. Cutting the padding in half would do it. (But, again, don’t do it in ems. How large the fonts are is not critical to your design.)
Hope that’s helpful. You can take or leave my advice.
Fluid design is a fine choice for some websites, and not so good for other websites.
If I maximize my browser on my 1680x1050 display, in a fluid site it stretches sentences and paragraphs to an unreadable thin string. Blocks of text are much more readable when in narrower columns.
You can do both fluid and fixed in a combination, such as a left column of fixed width, a right column of fixed width, hopefully the same size, and a centre column of fluid width. Depending on your choices, this would make the centre column narrow enough to be much like a fixed width page of 800-1000 pixels, but still fill the browser.
Personally I prefer the fixed width, centred site much as you have currently, I just think it feels tidier and is more accessible, but I respect a fluid site when it has content that warrants it.
I really appreciate the time and advice everyone.
When I posted the OP the site was 1250 px wide. Based on feedback I had it whittled down to 1024, and now down to the 800-900-- you see now.
The suggestions and feedback/criticism is very helpful and we are brainstorming on how to implement some of them.
Any further comments welcome. As we get ‘critical mass’ on content I’ll be back with questions about content/utility/features etc. (4-6 weeks or so…)
Thanks again! We will keep plugging along…
Can I ask a silly question…?
Is it possible to have a “hybrid” design, as in a combination of fixed and fluid design?
IOW, can I design a fluid site at 800px that has a limit on how much it is allowed to expand? Kind of like a governor that allows it to only grow only so much?
(I know my ignorance is showing…but I am not the one designing the site. The one who is is, like Arnold, a “week-end” web designer and I’m in the bleacher seats yelling advice)
Your current design really sharpens up the page. However, it is not 800px wide because it’s optimized for a 1024x768px browser window. (You can test this yourself in Firefox with the Web Developer addon. You can configure the Resize tool and see for yourself.) The possible reason why is there is a font-size: 62.5% at the <body> tag level in CSS. Not good. Such a view is now seen as technically incorrect. More importantly, applying the 62.5% to all fonts to start, and at the <body> level actually cascades throughout the CSS and adversely impacts block widths in various ways. It’s an old way of doing CSS and the author who created your CSS is way behind the times, in more ways than one. A better and more accurate method is to separate presentation CSS (fonts) from design CSS code (everything else). This will increase your overall CSS footprint at bit, but the benefit to be technically more accurate pays dividends across static (desktops/laptops) and mobile (cell phones/smartphones, etc.) platforms.
It is possible to provide min-width and max-width CSS to meet your needs. Visit w3schools.com to start to learn more. Microsoft claims IE8 now supports max- and-min-width. Of course, you have to add a proprietary <meta> tag to make it work. If you want to go that route, ensure your site works as intended in all other Tier 1 browsers first, and then add the Microsoft code with appropriate conditional comments to keep separate the standards-compliant good code from the [del]crap[/del] M$ code.
raindog: Your web designer is more knowledgeable than me by far.
A couple of suggestions (not on design, because I’m not qualified to comment on that)
- Download the latest version of the most common browsers (Chrome, Firefox, Internet Explorer, Opera, Safari) and look at your site with each of those browsers, to make sure it looks the same in each one.
- I’m sure Duckster is right when he describes how a modern webpage should be coded, but if this is a non-full-time designer, doing it for a low cost, remember that there is only so much you can reasonably expect. If you asked a professional web design company to do the site for you, it would likely cost much, much more.
I don’t suppose you have any links to articles or design guidelines that explain this in more detail, because I don’t understand fully why this is a bad thing. One of the “open source” CSS templates I used for a non-profit website does this (setting a font-size at the body level.)