SITE REVIEW: very very personal. So it is.

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Well, here you go. Feel free to rip the site apart, but considering it was under a days work i'd appreciate any sort of hints and tips you might have.

I'm deciding whether to use this as a new layout for my personal website... clicky or whether to stick with the current layout. The current look has been gradually built on over the last couple of years and has never really been good for showing some of my photographic work so i figured i could go for a more photograph friendly site that shows on each page.

Now, i am aware there may be a few minor problems in IE compared to Firefox. I have just recently tidied up the display of it in Internet Explorer but some of the features you see on Firefox don't work in IE purely down to how crap Internet Explorer really is. If however you have any problems or suggestions with the site then i would love to hear from you.

Colour schemes etc etc need changing? different idea on the site navagation? (which by the way is going to be in the little boxes on the right of the screen) or perhaps just a complete redesign?

I'm aware there are some coding issues i would like tidying up, but when you consider this was pretty much knocked together over the course of 4-5 hours i'm relatively pleased with myself. It took me years to get my current site to look like it does and that was with a hell of a lot of help from Ozzuers, infact i was a complete noob at this just under 2 years ago, so you'll have to excuse me if there are a few minor errors that are standing out.

The sooner you reply with the feedback the more likely you are going to be seeing the changes. At the moment i should really be packing up as i'm leaving the country for at least a year and my internet might be limited in the future, so come Tuesday i won't be around to to the updates. Don't let this put you off adding the feedback though, as soon as i log on it'll be dealt with and i will appreciate everything you do do.

Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • kc0tma
  • o|||||||o
  • Web Master
  • User avatar
  • Posts: 3318
  • Loc: Trout Creek, MT

Post 3+ Months Ago

I would agree about IE being crap. But I cannot sincerely review your new site because it won't load, message in firefox says the server cannot be found.
  • Boke
  • Student
  • Student
  • Boke
  • Posts: 88
  • Loc: Hiroshima, Japan

Post 3+ Months Ago

same with me , it wouldn't load in firefox
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Oops. I must have logged off last night shortly after removing the page accidently. I was copying the page but it seemed to completely rid the original at the same time.

You shouldn't have any problems loading up the site now.

Thanks for bringing this to my attention. Much appreciated.
  • hawash
  • Newbie
  • Newbie
  • hawash
  • Posts: 6

Post 3+ Months Ago

you must care more for navigation
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I appreciate the feedback, but your info means nothing to me. How about you elaborate? perhaps suggest something?
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

For a photography site it doesnt look bad, but you might think about softening up the edges of your banner. Also depending on what your taking picutres of the banner might seem a little bright, you will only really be able to tell when you get some pictures up. You might looking some sort of gallery script (I really like this one http://www.unknownworlds.com/ns2/gallery/ ). There are some others ones out there that will put a fade ont he rest of your site. That way it blocks out any that might distract from the picture.

Not bad for a few hours of work though :)
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6251
  • Loc: Seattle, WA

Post 3+ Months Ago

You knew this was coming, so I'll just get it out of the way first. ;)

I really like the transparent content area. It's a shame that IE doesn't feel the need to display it.

Your top header area (the red and blue) seems too... plain in my opinion. I like simple design, but my first thought upon seeing it was that it looked like it was created in MSPaint. You might want to consider something small to give it more of a completed feel, such as a light bevel or shadow.

Your background image doesn't reach the bottom of the box with the red border. This happens in both IE and Firefox. I'm not sure if this was intentional or not but it looks sort of off.

I like the idea of the boxes for your navigaion; I'm interesting in seeing how that turns out when it's done.

I think your new design is off to a good start, and for only a few hours of work, I must say I'm impressed.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Some good comments from both of you. Thank you.

I think once i spend more time on it it will start to take place. The coding isn't as tidy as it is on my current look, it isn't running how i'd like but to change it all i need to spend more time on it. Time i don't really have at the moment.

I'm not sure what i hoped to achieve from asking for peoples critique, however what i have read has been helpful and i appreciate that. I guess i was just looking to see if the site was loading up okay on everyones browsers and it wasn't just mine.

Regarding the image in the backdrop, at the moment i've not got it displaying how i'd like it to. Ideally it would be good to have it spanning from the whole size of the box, but i failed to find info on how to do that on the tinterweb. I'm sure it's simple enough if i just thought about it :lol:

Cheers!

Any other comments is much appreciated. That's unless you are spamming your own blog on this topic as i see already has happened here.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Here are my comments/suggestions/complaints... all in one post... :)

It, like spork pointed out, is not valid, but has only 7 errors being XHTML Strict with UTF at 8. Here is the complete valid Strict HTML code.

Quote:
<!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" xml:lang="en" lang="en">
<head>
<title>Craig Campbell Online</title>
<link rel="stylesheet" href="jca.css" />
</head>
<body>
<div class="content">
<img id="banner" src="craiglogo.gif" alt="Craig Campbell Online" />
<div class="nav_wrap">
<div class="nav_cube">

<div style="top: 30px; left: 0px;"><a href="#" class="white_cube">&nbsp;</a></div>
<div style="top: 30px; left: 80px;"><a href="#" class="white_cube">&nbsp;</a></div>
<div style="top: 110px; left: 0px;"><a href="#" class="blue_cube">&nbsp;</a></div>

<div style="top: 110px; left: 80px;"><a href="#" class="blue_cube">&nbsp;</a></div>
<div style="top: 190px; left: 0px;"><a href="#" class="white_cube">&nbsp;</a></div>
<div style="top: 190px; left: 80px;"><a href="#" class="white_cube">&nbsp;</a></div>
<div style="top: 280px; left: 0px;"><a href="#" class="blue_cube">&nbsp;</a></div>
<div style="top: 280px; left: 80px;"><a href="#" class="blue_cube">&nbsp;</a></div>
</div>
</div>
<div class="text">
<h1>Contact</h1>
<p>You should now be able to view this website. It is only one page in size, but it's more of a template.</p>
<p>Thanks for viewing</p>

</div>
<p>test</p>
</div>
</body>
</html>


and the new invalid CSS*

Quote:
body {
font-size: 12px;
margin: 0;
padding: 0;
font-family: Arial;
background-color: #000000;
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
font-size: 14px;
border-bottom: 1px solid #ffffff;
}

.content {
position: absolute;
width: 70%;
height: auto;
top: 15%;
left: 15%;
bottom: 15%;
right: 15%;
border: 1px solid #CC0001;
background-image: url('images/exposure.jpg');
background-repeat: no-repeat;
background-position: center;
}

a:link {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

a:active {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

a:visited {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}

.text {
color: #ffffff;
position: absolute;
top: 30%;
left: 5%;
text-align: justify;
padding-left: 1em;
padding-right: 1em;
margin-left: 1em;
background-color: #4a4a4a;
opacity: .85;
filter: alpha(opacity=85);
width: 60%;
height: 60%;
border: 1px solid #cc0000;
}

.nav_cube {
position: absolute;
top: 1px;
right: 0px;
color: #ffffff;
width: 154px;
height: 155px;
}

.nav_cube div {
position: absolute;
width: 46px;
height: 46px;
border: 1px solid #666666;
}
.nav_wrap {
position: static;
margin-bottom: 30em;
}

.nav_cube div a {
display: block;
width: 100%;
height: 100%;
}

.nav_cube div a:link, .nav_cube div a:visited {
text-decoration: none;
}

.nav_cube div a:hover {

}

a.white_cube { background-color: #ffffff; }
a.white_cube:link, a.white_cube:visited {
opacity: .40;
filter: alpha(opacity=40);
}

a.blue_cube { background-color: #14008b; }
a.blue_cube:link, a.blue_cube:visited {
opacity: .75;
filter: alpha(opacity=75);
}

a.green_cube { background-color: #335c33; }
a.green_cube:link, a.green_cube:visited {
opacity: .80;
filter: alpha(opacity=80);
}

a.white_cube:hover, a.blue_cube:hover, a.green_cube:hover {
opacity: 1;
filter: alpha(opacity=1);
}


In that version of the CSS and HTML, the opacity works in both Firefox and IE but the height of the div (text) is smaller than what it should be. In Firefox .text shows correctly.

The reason that I changed the attributes to the tag "<div>" from "..id=" "..." to "...class=" "..." is because that way it would be XHTML Strict compliant and it still works just how it should be. I just spent about 2 hours playing with positions and adding new divs and finally got it to work in both browsers satisfactorily (to me). I put my screen resolution to 800x600 and it was kind of messed up in Firefox and IE showed it the best in that screen resolution, but I doubt you have to worry about it.

Obviously, I liked your site template. I hope that you use it. Why do I like it? What proves it? I like it because it is simple. It is XHTML Strict compliant. Well, now it is anyway. And I worked on your template for about 2+ hours. I did it because I wanted to. The following would be more of a review than some of my "donations" if you will :)

PLUS: CSS template
MINUS: Not a valid file
IDEA: Make it a valid file

PLUS: Great site, over all.
MINUS: The banner's bottom right edge shows pixels.
IDEA: Smooth out the banners curved corner.

PLUS: Nice clean site layout
MINUS: Your Personal? e-mail is on the banner.
IDEA: If that e-mail is personal, the one you use with your friends, I advice you to make an e-mail account that is made just for the site.

I don't really have any complaints against your site design. Keep it up, and I hope you use this design.

The opacity on the DIV "text" wouldn't work in IE because it can't read " opacity: .80 " it needs the filter(opacity=80) " thing in there.



* The CSS is not valid according to W3 because of opacity. W3 operantly says that it is an invalid code. It doesn't matter if it is filter(opacity=80) or opacity: .80 . W3 CSS validator says that it is invalid.

Post Information

  • Total Posts in this topic: 10 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 9 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.