To help you with your “don’t let me make this mistake again”… I’m going to go through your page and give you a nice itemized list of the problems. This may re-iterate some of the above mentioned issues.
Warning, I’m very blunt – think of me as the Gordon Ramsey of web design.
First a simple content review.
-
Your content size without images/objects is larger than I’d expect the entire page (HTML+CSS+IMAGES+OBJECT+SCRIPTS) to be on such a simple layout.
-
With images it’s three times the upper limit I’d allow on a page.
-
You’ve got 1.7k of plaintext and seven content objects/images – so what exactly is that 11k of HTML doing? Given how little is on the page I’d say at least a quarter of your markup is bloat.
-
You want to impress people? Do not declare your fonts in your content areas in px, do not use color combinations that are effectively illegible to more than half the population (cyan on grey, grey on grey, etc, etc). You may want to research this thing called the “Web Content Accessibility Guidelines” – or pick up a copy of the old joint IBM/M$/Apple user interface guidelines. (though it’s been two decades since that was commonly available anywhere).
-
Your problem is flash – for some stupid animooted nonsense at the top of the page that’s more annoyance than useful. My advice, LOSE THE FLASH. Flash should be reserved for playing actual videos or embedding flash games, not for some stupid banner. You can file that right alongside auto-playing MIDI music, comic sans, and animated gif backgrounds.
-
No potential employer that actually knows anything about web devlelopment is going to be impressed with 42 validation errors. That means you don’t have HTML, you have gibberish.
… and that’s before we dig into the code. From a code perspective:
-
You might want to try writing using a MODERN RECOMMENDATION doctype, like XHTML 1.0 STRICT or HTML 4.01 STRICT instead of broadcasting to the world you are still in transition from 1997 to 1998. You’re not Quagmire, so you shouldn’t be caring if that tranny is pre or post-op.
-
You MAY wish to follow the rules of XHTML when using a XHTML doctype and actually bother CLOSING your tags and typing all your tags and attributes in lower case.
-
You may wish to consider kicking dreamweaver’s templating system to the curb, it causes more problems than it solves.
-
Your IE7 CC makes no sense since it’s closing an anchor that doesn’t even exist at that point in the code.
-
You should probably learn about CSS “media” types and bother using the MEDIA attribute in your markup.
-
You should learn what heading tags are and when/how to use them. Things like “you shouldn’t have more than one” – things like “a menu item is NOT the start of a content subsection, so why do you even have heading tags there?”… things like “don’t skip over numbers going down”. Lower order (higher numbered) heading tags in HTML 4/earlier (and by extension XHTML 1.0) mean "start of a subsection of the higher order (lower numbered) tag preceeding it… so if you have a H3 without a H2 before it, that makes NO SENSE… and if you made that first H3 a h2 so it made sense, you’d be saying it’s a subsection of “Downloads” – which would also make no sense.
-
The Title attribute should be used when you can’t fit meaningful text into your anchors, which typically means that if you have to use a title attribute, there’s something WRONG with the content of your menu anchors.
-
You’re using faulty image replacement techniques that don’t actually work for users browsing with images off… at which point why bother?
-
Tables for layout, what is this 2001? ESPECIALLY with the one TD for a table…
-
outdated attributes that have no business in modern markup – like ALIGN, HSPACE, etc… wow, and you used the CENTER tag too. That’s how you end up with the “what is this 1997” comment out of seasoned developers.
-
Id’s are supposed to be unique, as such you shouldn’t be trying to use them more than once. (@pNews for example)…
-
You seem to be including javascript for flash, but then have the non-scripted flash embed in use… If you’re gonna build a flashtard layout, pick one, not both.
-
Ah, that silly IE conditional table for a menu nonsense. Do yourself a favor, pitch that in the trash, build a normal CSS menu and then throw a behavior file at IE6- instead of wasting every browsers time on that extra markup regardless of if it’s being used or not.
-
Learn how to use the paragraph tag too. IF you use a double break inside a paragraph, you may have missed the point. If you have to say "align=“left” on each one of them, you may be relying on the WYSIWYG part of that dung-heap known as Dreamweaver.
-
You have overstuffed your keywords meta to the point it WILL be ignored. Most people think keywords is ignored anyways but if you limit yourself to 8 to 10 SINGLE WORDS that are repeated in the body of the document, keeping the total character count under 128 characters without saying the same words over and over again, it actually still makes an impact in Google and Bing. If the words used in it do not appear in your body text, you’ve missed the point of the tag.
Also, it’s called keywords, not keyphrases. Think of it as a word jumble – you don’t have to say "metal gear solid fill_in_the_blank twenty times. “metal, gear, solid” covers a third of what you lather, rinse, repeated.
-
Ease up on the div and classes. To quote Carlin “Not every ejaculation deserves a name” – or in your case not every tag needs a DIV around it or a class/ID on it. See #nav for example; UL is a perfectly good block level container.
-
I’d axe a lot of that scripting that doesn’t seem to be doing any… oh wait, that’s for an advert that isn’t actually showing here.
If I was writing that same basic page layout retaining the silly flash bits, the code would probably have ended up looking something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="Description"
content="Metal Gear Solid Walkthroughs. Articles, Videos, Easter Eggs, etc. Our walkthroughs are very detailed and even include information on the number of guards, where items are located, etc."
/>
<meta
name="Keywords"
content="metal,gear,solid,walkthroughs,hints,guides,videos,tutorials,maps,help,community"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut icon"
href="images/other images/more/favicon.ico"
/>
<title>
Metal Gear Solid Walkthroughs
</title>
</head><body>
<div id="pageWrapper">
<h1>
<a href="\\">
Metal Gear Solid Information
<span></span>
</a>
</h1>
<ul id="mainMenu>
<li>
<a href="index.php">Home</a>
</li><li>
<a href="category/news.php">News</a>
</li><li>
<a href="#">Walkthroughs</a>
<ul>
<li><a href="metalgearsolid/mgs1/intro.html">MGS1 Walkthroughs</a></li>
<li><a href="metalgearsolid/mgs2/intro.html">MGS2 Walkthroughs</a></li>
<li><a href="metalgearsolid/mgs3/intro.html">MGS3 Walkthroughs</a></li>
<li><a href="metalgearsolid/mgs4/intro.html">MGS4 Walkthroughs</a></li>
</ul>
</li><li>
<a href="#">Videos</a>
<ul>
<li><a href="metalgearsolid/mgs1/more/video.html">MGS1 Videos</a></li>
<li><a href="metalgearsolid/mgs2/more/video.html">MGS2 Videos</a></li>
<li><a href="metalgearsolid/mgs3/more/video.html">MGS3 Videos</a></li>
<li><a href="metalgearsolid/mgs4/more/video.html">MGS4 Videos</a></li>
</ul>
</li><li>
<a href="#">Hints</a>
<ul>
<li><a href="metalgearsolid/mgs1/more/hints.html">MGS1 Hints</a></li>
<li><a href="metalgearsolid/mgs2/more/hints.html">MGS2 Hints</a></li>
<li><a href="metalgearsolid/mgs3/more/hints.html">MGS3 Hints</a></li>
<li><a href="metalgearsolid/mgs4/more/hints.html">MGS4 Hints</a></li>
</ul>
</li><li>
<a href="downloads/downloads.php">Downloads</a>
</li><li class="last">
<a href="category/search.html">Search</a>
</li>
</ul>
<div id="columnWrapper">
<div id="contentWrapper"><div id="content">
<!--[if IE]>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="720" height="213"
id="homeFlash"
>
<![endif]-->
<!--[if !IE]>-->
<object
data="Flash/mgsslide.swf"
type="application/x-shockwave-flash"
width="720" height="213"
>
<!--<![endif]-->
<param name="movie" value="Flash/mgsslide.swf" />
<param name="quality" value="high" />
<param name="swfversion" value="6.0.65.0" />
<param name="wmode" value="transparent">
<param name="autoplay" value="true" />
<p>
Content on this page requires a newer version of Adobe Flash Player.
</p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player"
width="112" height="33"
/>
</a>
</object>
<ul class="pairButtons">
<li class="comment">
<a href="category/comment.php">
<strong>Comment<span><!-- image replatement --></span></strong><br />
Leave feedback for this site
</a>
</li>
<li class="affiliate">
<a href="category/affiliate.html">
<strong>Affiliate<span><!-- image replacement --></span></strong><br />
Check out these other sites or submit your own
</a>
</li>
</ul>
<div class="newsItem">
<h2>
<a href="category/newsarticle.php?record=14">
Snake Eater 3DS - This Winter
</a><br />
<small>Posted on: June 9, 2011</small>
</h2>
<img
src="http://desmond.imageshack.us/Himg819/scaled.php?server=819&filename=3dsp.jpg&res=gal"
class="leadingPlate"
/>
<p>
Metal Gear Solid 3: Snake Eater, will be released to the portable Nintendo 3DS this winter recognized as Snake Eater 3DS.
</p>
<a href="category/newsarticle.php?record=14" class="read more">
Read More
<span><!-- image replacement --></span>
</a>
<!-- .newsItem --></div>
<div class="newsItem">
<h2>
<a href="category/newsarticle.php?record=8">
Metal Gear Solid HD coming to PS3!
</a><br />
<small>Posted on: June 8th, 2011</small>
</h2>
<img
src="http://img710.imageshack.us/img710/5066/mgshd.jpg"
class="leadingPlate"
/>
<p>
The Metal Gear Solid Trilogy will be coming to the PS3 in HD, including the PSP game Peace Walker.
</p>
<a href="category/newsarticle.php?record=8" class="readMore">
Read More
<span><!-- image replacement --></span>
</a>
<!-- .newsItem --></div>
<div class="siteInfo">
<h2>Site Information</h2>
<img
src="Images/Other Images/Mgs2 Photos/m2 Soldier.png"
width="273" height="175"
alt="MGS2 Russian Soldier"
class="trailingPlate"
/>
<p>
<b>June 8th, 2011</b>: There's going to be some changes around here. Instead of a walk throughs only site, this will now be a news site too. Please don't mind the clutter, there is going to be construction over the next few days (or weeks).
</p><p>
<b>June 3rd, 2011</b>: Something terrible has happened to the comment box and has stopped working. It will be undergoing maintenance, however some of the comments may be lost.
</p><p>
Update: The comment box is now updated and functioning properly.
</p>
<!-- .siteInfo --></div>
<a href="category/newsarchive.php" class="archiveLink">
Old News
</a>
<!-- #content, #contentWrapper --></div>
<div id="sideBar">
<div id="latestSummaries">
<h2>
<a href="category/news.php">
Latest
<span><!-- image replacement --></span>
</a>
</h2>
<ul>
<li>
<a href="category/newsarticle.php?record=14">
Snake Eater 3DS - This Winter
</a>
</li><li>
<a href="category/newsarticle.php?record=8">
Metal Gear Solid HD coming to PS3!
</a>
</li><li class="last">
<a href="category/newsarticle.php?record=6">
Kojima Not Attending E3
</a>
</li>
</ul>
<!-- #latestSummaries --></div>
<div class="subSection">
<a href="http://www.youtube.com/louie540x">
<img src="Images/Buttons/yt.jpg" alt="Youtube Channel" />
</a>
<!-- .subSection --><?div>
<div class="subSection">
<a href="category/contact.php">
<img src="Images/Buttons/donate.jpg" alt="Donate to this site" />
</a>
<!-- .subSection --><?div>
</div>
<!-- #columnWrapper --></div>
<div id="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="category/sitemap.html">Site Map</a></li>
<li><a href="category/affiliate.html">Affiliate</a></li>
<li><a href="category/contact.php">Contact</a></li>
<li><a href="category/legal.html">Privacy Policy</a></li>
</ul>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Though again I’d swing an axe at the flash bit. I’d also consider stripping out most of the image replacements to either live with actual TEXT in those locations, or give CSS3 webfonts a good hard look. (though the filesizes could be a deal-breaker there).
Everything else you’re trying to do on that page belongs in your CSS.
