Question

Let me explain the basic layout below:

|----------------------------|
| title banner               |
|                            |
|----------------------------|
| logut-row                  |
|----------------------------|
|      aN                    |
|    <<to be explained>>     |
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|----------------------------|
| footer                     |
|----------------------------|


a1:
| Use entire width for text  |
| and images.                |

a2:
|nav- | con                  |
|iga- |                      |
|tion |                      |

a3:
|nav- | con1     | con2      |
|iga- |          |           |
|tion |          |           |

a4:
|nav- | con1  | con2  | con3 |
|iga- |       |       |      |
|tion |       |       |      |

• “title banner” will contain one or two images and will not be clickable.
• “logut-row” will contain text and some form elements enabling the user to logout.
• “footer” will contain some links and some text.
• All three of the above mentioned parts will have one column only.
• “a” could be no columns (a1), two columns (a2), three columns (a3) or four columns (a4).
• “conN” is the main content where N could be the empty string or 1-3.
• The content could be in 1-3 columns with a navigation menu column. There is also a special case where there is no navigation menu column and a single column.
• The columns will be separate parts. No text beginning in col1 will continue in col2. Rather col1 might hold text and col2 some unrelated information like a list of the latest news.

---

Questions about the layout: (Nr 4 is most interesting)

1. We tought the width could be fixed and around 1000px. Comments?
2. Should we specify the width using em to make the layout more scalable for different font widths?
3. Since the web site will be launched in about a year from now we skip support for IE6 and focus on IE7, IE8, Firefox 3.x+ and Safari (version to be decided). Comments?
4. Suggestions on the markup and CSS for this?
5. Which version of (X)HTML and CSS would you recommend? Why?
6. Do you think a version for devices with small screens could simply be based on a custom CSS or would it need differences in the layout markup?

Answer 1

1. When deciding what dimensions to make a layout, I usually consult major high traffic sites like Google.com, Yahoo.com, BBC.co.uk, etc. They’re usually decent indicators of what an acceptable layout dimension is. Right now, Google News has a layout which autosizes to 100% width, but has a minimum width of 765px. BBC.co.uk, OTOH, has a fixed layout of 974px. You may want to do your own survey of similar-type sites, but the site I’m working on at the moment has an 800px fixed width. It is a reasonable dimension for displaying the type of content we are offering, and it will not alienate netbook/sublaptop users.
2. No. A website’s dimensions should be specified absolutely, in pixels, or relative to the screen/Window size. There’s no reason to define the width of your layout according to the height (or width) of a typeface. Just because a bigger font size is used does not mean the user’s screen resolution is automatically increased. Unless you are working with fixed-width/monospaced fonts where you can define the number of characters on each row of text, there isn’t much point in making your layout dimensions proportional to type dimensions–your text will automatically wrap around the column width anyway.
3. Personally, I use frameworks like YUI or jQuery to shorten development time. These frameworks also largely conceal inconsistencies between different browsers. jQuery masks inconsistencies in ECMA scripting implementations between different browsers. YUI largely does the same but also provides advanced UI components and CSS resets that work across most major browsers. Beyond this, I no longer worry about supporting standards-flouting browsers like IE.
4. The layout seems pretty straightforward. If you understand how to build table-less layouts (box model, float, clear, etc.) and separate presentation from content, then you should be good.
5. XHTML 1.0 is the current W3C recommendation. I don’t think XHTML 2.0 is supported by any major browsers yet. IE still does not even fully support XHTML 1.0, so it is best to write HTML-compatible XHTML. CSS1 is fully supported by most major browsers, while CSS2 is mostly supported.
6. We’re planning to launch a separate version of the site with a format specially tailored to mobile devices. As tvanfosson mentioned, mobile users will likely be interested in different content from desktop users. Things like banners, photos, and other images will have to be removed or scaled down. Navigation interfaces and website flow will have to be altered as well.