Opinions please

Trigger

Trigger

Trigger

Soldato
Joined
15 Dec 2004
Posts
3,819
Hi,

I've just redesinged my friends website from her old freewebs one and am looking for some opinions on it please. It isn't quite finished yet so some pages are still missing but I'm not quite sure I've got the design right. As you've probably guessed, I am not a web designer and it certainly isn't my strongest point so the coding isn't brilliant but I gave it a go however I just feel there is something missing :(

Would really appreciate some feedbaack :)

Thanks

Ben

EDIT: Just noticed in the code that some of my indenting has gone funny because i've used PHP Include() for the copyright notice and navigation panel :o
 
Last edited:
Looks good to me, nice and clean :)

A few suggestions:
  • Don't have two headers both saying FrozenKisses (maybe merge the top one into the bottom, large one.) I'd remove the "Welcome to" from the banner as well, but that's preference really.
  • Reduce the total banner's height to around 150px; it's taking up a lot of space that could be better use for content.
  • Bring the news up to the top. I wouldn't even notice it if I hadn't scrolled down.
  • Lose the date in the top right; it looks a bit out of place and isn't really necessary.
  • Make the footer text less prominent. It's not really supposed to grab attention, and distracts from the content. Also, consider changing the two images to text links, and put them on the same line as the rest of the footer, separated by a pipe maybe. As it is, they are a bit bulky for a footer.
  • Possibly make the navbar link text smaller, or change it to a font that is anti-aliased at that size (Trebuchet MS comes to mind)? I'm just being fussy here, ignore me if you want to :p
  • Make the navbar text stay the same size when when the mouse hovers over it; it's irritating when all the other links move to the side :p

Other than that, very nice :)
 
Last edited:
Thanks for the comments Will :)

Right, I've got rid of the date, made the banner height 180px and made both the navigation and footer text smaller. Also changed the nav font to the one you suggested :cool:

Not sure what you mean by merge the logos though :confused:

Looks much better with the adjustments you suggested though so thanks for that :D
 
Inquisitor said:
I just meant have one image rather than two, possibly taking the top one, and replacing the text in the bottom one with it.

Glad to help :)
Click to expand...

Ahh, I see- I'll give that a go tommorow when I've got more time to play with image editing :o

Is there any smaller Valid XHTML and Valid CSS images about that I can use?

Thanks again for the comments mate :)

Ben
 
Trigger said:
Is there any smaller Valid XHTML and Valid CSS images about that I can use?
Click to expand...

I'd go for text links tbh, the colours don't match the site and not many people pay much attention to whether your site is valid or not :)
 
iCraig said:
I'd go for text links tbh, the colours don't match the site and not many people pay much attention to whether your site is valid or not :)
Click to expand...
Agreed. As much as it makes you feel all fuzzy inside by flaunting those big XHTML/CSS compliancy images, most people don't actually know what it means :p
 
Inquisitor said:
Agreed. As much as it makes you feel all fuzzy inside by flaunting those big XHTML/CSS compliancy images, most people don't actually know what it means :p
Click to expand...

:o

Okay then, you win. Changed it now :) Anything else which I can improve upon then?

Thanks for the comments,

Ben
 
punky_munky said:
The navigation is too light. Took me a little while to spot it. Also, the main text should be a little darker.
Click to expand...

Done :) I've enlarged the navigation text to 13 pixels and made the main text a couple of shades darker :cool: Better?
 
Looks much better now :)

By the way, how did you get the padding between the bottom of the page and the bottom of the main page <div>? It's something I've tried but failed to do many times :(
 
Inquisitor said:
Looks much better now :)
Click to expand...

Thanks :)

Inquisitor said:
By the way, how did you get the padding between the bottom of the page and the bottom of the main page <div>? It's something I've tried but failed to do many times :(
Click to expand...

It's done in the CSS for the content <div> which is inside the main-container <div> by margins:

Code: 
#content
{
border: thin solid #CCCCCC;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 40px;
height: auto;
min-height: 100px;
}
 
Trigger said:
Thanks :)



It's done in the CSS for the content <div> which is inside the main-container <div> by margins:

Code: 
#content
{
border: thin solid #CCCCCC;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 40px;
height: auto;
min-height: 100px;
}
Click to expand...
Hmm, I'm sure I've tried doing it that way in the past :confused: Oh well :p

Just something to note: Safari and IE do not support the min-height or max-height CSS properties.
 
A few more suggestions:

  • You should really use an unordered list for your navigation. It won't make any difference visually, but it's semantically a lot better than a series of anchor tags.
  • Ditch p.news-title and use header tags (<h2>, or <h3> depending on the structure of your website; technically speaking the logo would be best placed as the background image to a top-level header) instead. Make lipbullet.jpg a background image to this header, and apply some left padding instead of using the defunct &nbsp; spacers.
  • Again, ditch p.sep. The separator image is not contextual, and users visiting the web page without style information (for whatever reason) won't want to see that. Enclose each news item in a <div> tag, apply some bottom padding and set the separator image as the background (background: url("path/to/image/sep2.jpg") bottom center no-repeat #fff;).

Here's an example of a news item's HTML:

Code: 
<div class="news-item">
  <h2>New Website Launched</h2>
		
  <p>The New Frozen Kisses Website has now been launched.  The website has been redesigned to accomodate all screen resolutions and a broad range of browsers to give the viewer a more accessible website on the whole.  Lots of new features have now also been implemented like the member's area, important date calender and the inclusion both the <a class="news" href="forums.php?go=main">forums</a> and <a class="news" href="shop.php">online shop</a>.  There are now lots of online design examples as well now which can be found in the <a class="news" href="designs.php">designs</a> section of this website.  Up to date information on the Frozen Kisses team can be found in the <a class="news" href="info.php">info</a> section along with other insights as to what goes into making some of the products which Frozen Kisses sell.  Should you wish to contact Frozen Kisses, you can do so in the <a class="news" href="contact.php">contact</a> section or alternitavley, use our <a class="news" href="forums.php?go=main">forums</a>.</p>

  <p>The Forums are a great place to communicate with Frozen Kisses or to just chat with other people.  It is powered by Invision PowerBoard&copy;&reg; and has a wide selection of user editable features.</p>
		
  <p><img class="forumimgnews" src="img/forum-1.jpg" alt="Frozen Kisses Forum" /><img class="forumimgnews" src="img/forum-2.jpg" alt="Frozen Kisses Forum" /></p>
		
  <p><a class="news" href="forums.php?go=register">Registration</a> and use of the Frozen Kisses Forums is completley free of charge to anybody wishing to use it but we do ask that you ensure that politeness is maintained at all times and as ever, we reserve the right to delete comments which we deem inappropriate.</p>
		
  <p>Our Online Shopping feature, powered by osCommerce, has a wide range of our products on display avaliable for purchase in the United Kingdom.  This software is simplicity in itself- just sign up for a free shopping account with us and then you will be able to add products to your basket and pay in a variety of secure ways.</p>
		
  <p>If you have any comments about our website or business in general, we would appreciate your input which you get give to us by the <a class="news" href="contact.php">contact</a> section of the website. Thank you.</p>
</div>
CSS:
Code: 
div.news-item {
  background: url("path/to/image/sep2.jpg") bottom center no-repeat #fff;
  paddding-bottom: 23px; /* You may want to change this to make it look better */
}

h2 {
  background: url("path/to/image/lipbullet.jpg") top left no-repeat #fff;
  color: #0066CC;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  padding: 0 5px 0 30px;
}

div.news-item p {
  color: #696969;
  font-family: verdana;
  font-size: 11px;
  font-weight: normal;
  padding: 0 20px;
}
That makes much more sense :)
 
I've just tried using unordered lists and all it did was muck the layout up completley so I think i'll leave it as it is- I'm not prepared to go round changing all of my coding just so the code appears better, when in reality, it gives no different functionality :) Will try and do the news section now...

Any more opinions?

Thanks

Ben
 
Bloo_Fish said:
Your 404 page error404.php isnt sending out a real 404

Try

PHP: 
<?php
header("HTTP/1.0 404 Not Found");
?>
Click to expand...

But if I put that in it I just get a 'header cannot be modified' error at the top of the page :confused:
 
Trigger said:
But if I put that in it I just get a 'header cannot be modified' error at the top of the page :confused:
Click to expand...

Make sure it's called before anything is outputted to the browser - whitespace, echo/print calls, anything.
 
You must log in or register to reply here.
Back
Top Bottom