I've had this site for about 15months now, it gets 3,000 - 4,500 uniques a month but basically no clicks. Any suggestions~? http://www.gervaisworld.com/
The design looks too blocky.. there needs to be more rounded corners in your layout. Also, it would look nicer if you added a rollover to your buttons on the left.
3,000-4,500 uniques is bupkis, I'd suspect a lack of traffic finding your site... Aesthetics aside: <h1 class="style100">Welcome</h1> Descriptive. Search engines usually use the H1 field to describe the site... and what's with all the numbered styles - must make the CSS a stone cold bitch - do I even want to KNOW what WYSIWYG vomited up that code? <h1>Navigation</h1> It's also not a good or sensible idea to use H1 more than once on a page. The H1 should pretty much be the same as your title field, perhaps with the name of the sub-page inside it... case in point you just told the search engines that your rather large navigation menu is more important that most of the page content. You've got inlined CSS pushing your content down the document, and it's redundant - you've got the same style twice. <br /> <span class="style99">Welcome to The Ultimate Ricky Gervais Fansite. Gervaisworld is pretty much the only genuine Ricky Gervais fansite which truly explores his previous, his current and upcoming work, has a vast range of media and info and is regularly updated with quality news and content. There are also sections on Ricky's co writer and co director Steve Merchant and their bald tennis ball mate Karl Pilkington.<br /> <br /> Explore, enjoy and embrace the site. Join the</span> <span class="style99"><a href="http://www.gervaisworld.com/forum" target="_new">forum</a> and pass Gervaisworld on to as many Ricky Gervais fans as you see fit and if you know someone who hasn't heard of Ricky, Steve Merchant or even K-man Karl Pilkington, Gervaisworld is a great place to introduce them to! </span><br /> Code (markup): Span? Do those look like paragraphs? Yes, yes they do. That's what a paragraph is for - that you are applying the same style to every one of those spans in a block makes it just more text search engines are going to ignore. And it has layout issues on large font machines - likely because you actually believed it when people told you: font-size: 62.5%; /* reset 1EM to 10px */ actually works - on my machine 62.5% = 12.5px - which means IE is running 12px, Firefox is running 13px, and Opera or Safari could go either way depending on the number of lines... or at least firefox would if it paid the least bit of attention to the system metric on %/em fonts. Aesthetically - it looks like 'just another blog' - of course I was sitting here wondering what was with the big open white space pushing the content down the screen - lo and behold it's an advert Opera, and any decent adblocker would prevent people from ever even seeing in the first place.
deathshadow I don't know what you're harping on about. Firstly it's not a blog it's a website you moron. A blog is a web journal that is frequently updated. This is a fansite with a gallery, forum, audio and video archive, news and more and everything there was coded and designed by me. It's not a blog. Secondly I don't know what you mean I've got inlined CSS pushing the content down, I have purposely padded the top of the content area to push the content down the page a little more to allow room for the div which is holding the ad in place. N please don't patrionise me you invalid I know alot about SEO and am quite aware search engines use H1 tags to denote what content the page may be holding. The Title tags are far more important. I know my fair share about staying at the top of search engines mate, which is why I might add I am #...1 in Google for ''ricky gervais fansite''.
Wow, can't take criticism, has to go straight for the personal attack. CLASS. I said it LOOKS like a blog template - and it does. I did not say it's blog, I said it LOOKS like a blog... Which it does. It's got nothing to make it stand out... in your source you have the same CSS inlined - TWICE... setting the colors of the anchors globally, something that SHOULD be done in that css.css file you're loading... You've got two and a half K of HTML before you even get to your content! Most search engines give up at the two k mark. body { a:link { invalid CSS Hell, Failed validation, 39 errors - ring a bell? Of course, I should have known and noticed it sooner - levelone.dwt Dreamweaver Tempate... Dreamweaver - it's a professional grade tool. RIIIGHT. GAH, Dreamweaver..... As big a blight as Frontpage, just people are blind to it's shortcomings because it's not a Microsoft product. and remove the word 'fansite' and where are you? Exact match for your title comes in #1? I'm shocked... Oh wait, no I'm not. Search for just the comic's name and you're at #189... beaten out by sub-pages of BrooklynVegan and someones flickr page. -- edit -- and I see a reason dialup users probably go nowhere near your page - 319k of images for the homepage alone - YIKES. 344k total, in 17 files... that's somewhere around a minute and a half for the front page to load.
Sorry, personal attack? no stating that it is not a blog but a website is not personal that's a blatent fact. The insult was just icing on the cake. What you actually said was ''looks like just another blog'' 'just another' being key there, implying it's of a group of blogs, being part of the blog arena. Oh so you think you immedietly rank #1 just for matching the title with the keyword you want to rank for? you moron. Look at all the other fansites beneath me, some have been up longer and have the same keyword in title and have higher page ranks. Yeh... that might be to do with the fact that Gervais has been in comedy since about 1998 and his personal site alone has over 100,000 members so it would be abit hard to beat nearly a decade of perfectly SEO'd documentations, news reports, profiles, keyword crazy sites with a 15month yr old fansite. Idiot. Also, that's just in Google, in Yahoo I'm ranked #16 for Ricky Gervais and #18 in AltaVista.
You guys need to chill. I am a pretty avid fan of Gervais, so I will comment on your design. Too many links on one spot. I can't tell what is important and what isn't. Try to categorize your links and possibly add a few rollover sub-links. Even the video page seems kind of confusing to sort through. I would stress NBC's The Office as being a part of your site because that is where many people know him from now. Put a picture of Carell and Gervais somewhere on the front page. Thanks for the 11 O'clock links. I enjoyed them.
NewshotDCB thanks for the constructive critism as aposed to deathshadows patronising babel. About the NBC version of The Office. I was thinking about that but Gervais is only ex.producer on that, he's really not involved much that's why I didn't really do anything on that. But I might add a video section on it as I get quite alot of US visitors so I guess it would be a good idea. Cheers for the suggestions.
Ok, we got off on the wrong foot here, let's try this again. When I make these lists of issues it's because I'm willing to help you fix them... So let's go with a peace offering. http://battletech.hopto.org/for_others/Jon2k6/images Versions of the images on your home page saved with some encoding and optimization. The originals totalled 254,581 bytes, these total 37,285 bytes... In other words it cuts about a minute off dialup users load times for your page... there is a hint of artifacting, but no 'major' degredations. The other changes and optimizations I'm talking about would mean better cross browser support, easier styling of elements, and lower maintennance... Though in terms of the HTML and CSS it means giving Dreamweaver the axe. Interested?
deathshadow cheers but no, I can code without Dreamweaver obviously but I like to use it, it's a decent program and helps keeps things abit more organised when working.
See for me, it just makes more work, not less - usually cleaning up things like: <span class="style99"><br /> </span> <span class="style99"> Code (markup): or this: <!-- body { a:link { color: #000000; } a:visited { color: #000000; } a:active { color: #000000; } a:hover { color: #94C258; } --> </style> <!-- InstanceBeginEditable name="head" --> <style type="text/css"> <!-- a:link { color: #000000; } a:visited { color: #000000; } a:active { color: #000000; } a:hover { color: #94C258; } .style99 {font-size: small} .style100 {font-family: Arial, Helvetica, sans-serif} body,td,th { color: #000000; } .style113 {color: #FF0000; font-size: small; } .style115 {color: #FF0000; font-size: x-small; } .style118 {color: #FF0000; font-size: small; } .style118 {color: #FF0000; font-size: small; } --> Code (markup): Which is what I was talking about with the 'doubled' CSS declarations inlined... and the first body CSS being opened and never closed - for stuff that shouldn't be inlined in the HTML in the first place. It also 'enables' you to take 'shortcuts' like: </table> <br /> <br /> <h2>Latest Media </h2> <br /> <h3>Ricky Gervais on Desert Island Discs - Sunday 24th of June 2007 </h3> Code (markup): Which is enough to get you laughed out of more 'zealous' web coding forums. (again, this is what containers and padding are for)... Hang on, I'm gonna take a stab at converting your page to how I'd write it so you can see the difference code-wise I'm talking about.
Ok, here we go... This should only take a couple minutes. I'll be assuming we know enough to close all tags we open - frankly if you use consistant and well laid out linefeeds and indenting, avoiding linewraps whereever possible we can get nice clean code and not forget to close anything. I always start with the following as my baseline: <!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"><head> <title>Baseline Template</title> <link href="screen.css" rel="stylesheet" type="text/css" /> </head><body> </body></html> Code (markup): First we'll move over and review your metadata. You know, I would suggest offing all the references to 'fansite' - nobody intentionally searches for that term, and it's just not something you want to be 'associated' with even if it is the correct term. Even so, this part is well formed and really needs little revision. I'm not 'wild' about UTF-8, but we can work with it. So we're at the page body - the key in this section is to use minimal markup to group elements by type with MEANINGFUL id's and classnames. "Class0033" doesn't cut it here. Just as the tags should say what they are, the classes and ID's should also say what it is they contain just to make life easier. The big key is to use as little markup as possible and avoid inlining ANY presentation. Fixed width design, so we should put it in a container so we can make IE5.x play 'nice' <div id="container"> So... first up is the logo. I always put a H1 with a image replacement here, so that's what we'll do. For the text, we'll do the site title, a break, the local page name, then a blank span which will become our image. <h1>The Ultimate Ricky Gervais Fansite<br />Home<span></span></h1> ... and since it's SEO, we are to the content... so we'll give that a wrapper, then plug in our google advertisement in a nice little classed div. <div id="content"> <div class="gvert_horizontal"> <script type="text/javascript"><!-- google_ad_client="pub-2617828379348300"; google_ad_width=468; google_ad_height=60; google_ad_format="468x60_as"; google_ad_type="image"; //2007-06-26: GW top ad google_ad_channel="4482506943"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> Code (markup): Now is you're 'WELCOME' header and it's text. Since this is all one section unto itself, we'll group these elements in a container div, again with a nice little class. <div class="welcome"> <h2>Welcome</h2> <p> Welcome to The Ultimate Ricky Gervais Fansite. Gervaisworld is pretty much the only genuine Ricky Gervais fansite which truly explores his previous, his current and upcoming work, has a vast range of media and info and is regularly updated with quality news and content. There are also sections on Ricky's co writer and co director Steve Merchant and their bald tennis ball mate Karl Pilkington. </p><p> Explore, enjoy and embrace the site. Join the <a href="http://www.gervaisworld.com/forum">forum</a> and pass Gervaisworld on to as many Ricky Gervais fans as you see fit and if you know someone who hasn't heard of Ricky, Steve Merchant or even K-man Karl Pilkington, Gervaisworld is a great place to introduce them to! </p> </div> Code (markup): You'll notice we marked up the paragraphs - as paragraphs. This is where your various WYSIWYGS, even dreamweaver, drop the medicine ball on your foot making it HARDER to deal with the code - especially since almost every time you edit it just gets worse and worse on the buggy bloat. Next up is your two news boxes - since this news section is a group of elements, it too gets a container. It is a sibling content-wise to welcome, so it's header is a H2. <div id="news"> <h2>Latest news...</h2> Code (markup): Now, these elements COULD be done tableless, but I'm not 100% sure it's worth dinking about with floats or positioning to do since we're likely already inside a float... We'll just use the same table format you did - the difference is we'll be inlining NO presentation on the tables which are just going to get classes, we'll be using NO breaks for spacing, and we'll be using paragraphs instead of spans to mark text sections... and above all else, use as few classes as possible. I'm seeing one title without an anchor, and some with - it might be nice to be able to style them the same way - so let's wrap the content of the ones without links in spans so we can apply the exact same padding/styling without resorting to more classes. <table class="news_box"> <tr> <td class="news_image"> <img src="images/BAFTA_opt.jpg" width="130" height="130" alt="BAFTA" /> </td> <td> <h3><span>BAFTA No. 7 for Ricky</span></h3> <div class="date">29th of May 07</div> <p> Both Ricky Gervais and Stephen Merchant were in the running for this year's comedy performance BAFTA. In the end it was Gervais who took the glory, making it his seventh BAFTA, accepting the award via a live feed from New York. </p> </td> </tr> </table> <table class="news_box"> <tr> <td class="news_image"> <img src="images/newyorkpost.jpg" width="130" height="130" alt="New York Post" /> </td> <td> <h3> <a href="http://www.nypost.com/seven/05212007/entertainment/low_key_brit_funnyman_pushes_comic_envelope_entertainment_frank_scheck.htm" >So what did New York think of Ricky?</a> </h3> <div class="date">28th of May 07</div> <p> See what the American pres thought of Ricky's sell out performance at Madison square in New York... </p> </td> </tr> </table> Code (markup): and finally the right positioned "All News" link... after which we close "News" <div class="footer"> <a href="ricky-gervais-news.html">ALL NEWS...</a> </div> </div> Code (markup): Site Updates is almost identical code-wise, the only difference being we'll give it's section an id of "site_updates" - we'll re-use the news_box class here for the subsections. (We can skip the code example for this - see the full link below) Next up is "Latest Media" - This could be done much more simply than the sections above, but we should probably style them much the same so we'll categorize the sections the same way... the whole section in an ID, the 'items' in their own box, and we'll wrap the content in a DIV to allow us to position and style an area around them... it's also the last of the content so we'd close that as well. <div id="latest_media"> <h2>Latest Media </h2> <div class="media_box"> <h3>Ricky Gervais on Desert Island Discs - Sunday 24th of June 2007</h3> <div class="date">25th of June 07</div> <div class="media"> <a href="desertislanddiscs.html"> <img src="images/did_banner.jpg" width="416" height="77" alt=""/> </a> </div> </div> <div class="media_box"> <h3>Ricky Gervais on 20 Years of The Simpsons</h3> <div class="date">25th of June 07</div> <div class="media"> <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/xozlh3FP-ys"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/xozlh3FP-ys" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350" ></embed> </object> </div> </div> </div> </div> Code (markup): Now for the sidebar. Your original code here has some major issues - you have a H1 inside the UL before the first LI (you can't do that), you are running the poll script before you close the UL and have a break in there too... NONE of that is valid HTML. That said at least you used a list for the menu. Instead of wrapping the menu in a container we'll just apply the #menu ID to the UL itself, moving all the invalid elements out of there... The 'Navigation' Header in general should probably get forty whacks, people these days know what a navigation menu is, you don't have to label it... on top of which a header right before the menu like that, especially a H1 marks it as important on deep searches (Y!, MSN) as all your body content... So we'll just not do that. <div id="sidebar"> <ul id="menu"> <li class="current"><a href="index.html" title="Home" class="style72">Home</a></li> <li><a href="ricky-gervais-news.html" title="Ricky Gervais news">News</a></li> <li><a href="products.html" title="Ricky Gervais products">Products</a></li> <li><a href="ricky-gervais-audio.html" title="Ricky Gervais audio">Audio</a></li> <li><a href="ricky-gervais-videos.html" title="Ricky Gervais videos">Videos</a></li> <li><a href="/gallery" title="Ricky Gervais pictures">Gallery</a></li> <li><a href="rickygervais_avatars.html" title="Ricky Gervais avatars">Avatars</a></li> <li><a href="ricky-gervais-biography.html" title="Ricky Gervais biography">Biography</a></li> <li><a href="gervaisfilmography.html" title="Ricky Gervais filmography">Filmography</a></li> <li><a href="trivia.html" title="Ricky Gervais trivia">Trivia</a></li> <li><a href="#" title="Info and media on Ricky Gervais' and Stephen Merchant's TV work">TV work</a></li> <li><a href="#" title="Info and media on Ricky's three stand-ups">Stand-up</a></li> <li><a href="seona-dancing.html" title="Seona Dancing">Seona Dancing</a></li> <li><a href="#" title="RobinInce.Gervaisworld.com">Robin Ince</a></li> <li><a href="#" title="KarlPilkington.Gervaisworld.com - Coming soon!">Karl Pilkington</a></li> <li><a href="#" title="StephenMerchant.Gervaisworld.com - Coming soon!">Stephen Merchant</a></li> <li><a href="contact-gervaisworld.html" title="Contact Gervaisworld.com">Contact</a></li> <li><a href="gervaisworld-links.html" title="Ricky Gervais links">Links</a></li> <li><a href="http://www.gervaisworld.com/forum" title="Ricky Gervais fan forum">Forum</a></li> <li><a href="support.html" title="Support Gervaisworld and Ricky Gervais">Support</a></li> <li><a href="donate.html" title="Donate to Gervaisworld.com">Donate</a></li> </ul> <script src="http://www.poll4you.com/showpoll.php?id=3981" type="text/javascript"></script> Code (markup): You'll also noticed I took an axe to the target's... it's impolite to force that behavior on the user - if they want to open a link in a new window, they can choose to do so - never FORCE the user to do so. (that's WHY it was dropped from the strict specifications in the first place!) I also assigned a class="current" to 'home', since that's the page we're on. It's usually a good idea to visually style the users current location on the menu differently, 'just so they know'. Hot product does get a header, and styling... and being a set of sibling markup, we'll wrap them in a DIV with a class. <div class="hot_product"> <h2>Hot Product!</h2> <a href="http://www.anrdoezrs.net/click-2408296-10280697?url=http%3A%2F%2Fwww.shop-com.co.uk%2Fop%2F%7ERicky_Gervais_Live_Animal_Politics-prod-31445569%3Fsourceid%3D56&cjsku=40888693"> <img src="http://shop.com.edgesuite.net/ccimg.shop.com/210000/212900/212988/Products/31445569.jpg" alt="Ricky Gervais - Live - Animal/ Politics" /> </a> </div> Code (markup): and finishing this colmun off, the google vertical google adverts. <div id="gvert_vertical"> <script type="text/javascript"><!-- google_ad_client="pub-2617828379348300"; google_ad_width=120; google_ad_height=600; google_ad_format="120x600_as"; google_ad_type="text_image"; //2007-06-26: GW side ads google_ad_channel="5145680779"; google_color_border="FFFFFF"; google_color_bg="FFFFFF"; google_color_link="0000FF"; google_color_text="000000"; google_color_url="000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> </div> </div> Code (markup): The footer - it's so incredibly simple an item, yet you've got two div's, a break and an inline style... at most you need a div and a id. <div id="footer"> Copyright © Gervaisworld.com - All rights reserved </div> </div> Code (markup): That's it, that is all the HTML you need for that layout... and it also lets you go even fancier on the styles if so desired. http://battletech.hopto.org/for_others/Jon2k6/bare.html The full code is here, and would validate XHTML 1.0 strict except for the flash embed - which there's no pretty way to actually do and have work cross-browser. Doesn't look like much without the CSS, but once I get some work on my own stuff done today, I'll run an example of that up the flagpole. Basically we've shaved 2k off of it, and that's WITHOUT once resorting to a wysiwyg - and the code should now be easier to maintain WITHOUT needing such a tool... and can not only be styled identical to what you already have, should be versatile enough to add all sorts of visual styles to the various elements - which I will do when we get to the CSS. Now mind you, when doing the CSS we may end up having to tweak here or there, but we shouldn't really go over the top changing the HTML after this point.
Alright, the CSS. Stylistically the original page has the problem of most everything being justified left and the feeling of inconsistant margins and dividers. Let's see if we can do something about that. I always start my CSS with: * { margin:0; padding:0; } table { border-collapse:collapse; } img { border:none; } p { margin-bottom:1em; } Code (markup): Zero all margins to simplify cross-browser layout, make table behavior consistant without that cellpadding/cellspacing/border nonsense, make images not display borders, then since we zero'd the margins get paragraphs behaving like they should again. Anything else that needs margins/padding we can specify when we get to it. Body - 90% font, 1.4em line-height (I just like how that looks), and a screen friendly font... background color and image, and the text-align to center it in IE 5.x - I insert this between the universal selector and the table declaration because my rule is elements go in the order they first appear on the page. body { font:normal 90%/140% arial,helvetica,sans-serif; text-align:center; /* IE 5 fix */ background:#AC3 url(images/background.png); } Code (markup): NORMALLY I don't declare the anchor colors globally, but looking at this layout methinks we're best off just getting it out of the way. a { color:#060; } a:visited { color:#576; } a:active, a:hover { color:#000; } Code (markup): A little different from yours, intentionally so... these states are more apparant and accessable. Ok, next up is the container. You seem to be using an 800px wide... so non-800px friendly - not a big deal in this day and age... centered. We'll want to switch everything back to text-align:left after the IE 5.x centering trick we did in the body, you're using a white background for most of the content so we'll set that here, and of course your 1px black border. width:800px; margin:0px auto; text-align:left; /* return to normal after fixing IE 5 */ background:#FFF; border:solid #000; border-width:0px 1px; Code (markup): That brings us to the header H1. We've got two lines of text and a 96 px image, so let's go with a 40px font, 48px line-height... align the text center and give it some styling, and forget not the 1px bottom border. We'll tell it to nowrap so the heights don't get screwy, likewise an overflow:hidden will help with that. h1 { height:96px; font:40px/48px arial,helvetica,sans-serif; text-align:center; /* just in case */ overflow:hidden; white-space:nowrap; color:#FFF; background:#572; border-bottom:1px solid #000; } Code (markup): Now for the image - classic 'ride up' image replacement... set the empty span we put in there to display:block, set the height, position:relative so it ends up atop the H1 text, negative margin-top rides it up over our two lines, and of course call the image itself. h1 span { display:block; height:96px; position:relative; margin-top:-96px; background:url(images/logo.jpg) top left no-repeat; } Code (markup): Content column. On your original I find the width of your side column a little narrow, so lets' make our content area 640px wide with 8px of padding on all sides except the left - then later we'll give the sidebar a 8px all around padding so there's 8px separating them... of course this will float:right. #content { width:640px; padding:8px 8px 8px 0px; float:right; } Code (markup): Next up the google advertisement. Set the width, let's center it - it looks nicer centered. .gvert_horizontal { width:468px; margin:0px auto; } Code (markup): Welcome text - normally I'd style all content to have boxes - but I think you hit it on the head with not styling this section with borders or background-colors. It has a 'open inviting' feel to it. Since it's our first H2, let's style that here as well. h2 { font:bold 160%/110% arial,helvetica,sans-serif; } .welcome h2 { margin-bottom:0.2em; } Code (markup): Our existing font and paragraph settings look good, so we'll leave those be for the rest of .welcome... bringing us to #news Since #news, #site_updates and #latest_media are all pretty much the same type containers we'll mass style those together. This section unlike the welcome text could really use some clear boxes and division... so let's give it a dark green border to match your green 'outside the content' theming, with a light green background. We'll give all of them a 1em bottom margin to space them apart evenly. #news, #site_updates, #latest_media { background:#EFD; border:1px solid #352; margin-bottom:1em; } Code (markup): All three sections also have H2's that should probably look much the same. To break things up and tie your outside theme together with the inner one, how about we recycle the background and give it a black color. #news h2, #site_updates h2, #latest_media h2 { padding:0.1em 8px; color:#000; background:#AC3 url(images/background.png); } Code (markup): Now for the individual subboxes. These too need some margins to space them out, 8px almost always looks good for that. We'll once again use a dark green border, but we'll give it a white background because they will have content in them. Again we'll style .news_box and .media_box identical getting both at once. .news_box, .media_box { margin:8px; background:#FFF; border:1px solid #352; } Code (markup): .news_box is a table, so to make positioning simple let's set all TD's under .news_box tables to valign="top" .news_box td { vertical-align:top; } Code (markup): Now for the TD with the image in it. Set the width the same, give it some padding, and let's give it a dark background. Let's also make the image display:block so browsers don't try to interpret any carraige returns around it as inline content resulting in funky padding... .news_box .news_image { width:130px; padding:4px; background:#684; } .news_box .news_image img { display:block; } Code (markup): Each of these ALSO has a header, in this case a H3. We put spans in place alongside anchors which is where we'll apply our colors. To really break things up let's go high-hog and use the same dark green background on these as well. We'll also apply the color and paddings to the media_box h3's directly. On the subject of padding - it would be nice to put the date on the same line as the subject without resorting to another table, making the table more complex, or using two floats... to prepeare for this we'll add a right side padding of 10.25em - from experience I know that 10.05 em in most fonts and sizes will fit a full date, so we'll pad that plus an extra 0.2em for a bit of padding between the date and title. Top and bottom we'll eyeball off our font size since we're using dynamic fonts, and use EM for reasons which will be apparant when we style .date, but for margin-left we'll use our same 8px to make lining up our title with the content easy. .news_box h3, .media_box h3 { font:bold 110%/150% arial,helvetica,sans-serif; } .media_box h3, .news_box h3 span, .news_box h3 a { display:block; padding:0.2em 10.25em 0.2em 8px; color:#FFF; background:#684; } Code (markup): If you place the font inside the H3, you either have to adjust your math for the default H3 behavior, or list it twice - either way it's simpler to just go for the H3's directly as above. Now, let's give them a mouseover effect while in here. .news_box h3 a:active, .news_box h3 a:hover { color:#DFB; background-color:#462; } Code (markup): Now for the date - we padded enough room to force titles to wordwrap, letting us move the date up into position... how do we manage that? Well, if we set the font-size the same, give it a total line-height equal to our previous line-height and the padding, then give it a negative margin-top our date rides up over the title... float it to the right, give it some right padding, and consider the job done. .news_box .date, .media_box .date { font:bold 110%/190% arial,helvetica,sans-serif; float:right; color:#FFF; padding-right:0.5em; position:relative; margin-top:-1.9em; } Code (markup): Now I know what you are thinking - why not just do .date? Listing them this way means if we want a date somewhere else, we can style it different without giving it an absurdly long name - it also means if in the future some values are shared, we can split it three ways. Also, why the float and not a text-align? if we made the box 100% width with a text-align and rode it up over the content, you could never click on links in the H3... Our content for .news_box is most always going to be paragraphs of text, so let's just give these a nice easy 8px margin... and let's also clear that float so they don't ride up. .news_box p { clear:right; margin:8px; } Code (markup): Then we have that .footer in #news, let's style one for #site_updates as well just incase you want to put one there in the future. #news .footer, #site_updates .footer { text-align:right; padding-right:0.5em; } Code (markup): That almost finishes off all three boxes - the only thing left is the .media class for the content of #media_box. It too needs a clear after the date, and in this case we cant center them with text-align because they are that wierd cousin to inline-block. Gives us a odd bottom padding on them, but a padding-top of 8px can make that 'even out' fairly quick. .media { clear:right; text-align:center; padding-top:8px; } Code (markup): Which finishes off the content area, on to the sidebar. We gave ourselves (640px + 8px = 648. 800-648=152px) 152 pixels for the side column... Minus 8 pixels padding on each side that's 136px, there's our width. If we float this one the opposite direction, then don't specify a right padding just as we didn't specify a left padding on content, we can avoid all those pesky IE double margin float bugs (and the consequent hacks!) BECAUSE we are using a fixed px width for the sidebar, we will use px fonts so that large font machines do not end up with broken layouts at default zoom. This means IE cannot resize them ALSO breaking the layout, and FF will act like the 'special' (as in olympics) it is on font sizing... Anyone who REALLY cares about page zoom should probably be on IE7 or Opera by now anyhow. #sidebar { width:136px; padding:8px 0px 8px 8px; float:left; } Code (markup): The menu is fairly straightforward. Tell it no list-style, set the anchors to block. If we set borders everywhere around #menu except the bottom, then set bottom-border on the anchor, we get our nice even 1px borders between with no doubling. We need to specify out height in the anchor the same as our line-height to make IE 5.x play nice... the rest of it is just styling and color. While here, we'll do the mouse-overs and style the .current one differently. I chose much higher contrast for these effects as the grey you were using was so low contrast I couldn't even see it on my laptop, and could only just make it out on my desktop. #menu a:active, #menu a:hover { color:#FFF; background:#352; } #menu li.current a { color:#000; background-color:#FFF; } #menu li.current a:active, #menu li.current a:hover { color:#482; background-color:#FFF; } Code (markup): Next up is the javascripted poll. This uses a LOT of inlined styling - thankfully CSS trumps html properties, and external stylesheet trumps inline CSS... We'll override the width of #border1 to make it fit, and give it some borders as well as a bottom margin to pad it out the same as the rest of our content. Then we give the content area a white background, style the top and bottom sections with another green tying it into the theme... a margin-bottom on the question moves the poll radiobuttons down so it's not flush, and some styling on the inputs makes them MUCH more attractive. If we apply a negative top-margin of 1EM to the Vote button's container we can get rid of that absurdly large gap between choices and vote, then we style the submit button to override our previous margins and paddings on the inputs, and set the width to something attractive. We'll style the "Poll4You" link in brighter colors so we can see it on the dark background. Finally we'll swap all the fonts to PX - including the inlined 'font' declaration - I really have to question the wisdom of them hardcoding pt sized fonts inside a px width container... and I especially enjoyed the text at the bottom having the class 'toptext' and the big mess of utter nonsense CSS in the table declaration - the poll code is a bit #DDD. #border1 { /* poll */ width:134px; border:solid #462; border-width:0px 1px; margin-bottom:8px; } #topbg { background:#FFF !important; } #divquestion, #toptext2 { padding:8px; font:bold 14px/16px arial,helvetica,sans-serif !important; background:#462; } #toptext2 font { font:bold 14px/16px arial,helvetica,sans-serif !important; } #divquestion { margin-bottom:8px; } #pollbg td div input { margin-left:8px; margin-right:4px; vertical-align:middle; } #resultslink3 { margin-top:-1em; margin-bottom:8px; } #vb input { margin:0 !important; width:100px; padding:2px 0 !important; } #toptext2 a { color:#EFC; } #toptext2 a:active, #toptext2 a:hover { color:#CFA; } Code (markup): Excuse the glossing over that quickly, but reverse engineering the script output consumed more time than I usually like. I included the 'hot product' you originally had as well so we can see styling it. This one's simple in that it's just a container with a H2 and inline elements inside it. colors, border, centering, and we'll apply a 5px margin-bottom to the H2 to distance the image for a semi-even border. .hot_product { text-align:center; border:1px solid #684; background-color:#EFD; margin-bottom:1em; } .hot_product h2 { color:#EFD; background:#684; font:bold 100%/150% arial,helvetica,sans-serif; margin-bottom:5px; } Code (markup): The vertical google ad looks fine as it is, so we don't even need to mess with it... leaving just the footer. Single div, just clear the floats, align the text center, give it some top/bottom padding, set the height equal to the line-height, and make sure the whole thing adds up to the 39px. ... and there it is, how I'd have coded your home page - the process outlined in these posts is exactly how I build every page - without once touching a wysiwyg. A full live version is at: http://battletech.hopto.org/for_others/Jon2k6/screen.css Best viewed with: http://battletech.hopto.org/for_others/Jon2k6/template.html As with all my examples, the directory: http://battletech.hopto.org/for_others/Jon2k6 is unlocked for grabbing the 'bits and pieces'. Validates XHTML 1.0 strict if you delete the embedded flash, works flawless in IE 6&7, Opera, Safari and FF, works 'good enough' in IE 5.5 and 5.2 (the header dissapears in 5.2, the google ad isn't centered in 5.5) If you don't want all that fancy styling, just drop all the border and color declarations for .news_box and .media_box. an example of that is here: http://battletech.hopto.org/for_others/Jon2k6/screen_reduced.css http://battletech.hopto.org/for_others/Jon2k6/template_reduced.html So, final results: Your original: HTML: 11k CSS: 5.1k Images: 274k This rewrite: HTML: 9k CSS: 4.1k with full styling, 3.9 without Images: 50k There's a method to my madness.