18 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Hi,

I know this isn't a really exciting site (ironic considering the exciting world of dry cleaning!). appreciate any comments re: design and code, as it's about to go live. I'm sure I've missed some simple things.

http://www.subtleasafish.com/test/golden/

thanks as always

larmyia

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

site check please

The layout looks brilliant to me. Clear, well laid out, plenty of space. There are some things that I spotted in the content, feel free to agree or disagree Smile

  • The alt text on the two logo images doesn't seem fulfill its purpose - to describe the image to those who don't receive it. Title text can be used to give a tip as to what will happen.
  • You don't have an <h1> on the home page as you are relying on the image. It might be an idea to at least put a hidden (out of sight, not visibility:hidden or display:none) <h1> element for accessibility and search engines.
  • Search engines are reputed to pay attention to the title element. You may want to consider a home page title that says a little bit more than Golden Arrow Cleaners. Perhaps "Golden Arrow Cleaners, Dry Cleaning & Laundry, Exotic Materials & Alterations; Crystal Palace, London."
  • Your first paragraph starts "If you are unfamiliar with our services ...". These aren't the most enticing first few words, especially for a brochure style intro site. They are also likely to show up in the few words of the page summary shown by search engines. Your second para could be better used as the first para.
  • Search engines are also reputed to use the <meta name='description' content='...' /> content if present for the short page summary text. It doesn't hurt to repeat all that nice stuff summarising Golden Arrow Cleaners again there.
  • I would think you could combine your customer information and contact us pages. Or at least put the phone number on the customer information page, it seems odd to me to force a click for such a small amount of information.
  • On the accessibility page, I would leave out "Unfortunatly there is no wide consensus for which keys should be assigned to where. However, we have tried to follow the current popular thinking." and change "...make better use of the access keys or the layout styles we have used, ..." to something more akin to "...help make the site more accessible, ..." The last sentence/para seems connected to the previous sentence and the text heading. You may want to separate it more, perhaps with more blank space or a stylised <hr>.

I hope some of this helps. Laughing out loud

[/]
Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

site check please

Hi, larmyia
Nice err... clean looking site. Smile
After some feverish editing so as not to repeat some of what Chris..S has just said.

Validator has a problem with your home page, but it does not seem to have translated to the others:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.subtleasafish.com%2Ftest%2Fgolden%2F

Titchy little typo in the css
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.subtleasafish.com%2Ftest%2Fgolden%2F

Opera has a problem with your images - see attachment. I don't know whether this is the cause, but it's not neccessary to size images using px ie. use width="30" height="40" rather than 30px and 40px.

Accessibility-wise the site seems OK, but with a problem for screen-reader users. Your first letter spans cause the listeners to hear, phonetically:
Eye (pause) fff you are unfamiliar...
Double u (pause) e are an established...
See (pause) ertain delicate fabrics.

I assume the stylesheet switcher is a work in progress.
Like it a lot though
hth
Lorraine

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

site check please

Chris: appreciate your comments. just 2 questions...with the alt txt on the logo, I was under the impression the idea was to let the blind user know that this is a link back to the home page (in this instance) and what it actually is (ie a description of the logo) was useless. have I got this @rse-about-face? should I move my present alt txt to the title, and then describe the logo in the alt???

secondly, with the hidden <h1> on the index page, I'm not sure what the best way is to hide it w/o using visibility:hidden or display:none. I know I've seen it on the forum, but for the life of me I can't find anything on it.

Lorraine: very funny Wink most amused. I appreciate what you're saying about the screen reader, but my client particularly wants the first letter emphasised in that way. what if I used <strong>? how would the screenreader take that on?

with the css validation error, I'm not sure how I'm sposed to fix that as it's Tony's clear fix solution. maybe I'm doing it wrong??? any ideas?

have fixed the other validation errors (html) but not uploaded them yet. gotta go pick up my daughter.

again, thanks to both of you for your help.

larmyia

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

site check please

Quote:
it's Tony's clear fix solution

Very nearly, you missed the space between * and html.
Quote:
what if I used <strong>? how would the screenreader take that on?

I'm afraid any inline interruption to a word will cause the screen-reader to hiccup (pardon me :oops: )
You could span or apply strong to an entire word (or phrase), however, with no fear of indigestion. There is still a pause but not nearly as noticeable and the access software does not try so hard to understand (and usually get wrong) what on earth it was the developer intended it to say about that solitary letter.

So long as your client understands, you've done your best. Frankly, blind surfers are quite used to design gizmos like this and if they can be bovvered they will switch the screen-reader to "spell out". Most can't be bovvered or don't know about it, however and, if the page is not easy to listen to, they'll probably select Alt+D then go aGoogle-ing Wink

Winger
Offline
Regular
Wales
Last seen: 13 years 10 weeks ago
Wales
Joined: 2005-05-19
Posts: 13
Points: 0

site check please

In IE6/XP, the image on the home page extends vertically into the footer.

Winger

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

site check please

larmyia wrote:
Chris: appreciate your comments. just 2 questions...with the alt txt on the logo, I was under the impression the idea was to let the blind user know that this is a link back to the home page (in this instance) and what it actually is (ie a description of the logo) was useless. have I got this @rse-about-face? should I move my present alt txt to the title, and then describe the logo in the alt???

Lorraine or someone else may better be able to answer this than me. Your image is serving two purposes, its the page header and its a link to a page (which happens on the home page to be itself, and so maybe the link isn't relevant on that particular page)

The fact the image is nested within a link will tell the blind user its a link. I think the <a> tag needs to say what it's (the link is) doing and the alt tag should describe the image.

Quote:
secondly, with the hidden <h1> on the index page, I'm not sure what the best way is to hide it w/o using visibility:hidden or display:none. I know I've seen it on the forum, but for the life of me I can't find anything on it.

{height:0; overflow:hidden;} should do it. There is also the off left method used by image replacement.

The validation error, is
<style rel="stylesheet" href="css/saafprint.css" type="text/css" media="print">@import url(css/print.css);</style>
You seem to have mixed two stylesheet importing methods:

  <link rel="stylesheet" href="css/saafprint.css" type="text/css" media="print" />

or 

<style type="text/css">@import url(css/print.css);</style>

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

site check please

Quote:
Lorraine or someone else may better be able to answer this than me.

Thanks Chris, I didn't want to overpost.

larmyia, as the top of the page stands at the moment the listener would hear:
"Return to the Golden Arrow Cleaners Home Page" for the link and
"Return to the Golden Arrow Cleaners Home Page" for the logo name.
Whichever method you choose to get that there h1 in there, your listeners would thank you for bringing a little variety into their life Tongue .

Suggestions, for what they may be worth:

1) behind the logoname (h1), put a similar sort of name, what we do, where we are text as suggested by Chris

2) for the link, "return to the Golden Arrow Cleaners home page" is not relevant if the visitor is..... on the home page. Consider getting around this with "permanent link to the..........home page" Seems logical whichever page they are on.

Oh dear, now I've just noticed:
<a class="hide" href="#content" title="go to the main content" accesskey="2">Go To The Navigation</a>
After listening to this, I'm not too sure what is going to happen if I select this link - will I go to the main content, o...r... will it be the navigation? It's just like Google's "I'm feeling lucky" feature, OK I'll chance it and see if what happens next is also

End of irony
I'll just be off then
Lorraine

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

site check please

Among all web presences of all dry cleaning establishments, this has to be among the top one percentile.

Instead of using a span to segregate and style the first letter, use the :first-letter pseudo element. For example, on this paragraph, p:first-letter {font-weight: bold;}.

Eschew the use of 'softener' phrases. Use simple declarative sentences. For example;

Instead of "Whether they are heavy lined velved[sic][1] or delicate watered silk curtains we will use our expertise to clean. Delivery of heavy, bulky items can be arranged."

"We will use our expertise to clean your bulky items. Our experience ranges from heavy, lined velvet draperies to delicate watered silk curtains. (Pickup and?) delivery may be arranged."

I usually wrap a logo or banner image in h1 tags. The alt text will be styled (at least in Firefox) if the image is not loaded. So go ahead and style the h1, even if it normally won't be seen. The alt text should read, "Golden Arrow Cleaners...simply the best". It is a replacement for the image. It is my understanding that alt text is indexed by SEs.

Chris and Lorrain pretty much covered it otherwise.

cheers,

gary

[1] Or is that a British spelling?

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

site check please

Winger wrote:
In IE6/XP, the image on the home page extends vertically into the footer.

I did mean to mention this before..

if you refresh or go to another page and come back it sorts itself out. I am sure there is a reason why it's doing this, but I dont' know why...any clues anyone?

larmyia

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

site check please

One more thing.

#wrapper {
    width: 760px;
    background: #fff;
    color: #000;
    margin: 20px auto; /*center for compliant browsers*/
    text-align: left; /*return to normalicy*/
    border: 2px solid #a28465;
    padding: 10px;
    }
Notice the total width is 784px. Just thi-i-i-s much too wide.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

site check please

Quote:
/*return to normalicy*/

Now that I like. Gary has coined a new "mid-Atlantic" word Laughing out loud
Neither normalcy nor normality - suits both sides of The Pond.

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

site check please

Righty-ho...

*Chris: <h1> on Index...thanks for the tip. sorted that out.
*Chris: Stylesheet...was trying out the @import and forgot to change it back to <link>
*Chris/Lorraine: alt/title on img and a...think I get it now and will sort it out asap.
*Lorraine: skip nav... Laughing out loud that's me being dumb. I was going to put the nav below the content in my html as I think it's what you've suggested in another post, but couldn't get it above the content using css, so cheated and went back to how it is now. so basically forgot to change the txt. done now.
*Gary: didn't think :first-letter pseudo element worked in IE. It's a hassel to change the html, but I take Lorraine's point with regards to the screen reader and will now change it all.
*Gary: velved was a misspelling that I missed. with regards to the content - I've tweaked it a little as some of it was really bad, but it is from a paper brochure he has. I guess I can change more...it doesn't read that well after all.
*Gary: like the <h1> tip and will do that from now on.
*Gary: the size...oops! thought I had worked that all out! dope! will sort out now.
*Lorraine: you mentioned not having to use px when describing the size of an img (ie 30px). I've not heard that before. how come?
*Lorraine: normalicy - I think I made that up Smile nasty habit of mine.

still not sure how to solve the IE/PC prob where the pixs are the wrong size when you first open the page....

anyway guys, thanks for all your help and comments. what I'm finding is that most of it is stupid errors on my part (and I checked it so carefully before posting :roll:) and the other things were all things I can use in my future sites. good to pick things up here and there.

anyways, thanks

larmyia

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

site check please

I kinda do like "normalicy", too.

Errors, what errors? That's what proofing is for. I'll bet the Pope has someone look over his bull before publishing—and he's infallible, right?

The html attributes height and width are pixel units, the default, or percentages. Unless you're using percentages, it seems more consistent across browsers to leave the units off. It likely makes little difference, it's just a distant sense of something having gone wrong. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

site check please

Quote:
Lorraine: you mentioned not having to use px when describing the size of an img (ie 30px). I've not heard that before. how come?

In image dimensions pixels are *implied*
http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2
If the *normal* size of an image is to be scaled in a particular way then % or ems should be *explicitly* declared.
Still, if its good enough for these good folks not to use pixels on their home page, it's good enough for me
<h1 id="logo"><img alt="The World Wide Web Consortium (W3C)" height="48" width="315" src="/Icons/w3c_main" /></h1>

There, that's me being serious for once
Well, maybe not.

Edit: just look at that - cssc goes off-line for a bit - the database is all mucked up - and that trans-atlantean gets in first.

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

site check please

am now implying with all my img pixles Smile

but IE is still making the imgs too large when you first go on there. go to another page and return and they are the right size....

argh!

larmyia

edit: oh and the imgs are still going crazy in opera. *sigh* and I haven't even checked it on my mac yet....

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

site check please

Just looked at IE and Opera.

Remove class="clearfix" from the images. If you use the fix, and it's not needed in these cases, it belongs on the parent of the float. Anyway, that'll fix it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

site check please

aha! that fixed it. I thought I needed it...guess not.

so, you when used it needs to be on the parent? would that be like the <div>? sorry I still get confuddled by the whole parent/child thing.

thanks

larmyia

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

site check please

The idea is that the float's parent should enfold it. Other times you might make a float clear in order to ensure that it drops below another float rather than snug up beside it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.