Site Surgeon - be brutal!
SiteSurgeon.co.uk
Please be picky! The site is still in development so the parts which are not fully implemented (custom Google search and the logo) are hidden via the CSS. There is a printable CSS file. Testing on handheld devices would be much appreciated, with screenshots if possible. Real-world accessibility concerns, efficiency stuff and semantics are totally fine for commenting. I really want to get all the technical stuff as sorted as possible because technical ability is what I am hoping to market myself as having. Hopefulyl people will fall for it.
I am trying not to write a massive essay here. Have I succeeded?
Share: 
Ben,
I would be brutal, but there isn't anything that stands out to be brutal about; which from you I'd pretty much expect. Nice job, well done
Looking outside accessibility, the only thing I'd say is it's a bit plain. It would be nice to see more companies that know about accessibility going out of the way to prove detractors wrong when they say accessible websites have to be boring.
Share:
| Cerbera wrote: |
| I am trying not to write a massive essay here. Have I succeeded? |
Comments. It may be a good workround
| Code: |
| <span title="United Kingdom">UK</span> |
Your use of alternative colours on mouseover IMHO does not have enough contrast, you only change shade by a small amount, it should be much more obvious as it is in the text. Looking at this I think you are using the same colour for both.
Final gripe, you have not included Accessify in your list of resources, bad boy, write cut & paste 1000 times 'I must not forget my resources'
Mike Abbott
Accessible to everyone
Share:
Very quick reply (as I'm heading out) but hopefully it will give you an idea on different browsers / platforms...
PocketPC - looks ok, but you have to scroll a long way for the navigation. Uses your default CSS file.
IE5 (OSX) - strange. The div starting under your breadcrumb is bunched up on the right.
Safari (OSX) - looks fine.
Firefox (OSX) - looks fine.
Opera 7 & 8 (Win and OSX) - Looks fine
Firefox (WinXP) - looks fine.
IE6 (WinXP) - looks fine.
IE3 (WinXP) - degrades as expected.
IE4 (WinXP) - Navigation begins under the main content, but both are positioned correctly left and right.
IE5 (WinXP) - Looks fine, although the background-colour of the A tag and LI tag in the navigation overlap top and bottom.
IE5.5 (WinXP) - Looks fine.
I can post a screenshots later this evening or tomorrow, although I think the PocketPC screenshots may have to be photos.
Hope that in itself is helpful though...
S
Share:
| Richard Conyard wrote: |
| Looking outside accessibility, the only thing I'd say is it's a bit plain. It would be nice to see more companies that know about accessibility going out of the way to prove detractors wrong when they say accessible websites have to be boring. |
| Mikea wrote: | ||
Comments. It may be a good workround:
|
| Mikea wrote: |
| Your use of alternative colours on mouseover IMHO does not have enough contrast, you only change shade by a small amount, it should be much more obvious as it is in the text. Looking at this I think you are using the same colour for both. |
| Mikea wrote: |
| Final gripe, you have not included Accessify in your list of resources, bad boy, write cut & paste 1000 times 'I must not forget my resources' |
JM, what's your actual name? Can we nickname you "JM" for the sake of our fingers?
Thanks a lot of running it through all those browsers, especially the OSX ones. I have noticed that weirdness with the sidebar items in IE5.0 on Win95 when testing Project Cerbera ages ago. I couldn't figure out a solution for it...is it just an insignificant oddity of IE or something which I should try to fix?
Did you poke around all the sections and do any font size/strange browser width testing at all? It's one thing to know the homepage looks alright at 1024x768 with a normal font size, but whether the more complicated parts work alright with big fonts and narrower browsers is what real-world accessibility requires. If you can't spare the time I totally understand but it would help me out a lot.
Screenshots of how the site messes up in IE5 OSX and IE4 Win would be useful. Pictures of how PocketPC handles the default CSS will be interesting. I have been considered making a style sheet specifically for media="handheld" devices.
Share:
I know that IE has a problem with <abbr> and will need extra coding to induce action 
CSS for this
| Code: |
| .abbr {border-bottom:1px dashed #999; cursor:help;} |
| Code: |
| <abbr><span class="abbr" title="United Kingdom">UK</span></abbr> |
works for meMike Abbott
Accessible to everyone
Share:
Cerbera,
| Quote: |
| JM, what's your actual name? Can we nickname you "JM" for the sake of our fingers? Wink Thanks a lot of running it through all those browsers, especially the OSX ones. I have noticed that weirdness with the sidebar items in IE5.0 on Win95 when testing Project Cerbera ages ago. I couldn't figure out a solution for it...is it just an insignificant oddity of IE or something which I should try to fix? |
My name is Scott. For the sake of making things easier for others I'm happy to answer to Scott, JM, JudgingMonkey or anything else you can think of which is suitable
If I recall correctly the IE5 problem with LI's comes from an issue it has with LI's and assigned widths... to be honest right now I can't remember the ins and outs of what I read, but I'm sure changing the width made a specific impact.
| Quote: |
| Did you poke around all the sections and do any font size/strange browser width testing at all? It's one thing to know the homepage looks alright at 1024x768 with a normal font size, but whether the more complicated parts work alright with big fonts and narrower browsers is what real-world accessibility requires. If you can't spare the time I totally understand but it would help me out a lot. Smile |
I did some (basic) poking around with most of the browsers. some problems at 640x480 with large fonts, but other than that - with most browsers - no problems at all. If you have specific tests with specific browsrs in mind, I'd be happy to do it when I have a chance.
| Quote: |
| Screenshots of how the site messes up in IE5 OSX and IE4 Win would be useful. Pictures of how PocketPC handles the default CSS will be interesting. I have been considered making a style sheet specifically for media="handheld" devices. |
I love handheld CSS sheets - mainly because I love my pocket PC. For your reference though - most modern pocket PCs will use the default CSS file, so if you're putting in a handheld file, position it last on the list and configure every element you're using. That way it should overwrite the default files.
Anyway, here's the screenshots. I'd appreciate it if you could save them off, because I'll remove them in a couple of days to save my bandwidth!
Edit: Screenshots removed
Last edited by judgingmonkey on 28 Jul 2005 04:59 pm; edited 1 time in total
Share:
Scott. Would it not be an idea to e-mail them directly to Ben Mike Abbott
Accessible to everyone
Share:
I'm happy to do that - I thought other people might be interested in seeing how different browsers render CSS. In some cases it may not be at they expected.
I'm happy to remove them if requested.
S.
Share:
| judgingmonkey wrote: |
| I'm happy to do that - I thought other people might be interested in seeing how different browsers render CSS. In some cases it may not be at they expected.
I'm happy to remove them if requested. S. |
Will respond to posts later today or this evening.
(EDIT) Here are the re-hosted and re-posted screenshots. They probably won't be taken offline for several weeks/months and the copies on my HDD should be around for a long time. All the 800x600 versions are between 55kB and 75kB
Mac Firefox:
mac_firefox.jpg)
View 800 x 600 image.
Mac IE:
mac_ie.jpg)
View 800 x 600 image.
Mac Opera:
mac_opera.jpg)
View 800 x 600 image.
PocketPC Top:
pocketpc_a.jpg)
Pockect PC Bottom:
pocketpc_b.jpg)
Win IE3:
win_ie3.jpg)
View 800 x 600 image.
Win IE4 Top:
win_ie4a.jpg)
View 800 x 600 image.
Win IE4 Bottom:
win_ie4b.jpg)
View 800 x 600 image.
Win IE5:
win_ie5.jpg)
View 800 x 600 image.
Win IE6:
win_ie6.jpg)
View 800 x 600 image.
Win Opera8:
win_opera8.jpg)
View 800 x 600 image.
Thanks massively for the screenshots. "Bo selecta" as they say in Blighty. Thanks for prodding the site in them all was well, must've taken a few hours.
Last edited by Ben Millard on 25 Sep 2005 04:22 pm; edited 1 time in total
Share:
Using XP & firefox 1.0.6 I get a horizontal scrollbar, so the borders at the sides of the page are out of view.
ETA: that's at 1024 x 768 resolution.
Share:
| ectoplasm wrote: |
| Using XP & firefox 1.0.6 I get a horizontal scrollbar, so the borders at the sides of the page are out of view.
ETA: that's at 1024 x 768 resolution. |
| judgingmonkey wrote: | ||
|
I've never designed specifically for handhelds in the past. The nearest I've gotten was when a friend took pictures of Project Cerbera's old homepage on a Nokia 7200 mobile phone.
I would like to support Mac IE5. However, since I can't do hands-on testing with one and have never studied the quirks of that browser, I don't know where to start trying to fix the layout for it.
| Mikea wrote: | ||||
| I know that IE has a problem with <abbr> and will need extra coding to induce action
CSS for this
works for me |
(EDIT) I have now added a reference to Accessify Forums on the web design resources page. I have also created a handheld CSS file which is just the printable CSS file but with the navigation displayed. It also has 1em of side padding on paragraphs, navigation and footer.
Share:
I've taken a couple of screenshots. The first is as the page loads. The second is scrolled to the right.
firefox 1.0.6 screenshot one
firefox 1.0.6 screenshot two
After zooming in it appears it's not cutting off the borders, but adding one pixel to the right side of the page. If I resize to 800 x 600 it still does it.
It's only firefox that's doing it. I've tried it in Netscape 7, 7.2, 8 beta, Opera 7 & 8, IE 4.01, 5.01, 5.5 & 6 and it doesn't happen.
Firefox does it to several other pages including this page at The Register.
Also, in IE 5.5 & 6 the body text is bold.
IE6 screenshot
Share:
I havn't tried FireFox 1.0.6 myself but from the screenshots it looks like they've screwed it up! What it a "nightly" build you got, or a full version release? Underline on links has dissapeared when every other browser under the sun displays them without requiring they be declared in the website CSS. Underlining links should be part of the browser style sheet, so hmm. Because of this, it makes me think that the horizontal scrollbar is a problem with that specific build of FireFox since, as you say, it happens to other sites.
As for IE6 SP2 in Windows XP Home SP2 (my system) IE6 does not embolden the body text. From the screenshot, it just looks like the browser is using a bold version of that font, then applying double-bold for headers. I have added font-weight: normal into the body rule of the media="screen" CSS file, so if that doesn't fix it then my best guess is it being a strange oddity with the particular versions and configurations you have for IE.
I'd really like to find out quite what is causing these misbehaviours because if it is something wrong with my site rather than browser bugs, I should be abe to fix it. For the time being, I've made those little CSS tweaks and await further testing.
Thanks for prodding it on a bunch of other browsers, too.
(EDIT) To everyone, I have put together a draft of the green style (blue is still backed up on my PC) and would like some feedback from it, in particular some colour testing and suggestions from Mike on the new sidebar scheme would be appreciated. My previous posts are all still open to be commentted on as well.
It is parked at the SiteSurgeon domain, same URL as the previous version.
Share:
| Quote: |
| I havn't tried FireFox 1.0.6 myself but from the screenshots it looks like they've screwed it up! What it a "nightly" build you got, or a full version release? |
It's the full version release.
| Quote: |
| As for IE6 SP2 in Windows XP Home SP2 (my system) IE6 does not embolden the body text. From the screenshot, it just looks like the browser is using a bold version of that font, then applying double-bold for headers. |
I'm using XP Pro SP2. In IE 5.5 and 6 the text is bold - as is your project cerbera site. Changing font-family: sans-serif; to font-family: verdana, sans-serif; cures the problem. I have the IE default font set to verdana, but it looks too narrow to be verdana - looks more like arial to me.
ETA: font: sans-serif; works too. Maybe it's a bug or maybe it's using font-family without including any font names that's causing it.
Share: