View Full Version : Photography Website, Please Review

03-13-2009, 03:59 PM

I am doing a website for a friend who is a photographer. Can people honestly review and tell me what they think? She loves it but the content area I think needs to be spiced up a little. The light gray area. But I like the links.


P.S. I know there is 15 validation errors, but those remaining ones I am not sure how to fix. :thumbsup:

03-13-2009, 04:33 PM
First impressions...

Well it looks like a nightmare in IE7 (might be related to the validation errors). I'd say don't use the blurry photoshopped image for the picture of (presumably Jessika?) in the body. The blurry treatment of the header image can work as a stylistic choice though.

I'd make the page width stick with the width of the header image. Right now if I increase my browser window size the gray part extends beyond the width of the logo which looks a bit tacky. If you want a fluid layout width instead -- which it kind of looks like you do -- I'd say you should blend the header image into the background that will extend beyond it (shouldn't be hard to do with semi-transparent PNG version of this image).

I agree that the gray area is a bit bland but without any more content it's hard to say what it needs.

03-13-2009, 04:34 PM
The validation errors are all very easy to fix, instead of using FONT style your text with CSS, add ALT to the image and </body /> isn't that hard to fix either ;)

I'd change the photo in main content area, it doesn't look too good as it is. Something a bit bigger [higher], and more professional would be better for a photographer's site. Also move the text more to the center and down a bit, maybe trying to reach equal margins on the left and right side.

Not sure about those little separators in the menu, a minor detail but they don't fit too well there IMHO.

03-13-2009, 04:44 PM
Also, your validation errors are due to a missing </div> tag for the footer, the lack of an "alt" attribute for an image (jess.jpg), the incorrect use of the "/>" closing tag on the </body> tag at the end of the page, and finally the use of five <font> tags, which are not allowed in HXTML strict. You need to use CSS to achieve your styling goals for text or at the very least you should use the "style" attribute on the div or paragraph you want to change the font for.

The code block below fixes all issues EXCEPT for the <font> tags...

<!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">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Jessikas Photography</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="cool.css" rel="stylesheet" type="text/css" />
<div id="header">
<div id="logo">
<h1><a href="#"><font color="black">Jessikas Photography</font></a></h1>


<div id="page">
<div id="menu">
<li><a href="#"><font color="black">Home</font></a></li>
<li><a href="#"><font color="black">About Me</font></a></li>
<li><a href="#"><font color="black">Portfolio</font></a></li>
<li><a href="#"><font color="black">Store</font></a></li>
<li><a href="#"><font color="black">Contact</font></a></li>
<div id="content">

<div class="post vline">

Hi I am Jessika, welcome to my website. I have been doing photography for 4 years, and have over 100 available photos. Below is some things about me.<br /><br />
I attended <b>Rockridge Artist School</b> in Orlando, Florida 2001 - 2002. Then I attended <b>McIntire Art School</b> 2003 - 2004 and received my art degree.<br /><br />
I do freelance photography and looking to expand into commercial photography. Feel free to take the time to browse my portfolio and contact me.<br /><br />


<div id="sidebar">
<img src="images/jess.jpg" alt="Jessika" />

<!-- end sidebar -->
<!-- end page -->
<div id="footer">
<p id="legal">&copy;2009 Jessika Photography. All Rights Reserved. | Designed by <b>Success Web Designs</b></p>

As a side note, when running the HTML validator (http://validator.w3.org/) go to the "More Options" section and be sure to check the boxes for "Show Source" and "Verbose Output" to make debugging MUCH easier. The verbose output gives more explanation to why the code is wrong and what some possible solutions are. Displaying the source code allows you to see exactly what line they are talking about.

03-13-2009, 04:48 PM
Oh awesome I didn't know the show source would actually show me the correct things to change. Ok let me tweak it and post back later on today. Thanks!

03-13-2009, 06:13 PM
This document was successfully checked as XHTML 1.0 Strict!

Alright got that part fixed. Now to move on to the other stuff!!

03-13-2009, 08:47 PM
OK, still very scary in IE7.

Try this for starters:
#page {
/*padding-left: 15px;*/
width: 1024px;
margin: 0 auto;
/*background: #f00;*/

#content {

#sidebar {

03-13-2009, 11:27 PM
With that it ruins it in FF3. It's really hard to find something that works in both.
I use FF2 but she uses FF3 and it was messed up badly, so I had to tweak it to how it is.