Thursday, June 11, 2009

Possible alternate design

8:46 PM / Web / Comments5 Comments

Web

I've been toying with a slightly different design for the site over the last couple of days, and have put up a sample for your perusal. It requires very little changes to the HTML code (the main menu was the only part that required any serious re-writing), with almost everything handled via the style sheet, so converting the entire site over to this alternate version would be an incredibly straightforward task.

While I'm actually pretty happy with the current design overall, there are, I think, some areas where it could be improved. The biggest issue for me is that it feels a bit cramped, something that the alternate design addresses by adding in more white space. It also clearly differentiates between the main column and the sidebar, by separating them and making one a different colour. In addition, it makes the title for each page more prominent (by separating it from the main body) and standardises the fonts, so that every item of text defaults to Helvetica (with Arial as a fallback), barring the Georgia "curly quote" at the start of each blockquote.

If you have the time, please take a look at the alternate design and let me know what you think. I could live with either, but have a slight preference for the alternate version, and could convert the whole site over to it without much hassle if there's a general consensus that it's better.

 
5 Comments

That alternate design is WAY better in my eyes. The only thing I see that I would change would be the line going under "Recent Posts". I think it would look better without it, and it saves some space to remove it.

Otherwise better readability, colors and overall feel. Nice work!

(Posted on Thursday, June 11, 2009 at 9:57 PM)

2. Anonymous said:

Yeah go with the alternate! :-)

(Posted on Friday, June 12, 2009 at 1:03 AM)

3. Author Profile Page Michael said:

Thanks for the feedback, guys. I'll probably end up going with the new design.

By the way, can any CSS/XHTML gurus suggest a way of achieving the effect I've gone for with the main menu that will actually validate? Currently, each menu button is a separate div, each of which is wrapped with an "a href" tag. Unfortunately, this doesn't validate. I can get it to validate by placing the link inside the div, but then the .png overlay doesn't work.

(Posted on Friday, June 12, 2009 at 9:44 AM)

4. FoxyMulder said:

The alternate design is more pleasing to the eye.

Forget about validation because although it's good to be 100% it's not as important these days with most people upgraded to newer browsers and yes i know you are fussy about this and would rather have the validation but seriously i think you will find most visitors don't even know about WC3.

Check out hundreds of sites out there and you will find most fail WC3 validation but work perfectly in the browser.

I myself spent many long days trying to find some add ons which would enable complete WC3 validation but decided it was not so important given the fact 99% of browsers recognise and convert issues so problems just aren't visible to the naked eye.

(Posted on Friday, June 12, 2009 at 11:36 AM)

You don't need to use divs for the menu buttons.
just wrap them as usual links but give them a class, <a class="menu" href="..."> and then you can style them by selecting "a.menu" and "a,menu:hover".
I'm a bit tired as it's late, but I think I would do it that way...

This link might be useful http://www.cssplay.co.uk/menus/tutorial.html

(Posted on Friday, June 12, 2009 at 10:57 PM)

 
To combat spam, commenting is automatically disabled on entries older than 30 days.

Did a comment you tried to post accidentally get eaten by the spam filter? It happens from time to time. I get upwards of 200 spam comments every day and unfortunately don't have the time to weed through all of them in case something genuine ended up there by mistake. If one of your posts gets incorrectly flagged as spam, email me at whiggles[at]ntlworld[dot]com and I'll do my best to retrieve it.