Tips for very NEW Webmasters

[ched]

This is a cut and paste of some of the stuff I've covered on my html tips page.  I've shortened it up to keep things flowing better though.  Thought it may help very new webmasters that might pop in here at weblamp.

Fonts: -
2 basic types of fonts. Serif, and Sans Serif. The difference is the way the letters are printed out. Serif is a font that has little curly items at the end or beginning of each letter. Examples of Serif fonts would be: Times, Georgia, Times New Roman, serif. Sans Serif fonts are usually used for Headlines. These letters are block letters that don't have any curly things on the ends of the letters. Examples of sans serif fonts would be: Veranda, Arial, Helvetica, sans-serif Stick to the basic ones for text on web pages: Times New Roman, Arial, Helvetica, etc.

Tip: Remember to place an alternative or two in your font tag to cover users of other types of computers who may not have the font you mentioned.
Example: <font face="Arial, Helvetica, sans-serif">

Don't: mix a large number of fonts on the same page. It's ok to use 2 or sometimes even 3 different fonts for various headings, or special notations, but too much mixing makes the page difficult to read.

Layout.
For the most part, web pages scroll down. There are exceptions to this, perhaps items such as a liner timeline. Look at your page in several screen "resolutions". The most common resolutions are 800 X 600, and 1024 X 768, however there are still a large number of people who have older 14" monitors that may be using the 640 X 400

Tip: If you are using tables, make sure they are set at less than 100% rather than using specific pixel dimentions.  You can then use your pixel dimentions on the tables or columns or cells within that table, and you can avoid some of the run-off that some sites suffer.


Do: check your page in other browsers and resolutions
Do: keep your tables under 100% of the width of the page
Don't: Use graphics over 600 x 400 unless there is a reason to do so (such as wallpaper)
Don't: Run the text of your web page to the very edge of the screen, leave a little space (often called a gutter). While there may be a rare occasion to do this (such as a copyright or page update statement), for the most part it makes the page harder to read.

Colors.
A simple matter really, but all too often I see a page that forgets this. If you use a dark colored background, then your font should be a lighter color. If you use a light colored background, then the color of your font should be darker. Use colors that compliment each other. While Red and Green may be great colors for Christmas, using that mix on a web page can make it difficult to read (depending on the shades). Stick to 2 or 3 basic colors for a page, don't throw all 256 colors on one page just because you can.

Do: pay attention to how the color of your text shows up against your background color.
Do: try to use colors that work well together and have a good contrast.
Don't: try to throw too many colors into one web page.

Next, Remember your audience.

Remember that not everyone has the same computer you do. Try to stick to the basics, leave space around your text, and test your page in other environments. At the very least, keep your home page down to the basics, then if you want to have things like java, dhtml, shockwave flash, IE 6 enhancements, etc - then you can post a link to those pages. Not everyone has all the newest plug-ins, the latest browsers, or a high-speed Internet connection. Your site may be geared toward a demographics section that tends to have the latest technology, but you don't want to lose those other either.


Intermediate.
The important stuff first.
For the most part people are lazy. When you design a web page, you want to grab their attention as soon as you can. They will not scroll down your page if the first part doesn't interest them. Use that very first 600 by 400 (or at most the first 800 by 600) pixels of screen real estate to get your point across quickly. Although you don't want to go over-board with the Bold, Italics, and Heading types of formats for the text on your page, you do want to get their attention. Tell them what the page is about right away. Some webmasters have even adopted a practice of making the web page fit entirely on that first 800 by 600 pixels, and then use links rather than scrolling to provide the additional information they want to get across. In some ways that's good, but it can also come back to hurt a webmaster in the search engines (more on that in the Advanced section).

Do: make it obvious what the page is about right away
Don't: waste the first part of your page with a bunch of filler that leads into the topic of your page.

Spelling.
I admit, this is my biggest weakness. All too often in a rush to get a page posted to the web, webmasters forget to check their spelling. With the advanced computer programs out there (or even the very basic ones) it's not that hard to check your spelling. When folks who have had some schooling come to your site, one thing that will jump out at them in a very bad way is ms-spelled words. It will downright irritate some folks. It's a simple matter, but much more important than you may think. Remember this as well, the way you spell it on your page is the way the search engines will list it.

Next, Navigation.
Especially important if you have a site that has more than 4 or 5 pages. You want your site to be easy to get around, and once someone comes to your site, you want them to stick around long enough to see what you offer. Make your links obvious, and easy to find. Have a logical flow to your site, and make it as easy as possible to get from point A to point G quickly. Some folks may want to skip over points C,D,E, and F - let them.

Do: make your links a different color than the rest of your text to that the navigation stands out from your content.
Do: make it easy to get back to your home page and/or sitemap.
Don't: forget to have a link back "somewhere" on EVERY page (yep, I've done that a time or two)

Load Speed.
I won't go into a great deal of detail here, but remember that not everyone has cable, dsl, or other high speed Internet access. A LOT of folks still use old fashioned dial-up. With that in mind, you don't want to lose folks because your page takes too long to load. There will be times in every webmasters work where a page is going to take longer than you wish to load, sometimes that can't be helped. For the most part though, keep graphics to a minimum, both in the number of graphics you use on a page, and the size of the graphics themselves. Put some text at the top of the page to introduce it if you are using large tables or a lot of tables. Browsers read text first, then go back and read tables.

Tip: If you have a few dozen graphics you like, load them early, and then re-use them on following pages. Once a graphic has been loaded, it will be in cache, so the browser won't have to go back and download the same graphic again.

Tip 2: If you use a repeating graphic as a background for a page, a table or a cell, then keep the repeating pattern as small as possible. If a 20x20 graphic will do the same thing, then using a 120x120 graphic is a waste of download time.

Do: keep the size of the graphics as small (in file size, not necessarily physical size) as small as possible.
Don't: reduce the graphic so much that it is blurry, or unclear.

Frames.
Every webmaster should be aware of the pitfalls that plague "frames" Framed pages can be a great navigational tool, but they have 2 stark problems. One, the are not easily read by the search engines, and two, it's very easy to get frames inside of frames inside of frames until you have an awful looking mess on your screen. What I mean by search engines having a problem with frame pages is this: A frame page is actually more than one page. Search engines read individual pages.

tip: Do NOT use a framed page as your home page (index.html or whatever it is). If you want to use the idea of frames on your site, then make the home page a simple single html page. THEN, on that single page, my suggestion would be to have two separate"enter" links, one that says frames, and one that says no frames.

[SensoVision]

wow! that's a really good article thank you! if there will be more such articles we'll have to open special board for articles
BTW I've edit your post since you've make misspeling in posting link to article.
and I also don't agree about this:

however there are still a large number of people who have older 14" monitors that may be using the 640 X 400

statistic showing that only few percent of viewers now is using this resolution... it's about 3 or less(don't quite remeber), so I wouldn't design site for 640*480 but for 800*600 since this resolution is most frequently appear on the web... of course it's good to have site compatible with all of these resolution but sometimes it's just not possible or you should pay some price to accomplish this

[Queen Bee]

Yep Ched, great article! I'm sure that new webmasters will find this very helpful.

[ched]

wow! that's a really good article thank you! if there will be more such articles we'll have to open special board for articles
BTW I've edit your post since you've make misspeling in posting link to article.
and I also don't agree about this:statistic showing that only few percent of viewers now is using this resolution... it's about 3 or less(don't quite remeber), so I wouldn't design site for 640*480 but for 800*600 since this resolution is most frequently appear on the web... of course it's good to have site compatible with all of these resolution but sometimes it's just not possible or you should pay some price to accomplish this

ty, I'm not really versed on php at all - I always seem to mess up the url thing .. lol.  Thanks.

I have to stick by what I said on the 14" and 15" monitors and 640x480 res though D.  At least 20% of my calls are older computers that folks are having problems with, and yep, it always surprises me how many of them do still have these old computers.

I'm not saying that in web design it's something to worry about, I've quit working with that myself.  I do try to keep to 800x600 looking decent though.  Since my eyes have begun to get worse, I've dropped down to 1024 at home, but do look at the 800 res often to make sure it looks ok.  You're point is well taken about not much 640 stuff (although I'd bet it's closer to 8 - 10%).  Remember though, I've been on the web since 93, and doing computer work since 86 or so, so I do tend to date myself a bit when I consider "out dated" technology and equipment.

[ched]

...  if there will be more such articles we'll have to open special board for articles ...

Actually I think this type of info is why I joined weblamp.  I'm looking forward to articles like this from all the members here - share your knowledge, and we all become better webmasters.  I know Rachel can give us some great info on graphic design and such.  I hope Matt, Greg, and others will contribute.  I thrive on information, even if it's opinion rather than fact.

Besides that - webmaster text will help with seo stuff too ...

[greg]

i have been a webmaster far longer than working with SE stuff.

My first site was an html help site, lol...man that was back in the day, probably 7 years ago at least.

i'll try to write some tutorials sometime, if nothing else post some that i write for seo world over here. maybe we should have some sort of tutorial section. or if denis ever decides to do something with weblamp maybe he will make articles a part of it.

[SensoVision]

or if denis ever decides to do something with weblamp maybe he will make articles a part of it.

Denis surely decides to do something with weblamp as now he seen it in nightmares as a worst part of the site which a shame to show to people... since it was done long ago when I was completely newbie and know nothing about webmastering... so I need to rewrite it and thanks for idea with articles... can you refer me the script which you're using for article submission on your site since I maybe use it as well...(just need to find some time and finish opened projects).
And if you have some tutorials which you may to post and while weblamp isn't ready you're welcome to post them here, if we've find more article writers we'll be able to create tutorial board for them.

[greg]

i use xaraya....bit of a learning curve involved with it, because it is just so highly flexable there is just nothing really you can not do. It is great once you get it all figured out, really flows very easily

www.xaraya.com

[SensoVision]

thx! I'll check them

[ched]

i have been a webmaster far longer than working with SE stuff.

My first site was an html help site, lol...man that was back in the day, probably 7 years ago at least.

i'll try to write some tutorials sometime, if nothing else post some that i write for seo world over here. maybe we should have some sort of tutorial section. or if denis ever decides to do something with weblamp maybe he will make articles a part of it.

To be perfectly honest, I have posted help files and articles on my site for a while because they make such great spider food (and because that was the whole idea behind the site, although I often get side tracked with the "fun thing of the day") - but it was the articles at seo-world that really made me think.

I want to give back to any of the great folks that have helped me out so much, and it's the only way I know how to.  I really don't have the money to offer, so I try to offer what little bit I know.  (Even there I'm sometimes wrong, just ask Greg - case in point, revisit tags).

The bottom line is, the more you add to your forums, the better they will do.

[Matt999]

Nice Job Ched!
I am not nearly the author, so please bare with me as i whip off a quick note for this section.

Coding vs Validators

   Here are a few items I have noticed when validating coding:

align and valign

These two attributes position text or images within your tables. Align moves content from side to side, while valign moves content vertically or up and down.  Placing either of these in the table tag will not do anything except give you a no no warning from a validator.  Proper placement will be in the table data tag - <td>

<table>
<tr>
<td valign="top" align="right">Some text</td>
</tr>
</table>

Valign is handy for when you have items in a table that automatically appear halfway down your table when you actually want it at the top - valign="top"  or at the bottom - valign="bottom" and valign="middle" for centering.
Align is also handy when you wish items to be placed against the right hand side of a table rather than the automatic left placement on a webpage. - align="right" or align="left" align="center"

Cellpadding and Cellspacing

Another no no, is placing either of these two in a table data tag <td>. Cellpadding provides an space completely around the inside of a table/cell, while Cellspacing produces a space between all tables/cells outside of it. Proper placement of these tags are within the <table> tag.

<table cellpadding="5" cellspacing="3">
<tr>
<td>Some text</td>
</tr>
</table>

Type

Depending on what validator you are using, in the Style tags or Script tags, the type attribute may not be accepted.  However, to the w3 validator it is correct, and should be what is followed.

<script type="text/javascript">

or for style tags:

<style type="text/css">

 
I will try and come up with something a little more polished next time.  And I do think this section is a good idea.

[SensoVision]

Matt I've saw your mention validator and thought to post a link to one of them in case that people don't know about it existance here it's: http://validator.w3.org/check/referer
it's good idea to check with it whenver your write page manually or using some WYSIWYG editor.