The markup for the site looks fairly good.

Here are a few suggestions off the top of my head:

• The current page title is currently wrapped in a h2. This should be an h1 instead.
• The navigation doesn't feel good. It feels like a link list. While this can work well for geeks, there are other navigation setups that are more comfortable for average joe users.
• The design feels very 2002. You might want to update the design to a new style. See http://webdesignfromscratch.com/web-2.0-design-sty... for a style guide.

Matt,
I don't see how setting my current page title in a h1 font would really improve its display. It would be a larger font, but I don't believe that is necessary. It would make it somewhat out of balance with the size of my other fonts, in my opinion.

My navigation menu is a list of links, but they do work well and they are easy to update. What would make them more "comfortable for average joe users"? They are textual links that I think clearly cite their targets, and they are set in common styles for links. Please be more specific in regard to what would make them more "comfortable".

I've checked the resource that you cited for a style guide. Just skimming it didn't draw my attention to any principle of style that I thought I needed. I believe in simplicity and the importance of having a clear focus for the content of my pages. I want the style of my pages and that of my basic site to enhance that focus and not to hamper it.

Thanks for your comments. It is good to have this group of webmaster together again. I know that I have a lot to learn, and I appreciate the help that I have received from various members. I'll keep working on my site.
Bob

Don't think of the tags you use in a html page as a style to apply to something. Tags like a, h1, h2, img, div, pre, and so on are about semantics and the right tag to describe the information. h1, h2, h3, and other heading tags give structure to a page just like they do in a word document. This structure is important for anything that wants to read your site that isn't human (e.g., googlebot). The title of the page is what the page is about and should be the highest structural level. If you want to change the way that looks use CSS to style the element differently.

Navigation is about user experience and how to make that user experience as optimal as possible for the intended user. For example, I use Microsoft Word every day. All of the navigation links aren't present in one place. If I want to create a new document I click on FIle -> New... and a menu pops up in my main window with options. This is easy.

Link lists make people nervous. There are so many options where should they look? Which is best to have? Instead, it's recommended to provide a handful of main navigation options so they only have to make a simple decision and that takes them to some other place (menu or page) to help them make a sub decision from that one. This may be an extra click but it's a simpler decision for average users.

Even with FAQs you don't see long lists of question links to answers anymore. Instead there are search boxes with blocks for popular searches, similar questions, and smart suggestions. The goal is to make the user experience as easy as possible.

The style on your site is very 2002. Style is very much about what will aid you in reaching your intended audience. Who is that audience? How will the style of your site impact the way they view the information or even if they will read the content presented?

Think of it this way, since the invention of the television all of the US Presidents are fairly good looking people. You don't see anyone in a wheel chair (like FDR was) running. We don't elect people in wheel chairs. There are certain ascetic features that make things and people seem authoritative and able to do a job. How does the look of your website rate there?

Matt,
I think that I understand your further crique of my site and its style. I will give your suggestions some consideration.

In the meantime, let me indicate that my "audience" is both Christians and non-believers. The particular focus of my site is on attitudes, beliefs, and behaviors that have the potential of being "good" for eternity, not just for 30 days or even for one's life-time. I'm struggling with how to make this site more attractive to viewers and to get higher rankings on its basic pages.

I don't think that some of my rankings are too bad. For example, my page on http://christianityetc.org/heaven.php is ranked #9 out of 893,000 pages on Google for the search phrase "getting into heaven". My site is ranked #11 out of 5,520,000 sites for the phrase "good topics". My statement http://christianityetc.org/kindness.php is #1 out of 2,770,000 for the phrase the "virtue of kindness". I get about 80-100 unique viewers a day to my little site, and the average viewer seems to be spending about 5-6 minutes on my site. I don't think these stats are too bad, but I would like to make some improvements in how my site is being viewed.

Thanks again for your suggestions. I do use an external CSS file to design the basic elements on my site, so changes are easy to make, but I still want to keep the display of all of the various elements in coordinated balance and easy for viewers to find information that may be "good" for them.
Bob

Hi Bob,
Just reading through Matt's posts have helped me a lot to understand some things. It actually clarifies some things for me, and has given me food for thought (even though I don't consider myself a professional web developer - and I don't intend to).

I haven't actually gone over your website much, but I do intend to.

However, one thing that I would add right now (which makes better sense to me now) is that you can custom define tags such as a, h1, h2 and so on in your CSS file. This makes it very easy for you to focus on structure and semantics, while getting the design, look and feel (and size) that you want at the same time. You can even define attributes of the body tag.

The way to do this is not to create a class (.class) or an id (#id), but to simply define it as-is. For example:

// Begin CSS File
body {
background: #FFFFFF;
}
h1 {
color: #000000;
size: 14px;
}
.class1 {
// You get the point
}

// And so on... End CSS

I think this may help you (and me) in thinking about h1, h2, etc.. as structure rather than styles.

- David

Hi David,
I don't get the point of your suggestion at all. I've been working these codes for CSS and PHP and HTML for several years now, but I'm still very much a novice when it comes to understanding how to configure rules of code. If I'm going to change the settings for each level of headings, h1-6, I need to know exactly what style rules to set for each level so that they will each be attractive and balance with the settings for my body copy and the dimensions of my content box. Thanks for your note. It is good to hear from you. Let's keep in touch. I appreciate your interest in my site.
Bob

Hey Bob,
Once again, I will not be able to go into depth right now (because once again, I don't have that much time right now), but I will try to help a little. Before I start though, I found a couple resources that might be helpful to you. One is a post here in Geeks & God by a former CWM member, WebBy. It's in the CSS section:
http://geeksandgod.com/forums/web-development/html...

The other one is an article that he lists:
http://molly.com/articles/markupandcss/2002-02-tru...

I'm not quite sure what the default size for h2 is, but what you can do is change the text size of h1 to whatever size you want to. What I would suggest is defining basic information (like your font family, your default font-size, default background color, etc...

// Begin CSS Code
// First, define Body
body {
font-family: arial,helvetica,sans-serif;
font-size: 12px;
background: #FFFFFF;
}

// Now, define your structure
h1 {
font-size: 14px; // Change the size (14) until you get it to where you want. Higher number means bigger.
color: #000000; // This is the hexidecimal color for black
}
h2 {
// More CSS
}

// Now, on to your classes and Ids
.class1 { // or whatever you have named your classes

}
// And the rest of your CSS follows!
// End CSS

I hope this makes sense. Good luck!

Hey David,
Here is a copy of my external CSS file that contains the codes that determine the styles for the display of my basic elements on my website. I hope that you can see how I have set up these rules. You should be able to see that your above suggestions are included by these codes. Here is the file:

body {
background-color: white;
color: black;
font-family: Verdana, Arial, HelvSS75, sans-serif;
font-size: 87.5%;
font-weight: 500;
line-height: 18px;
margin: 0px;
padding: 0px;
text-align: center;
}

#container {
background-color: #c8c8c8;
border-color: #000000;
border-left-style: solid;
border-left-width: 5px;
border-right-style: solid;
border-right-width: 5px;
margin:0 auto;
text-align: left;
width: 760px;
}

#banner {
position:relative; height:75px; width:760px;
background-image:url(http://www.christianityetc.org/rockbannernewtextcr...);
background-position:top left;
background-repeat:no-repeat;
}

#content {
background-color: #ebeff4;
float: right;
border-left-color: #808080;
border-left-style: solid;
border-left-width: 1px;
padding: 15px 10px 15px 15px;
width: 495px;
overflow: visible;
}

#navigation {
background-color: #c8c8c8;
float: right;
left: 0px;
padding: 5px 5px 5px 10px;
margin: 0px;
width: 214px;
}

#footer {
background-color: #c8c8c8;
border-top-color: #4a5052;
border-top-style: solid;
border-top-width: 3px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 3px;
clear: both;
font-family: Arial, Verdana, sans-serif;
color: #000000;
font-size: 13px;
font-weight: normal;
line-height: 15px;
padding: 6px 5px 6px 10px;
width: 745px;
}

h1 {
color: black;
font-family: Arial, HelvSS75, sans-serif;
font-size: 1.5em;
font-style: normal;
font-weight: 600;
line-height: 30px;
text-align: center;
}

h2 {
color: #808000;
font-family: Arial, HelvSS75, sans-serif;
font-size: 1.125em;
font-style: normal;
font-weight: 600;
line-height: 20px;
margin-top: 3px;
text-align: center;
}

h3 {
color: black;
font-family: Arial, HelvSS75, sans-serif;
font-size: 1.125em;
font-weight: 500;
line-height: 20px;
margin-bottom: 0px;
text-align: center;
}

h4 {
color: black;
font-family: Verdana, Arial, HelvSS75, sans-serif;
font-size: 0.875em;
font-style: normal;
font-weight: 600;
line-height: 16px;
margin-bottom: 0px;
text-align: left;
}

h5 {
color: black;
font-family: Verdana, Arial, sans-serif;
font-size: 0.75em;
font-style: normal;
font-weight: 600;
line-height: 14px;
text-align: center;
}

h6 {
color: black;
font-family: Verdana, Arial, HelvSS75, sans-serif;
font-size: 0.625em;
font-style: normal;
font-weight: bold;
line-height: 12px;
}

#footer p {
margin-bottom: 1px;
margin-top: 1px;
}

a:link, a:visited, a:hover, a:active {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px;
list-style-type: none;
text-align: left;
text-decoration: none;
}

a:link {color: #0000ff;
}

a:visited {color: #993300;
}

a:hover {color: #ff4500;
}

a:active {color: #ff0000;
}

#navigation h2 {
margin-bottom: 3px;
margin-top: 2px;
}
.menu dt {
color: #006400;
font-weight: 600;
margin-top: -13px;
text-align: center;
}

.menu dd {
margin: 1px 0px 0px 0px;
}

.author {
margin:0px;
padding: 0px;
text-align: right;
}

#content .topofpage {
display: block;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}

.smalltype {
font-family: Arial, Verdana, sans-serif;
font-size: 10px;
font-variant: small-caps;
font-weight: 500;
}

.citation {
font-family: Arial, Verdana, sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 12px;
text-align: justify;
}

.imgright {
float: right;
margin: 4px 0px 4px 8px;
}

.emp {
color: #483d8b;
font-style: italic;
font-family: Arial, Verdana, sans-serif;
font-weight: 600;
}

blockquote {
margin-top: -2px;
margin-bottom: -2px;
}

.imgtcj {
border-color: #c0c0c0;
border-style: solid;
border-width: 4px;
float: right;
margin: 4px 0px 0px 6px;
}

.footnote {
font-family: Arial, Verdana;
font-size: 10px;
font-weight:500;
position:relative;
top:-4px;
left:0;
}

/* Flyout Menu */

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
width : 11em;
}

#nav li { /* all list items */
position : relative;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li ul li a, #nav li ul li ul li a {border:1px solid #808080;}

#nav li ul li ul li a {width:375px;}

#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color :#00f;
zfont-weight : bold;
text-decoration : none;
background:#c8c8c8;
padding : 0 0.5em;
}

#nav li a:hover {
color : #ff4500;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#nav li.first {margin-left:-8px;}

Let me know specifically what you think needs to be changed and the specific rules that need to be set. I'm willing to make changes, but I don't want to create new problems when I do so. Right now these codes seem to be displaying the elements in my site in an attractive and valid way. I've got several books and manuals on CSS, but I know that I still have a lot to learn about using it. I appreciate your help.
Bob

Hi Bob,
Starting now, it looks like your CSS work and knowledge is beyond what I would be able to help with. The only thing I would say is just change the values (sizes) as you see fit until you get a size that you like.

Good luck!

- David

If you're currently not using any h1 tags, and you don't have any other h2 tags besides article titles, then just delete the current h1 rule and rename the h2 rule to h1. That should work without changing anything else. The css would then read (in part):

#footer {
background-color: #c8c8c8;
border-top-color: #4a5052;
border-top-style: solid;
border-top-width: 3px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 3px;
clear: both;
font-family: Arial, Verdana, sans-serif;
color: #000000;
font-size: 13px;
font-weight: normal;
line-height: 15px;
padding: 6px 5px 6px 10px;
width: 745px;
}
 
//This is where h1 used to be, but isn't anymore.
 
h1 {  //This used to be h2.
color: #808000;
font-family: Arial, HelvSS75, sans-serif;
font-size: 1.125em;
font-style: normal;
font-weight: 600;
line-height: 20px;
margin-top: 3px;
text-align: center;
}
 
h3 {
color: black;
//And so on...

---------
Here's an alternative option. Your site's title doesn't seem to appear anywhere. You could stick an h1 with the site's title (not the article title) into the banner div, use css to hide the h1 text, then leave the article title as an h2.

So the page html would include (for example):

<body>
   <div id="container" >
      <div id="top"></div>
 
      <div id="banner">
      <h1>Christianity and other good topics</h1>
      </div>
 
      <div id="content">
      <h2>Sin</h2>
<!-- And so on -->

You could do something like this in the CSS:

#banner {
position:relative; height:75px; width:760px;
background-image:url(<a href="http://www.christianityetc.org" title="http://www.christianityetc.org" rel="nofollow">http://www.christianityetc.org</a>...);
background-position:top left;
background-repeat:no-repeat;
}
 
#banner h1 {
width:760px;
height:0;
overflow:hidden;
}
 
#content {
background-color: #ebeff4;
float: right;
//And so on...

---------
Be aware, though, that I don't know what I'm doing. This is based on some tips gathered from the G&G podcast, w3schools, and other places, along with making only one or two sites. Either of these options should work as they are, but you may find you need to tweak them.

Please note that the title for my site, "Christianity and other good topics" appears in the banner. It is not set in the h1 style. If it was set in that style, it would be too big to fit in my banner. I really don't have any h1 headings in my site, so the h2 headings are the major headings for each statement/page. I suppose that I could deleat the h1 codes from my CSS file, but I might choose to use this style for some pages later as I continue to work on my site. I don't think that I'm going to make any changes in my CSS codes for now. If I change the tags for my headings, I would have to go back into every HTML file and change all of the citations for every heading. I certainly don't want to do that. Thanks for your suggestions.

MF, Rudy507 and erichamion offer some good suggestions here that I would endorse. Your comment that h1 headings would be too big suggests that a productive area for further reading would be to understand the separation between markup and style that is inherent in the XHTML-CSS approach to site design. An h1 tag has no inherent size or style characteristics—how you style it is entirely up to you—the thing that is inherent is to say to search engines (and screen readers for visually impaired people, for instance) that this is the most important heading on your site, and at the top of your hierarchy. As erichamion notes, you do not even need to display the contents of your h1 at all for it to usefully have this effect, if you wish to replace it with a graphic in your header. This is a common CSS technique used on many sites.

Your site is published with PHP, but you noted that "If I change the tags for my headings, I would have to go back into every HTML file and change all of the citations for every heading." That leaves me wondering what technology you are using to create your site—is it all hand-coded, possibly? Perhaps you are only using PHP to pull in the sidebar with your navigation links? If so, it would be well worthwhile exploring some of the other options that you would have for publishing and maintaining your site content, such as a content management system like Wordpress, Joomla! or Drupal. This would enable you to separate entirely your design (CSS), code (the PHP that produces the HTML) and the actual content. Having such a separation means you no longer have to worry about manually changing such things as title tags in multiple places, since it would be controlled in one template.

You were asking for ways to improve the "basic design" of your website. I can think of no better starting point than to absorb some of the articles at A List Apart, which publishes a wealth of material that is well written, clear, and accessible even to people with less experience in the particular topic being discussed. An investment of time there would be well worthwhile. All the best with your site.

My site is all hand-coded. The text for each statement/page is done in HTML codes. These files of codes are then loaded into the site display from the PHP includes for each page. I am apparently not using a CMS for my site, since I'm doing everything file-by-file. I've heard about the Content Management System, but I don't understand what it is or how it works. So I would have to learn how to use Wordpress, Joomla, or Drupal. I do want to continue to separate the display of my various elements, including the text of my statements, from the actual words of my content. What is the one file that can control the heading tags, like h1 and h2, if it is not an external CSS file? My current CSS file sets the template for my site. Are you suggesting that I should use another type of file to do this? Thanks for the suggestions. I'll give further consideration and study to them.
Bob

You'll find frameworks, CMS, and most solutions try to separate what they do into conceptual layers. There are usually 3 layers. There is a controller. This handles the request and controls how the code will respond. There is a Data. This is where your data is stored and handled. This can include the data and business logic. Then there is the presentation. This is where the information is converted into something people see.

The two most common forms of this are MVC and PAC design patterns. They are worth reading up on and learning.

Hello,
I have revised the codes for my banner in my basic CSS and PHP files, making the banner into a h1 heading. I had to change the codes for the banner div in 29 php files, but I was able to do this OK. All of the pages seem to be displayed appropriately, and the files are still valid. I trust that this change will improve the structural order of my site. Check it out and let me know if you spot any problems with this change. Thanks.
Bob

Looks pretty good and semantically correct, except for one thing, the use of the italics tag:

<i>word</i>

This tag has been depreciated by the W3C, the committee that develops web standards. Because your doctype is set to HTML4, the italics tag will still validate, however, the semantically correct tag to use is the "emphasis" tag:

<em>word</em>

The reason for this is that screen readers and other devices for the visually impaired have no idea what to do with italics. Anyway, in a browser, the default styling for the em tag is to italicize the text.

The same is true for the b (bold) tag. It has been depreciated in favor of the strong tag, for the same reasons. These tags are inherently style tags, rather than markup tags, and should not be used anymore.

Other than that, everything I saw was semantically correct.

Anthony,
Thanks for the suggestions. I'll consider these tags, but I don't want to go through all of the html files to find and to change all of these tags tag-by-tag. I need a program that can do this with a find/replace command.
Bob