Web Site - Design Advice

So you have a personal web site and you want to make it the best you possible. What to do, what to do?

In this thread, you can post your site link (it's ok, be brave) and I (and maybe others) will offer advice on how to make things better. I can help with links and some how-to's but you will do the work.

Tips, Tricks, and Reference sites to use. I also do plenty of coding, graphics, and general design layout.
Flash? Well yes, I do that too...but it is harder to instruct in writing. I know some good Flash resources and inspiration sites for ideas.

It's all about helping and not hurting so be prepared to take the straight truth. Bright yellow text on a red background? Oh yeah, I'm gonna tell you.

Now, who wants to take the first step? We can help get you in order so you could become one of the ConspiracyLinks.com sites.

Ok I'll Bite.......

I made this one about two years ago for a fleet in an online Star Trek Game called Starfleet Command. Since I stopped playing the game I have not updated the site and quit paying for the ad free version so it has lost a little of its luster.

I am however planning on creating a new site soon and will be using pretty much the same ideas. So any help is appreciated.

Warning watch out for the pop up ads!!!!!!!!!

www.rts.150m.com...

Hey, great! Well for everyone else out there, keep in mind that many of these are personal sites which are done during spare time or for a hobby. As such, this is a great example.

All in all, just three changes could give it a totally different effect.

The biggest two things that you could change for your next version would be the background and the text. Many people just don't follow good practices when it comes to the two so don't worry, this is probably the best change many sites can make.

You could still have the space background, yet work in say a black square section with rounded corners to have behind the text (showing space all around the sides). Possible lighten the green font color a shade or two will help the readability of it. I find verdana and helvetica are the best for readability, and yes you can specify both. When you are closer on that part...we can do some CSS learning here and you will be able to control the font, line spacing, size, and more...just from the style sheet.

The rest, well...that can totally depend on your target audience. In my case, not a fan of scrolling for navigation, but that is just a personal thing.

Last, I like the intent of the intro fade in, but maybe here is a golden nugget for you. You have the index.htm page already. Now make and indexx.htm (or whatever name you want), which is a complete copy of the index page, with no fade in.
In your navigation for all pages...link the Home button to the second page. Then when someone comes to the site...intro, but once you are there, you never get it again because they always go to the second page.

All in all though...good stuff.

This is in response to a u2u I recieved from Grommer. If he wants the web site posted, he will let me know.

Anyway, on to the tips.

First, you are a victim of one thing that plagues everyone making sites for someone else...making them happy. Many times you recieve a paragraph of text and someone wants it made into an 8 page site. It just doesn't work well. Content is KING! (You will see this again). It's hard for me to judge what the intent is, because I don't read German but...

I do like the home page graphic and the other graphics as well. The two things you could do mainly involve the text and the color (just as you surmised). I would make some of the text smaller (verdana, helvetica size 2 is a very readable font) and then play with the color options, including the background colors. Don't be afraid to experiment. A great book for ideas, especially with regard to use of color and showing examples is:

Html Artistry: More Than Code


In the end, try some different colors in the tables to create interesting effects like splitting the page up a bit and clearly defining the navigation buttons. For example, make the whole left side of the page one color and the rest of the page (the right side) just white or anothe color that text is very readable on. Then the navigation is on the colored background to define it more.

A good examples of some color effects on html sites are (not major colors, but still have elements I like):
www.funkreich.de...
www.b33jay.com...
www.pseudoroom.com...

Download the pages and deconstruct the code. That's one way I learned.


Any questions on specific code. Let me know.

okay zedd help me out...I'm not too happy with it, plus I want to maybe start doing ebay or something, actually try to make $$ from site, plus it's my online portfolio for potential clients

www.paintedwithglee.com...

Well, I'm a lazy schmuck, who doesn't know squat about html coding, etc. I use FrontPage...

But, my sites are in my sig....

www.mwf-live.com... - I take full blame for this one.

and www.echelonrana.com... -- that's not completely my work; I've just taken over cuz my old webmaster crapped out on me. It needs help.

-B.

I have a personal website - though it's not 'flashy', and is not supposed to be.
But if anybody wants to have a look - though I have to warn you, it's pointless, lol.
www.webmasterdave.co.uk...

I am working on another website -
www.davespalace.co.uk... (not up yet), which will be my programming website, where I will put available all my recent programming projects, help and other useful information to programmers - I am also writing a lot of tutorials to put on there also - tutorials such as:
Extending scripting languages in C, scripting languages include Python, Perl and Lua.
Embedding scripting languages in C (same languages as above).
Several TCP/IP Programming tutorials.
And some other advanced tutorials including building compilers and interpretors, plus making a basic operating system in assembly.

When it is done, I will post the link, either here - or in my signature - so you judge it for yourself - once again, it won't be 'flashy' though - as content is my main commitment.

Any comments will be appreciated.

Nice clean little site.
I would set the main table to center, so that it moves the page to the middle on big screen.

One of the problems of using a program to write code is that so much is unnecessary. That nice little cross hatch graphic on th top left would be best as just one graphic, not as a series of small pics.

The code for the buttons, could be easily cut down as it repeats on every link.

What happens when you look at your code is that the search engine has to go for abour 50 or so lines before it finds some text to index. The text that it does find is not much to give it some clue as to what your site is about.

Also you need some meta tags for the he title of your site. These should be taken from the text on your front page.

A Title tag is perhaps the most important tag on your page for SEO purposes.

The meta keyword tag is hardly read or counted by anyone anymore and the meta description tag is not used very often either.

Here's what counts with the SE's... (in no particular order)

1.) Title tag

2.) Page Copy (Page Copy is any HTML text that appears on your page. This could include header and headlines, text contained within form boxes, links, navigation. Basically, if the text can be "highlighted" by clicking and dragging your mouse across it, then the search engine will count it.)

3.) Header tags etc...(Header Tags are .1 >, .2 > and the other tags that people use to mark off "important" pieces of text on their page. Some engines give the text in them just a little more emphasis than other text on the page.)

4.) Anchor Text (Anchor text is the text that you use for a link. For example, in this link: Search Engine Forums "Search Engine Forums" is the anchor text.)

5.) Number and quality of incoming links

I would put some more text on your front page about what you do, and what your products are. Not for the reader so much but for the search engine to index.

The higher the number of keywords on your page (to a limit of course) the better you will get indexed for those words like "handpainted" or "crafts for sale" etc. About 50 to 150 words is condiered good.

I would also take off the counter as well for a professional site. If you have lots of hits you don't need to advertise it, if you don't you don't WANT to advertise it

I could help you with rebuilding the code if you wish



[Edited on 4-3-2004 by Netchicken]

[Edited on 4-3-2004 by Netchicken]

As I was stripping down the code of www.paintedwithglee.com... I noticed that the counter points here...

top-10-viagra-pharmacies-online dot com

mg src=http://rightstats.com/cgi-bin/counter.asp?cid=22899
border=0 ALT="Buy Viagra Online - Our Sponsors">

!!!!!

[Edited on 4-3-2004 by Netchicken]

Gazrok, Banshee, and MetalHead...more to come.
Plenty to look over at once.

Here's my site. It's been 2 years since it's been up and has changed quote a bit from it's original design.

www.angelfire.com...

I just want your opinion on how it is (layout, content, design, etc.).

Both CONSTRUCTIVE and DESTRUCTIVE advice is accepted. I don't mind one bit.

HELP IS HELP... at least to me.

ONE MORE THING... My site is best viewed at 1024x768 screen resolution. (WHY?) Because that's my native resolution and I used FrontPage as my HTML editor and well, that uses my screen size and the rest is obvious.

This was just a message just in case you use another resolution (640x480, for example) and notice that the buttons in my menubar are too big.

Thanks, man!

{STAY COOL)
-prophetmike

EDIT: I forgot to post my link! OOPSIES!

[Edited on 4-3-04 by prophetmike]

Alright...Gazrok.

First, your wedding site. Been there long ago (before the big day) and I did, and still do...like it just for exactly what it is.

The couple things I might do. One, not a huge fan of the frames, but I would probably add to the navigation buttons border=0 which gets rid of the blue around each pic. I don't think they are needed. I would also take the images out of the "p" tags and just separate them with "br" tags (yes, use the angle brackets). That might tighten things so the navigation requires no scrolling, but the res of the page does.
Get's rid of the second scroll bar.

Other than that, fonts. You will probably see that I will say fonts in every post I make here. People just don't take enough time to look. Take "The Story of ..." page , which has font face="Old English Text MT" size="3". Not everyone has that so it defaults to, in my case Time New Roman. Try changing "Old English Text MT" to "Old English Text MT, verdana, helvetica, serif". Might help those like me.

Your Artwork site. Again, I like it for what it is.
I have not been a big fan of the table borders though, at least in plain. Try adding in bordercolor="#999999" to the "table" tag. Cellpadding="0" and cellspacing="0" are good too. Try some different colors and looks.

Last? Yep, fonts. Not bad, but you can make them real sharp and tight. i will be doing a CSS tutorial here, to cover fonts, links, link colors, hover, and more, more, more.

Ok, ok...I preach the fonts and more. Yep!

Well, try this and then tell me what YOU think.

In the "head" tag of each page in your site, put this:
*link rel=stylesheet href="zedd_style.css" type="text/css"* using the angle brackets in place of the stars.

Now, open notepad and paste in this:
A:link { COLOR:#666699; TEXT-DECORATION:none; }
A:visited { COLOR:#666699; TEXT-DECORATION:none; }
A:active { COLOR:#ff9900; TEXT-DECORATION:none; }
A:hover { COLOR:#ff9900; TEXT-DECORATION:underline; }

.size10 {
COLOR: #333333;
FONT-FAMILY : Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
FONT-WEIGHT: normal;
LINE-HEIGHT: 14px;
}

.size10bold {
COLOR: #333333;
FONT-FAMILY : Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
LINE-HEIGHT: 14px;
}


Then save as zedd_style.css in your main directory.
Now let's break it down. This page will totally control your whole site from one place. I have web sites I can completely change in minutes. We're talking hundreds of pages, but let's work with baby steps for the new people.

A:link { COLOR:#666699; TEXT-DECORATION:none; }
A:visited { COLOR:#666699; TEXT-DECORATION:none; }
A:active { COLOR:#ff9900; TEXT-DECORATION:none; }
A:hover { COLOR:#ff9900; TEXT-DECORATION:underline; }

This will define ALL of your navigation links. Keep them in this order (I have had hover issues when not in this order) and you will see, I can have underlines, no underline (none), and the link colors. NO MORE DEFAULT BLUES! Pick your colors and work them in!

.size10 {
COLOR: #333333;
FONT-FAMILY : Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
FONT-WEIGHT: normal;
LINE-HEIGHT: 14px;
}

This defines ONE FONT. I could (and do) have tons defined usually so I have everything at my fingertips, but just start here. This font is called "size10" and I define it as the color I want, the font family in the order I chose (if the first is not on the viewing machine, it goes to the next...), the font size, wieght (normal or bold) and the line height (spacing).

Wherever you want to use this font (pick one page), then in the "font" tag just add class="size10"

Easy right? Now see I have a bold type too, I can add where I like. Now imagine I have:
.size10red
.size10blue
.size10brown
.size10pink
.size14orange

I can use them where I like.

How about a special one defined for a note to my mom?

.momfont
or
.anything
.whatever

Just define it and then add class="anything" to the font tag.

-----------------------------------------------------------
You can add class="whatever" to just about any html tag. Table (add it to each "td" tag), font, input, etc...

Now, more advanced, add this to the CSS page.
.pagecolor {
background-color: #ffffff;
}

Pick a table "td" tag and add class="pagecolor". Now it is controlled by ONE PAGE. The CSS page. Imaging a hundred pages linked to this? I now want the backgrounds to be black. I change the CSS page to:
background-color: #000000;

All hundred pages just changed when I save the CSS and upload it. Getting some ideas of power and what can be termed "modular" architecture?

Play around and hit me with any questions...

Banshee
www.mwf-live.com... - Hey, that is a good site. Is that you that did that? I would have to get nitty gritty in it to offer advice.

www.echelonrana.com... - This one I would, center or left justify the pages. There are some centered and some not. I would standardize that and then pay some attention to the fonts (as I always say). I would drop the grid background and go solid on the colors.

-------------------------------------------------------------------------------------------------------------------------------

For everyone else, doing this is hard because of the levels of difference in skill. Most people here are novice level so I wanted to encourage and teach, not discourage them. I guess for the most part I have been staying strictly with the look and not the code, meaning I haven't been looking at page titles, or search engine friendly habits as a rule. I have been staying mainly with overall look.

A few things for the novice that I like to follow, regarding the look and feel of a site.

Tips:
- Draw the page you want on paper in a series of squares. This will help you know where all the tables you make are going to go. Write in where you want images, navigation, content, etc.
- Use some color. Try different stuff together. Eventually you will make a list of favorite colors to work with.

- Background images - personally, I don't like them much but this is something so many people do. Many times it makes the text hard to read.
example - www.fabelhaftshowdogs.com...

Text - oh I could devote a whole page about this. One thing I find is one sentence on a page (to be extreme in example) and so the font is light pink and an inch high. Why make it so big? It's a bit like me coming to you and yelling in your face.
example - www.dokimos.org...
I could put this whole page in a clear concise table that you would not even have to scroll.

How about and example of BOTh of the last two items? Ok, get the headache medicine out and don't say I didn't warn you.
The Hayloft

A few more examples? Go to www.htmlgonebad.com... which will point the way.

Those are just a few and I hope you take them as being constructive tips, not negative ones. Remember, it really is all in the eye of the beholder, but there are things you can do (such as some of the above) that will lend a certain professional look to your site.

I will get to more reviews of sites posted here as soon as I can.

Zed's right about CSS
If you have grasped a bit of HTML then Cascading style sheets are the next step to take.

I have some lessons here --> stuffucanuse.com...

in graduating steps of complexity that were picked up by ww3.org.

Why use CSS?

Firstly you separate out the formatting from the text, as all the formatting goes in the header. This means that the search engines have cleaner code to index, your text is more likely to be ranked higher than non CSS text.

Secondly it saves space and code. I halved the size of my front page using the simple CSS there. It also dramatically reduced the download times.

Thirdly CSS give you the freedom to play with your setup quickly and efficiently.

Fourthly CSS let you do things simply that take ages to work out in HTML, if it is possible to do it at all.


[Edited on 5-3-2004 by Netchicken]

Great site NetChicken! Here is another good beginers site for HTML/JavaScript/CSS:

www.davesite.com...

Hope this helps people learn some of the languages...

J.

YES. I used this site to learn to create frames. I still use it to practice and brush up on other things.

I should check out Netchicken's sites...

{STAY COOL)
-prophetmike

I'm really weird about showing my work, but I'll go out on a limb and link my site [ www.alternate-heaven.com... ] Its kind of content bare, but hopefullyt that will change soon. Oh, and as for skill I'm pretty proficent at html, css, and even php scripting, so don't hold back on me

Ok, here are a few of my sites:

www.shoktek.com... <--Main Site...tried to keep down on the cluttering.

www.shoktek.com... <--This is a personal site, where I basically said to hell with it when it came to creating a layout...and just went with a simple color scheme. It is just some things I have written, and I actually might get in trouble for posting it on ATS now...

www.shoktek.com... <--This is another site I made, NO I am not a "street racer" (lol), but some guys at high school were running this little group, and I decided to get some design practice and created the basic layout for this...as you can see, the group never got anywhere, and there is zero content.


Honestly, I spent less than an hour developing the layout on all these sites...my motto is to keep it simple, as trying to add more features and graphics usually just drives people away. I also don't really like to use Flash, as it is just less of a hassle, and I like the look of a page with a nice color scheme, some graphics, and good tables layout. Don't be too harsh!