Hello, I'm moderately new to Web Development, and I've progressed my skills while working on my one and only site that's been up for about 8 months now. I've been wanting to do a redesign, but I'd like to know people's thoughts on it currently and what I should change in particular. Here is the URL: http://www.kovacicsminecraft.com Keep in mind, it's a highly specific niche, and most of the traffic comes from the software up for download. The software essentially modifies a currently existing game (Minecraft). Also, the site itself gets about 550K pages views a month. The ads are essential (I'm aware many of you hate ads), but it's really the only reason I keep the site going. Anyway, any suggestions / criticisms are more than welcome. Remember, I'm moderately new at Web Design, so please try to stifle any unhelpful insults that might arise. Thanks, - Kovacic
as a newbie, this is a good start (Y) visit www.cssdesignawards.com for inspiration, and take your website to the next level
Hello I think you're gonna have to redesign & recode. The ads are annoying, but there are better ways to put it. Your site is heavy. Your design is out of place, alignment and spacing goes haywire. I'm sure someone will comment on your codes. It's all over the floor, man. I wouldn't dare to dig it. However, good effort and practice good code writing.
The biggest problem is the ads -- NOT that you have advertisements (though that too is a problem) but because most of them seem to say "download here" or "download now" with the fact they are advertisements being fine print (in illegible color contrasts). That just makes people think "scam" right out of the gate. You might want to try a little less scummy an advertiser than Adchoices. (especially since one out of every three pageloads seems to make Avast throw a wobbly on them) Design-wise the fixed width layout is too small for my desktop, too big for my netbook... the use of px metric fonts leaves me diving for the zoom on desktop when I shouldn't have to -- AND the layout breaks on zoom in everything but Opera. The image rotating banner is not only an annoying space-waster, it's a hefty chunk of why you're stuck on a fixed width layout in the first place! It also has the oddball trend I'm seeing lately of hiding all the useful links in the footer where nobody will find them instead of what should be the primary navigation, the main menu... since that main menu is illegible color contrast black on brown, and is images for text with no images off fallbacks doesn't bode well ...and of course there's the complete lack of graceful degradation when images are disabled, since no image replacement methods or even semantic markup was used in the sites construction. Which brings us to under the hood where it's a DIV heavy mess. The 52 validation errors and 48 warnings pretty much meaning you don't have HTML, you have gibberish. Normally that number is 'middle of the road', but since it's reporting that high on a tranny document - that almost takes intentional effort. Looking at the code itself problems do abound -- transitional document so it's in "transition" from 1997 to 1998 coding practices, bunch of meta nothing actually uses, the keywords meta is overstuffed into being ignored/useless... (should be 7 to 8 WORDS that exist inside BODY.... not phrases, not sentences. WORDS! That's it's bloody name after all!) But it gets really bad down in your BODY. Attributes like ALIGN and TARGET that have no business on any website written after 1998, extra DIV for nothing around perfectly good existing tags, empty anchors, presentational images in the markup, no H1 for all those H2 to be subsections of, HR breaking the H2's relationship to the content, extra classes for nothing, javascript doing CSS' job, static style inlined in the markup (they really need to deprecate STYLE as an attribute and obsolete it as a tag), WAY too much absolute positioning of things that shouldn't be, paragraphs around non-paragraph elements with no semantic relationships (on what quite possibly could be tabular data)... it's goes on and on. Now, don't take that too hard -- you're still cleaner than a LOT of experienced developers, but you've apparently been learning from decade and a half out of date sources (which is to say 90%+ of what's out there). Lemme explain just a couple things I mentioned that are 'easy'... One is the 'classes for nothing' and the 'javascript doing CSS' job' -- see this bit here: <ul id="navBar"> <li id="navHome" class="navGlow" onmouseover="this.css('background-image','url(images/nav/navSpritesSmallG.png)');"><a href="home.php"></a></li> <li id="navMp" class="navGlow"><a href="modpack.php"></a></li> <li id="navExt" class="navGlow"><a href="extensions.php"></a></li> <li id="navFor" class="navGlow"><a href="redirect.php?url=forum"></a></li> <li id="navSup" class="navGlow"><a href="support.php"></a></li> </ul> Code (markup): If every element is getting the SAME class inside a parent with a perfectly good ID, NONE of them need classes (no matter what the re-re's at turdpress might tell you). All those ".navGlow" can be axed, and in the CSS just access them as "#navBar li" Likewise that onmouseover -- unneccessary javascript. This in your CSS: #navHome:hover { background-image:url(images/nav/navSpritesSmallG.png); } Code (markup): Would be functionally identical! It may also save bandwidth when people visit more than one page on your site. Another point about that section though, without actual content on those anchors, search engines, screen readers, and anything else not using your for desktop resolution screen only layout is left out in the cold. Text is a first class citizen on the web which is why you should have text in those -- anything other than text? Not so much. Then there's this mess: <div style="position:absolute; top:0; right:50px; background-color:#fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); width:250px; height:40px;"> <a href="user.php"><div id="login_avatar" style="width:40px; height:40px; float:left; margin:0; background-image: url('http://www.kovacicsminecraft.com/projectcode/views/img/avatar_standard.jpg'); background-repeat:no-repeat; background-size:40px 40px;"> </div></a> <div style="width: 140px; height: 40px; float:left; margin:0; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; border:0; height:100%; line-height: 40px; padding-left:20px; padding-right: 20px; white-space: nowrap; overflow: hidden; text-align:left;"> Hey, guest! <a href="login.php" style="font-size:12px;">Login</a> or <a href="http://www.kovacicsminecraft.com/phpbb/ucp.php?mode=register" style="font-size:12px;">register</a>? </div> </div> </div> </div> </div> Code (markup): Don't know how you're even keeping what DIV are closed and what aren't straight there (from the validation errors, apparantly you're not!) but far worse than that is all the pointless inlined style, and absolute positioning of something that shouldn't be. Worse it's invalid markup with anchors around DIV (inline level tags cannot wrap block-level... and no display:block doesn't change a tags LEVEL) That's one giant mess of code for what (in the markup at least) shouldn't be anything more than: <div id="userbar"> <a href="user.php"> <img src="/projectcode/views/img/avatar_standard.jpg" alt="guest avatar" /> </a> Hey, guest! <a href="login.php">Login</a> or <a href="/phpbb/ucp.php?mode=register">register</a>? <!-- #userBar --></div> Code (markup): There is NO point in making that a background image -- since that's CONTENT and CONTENT like an avatar should an IMG. EVERYTHING else being done there should be in the CSS... well, not true... I'd have that after the H1 (logo) and before the menu... float or negative margin the H1, float this right, clear right and float right on the menu. Inside #userbar set the image to vertical-align:top and the text to vertical-align:middle, and let it automatically size itself... which would be a fraction the CSS you were throwing at it. The page is filled with things like that. So... it could be worse, you've not been doing this long but I hope you've at least HEARD of some of this? If not, well... much to learn.
Thanks! Very helpful I guess I have a lot work to do. Thank you again, you picked apart my code better than I could have ever hoped!