14 replies [Last post]
Jezzer
Jezzer's picture
Offline
newbie
UK
Last seen: 8 years 21 weeks ago
UK
Timezone: GMT+1
Joined: 2010-01-02
Posts: 6
Points: 7

Could you check out my site and suggest any improvements, specifically regarding any CSS coding issues.

www.aqua-spas.com

Thx

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes kill the bloody flashing

Yes kill the bloody flashing banner Angry or put a warning to possible epilepsy sufferers Smile

Immediate thought was please increase body text size and increase it's contrast; anyone with less than 20/20 vision is going to struggle. Text never looks correct left to run right up to it's parent edge, your body copy runs right up to the flashing banner and to the right edge, you need at least a 1em horizontal padding.

All in all I think you need to start considering all users and accounting for those with some form of disadvantage.

The flashing banner is a worry and I would think about slowing it right down or simply leaving it static.

Lastly why on earth have you brought a table based layout to this forum for a site check, have you not lurked at all? if you had you would realise it's not going to curry favour with many of us here.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jezzer
Jezzer's picture
Offline
newbie
UK
Last seen: 8 years 21 weeks ago
UK
Timezone: GMT+1
Joined: 2010-01-02
Posts: 6
Points: 7

Thank you for taking your

Thank you for taking your time reviewing the site Hugo.

Yes I also HATE the banner, the site owner wanted it, but agree it needs toning down.

Body text now increased with some horizontal padding.

Ye will lose the tables at some stage.

Thx

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Text is better however I

Text is better however I would still take it down a notch in brightness, so it stands out with better contrast against the background.

Can't profess to knowing what pulse rate triggers fits, but the interval on that banner feels to me very close to being a dangerous rate, can it not be slowed down further? interval increased? Explain to client that it could be cause for concern and quote them pertinent passage from WCAG

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

.

I have to agree with Hugo here...the ONLY message on that page is the flashing thing which is distracting enough to prevent me trying to read anything else. Not that I could...there's far too much information crammed on the page for me to sort out whether I even want to know more about this company.

No whitespace in a wash of unreadable pale text - I'm not interested in the flashing deal so I'm out of there in 2 seconds flat. That's the time you have to capture someone's attention...2-3 seconds.

What does the local competition's web page look like? Chances are this is sending them even more sales. Sorry but this is one of the least appealing web sites I've seen in a looooong time Sad

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

1. doesnt validate 2. should

1. doesnt validate

2. should use strict vs transitional DTD

3. table-based layouts are bad.

4. the h1 should be your logo. research image replacement techniques. h1 should also link back to home.

5. The background gradient is choppy. should be smooth and sexy.

6. Your header has too much going on. tone it down, alot.

7. loose the flashing green and red badge. too much contrast gave me a headache.

8. This site looks like an infomercial with all the left-side images, and those in the footer too. get rid of all that crap. makes the place look unprofessional.

9. everything needs margin work. it all looks cramped and forced together.

10. there are many paragraphs on the home page. do you really thing the user is going to read all that? they will not. I'd trim off 80% off that text.

11. site needs more line-height. I usually use 1.5.

12. text needs to be larger and needs more contrast

13. the search form should appear at the top somewhere, not hidden below the fold.

14. whats up with the service and repair page? those colors have to go!

15. on the chemicals page, the products will look much better on a white background, and not the blue.

16. chemicals page - why are these headers different then the rest of the site? inconsistent! And they should NOT be images!! use the heading tags

the deeper I go, the more frustrated I become. The child pages need to be consistent with the way they look. each one looks different. it makes it very hard to scan and follow. you have some work to do.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

You're brilliant at this

You're brilliant at this Cupid do you know that? Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Smee wrote: You're brilliant

Smee wrote:

You're brilliant at this Cupid do you know that? Smile

Some take offense, but im okay with that knowing they're getting a nice kick in the right direction, even if that kick hurts alittle.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Nonetheless, you take the

Nonetheless, you take the time to do it in a methodical way and it's generous to both the OP and the forum.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Jezzer
Jezzer's picture
Offline
newbie
UK
Last seen: 8 years 21 weeks ago
UK
Timezone: GMT+1
Joined: 2010-01-02
Posts: 6
Points: 7

Thank you Cupidtoejam for

Thank you Cupidtoejam for taking the time going through the site, your comments are appreciated.

1. The validation errors are from from the flash code and the google search code, I will need to try to fix these, but the rest of the code is valid.

2. Obviously strict is preferred but whats wrong with transitional DTD ?

3. Yes will lose the table layout at some stage.

4. Whats the benefits of sticking the logo into a h1?

5. Yes background gradient needs smoothing.

6. The header doesnt look too busy to me ?

7. Yes it gives me a headache also, no 1 priority to sort!

8. Not sure about this one, the images are all relevant?

9. Yes now that the text size has increased it does look cramped.

10. Lose 80% of the home page text, no chance! maybe a paragrah or two.

11. Yes with the increased text size line-height now needs to be increased.

12. Text seems large enough, will add a bit more contrast though.

13. Wouldnt putting the search form at the top make it look more cramped?

14. Ye the colours are a bit bright, will tone down a bit.

15. Yes agree, they are due for replacement already.

16. Yes the section at the bottom is due to be removed shortly.

17. Except for the two pages mentioned above 15&16, all the pages are consistent.

Some work to do now ! Thx again.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

2.

2. http://24ways.org/2005/transitional-vs-strict-markup

4. the name of the site should always be your first heading, its most important.

6. u have 5 different elements in your header. i would loose the very top text since the logo had the site tagline already (dont need two). the top text sounds like an opening paragraph. i would also loose the two pics on the right-side.

9. thats not what I meant. research gutter space.

13. Look around the web, where are most search fields? At the top. Id put your search field on the same line as your breadcrumbs, or where the "Spa Crest" image is. Refer to number 6 above.

Jezzer
Jezzer's picture
Offline
newbie
UK
Last seen: 8 years 21 weeks ago
UK
Timezone: GMT+1
Joined: 2010-01-02
Posts: 6
Points: 7

A quick update for you

A quick update for you CupidsToeJam

Tables have gone
DocType is now Strict
Code and CSS is 100% validated

The positives are; the number of lines of code has decreased from 203 to 174, with file size decreased from 18 to 16KB.

4. The name of the site is in the first h1 "Welcome to ..." and its in the alt tag for the logo, so why would it better to put the logo into a h1 also?

6. I like the top text as its naturally worded and better than the logo alt text? Can't lose the two pics within the logo image as they are the main brands.

13. Ye agree, search box now on same line as breadcrumbs.

9. I think I have too much gutter space now! first heading far too low down, think I need to maybe move the breadcrumbs and search box?

Jezzer
Jezzer's picture
Offline
newbie
UK
Last seen: 8 years 21 weeks ago
UK
Timezone: GMT+1
Joined: 2010-01-02
Posts: 6
Points: 7

CupidToeJam, 4. Would this

CupidToeJam,

4. Would this be the best way of implementing what your suggesting?

(div id ="header")
(h1 class="header-logo")(a href="index.html" title="Home" (span)(/span)Header H1 Logo Replacement Text(/a) (/h1)
(/div)

h1.header-logo {
width: 820px;
height: 110px;
position: relative;
}
h1.header-logo span {
background: url(../images/header-logo.png);
position: absolute;
width: 100%;
height: 100%;
}

I presume this for accesibility issues, where images are switched off ? but isnt that what alt is for ? or is it because it becomes anchor text?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hang fast on the logo issue

Hang fast on the logo issue please, do not use the primary heading tag for the site logo, otherwise you will simply end up repeating the same content for the most important document heading which should describe/title/describe the page in question. If it's a site logo then the graphic is justified as inline foreground image rather than a background one and yes in that the alt text is intended to provide meaning to that graphic in the event the image is unavailable or not viewable for whatever reason.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jezzer
Jezzer's picture
Offline
newbie
UK
Last seen: 8 years 21 weeks ago
UK
Timezone: GMT+1
Joined: 2010-01-02
Posts: 6
Points: 7

Hugo, thank you for your

Hugo, thank you for your reply, and completely agree with you. h1 image replacement looks dodgy to me, cant see the point of it ?