I opened a GQ thread about a web site I’m putting together. The website is for an HVAC/Plumbing outfit. (I asked Dex if I could post the URL link and got an ok)
At some point I will have more questions about content, navigation etc. But it seems a good idea to get some feedback before I get too far in.
The GQ thread asked about the width of the site; I see TONS of website that take up a small fraction of the monitor. (sometimes an irritatingly small amount)
This website is roughly 5% done. The goal is to have it much more interactive than sites of its kind, with sizing calculators, carbon footprint calculators (including how different systems effect your utility costs, carbon foot print) and other stuff.
The current page looks fine in IE, Opera, Chrome and Firefox, and with both of my monitors. (19" & 22") The site appears to be 1240 pixels wide.
Is there any reason why that is a problem?
Is there an ideal width?
Understanding I may alienate the smart phone users, aren’t I better off using the space wisely? IOW, is there really a good reason to design to the lowest common denominator?
This thread starts with questions about width/size and **layout ** but all feedback is appreciated.
My primary computer is a notebook with a 15.4" screen that’s 1440 pixels across. My browser window is typically about 2/3 of that width. Your web page is way too wide for my browser - only about 3/4 of it fits on the page.
I’m curious - you mentioned in the other thread that you have a large monitor - do you normally set your browser window so that it takes up the whole thing?
The setting on my browser and monitor are the default ones.
My monitor at work is 19", 22" at home. The site has always loaded perfectly using those monitors with just the default settings, no matter the browser.
What concerns me is that I went to a friend’s office (and he uses a laptop) and it was way too big. I’m really conflicted----I like the look on the other monitors, but I an concerned about the experience of laptop users. (although I suspect the site would look fine on a 17" monitor as well)
From this site, “most users are using a display with 1024x768 pixels or more, with a color depth of at least 65K colors.” So if I were you, I’d design it for 768 pixels wide.
When I click on page info it tells me that the site is 1240 pixels wide. From that site it would appear that is entirely visible to 40%, which still sucks. Do I have that right, if it’s 1240 wide?
I’m not sure what you mean by “default settings.” Is it when you install Firefox and it starts for the very first time, what size it defaults to? Are there people who stick with that and don’t immediately adjust it to their own preference?
It’s not notebooks vs. desktop monitors; it’s not the size of the monitor at all. The question is the size of the browser window that’s viewing your web page. If I’m working on a smaller monitor, I will typically be using a browser window that takes up more of that space. On a large monitor, I’ll use the same size browser window, so it will take up less of my monitor’s area. A large monitor is useful (to me) because it lets me have easier access to the windows I have open, not because I can make any application’s windows larger.
Ah, it doesn’t scale at all? It’s fine by me as I’m on a 24" with my browser maximized, but I can see how that would be an issue with less endowed people…
Btw, the window width that I can use without having a scrollbar appear is 1550.
The SDMB web site uses a fluid design, meaning there are no constraints as horizontal width. It’s a byproduct of the vbulletin code when monitor sizes were limited and the average user was a dork when it came to viewing. Today, monitor sizes have increased and users are still dorks.
Study after study finds users hate horizontal scroll. It’s a turnoff. So to prevent it with ever-increasing monitor sizes, the industry is moving to fixed width layouts. At the same time the design element is playing an increased role. Web site owners want their content upfront and personal, while advertisers on site want their advertising upfront and personal as well. It cannot be done with horizontal scroll.
While your site has a nice design, the horizontal scroll skews the actual view. For me, I’m confront with a simple LOOK AT MY WEB SITE!!! The design distorts the message. If potential customers have to scroll left to right and back again to read the content, it will drive them away.
I always design with percentages rather than static numbers because of that, I’m having horizontal scroll on my 1024x768 screen for your site, and it’s off-putting, especially since I haven’t seen horizontal scroll on any other site (well-designed that is, a few sites, like the infamous “Timecube” site and others that I hear about on the Dope as “candidates for worst site design” all have horizontal scroll).
I strongly suggest using percentages instead of width. Your camel will thank you*.
extremely geeky ref. 1000 quatloos to the first person who can source it.
Other people have touched on this, but what you want to do is move away from a fixed width design and have your design expand or contract to fit the width of the browser window. This would meet your goal of avoiding situation where your page doesn’t take advantage of all the horizontal width available for it. Personally I think that’s a bad goal for the sake of having a goal, but it would accomplish it.
Basically, if you resize your browser window on this site, you see the posts resize themselves to take advantage of the available width. Except on your site, you would have the left and right columns remain a static width and the main content would size to fit the remaining horizontal space. That way, the handful of people who browse with an enormous browser window like you wouldn’t see any white space, they’d just have unpleasantly wide sentences to read.
Again, assuming this is really your goal, the remaining major problem is that your left and right columns, which would remain fixed, are too wide for an average user. The whole “page” div is 1054 pixels wide. The left column is 185 pixels and the right is 226 pixels and the center content area is 544. Try to shrink the right column in particular which just strikes me as obnoxiously wide to my eye. The navigation links on the right side are only 162 pixels wide, why does the column need to be 226?