Really basic web design question

I’m taking an online beginning web design course (for total newbies), and I’ve got a really basic question. This is in Dreamweaver 8 on a Mac, if that matters.

I’m designing my site for a monitor resolution of 1024x768. According to the Window Size pop-up menu, when the title bar, navigation bar, etc. are subtracted, I actually have an area of 955x600. Is this figure accurate? It seems to be way too small. If I draw a 1024x768 rectangle, then put a 955x600 rectangle inside it, there’s a whole lot of extra room in there.

Well, the small box should fit into the big box. The big box is your screen, and the small box is your viewport, and the difference is supposed to represent the browser and window widgets.

Of course it’s not accurate, though, because every browser is completely different.

The most basic thing you can learn before going to class, though, is that very specific sizing defeats the whole purpose of using HTML. It’s evil; don’t do it. Your layout is likely to break if people have huge ginourmous monitors capable of displaying more than 1024x768, or they do things like use their own stylesheets, or even enforce minimum/maximum font sizes.

Looks right to me. I wonder if the browser you are using simply has slimmer borders than what dreamweaver expects. That number is universal for all browsers, so they probably looked at something with a clunky interface and decided thats the max size.

It’s not the best idea to design a site for specific dimensions. It shoud be fluid, unless you’re designing for a specific audience.

The problem is, you have many browsers, IE, Mozilla based (Firefox, K-Meleon, Netscape) and Opera to name a few. They all display differently. Then you have different versions like IE 5.5, IE 6, IE 7, etc etc. The different versions will display differently.

Then you have different monitors, you have those that are 4:3 and look like a TV set and then you have wide screen monitors and you have various lap top monitors. They all display differently.

Then Mac are different from Windows, in terms of how they display pixels. Add to that all the above for Macs.

I know you want your site to look nice, but what happens is it looks OK to you and it isn’t right for a lot of other people and you just waste your time.

If you use XHTML (basically a strict version of HTML) you will do much better in getting a site that works for everyone. You want the site to look nice, of course, but the REAL important thing is that it FUNCTIONS well.

Nothing is worse than a site where you have to scroll constantly to the left and right. What I recommend is a book called Head First HTML with CSS & XHTML from O’Reilly Media. It’ll show you how to correctly do XHTML. Then you can use Dreamweaver to do the bulk and then tweak it.

These forums from DynamicDrive.Com

Are very helpful, plus they have tons of ideas and scripts

One problem is that my own monitor is set at 1920x1200, so nothing looks right on it . . . especially images that are 72ppi. The images will the the most important element of the site, and I have no idea what size to make them.

Even if he is doing a fluid site he still need to know the maximum width of his site when it is completely “squished”. So if he’s making a nice fluid header and his target smallest screen is 1024 then he needs to make sure it is not all bunched up or side scrolling at that resolution. 955 is a good number.

Also, panache, if your site design is such that you just can’t get it to look or work right as a fluid design, go ahead and make it a static width. Either center it or set it off to the left. Just make sure you have a nice background so that it doesn’t look all empty in very wide screens.

I agree with this. Plenty of perfectly good, well-known websites have a fixed-width layout. The BBC, for one.

While liquid layouts are fine for some sites, i actually think fixed width is preferable in some cases, especially when you have a text-intensive site. There have been a bunch of studies showing that people find it easier to read text on a screen when the columns do not stretch the width of the page. In fact, it’s generally best to restrict your column width to somewhere around 12-15 words. Full-width text can become very tiring to read.

Even if your whole site is a liquid layout, i think it’s best to ensure that the div containing your main text sections (articles, blog entries, etc.) is fixed width, and relatively narrow.


Nowdays, very few regular computers have a screen width of less than 1024 pixels. I think a fixed width of 900px or so is perfectly reasonable.

The first generation of netbooks (Asus Eee, etc.) had 800 pixel screens, but the second generation have already increased screen resolution. If you want your site to be viewable on 1st-gen netbooks, or on mobile platforms like Palm, it might be worth designing separate style sheets, and offering users clickable style sheet options. This is a little complicated if you’re new to web design, but Googling should get you plenty of hints and advice.

Web design has come full circle, with fixed width making a comeback. Initially fixed width was the norm because the technology (hardware) and the code experience (hidden layout tables) made it self-limiting. As the technology improved and became cheaper (larger displays), the web technology improved (CSS support) along with web theory. Liquid and elastic designs (there is a difference) pushed the CSS envelope and opened up new ideas. It’s now going back to fixed width because the technology is now matching with the web technology.

Also, liquid and elastic designs suffer from web user stupidity and developer ignorance. Stupid web users with very large displays think every Window must be open the same size as the screen. With ever larger display sizes the actual page design becomes skewed and unusable. Web developers who don’t understand web user psychology allow the technology to define their jobs rather than the other way around.

Fixed with works better than ever now because the design theory, coupled with web user psychology drive the user experience, and not the technology.

You do not design for monitor resolution. You design for browser viewport size. The standard viewport is now 1024x768. Add in the browser fluff and the actual viewport design is 955x600 pixels. Actually, all these numbers should be converted from pixels to ems to take advantage of standards-compliant browser’s abilities to mange the page view. In other works an all CSS design (using ems and not pixels) allows the user using a quality browser such as Firefox to increase the view size without increasing the viewport size and the page design remains true. In other words while using Firefox, if you select <CTRL>-+ the page will magnify without distortion. (IE has limited capabilties.)

Go look at the CNN web site. The masthead use a liquid design while the rest of the page uses a centered fixed width.

If you want to learn, then learn from the best.

[li] - Check out Dan’s online articles and tips.[/li]
[li] - Check out Russ’ articles and presentations, including his sample layouts.[/li]
[li] - Cameron loves to push the edge.[/li]
[li] - Eric is da Man.[/li]
[li] - Jeffrey shows you how to design correctly.[/li][/ul]

Hijack ahead.

I was looking at that site, and was interested to see, in the design page, that one of their recent projects was designing the website for the Maryland Institute College of Art.

Before leaving Baltimore for San Diego, i taught history at MICA for two and a half years, and one of the absolute worst things about the place was the college website. Not only was it clunky and awful to navigate, but the design was an absolute embarrassment, especially given MICA’s status as one of the premier art colleges in the United States. The main nav menu was, completely inexplicably, done in Flash. It was just a regular set of links with submenus, but apparently some jackass decided that Flash would be preferable to regular HTML. And that’s just the tip of the iceberg. I can’t begin to describe all the ways it sucked.

The new site is a vast improvement in terms of appearance and ease of navigation, although it still seems to have the same issues with slow performance. Apparently the college decided not to spring for new servers when they got the new design.

There’s a huge difference between a fluid layout where each and every element stretches to fill the window, and a fluid design with fixed columns. Fixed columns for paragraph style text are indeed desireable, so long as you don’t make the mistake of sizing them in stupid units like pixels. Limiting the entire viewport to some arbitrarily small size like 900 pixels wide is just insane, once you add ads, navigation, callouts, and other design and content elements. Ever run into a site that was too narrow for you, and widening your browser window didn’t work for you? Well, at least there’s the ability to turn off and override stylesheets in Firefox.

What’s worse is when designers start to insist on their design over functionality. Pixel perfect placement, for example. On my work laptop’s built in screen, I have to enlarge everything (ridiculously high resolution screen – WTF??), but when docked, it has a proper 72 (close, anyway, 96) dpi monitor. I have to shrink everything back to 100% again. On some websites, the design inhibits the usability because it can’t adopt to overriding the font sizes.

Whoever said most screens are bigger than 1024x768 never worked with/for the government.

We build intranet / extranet web sites and our customers are about 98% government from local up to to national. Just about every desktop is a 17" CRT with a 1024x768 video card. A few are 17" flat panel, but the video card still stops at 1024x768.

All our web designs *must *not exhibit horizontal scrolling on a maximized 1024x768window … regardless of which browser they’re using. Ususally it’s IE6, sometimes IE7. And just enough FireFox or IE8 to keep us dev types busy.

A List Apart is a very good resource for web developers of any stripe. Several articles regarding how to build both fixed-width and fluid layouts and their pitfalls, as well as addressing each browser’s rendering idiosyncracies.