Sensual lady

dab42pat · #1 Jun 20th, 2007, 12:51

Hi

Can you take a look at my index page and pass on your opinion. I would appreciate it if you didnt venture off the home page as all the other pages are a mess as regards the HTML.

I am currently making the site dynamic using PHP/MYSQL.

THIS SITE DOES CONTAIN MILD ADULT MATERIAL.

Many thanks

VanessaJW · #2 Jun 20th, 2007, 20:09

I used to be an Ann Summers rep, so I'm well-qualified to review your site

I think the general look you've chosen is good, it's a gentle look rather than in-your-face smut which is good.

I couldn't work out what the brand of the products are - is Sensual Lady an actual brand?

Why tables and transitional doctype?

dab42pat · #3 Jun 20th, 2007, 20:37

Thanks for the review Vanessa.
this website is very similar to the wright brothers first flight.
It was only last night I managed to get rid of the 40+ validation errors. I knew there would be negative feedback on the use of tables which is one of the reasons I put it here, how would I get rid of them. I assume CSS is the way to go but how, any pointers.
When it goes dynamic I will reduce the pages from about 600 down to about 20 so with only 20 pages to change I think its time to get rid of the tables.

Thanks again.

VanessaJW · #4 Jun 20th, 2007, 20:56

Have a look in the 'Beginner resources' at Karinne's resources for learning how to use CSS for layout. You obviously care about about your code because you took the time to validate and correct your html errors, so the next step is to take the time to learn how to use CSS for layout. If you have any difficulties with it, you can always post specific questions and people will be be glad to help.

dab42pat · #5 Jun 20th, 2007, 21:21

Had a look at the resources you mentioned.
There is a lot of reading so I will post again when I get stuck (shouldnt take long).

Cheers.

dab42pat · #6 Jun 22nd, 2007, 12:16

Ok

Here is my first attempt at CSS http://www.sensuallady.co.uk/testcss.html

Please take a look and let me know what you think.

here is the css code.

Code: Select all

 
body {
 background-color:white;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:black;
 background-image: url(heart4.jpg);
 background-repeat: repeat;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}
a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
background-color: white}
 
h1 {
 font-family: "Palatino Linotype";
 font-size: 24px;
 font-style: italic;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #FF00FF;
 position: relative;
 visibility: visible;
 background-color: #FFFFFF;
 background-image: url(heart4.jpg);
}
 
h2 {
 font-family:"Palatino Linotype";
 font-size:18px;
 font-style: italic;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #FF99FF;
}
h3 {
 font-family:"Palatino Linotype";
 font-size:16px;
 font-style: italic;
 font-weight: bolder;
 font-variant: normal;
 text-transform: none;
 color: #FF99FF;
}
#leftcontent {
 position: absolute;
 left:10px;
 top:123px;
 width:220px;
 background-color: #FFFFFF;
 background-image: url(heart4.jpg);
 background-repeat: repeat;
 
}
a:link {
 font-family: "Palatino Linotype";
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #FF66FF;
}
a:visited {
 font-family: "Palatino Linotype";
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #FF33FF;
}
a:hover {
 font-family: "Palatino Linotype";
 font-size: 14px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #FF99FF;
}
 
#centercontent {
 top:107px;
 margin-left:219px;
 margin-right:219px;
 voice-family: "
\"
}
\"
"
;
 voice-family: inherit;
 margin-left:221px;
 margin-right:221px;
 background-color: white;
 background-image: url(heart4.jpg);
 background-repeat: repeat;
}
html>
body #centercontent {
 margin-left:221px;
 margin-right:221px;
 background-color: #FFFFFF;
 background-image: url(heart4.jpg);
 background-repeat: repeat;
}
#rightcontent {
 position: absolute;
 right:13px;
 top:123px;
 width:220px;
 background-color: #FFFFFF;
 background-image: url(heart4.jpg);
 background-repeat: repeat;
}
 
#banner {
 height:80px;
 border-top:0 solid;
 border-right:0 solid;
 border-left:0 solid;
 voice-family: "
\"
}
\"
"
;
 voice-family: inherit;
 height:79px;
 background-color: white;
 background-image: url(heart4.jpg);
 background-repeat: repeat;
}
link {
 font-family: "Palatino Linotype";
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #FF33FF;
}
 
html>
body #banner { height:79px;
}
p,h1,h2,h3 {
 margin:0px 10px 10px 10px;
 color: #000000;
}

if this is utter rubbish please let me know

thanks.

delusion · #7 Jun 22nd, 2007, 13:47

Could you use a different font? I don't have it installed on my pc, so I see the standard (times new roman) font..

Lchad · #8 Jun 22nd, 2007, 14:10

Ok.. here we go!
Things to work on:
Bring the line
Sensual Lady Collection

up to the top near the view basket.
The navigation is off centered. You might need more padding-right.

Add some spacing UNDER Bestsellers. It's too crowded.
All the top 100's top 20's, need to be centered. Those aren't very attractive either. Can they all be the same size?

GET rid of the W3C validation! One has a pink box around it anyway. You should have valid code if you are getting paid for this but it's unnecessary clutter.

All the directories ... listed in the center.. are they necessary?

I'm not sure how "sensual" mice hanging from hearts are? Is that something the owner provided?

Links at bottom of the page: Those links need to be realigned. They are stuck on the right margin.

The text on the homepage is one gigantic paragraph. NO ONE is going to read that. You need to add spacing between paragraphs, add bullets for or bold text or italics. Something to break up the monotony.

The pink used on the site is harsh. It makes the site look a little tacky. A pink such as #F986BA is easier on the eyese

Things I like:

The page background is pretty. Love the photography. Three column layout works well for this.

Hope this helps!

dab42pat · #9 Jun 22nd, 2007, 16:43

Hi Lchad

Thanks ever so much for the review but did you look at the testcss.html as that will eventually replace the main index page.
Many thanks

dab42pat

JustinStudios · #10 Jun 22nd, 2007, 16:57

Well the CSS code is extremely bloated. I cut it down a good bit so use this instead of the one you have now. But keep the one you have now and learn how you can make your code a lot shorter.

Code: Select all

/* CSS Document */
body {
 background: #FFFFFF url(heart4.jpg) repeat;
 font:12px Verdana, Arial, Helvetica, sans-serif;
 color:black;
 border-style: none;
}
a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
background-color: #FFFFFF}
 
h1 {
 font: italic 24px "Palatino Linotype";
 text-transform: none;
 color: #FF00FF;
 position: relative;
 visibility: visible;
 background: #FFFFFF url(heart4.jpg);
}
 
h2 {
 font: italic 18px "Palatino Linotype";
 text-transform: none;
 color: #FF99FF;
}
h3 {
 font: italic bolder 16px "Palatino Linotype";
 text-transform: none;
 color: #FF99FF;
}
#leftcontent {
 position: absolute;
 left:10px;
 top:123px;
 width:220px;
 background: #FFFFFF url(heart4.jpg) repeat;
}
a:link {
 font: 12px "Palatino Linotype";
 color: #FF66FF;
}
a:visited {
 font: 12px "Palatino Linotype";
 color: #FF33FF;
}
a:hover {
 font: 14px "Palatino Linotype";
 color: #FF99FF;
}
 
#centercontent {
 top:107px;
 margin: 0 219px 0 219px;
 voice-family: "
\"
}
\"
"
;
 voice-family: inherit; 
 margin: 0 221px 0 221px;
 background: #FFFFFF url(heart4.jpg) repeat;
}
html>
body #centercontent {
 margin: 0 221px 0 221px;
 background: #FFFFFF url(heart4.jpg) repeat;
}
#rightcontent {
 position: absolute;
 right:13px;
 top:123px;
 width:220px;
 background-color: #FFFFFF url(heart4.jpg) repeat;
}
 
#banner {
 height:80px;
 border:0 solid;
 voice-family: "
\"
}
\"
"
;
 voice-family: inherit;
 height:79px;
 background: #FFFFFF url(heart4.jpg) repeat;
}
link {
 font: 12px "Palatino Linotype";
 color: #FF33FF;
}
 
html>
body #banner { height:79px;
}
p,h1,h2,h3 {
 margin: 0px 10px 10px 10px;
 color: #000000;
}

Now I did this in like 5 minutes so all I did was edit what you had and I didn't completely cut it down nor look at the page to see if something was necessary, but I think you get the picture.

pa007 · #11 Jun 22nd, 2007, 18:12

The newer css version is much better. A lot cleaner and obviously it is the way to go. I like the general look of the site, there is a gentleness and a sensuality to it. It's a good look.

I do hate those logo's on the left hand side at the bottom. Do they have to be there. If there do then at least try and cut them down to only a few. They instantly make me think of spam sites or rubbish untrustworthy ones.

Good overall though and the newer version is much better.

Pete.

dab42pat · #12 Jun 23rd, 2007, 18:52

Thanks to everyone who commented. I will take everything onboard and try and make the site as professional as I possibly can using all your pointers.

This was the kind of critique I was hoping for and recieved from the best forum I have come across.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sensual lady	dab42pat	Free Web Site Critique	6	Jul 9th, 2007 22:32
Sensual lady	dab42pat	Free Web Site Critique	9	Jul 5th, 2007 00:30

		Webforumz.com > Main Forums > Design Your Website > Free Web Site Critique
Sensual lady