12 replies [Last post]
Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 12 years 43 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

Hey guys,

Can I have some feedback on a new hosting site I just made please? Temporary Site Location.

It's my first "elastic" site, and I did add some "fluid" controls to keep it from going nuts if someone keeps enlarging their text beyond what might be considered normal

Please feel free to comment on any aspect, but do note that pricing, plans, etc., will end up being changed as they have yet to be finalized.

Thanks in advance.
Mike

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

GBHXonline.com 4th version

Nice work!

Only one thing I feel I need to mention. I find the cursor a little distracting when switching from hovering over text to non-text.

Other than that it looks very very good to me.

This is my big chance . . . yep, I blew it . . .

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 12 years 43 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

GBHXonline.com 4th version

n8gz4ez wrote:
Nice work!

Only one thing I feel I need to mention. I find the cursor a little distracting when switching from hovering over text to non-text.

Other than that it looks very very good to me.

Thank you. Do you mean on the lists?

Mike

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

GBHXonline.com 4th version

   
input:focus, textarea:focus, select:focus, input.focus, textarea.focus, select.focus, input:hover, textarea:hover, select:hover, input.hover, textarea.hover, select.hover {   
color : #000;   
height : 1.6em;   
background : #fafafa;   
border : 1px solid #cd7000;   
cursor : text;   
}   


I like your use of { cursor: help }, but { cursor: text; } is just a little distracting if I am noodling my mouse over any text while reading. That could be just me though. I prefer the default cursor.

edit: Sorry, I just noticed that every site uses { text: cursor; }. It is funny that I didn't really notice until I checked out your site today. Why it stood out today is because I use my cursor as a line guide while I read. On your site, it toggles from the default cursor to the text cursor as I descend . . . it appears to blink.

This is my big chance . . . yep, I blew it . . .

Anonymous
Anonymous's picture
Guru

Re: GBHXonline.com 4th version

Mike Cherim wrote:
It's my first "elastic" site, and I did add some "fluid" controls to keep it from going nuts if someone keeps enlarging their text beyond what might be considered normal
Excellent work. A perfect example of using ems instead of px, percents, etc.

Enlarging the text made my day. Smile

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

GBHXonline.com 4th version

Congratulations on the err... stretchability - it's mesmerizing Laughing out loud

You mention accessibility quite a bit and I feel I should say display:none is an unsafe accessibility technique. The later versions of the three most used screen-readers do not see the text and do not read it aloud. Also, keyboard users do not get focus on the links within your "hidden div". Explanation, some test results and an alternative technique here : http://css-discuss.incutio.com/?page=ScreenreaderVisibility

Clearly, the alternative technique mentioned needs additional styling to bring the links into view for keyboard users. If you have not already come acoss this site, Mike Pepper has used the technique to good effect: http://www.seowebsitepromotion.com/ (tab into the page).

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 12 years 43 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

GBHXonline.com 4th version

Lorraine wrote:
Congratulations on the err... stretchability - it's mesmerizing Laughing out loud

You mention accessibility quite a bit and I feel I should say display:none is an unsafe accessibility technique. The later versions of the three most used screen-readers do not see the text and do not read it aloud. Also, keyboard users do not get focus on the links within your "hidden div". Explanation, some test results and an alternative technique here : http://css-discuss.incutio.com/?page=ScreenreaderVisibility

Clearly, the alternative technique mentioned needs additional styling to bring the links into view for keyboard users. If you have not already come acoss this site, Mike Pepper has used the technique to good effect: http://www.seowebsitepromotion.com/ (tab into the page).

Thank you everyone.

True indeed Lorraine. Another mentioned that as well. Presently I'm compiling a punch list of fixes. It has about four items on it and the item you brought up is at the top of the list. My plan is to do as was done in the example you gave. I originally saw this at Jim Thatcher's site and I must say it is a nice solution.

You guys mentioned the joy of changing the text size... mesmerizing. It's funny, I know exactly what you mean. The first time I saw this done on a site was on Tommy Olsson's site The Autistic Cuckoo (which is going to be shut down it seems... sad), and I was just blown away. Since that time I've been really wanting to make one myself to see how much of a challenge it would be (it was lol).

CTRL+scroll wheel makes it fun(ner) Smile

Thanks again.
Mike

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 12 years 43 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

GBHXonline.com 4th version

n8gz4ez wrote:
   
input:focus, textarea:focus, select:focus, input.focus, textarea.focus, select.focus, input:hover, textarea:hover, select:hover, input.hover, textarea.hover, select.hover {   
color : #000;   
height : 1.6em;   
background : #fafafa;   
border : 1px solid #cd7000;   
cursor : text;   
}   


I like your use of { cursor: help }, but { cursor: text; } is just a little distracting if I am noodling my mouse over any text while reading. That could be just me though. I prefer the default cursor.

edit: Sorry, I just noticed that every site uses { text: cursor; }. It is funny that I didn't really notice until I checked out your site today. Why it stood out today is because I use my cursor as a line guide while I read. On your site, it toggles from the default cursor to the text cursor as I descend . . . it appears to blink.

Ah, gotcha now... thank you. I'll remove that -- though I do need to figure out if I had a reason to add it in in the first place Wink -- or try to figure out a way to keep it in a more consistent state.

Mike

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

GBHXonline.com 4th version

in re the cursor, I don't like to mess with user expectation of default behavior. To me, the expected behavior of :hover on form controls and links is for the (mouse) cursor to switch to 'pointer'. The form control itself will have its own text bar.

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.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 32 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

GBHXonline.com 4th version

oooh lovely! (obviously I hate you Wink )

Only thing I can point out is that in IE6 your news box has a vertical scroll bar - not a disaster but less pretty than if FF.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

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

GBHXonline.com 4th version

I belatedly noticed the illegible font size on .tiny p. You might want to make that a hair larger. In fact, your default size is a bit small. You might go to 83%/.83em as the base size.

I'm with everyone else, otherwise; very appealing visually (as long as you're not trying to read it Smile), and it seems to have a straightforward usability.

Good job.

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.

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 12 years 43 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

GBHXonline.com 4th version

I'm definitely going bump up that font. That has been one of those unanimous objections.

I do wish one could style scroll bars legally. It'd be cool. Unfortunately.... well, you know the deal. The news scroll bar will get less ugly over time I hope. As I add news the grab part of the bar (the ugliest part I'd say) will get shorter. That'll help soften the look I hope. (For me it's gray and ugly in FF too, but I don't use the new FF interface style.)

Thanks guys Smile

Mike

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 12 years 43 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

GBHXonline.com 4th version

Hi guys,

I made some corrections, as follows:

1) I brutally edited the footer text and increased its size. Much better I think. It's actually readable now. Smile

2) I added text-decoration:underline to the footer links. The page links have a border-bottom so I figure they're all set.

3) I change the order of the jump links so they will be better for people with screen readers.

4) I hid the jump links by way of an offset instead of stripping their visibility. This allows them to be used by keyboarders and screen reader users as they aren't hidden with styles on, but rather sent out of view as they aren't needed by the visitor with a pointing device.

This should correct the main accessibility/usability issues people picked up on in the various forums on which it was reviewed. Thank you to all that gave suggestions.

Mike