Site Surgeon - be brutal!
handheld version is looking ok... I'd suggest a skip to nav link, just to indicate navigation is there. Possibly giving the li a width of 100% or at least uniform would help as well as they currently are quite ragged.
It would also help if the divs containing the content and navigation had their widths and floats removed allowing them to take up as much screen space as possible - currently there's a gap on the left before the content starts, but there's only four or five words to a line. Removing the gap may make reading more comfertable.
S.
Share: 
| ectoplasm wrote: | ||
|
| ectoplasm wrote: | ||
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. |
What does "ETA" stand for in this context? I only know of it being used for "Estimated Time of Arrival" in Star Trek.
JM, the handheld CSS file doesn't specify colours for the navigation, doesn't specify floats or any of that stuff. Does the handheld device simply get all the CSS files and then use the way CSS cascades to figure out the page presentation? If so, I'll have to go through explicitly undoing all of the graphical style effects. Bah! I guess that browser must've been made by Microsoft or something.
(EDIT) Oh, forgot to mention that I have added a provisional logo to the page.
(EDIT2) I have also added :focus styling to all text hyperlinks. Not sure where to put a "Skip to nagivation" type of link, though. Any ideas?
(EDIT3) I am trying out a simple CSS technique to combat spam bots from getting hold of the SiteSurgeon Email account. You can view it in the SiteSurgeon Contact page.
Last edited by Ben Millard on 08 Aug 2005 01:55 pm; edited 2 times in total
Share:
| Cerbera wrote: |
|
What does "ETA" stand for in this context? I only know of it being used for "Estimated Time of Arrival" in Star Trek. |
ETA = Edited To Add.
Share:
I've fixed a bunch of things across the site (including spelling, lol) and have snazzed up my website design profile page thing so it now has some thumbnailed screenshots floated to the right of their descriptions. Hopefully this isn't causing any major problems in recent browsers and should degrade gracefully to become inline images in older browsers.
I have given the printable CSS file a bit of a spanking and it now servers up pretty decent documents in IE6. FireFox 1.0.4 has a bloody pathetic Print Preview option...if you refresh the page while in it it shows the page with the graphical style and the print preview toolbar cannot be closed. Is this (and the increasingly long list of bugs I am finding in FireFox) solved in 1.0.6 at all?
I have tweaked the floats and padding in the handheld CSS file so that floats and padding should now be overruled by it. Some screenshots and specific guidance about how to create higher quality handheld styles would be much appreciated. JM?
If there's something I've missed from an earlier post, give me another prod about it.
Share:
i like very much accesible web sites but i also like nice colors and grafic.
one thing i think is to change in this site are the colors.
Share:
| mindsoul wrote: |
| i like very much accesible web sites but i also like nice colors and grafic.
one thing i think is to change in this site are the colors. |
ok, possiamo limitarci all'analisi oggettiva dell'accessibilita', senza tirar fuori le preferenze riguardo ai colori e altri simili fattori "graphic design" estremamente soggettivi?
Patrick H. Lauke / webmaster / University of Salford
co-lead: WaSP Accesibility Task Force
take it to the streets ... WaSP Street Team
personal: splintered | photographia | redux
co-author: Web Accessibility - Web Standards and Regulatory Compliance
Share:
Not sure if this a good idea but I used JS for abbr tags to fix IE on http://www.futuremovies.co.uk/friendly_accesskeys.asp
CSS File
| Code: |
|
abbr { cursor:help; border-bottom:1px dotted} |
JS File
| Code: |
|
// ----------------------------- //<![CDATA[ // ABBR hack for Win/IE, by Jason Davis (www.jasonkarldavis.com). // Use freely as long as these comments are intact if (typeof window.attachEvent != "undefined") { // Internet Explorer for Windows window.attachEvent("onload", function() { // Replace <abbr> with <acc:abbr> document.documentElement.setAttribute("xmlns:acc", "http://www.w3.org/1999/xhtml"); document.body.innerHTML = document.body.innerHTML.replace(/<abbr/gi, "<acc:abbr").replace(/<\/abbr/gi, "</acc:abbr"); // Provide an indication for <acc:abbr> elements with a title attribute var abbrs = document.getElementsByTagName("abbr"); // IE seems to ignore the namespace var numAbbrs = abbrs.length; for (var i = 0; i < numAbbrs; i++) { if (abbrs[i].title) { abbrs[i].style.cursor = "help"; abbrs[i].style.borderBottom = "1px dotted #888"; } } }); } //]]> |
Source: www.jasonkarldavis.com
You should start using the UK government accesskeys system!?
A skip to content link at the top would be nice too, use CSS to -1999 to hide it but its still usable for normal users and DOMs browsers.
I like the fieldset control you have. Stick a faded backround image to make the site look pretty.
Having your Email made public will get you lots of spam - consider a contact form or writing in real HTML (!!!) like on my friends site: http://www.bobbus.com/ (dont ask me how its done I only use evil JS when I have too).
Oh and one last thing... the text does not fit the entire screen width (jk).
If I was at work I would have tested it on IE7 beta 1.
Johan De Silva / Portfolio
Share:
http://validator.w3.org:8001/check?uri=http%3A%2F%2Fsitesurgeon.co.uk%2F
you have an eror in you code, maybe because is stil under constrution.
in opera the latest version i don't see underline for the link, only the background color(by hover).
Share:
| Johan007 wrote: |
| Not sure if this a good idea but I used JS for abbr tags to fix IE on http://www.futuremovies.co.uk/friendly_accesskeys.asp |
| Johan007 wrote: |
| You should start using the UK government accesskeys system!? |
| Johan007 wrote: |
| A skip to content link at the top would be nice too, use CSS to -1999 to hide it but its still usable for normal users and DOMs browsers. |
| Johan007 wrote: |
| I like the fieldset control you have. Stick a faded backround image to make the site look pretty. |
| Johan007 wrote: |
| Having your Email made public will get you lots of spam - consider a contact form or writing in real HTML (!!!) like on my friends site: http://www.bobbus.com/ (dont ask me how its done I only use evil JS when I have too). |
I'm glad you mentioned the SiteSurgeon anti-spam system because now I get to explain the technical trickery it uses to con spam bots.
| Code: |
| <pre>ben<span class="email">_not_correct@</span><span class="hide">@</span>site<span class="email">_not_correct_</span>surgeon<span class="email">@</span><span class="email">.com</span><span class="hide">.co.uk</span>
<span class="email">Your user agent does not support the anti-spam technology used by this page.</span></pre> |
So, how does your browser know how to display it?
| Code: |
| /* Anti-spam */
.email { display: none; } .hide { border: 0; } |
I don't think any spam bot will bother downloading the CSS file for every website it visits just to see if any of the classes used inside potential Email addresses contain display:none. It would drastically complicate the processing required to find Email addresses in pages and require an extra file to be downloaded from every site it visited. Since a lot of CSS files use complicated hacks they become even more time-consuming to try and parse.
But what about clever spam bots which ignore the contents of <span> tags when looking for Email addresses? Well, some of the <span> tags contain genuine information! The class="hide" class does not hide that element, so any bot which tries to be smart by ignoring the contents of elements with class names like that will end up removing genuine information.
I'm pretty sure that this CSS method is going to be really effective at preventing spam bots getting my new Email account. I will not publish my Email address anywhere else on the Web so, in theory, no spam should ever reach that inbox.
| Johan007 wrote: |
| Oh and one last thing... the text does not fit the entire screen width (jk).
If I was at work I would have tested it on IE7 beta 1. |
| mindsoul wrote: |
| http://validator.w3.org:8001/check?uri=http%3A%2F%2Fsitesurgeon.co.uk%2F
you have an eror in you code, maybe because is stil under constrution. In opera the latest version i don't see underline for the link, only the background color(by hover). |
Several browsers lose the underline because it gets coloured white with the text. Since the background is also white, the underline cannot be seen. This is because most browsers draw the underline just inside the edge of the background part of the box model but IE draws the underline well inside the background. I'm not sure which method is correct but what I thought of doing was to set a solid bottom border so that the invisible underline would have a piece of colour after it and thus be seen.
I have applied this bottom border so you can see how it looks for yourself. Seems alright to me, although it has added about two hundred bytes to the combined CSS.
Last edited by Ben Millard on 08 Aug 2005 11:57 pm; edited 3 times in total
Share:
Surely the CSS method is not 100% Accessible if the reader does not read style sheets?!
| Quote: |
| I don't understand what you mean by "real HTML" since the site uses XHTML 1.0 Strict, which is one of the purest and most inter-operable forms of HTML you can get.
|
I cant post examples of this because it does not show up and I cant find a web link yet! but view the source of the page and view the email address and you will see it is in "real" html and it validates under any doc type such as XHTML 1.0
Well I call it real HTML there maybe a proper word for it. Spam bots don’t seem to be able to read this - yet.
I only ever use web forms because under UK Law a human can go around commercial sites and as long as it’s a business address (and not Hotmail etc...) they can spam under the data protection act and people do this cos its worth money to sell on
!
Doh! I don’t have a MSDN licence for IE7 beta 1 however its seems to look the same at a glance on my co-workers PC. Anyone here got a MSDN licence (unlikely in type of ati-M$ forum
)?Johan De Silva / Portfolio
Share:
I assume English is not your first language? That's no problem, it's just a bit difficult for me to understand your messages because they also seem rather rushed.
I'm glad you mentioned what happens when CSS is not suppported. I'll explain about that now.
| Code: |
| <span class="email"><h2>Anti-spam Notice</h2>
<p>This page uses anti-spam technology which does not seem to be supported by the device you are using. I apologise for this. You can contact me via Email by assembling my address manually:</p> <ul> <li>My address <strong>ends</strong> with "sitesurgeon.co.uk"</li> <li>My address <strong>begins</strong> with "ben"</li> <li>My address has the "at" symbol (@) in the <strong>middle</strong> of these two sections.</li> </ul></span> |
The section shown in Lynx:
lynx-contact.jpg)
800 x 600 - 88.4kB.
You may notice on that under each example of information which uses the CSS anti-spam technique, there is a message saying that it is not supported. This message is always present, just like the above code sample, but it is only displayed when the browser does not support CSS. I might change the wording to some of these non-CSS parts but for most user agents (including screen readers?) it should work alright because they load the CSS file and recognise display: none.
| Code: |
| (EDIT:) Removed code on Johan's request. |
The HTML from your referenced site and people can check it for themselves via
that. It isn't using JavaScript, it is using HTML entities. You might know that & is an entitity which creates the ampersand (&) character. Well, by using a number instead of the "amp" part you can create any character since they all have a unique number. s is the entity for "s" and therefore web browsers who see that entity in the source code will display an "s" on the page.
This is not protecting the address from spam bots because replacing entities does not require much processing power. They will replace all the entities with the character and see the address. His solution will only work against very old, simple spam bots and not against modern ones.
(EDIT) After a bit of hunting I found the access keys standard.
| UK Government wrote: |
| S - Skip navigation
1 - Home page 2 - What's new 3 - Site map 4 - Search 5 - Frequently Asked Questions (FAQ) 6 - Help 7 - Complaints procedure 8 - Terms and conditions 9 - Feedback form 0 - Access key details (Source.) |
Last edited by Ben Millard on 09 Aug 2005 12:01 am; edited 1 time in total
Share:
I like it. It's forthright and all business. Flashy is nice, but this is practical which is perfect from an accessibility standpoint.
I have nothing to be brutal about. Others have mentioned things whihc cover any concerns I may have except this:
I feel the Search button should be styled. On my MSIE and on my Firefox, default buttons are dark gray and their text is black. I don't know why these are the defaults. They are awfully difficult to make out. This would be a simple opportunity to add a little more flair while making it even more accessible.
One more thing, forgiven as it is a work in progress
CSS Error:
Line: 212 Context : #navigation li.current
Invalid number : background transparent is not a valid color 3 or 6 hexadecimals numbers : #transparent
Mike
Share:
[I do rush in posts and I will stop doing it. English is not my first language however my dyslexia has more to with my literacy since I have been here 12 years!]
That CSS email address is very clever. Still no substitute for a web form in business. For the record I don’t think Bobbus has received any spam but I accept its not a good solution.
| Cerbera wrote: | ||
|
Maybe to skip the header (search) for effect, but its not really much of an issue since the order of the code is spot on.
Johan De Silva / Portfolio
Share:
I have made some minor tweaks to various suggestions, such as adding accesskeys to US Government standards. I'm no 100% sure about whether my implementation of them is correct, so if someone could verify this it would be a great help. I should make an accessibility page so that accesskey: 0 takes the user to a page explaining the accesskey system?
I'm also a bit stumped on where to add a "Skip to Navigation" link. Should I make the "Search" accesskey move the focus to the search box or make it press the "Search Site" button or not use it at all? I am thinking the former and as long as I explain it on the upcoming accessibility page it should be alright...
I think the header is too cluttered, so if people have suggestions about how I can open it up without it looking silly that would be cool.
The "robots.txt" file wasn't actually uploaded before (lol) but it is now.
The search controls use background: #fff so that they are styled. I have made them use font-size: 80% and it seems to look a bit better. I might add this style to the <fieldset> element instead of the <input> elements so that the caption below the search controls is made a bit smaller as well. Oh, I removed that ghastly Google image and used text instead, even though their policy very strictly states that a Google image must be displayed prominantly. I have an obvious link back to Google next to the search rather than a specific image link, so hopefully that will be enough.
I intend to start writing occassional articles for the site, the first being "What is Hypertext?" and the next being "What is a Stylesheet?" to give an executive introduction to the fundamenal business advantages of modern website design. Is there a place on Accessify Forums where I could get these articles peer-reviewed as I draft them?
Also, is there an area on these forums for discussing marketing strategies and suchlike? I've put together a mailshot letter/Email which I am pretty confident about but getting some reviews and advice from other folks would be much appreciated.
(EDIT) I've made some custom error pages, too:-
Rather inelegant using individual SHTML pages for this. Eventually I want to learn PHP so I can create a single, dynamic error page which handles all HTTP error codes. That's a very long way off, though!
| Code: |
| <p>The details of this error are:-</p>
<pre><strong>Server Name:</strong> <!--#echo var="HTTP_HOST" --> <strong>Your Bowser:</strong> <!--#echo var="HTTP_USER_AGENT" --> <strong>Your <span title="Internet Protocol">IP</span> Address:</strong> <!--#echo var="REMOTE_ADDR" --> <strong>Requested <span title="Universal Resource Locator">URL</span>:</strong> <!--#echo var="REQUEST_URI" --> <strong>Referring <span title="Universal Resource Locator">URL</span>:</strong> <!--#echo var="HTTP_REFERER" --> <strong>Status Code:</strong> <!--#echo var="REDIRECT_STATUS" --></pre> |
Share:
| Cerbera wrote: |
| I'm also a bit stumped on where to add a "Skip to Navigation" link. |
I like the way Jim did his. http;//jimthatcher.com. That might be an option.
Mike
Share: