Web design help needed... Again...

I have been working on a new website, and I think I have the basic layout done. The javascript is not mine, but most of the CSS and all of the HTML is mine, done in Notepad++.

Link

And, I already know that some of the pages are the same as the main page, I just haven’t changed those.

The hardest part was moving from the original Suckerfish menus to the newer version, so I want to know the site works on all browsers, and I can only test Opera (9.0), IE, Firefox, and the Nintendo DS browser (Opera 8.5) right now. It works on all of those.

Edit: I never uploaded the Stargate model or image, so those links on the Stargate page are broken.

I had a quick look and the markup looks quite fine to me. Congratulations on not using tables for layout. But first you should ask the validator about your site :). It says, you need a doctype (scroll down that page to help you find one).

I recommend strict, either html or xhtml. In strict mode the validator is harsher and catches more errors, and it’s the mode where most modern browsers have the best common ground. Also it’s the recommended mode for new websites.

In case you didn’t, also check your css too, but it seems there are no errors, just some warnings. It’s good to know about them, though, and decide if you want to act on the recommendations anyway.

Good luck :slight_smile:

I’ve alerady done that a few times, and I have 16 errors with the HTML and no errors in the CSS. I know I need a Doctype, but right now I don’t know which one to use. The XHTML 1.0 Strict comes up with 16 errors, but the HTML 4.0 Transitional (or one of the other transitional ones, I don’t remember which) comes out with only three errors. I’m not sure which to use.

And yes, I hate tables. In my web design class last year, my teacher was trying to get me to use tables for layout, and I just couldn’t understand why tables were better than CSS. I later found out that she didn’t even know how to use CSS without some fancy program to write it for her.

Another thing I tried to do in this site is the whole “Elastic” layout. That way, you can change the text size setting in the browser and not have massive letters crammed into a small space.

Ha! I have heard a lot about those “teachers” who still live in the nineties regarding HTML and CSS. That’s really problematic, but great that you ask questions and don’t do those stupid and ancient techniques. With htmldog and a list apart you already found two of the best ressources for web designers.

For the doctype:
First let’s see if you use HTML or XHTML. It seems you use XHTML, so you need to use an XHTML doctype. My recommendation, as I said, is strict, it would be the one on this page at htmldog:
http://www.htmldog.com/guides/htmlbeginner/tags/, that is, everything before the <html>:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Put this in your document and work through (and try to understand) any validation errors. If you’re stuck, ask again, and I’ll try to help. That a deal? :slight_smile:

Edit: oh, and in case you don’t know this, the web developer extension for Firefox is an invaluable tool when making websites. For example, it has an option to validate local (X)HTML with a mouseclick.

The site coding seems fairly solid, though I’m not a huge fan of the light blue colors.

Also, get rid of the “my parents won’t let me go by my real name” because it’s super incredibly dorky in a hilarious way. Just put that you go by Tynach.

I also think that the markup looks fine and just to echo what was said above…yea! on not using tables.

Code-wise it’s fine but I think design-wise it could be made to look a lot better. Have a look at the CSS layouts on sites like Open Web Design, OSWD, CSS Zen Garden and CSS Vault for ideas.

I’m going to go with XHTML 1.0 Strict, since now it only gives me 7 errors.

However, my computer monitor went bad on me (I got it for my birthday, too :(), so I’m having to do this on my mom’s computer.

Do you know of any fast way of adding the " />" at the end of self-closing tags without having to do them all individually? I don’t really have many, but they add up on all those pages. I use Notepad++ for editing.

Edit 1: When I disable browser default styles, the page looks squashed. How do I veiw Firefox’s default styling, so I can match it as close as possible?

Also, thinking back, I think my teacher actually told me that tables were not the best way to make a layout, but the easiest for inexperienced people.

Edit 2: Nevermind, I figured it out. The replace command can replace something in all open files at once. Comes in handy. I’ve checked it, and it gives out no errors. But I’d still like to match the CSS to Firefox’s default style.

Edit 3: One of the warnings about the CSS is: “font-family: You are encouraged to offer a generic family as a last alternative.” How do I do that? What does that mean?

It’s crap!

…just kidding. I don’t know.

An easy way to say that is not to say anything.

Funny thing is, your avatar reminds me of my 3D Animation teacher, who will put an upside-down image on the projector every Tuesday and have us draw it.

Now, markup “design” (if you will…) is entirely a personal choice. The browser doesn’t care how it looks (it could all be on one line if you wanted), but as far as the way I layout my code is that any child of a parent gets a tab (except main html structure):


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /&gt;
    &lt;meta&gt;&lt;/meta&gt;
    &lt;script&gt;
        /* Javascript goes here */
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="main"&gt;
        &lt;div id="header"&gt;
            &lt;p&gt;
                &lt;img src="blah.jpg" alt="alternate text" /&gt;
                &lt;h1&gt;H1&lt;/h1&gt;
                &lt;h2&gt;H2&lt;/h2&gt;
                &lt;ul&gt;
                    &lt;li&gt;LI1&lt;/li&gt;
                    &lt;li&gt;LI2&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/p&gt;
            &lt;span class="spanOne"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id="content"&gt;
            &lt;h1&gt;Welcome to my gallery!&lt;/h1&gt;
            &lt;p&gt;This is text for my site..&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="footer"&gt;
            &lt;p&gt;I made this all by myself!&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

That way, your markup is organized and easy to read (and then, you don’t need comments to seperate sections or anything, you can just scan through it). Personally, the only reason I use comments in the HTML itself is to leave a message for any source sniffers (or whatever you call them). IE:


&lt;!--
    Welcome to my site, feel free to learn but
    don't steal.  It's bad for your soul.
--&gt;

or whatever you want.

As far as what doctype to use, forget about how many errors the validator gives you, 99% of the errors can be fixed easily (and many are duplicates). There are advantages to each of the doctypes:

XHTML strict is the preferred doctype since it is supported by mostly every major browser (IE, even version 7 doesn’t support it fulllly, but it’s close enough where you probably won’t notice it). As far as backwards compatibility, as long as you aren’t using any CSS3 or late CSS2 properties, you shouldn’t have any trouble.

If you want to be realllllly backwards compatible, go with the scrolling text and tables layout. Heh.

Do you know of any fast way of adding the " />" at the end of self-closing tags without having to do them all individually? I don’t really have many, but they add up on all those pages. I use Notepad++ for editing.
I don’t know about notepad++, but I’m sure it has a search/replace function. You could type in > as the search and then /> as the replacement, but I wouldn’t recommend that since the /> is meant ONLY for self closing elements (ie: <br />, <img />, etc). If you self close a <h1> for instance, it wont work. I’d recommend just going through by hand, as that’s your best option.

Edit 1: When I disable browser default styles, the page looks squashed. How do I view Firefox’s default styling, so I can match it as close as possible?

Also, thinking back, I think my teacher actually told me that tables were not the best way to make a layout, but the easiest for inexperienced people.

Edit 2: Nevermind, I figured it out. The replace command can replace something in all open files at once. Comes in handy. I’ve checked it, and it gives out no errors. But I’d still like to match the CSS to Firefox’s default style.
Not sure what you mean by disabling the default styles…

Edit 3: One of the warnings about the CSS is: “font-family: You are encouraged to offer a generic family as a last alternative.” How do I do that? What does that mean?
The generic font family is for browsers that have none of the fonts you specified installed… IE:

#elementOne {
    font-family: 'Lucida Grande', Verdana;
    }

is what’s throwing the error. But what happens if you don’t have Lucida Grande or Verdana installed. For the best compatibility, what it means is that you should restructure it like this:

#elementOne {
    font-family: 'Lucida Grande', Verdana, sans-serif;
    }

the ‘sans-serif’ bit tells the browser that if all the fonts before it cant be found, revert to the browser/OS default sans serif font. Since Verdana and Lucida Grande are sans serif fonts, you put sans-serif at the end. If your default text was lets say Times New Roman, you’d put serif at the end since it is a serif font. Google the difference between sans serif and serif if you don’t know what they are.

You probably should create a separate directory for your stylesheets, just for organization.

Lastly, this is a totally personal thing too, but I also like to structure my CSS very similar to yours, except, the closing bracket I have tabbed rather than… not tabbed. So:

#header {
    float: left;
    }

rather than:

#header {
    float: left;
}

But like I said, it’s totally personal. I just find it easier to read because I can scan down the ID’s and classes…

I can’t comment on the Javascript since it’s not your code, and I’m not that fluent in Javascript.

Like others have said, the design could use some work. Check out the sites listed above by Buck-Beaver, they’re great sites. I’ll also mention that you check out DesignShack because it’s a nice site for inspiration. Just remember, don’t ever steal or be too heavily ‘influenced’ by something. Hopefully that is self explanatory.

Hope that helps you out.

Oh, one last thing: The more organized you are when you are building the site, the more you will thank yourself later when you go to update it. The big thing about CSS is that it seperates the content and the layout, so if your layout is unorganized in the HTML, and you go to update your design later, you’ll have to rewrite the HTML later too which almost defeats the purpose…

Oh yeah, don’t ever put your email address in plain sight. Either obfuscate it or use an image so that spam bots can’t recognize it and spam your email. For the image email you can try this free service on for size.

And if you don’t have content for a particular page, it’ll be nice to put up a “Under Construction” notice on the page itself, rather than confusing the user by giving something that looks like the homepage but isn’t.

Your site’s not bad, nice work.

i know, i know damn capitalism, but doing that can actually loose lots of visitors, if your building a portal for an example, though, personal site is another thing i guess… :slight_smile:

Hey Tynach,

great you got XHTML 1.0 Strict going! Good work.

I’m also not sure about what you mean regarding Firefox’s default styles, but in case the problem is about margins and paddings, there’s a nice trick I always use. To eliminate different defaults from different browsers, I always put

* {
  margin: 0;
  padding: 0;
}

at the beginning of my CSS file, so every element (*) gets zero margins and paddings. I then add them as I go where needed, for example for a paragraph I’d use:

p {
  margin: 1em 0;
}

to get a 1 line margin above and beyond paragraphs.

I found while this might be a bit more work, it gives me much more cross-browser control.

Tankgo, thanks for your help, but I had already found my DOCTYPE and used the replace command.

I just remember looking at those sites with all the weird indented HTML in them, and I got even more confused looking at them.

Sanne, thanks for the tip. I’m going to implement that after I get back from church this morning.

What I meant by Firefox’s default styles is what Firefox uses to make a page look how it looks, when you don’t disable it with the web developer toolbar (a very handy tool, I’ve found). But, I think your tip should work :).

Menus are problematic (at least) in Opera 8.54/Windows.
You are having a ‘Cinema 4D GALLARY’ btw.

I see you notice my small-caps.

What are the menus doing?

I implemented that bit of styling, and I had to fix some of the other things. In the end, though, it is worth it! I keep looking at my site from IE, Firefox, and Opera, and the only difference I can find is that in Firefox the last word of my first paragraph is on a new line!

Now, all I need to do is figure out how to make the design better. Any suggestions?

Hire a designer? Heh, that’s what we’re here for.

If you want to do it yourself, look around the web (ie: some of the links we’ve posted), see what people are doing. Read some layout stuff:

Grid:


http://www.alistapart.com/articles/outsidethegrid
http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout

Fluid layouts are always nice, but fairly hard to make (when compared to fixed).

Remember, the design is only there to help and reinforce the content, not to replace it or be an excuse. The content is the central focal point and the design is there to help the user find the content quicker and easier.

Remember also, that without a stylesheet the site should still be extremely usable! Other than that, check out the URL’s we’ve posted, read articles on ALA, google around.

Now… back to that homework…

Edit: The strike through for the visited links has got to go… I thought that the section wasn’t up yet or something…

Why’s that? Didn’t you realize you had already clicked on them, and therefore they must have something there?

My current layout is fluid, and as far as I can tell, it is usable without the stylesheet.

I think I’d like to include some sort of image on all the pages, but I don’t want it to be part of the content, but part of the design. I don’t know where to put it, though. In the background? In the header? On the side?

Maybe I should have the navigation on a sidebar, and put some image on the top for a header/banner?

Edit: I think I’m going to make several stylesheets, one for each of the layouts I want to test.

Do you think I should use the grid layout, or do something like what was said in the “Outside the Grid,” ALA article? Or should I try both?

Ok, I’ve finished the old blue layout to be exactly what I wanted for it, and made it so it had no markup in the HTML. Before, two images for the rounded corners of the header were actually images in the HTML, but now that is entirely CSS.

Now to make a new layout. Any suggestions on what it should be?