www.mushroomtraffic.com What do you guys think? Any/All opinions are welcome. On the technical side of things, I'm having some parsing errors but I'm too lazy to fix them. I know I'm missing alot of alt tags, but should that mess up the parsing that much?
The first time I looked at it (the page above) it was wrong now it's fixed. It's good. I'm not 100% on your banner though, the colour mainly. It's just my opinion so don't take it to heart etc, i'm quite often wrong.
Fairly clean design, but the code is a train wreck. Inlined presentation, non-semantic markup... This is a draft right, not a deployment copy? Like a great many pages - there is more of 1997 to this than 2007. For a page talking about ranking higher, the code does nothing to promote that... Though talking about "Web 2.0" is the fastest way to make ANYONE who actually knows anything about teh intarweb to not take you seriously. Lemme guess - Frontpage? No, no... Netscape Composer? First thing you need to do is get ALL of that CSS the hell out of the HTML - it doesn't GO THERE. THEN, go back through and rewrite the HTML with semantic markup - with NO concern for how it is going to look. Appearance does not, in a modern design, BELONG in the HTML. AT ALL. Basically, the HTML should probably be something like: <!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=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title>template</title> </head><body> <div id="container"> <!-- empty spans below are image sandbags, do not remove --> <h1> MushroomTraffic <span></span> </h1> <ul id="mainMenu"> <li class="home"><a href="index.html">Home<span></span></a></li> <li class="buy"><a href="buy.html">Buy<span></span></a></li> <li class="about"><a href="about.html">About<span></span></a></li> <li class="soon"><a href="soon.html">soon<span></span></a></li> </ul> <div id="content"> <div class="quarterSection"> <h2>Advertise Smart</h2> <img src="brain.png" alt="brain" /> <p> The days of banner ads are over! People simply ignore them, but now there is a new way to advertise, social bookmarking. </p> </div> <div class="quarterSection"> <h2>Target Traffic</h2> <img src="target.png" alt="Target Traffic" /> <p> Use the power of Web 2.0 to your advantage and build up your links in niche specific areas on popular bookmarking sites. </p> </div> <div class="quarterSection"> <h2>Rank Higher</h2> <img src="rank.png" alt="Rank" /> <p> Our link building will catapult your site to the top of search results, enabling you to get consistent natural traffic that lasts. </p> </div> <div class="quarterSection"> <a href="buy.html"> <img src="offer.gif" alt="Special Offer" /> </a> </div> <div class="standOutBox"> <h2>Unlimited Stumbles -- </h2> One of our most popular services, unlimited stumbles prove to be the best investment for a webmaster seeking traffic in today's world. Stumbles boost traffic immensly, especially the ones that come from our system. They are 100% honest and generally show up in 30 minutes or so (this is how long it takes for our stumblers to look over your site and stumble it). The only limit is 100 stumbles per URL, but you can do as many URL's as you'd like! (<a href="buy.html">read more...</a>) </div> </div> <div id="footer"> © 2008 MushroomTraffic <img src="logo.gif" alt="MushroomTraffic Logo" /> </div> <!-- #container --></div> </body></html> Code (markup): THEN you hang all your graphics and appearance on that markup in the external CSS file.
If only everybody felt this way about making websites the internet would be so much better for all who use it and there would be so much less naf spammy websites out there as it would take a reasonable amount of effort to actually make a site. As for the OP, yeah the design side aint bad something is not quite right though, it just dont feel right. I also dont like fixed width pages that are so small its so annoying when I am veiwing a site in a 19" monitor @ 1280x1024 for the site to only fill 50% of my screen, which considering thats a very common size screen now is a joke. Even worse is when I am using my 40" LCD tv @ 1920x1080 and the site is a tiny little thing. Coding for the site as already mentioned could be so much better, also not liking the idea of the site at all, abusing stumble upon in this way is so annoying.
I made it in notepad, simmer down, this is just to get the look down. And I know I have parsing errors, its not exactly what I care about right now.
Then your approach - like a lot of 'designers' is backwards... and your original post kind of nonsensical. You asked the question "that shouldn't mess up the parsing" - INVALID MARKUP, SLOPPY MARKUP and DATED CODING PRACTICES can not only mess up the 'parsing', but the rendering, make styling more difficult than need be, saddle you with bad markup that needs a total rewrite before deployment ANYWAYS, etc, etc, etc... You will find yourself repeatedly trying to debug/evaluate cross-browser issues, rewriting the same HTML over and over - it's more effort than it's worth to develop that way. If it's not valid markup (and you had a LOT more wrong than just some missing alt tags) you may be relying on the error handling of _ flavor of the month browser _ meaning your code isn't future-proof, and will break the moment you go to test in _ OTHER flavor of the month browser _ START with the content of the page, mark it up using minimalist SEMANTIC tags, toss in a few sandbags for the handful of spots images will be replaced, then bend the layout to your will with CSS. Here, try this on for size. I took your layout, dropped it into one of my standard templates: http://battletech.hopto.org/for_others/tbh/template.html As with all my examples the directory: http://battletech.hopto.org/for_others/tbh is unlocked so you can grab the gooey bits and pieces. I remastered some of the images - the header image needed to be swithed to .gif or .jpg for color matching in IE (since IE applies gamma to .png JUST to make them hard to use), some others were more efficient in other formats. I combined the menu down to a single image using the 'sliding background' technique, and threw a mouseover effect on it while I was in there. Image replacement techniques make the page not only browsable images off, but also gives search engines something to look at. The fonts I switched to dynamic instead of fixed, in a slightly larger size so that large font/120dpi users aren't left out in the cold. In fixed sizes 12px is accessability minimums, and I get twitchy below 14px - dynamic fonts in roughly equivalent size resizes the content for everyone - and the content is the most important part of ANY layout. Validates XHTML 1.0 Strict, CSS validates, tested working fine in IE 5.5, 6 & 7, Firefox, Opera and Safari. Hope this helps.