I have a particular bee in my bonnet when it comes to accessibility, my wife is registered blind and I am constantly frustrated when she is unable see things (like text on a screen) especially when I know that this is avoidable. It was this frustration that prompted me to email Steve Jobs about the iPhone’s SMS functionality last year. True to his word users can now change the font size for those 2 apps.

What I don’t understand is why there is no way to change font size system wide, or why app developers don’t provide that facility.

Yes I know that you can switch on zooming, but honestly – have you tried using zooming on a phone? My wife uses screen magnifying software at work, so she’s used to that – but she can’t get on with the iPhone implementation & I can understand why. It’s awful. There’s also Voiceover. This must be a massive boon for people with incredibly poor eyesight but for most users it’s not appropriate, who wants their texts or other private data read so that others can hear it?

I’m sure many iOS developers have come from a web background & will be familiar with WCAG. As far as I know there’s no similar guideline for developing accessible apps, but a developers are still obliged to ensure that their apps comply with disability discrimination legislation such as the UK’s Disabaility Discrimination Act. The act says that service providers (and as a developer that’s you) must “make reasonable adjustments to ensure blind and partially sighted people can access your service”.

So for a moment, let’s just pretend that WCAG does apply to smartphone apps and look at guideline 1.4.4 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) That seems like a reasonable aim to me.

I have spoken to a couple of developers about this, the general consensus seems to be “I’m not sure if that’s possible” or “it would be an awful lot of work for not much benefit”. This makes me sad. Not being an iOS developer myself, I don’t know if it would be possible for someone to write a text resizing library that they could open source? If it is possible, think of all the people that could be helped by including that in apps. After all, it’s not jst cronicly badly sighted people that struggle with small text, many older & long sighted people do to.

I’d be really interested to hear other people’s thoughts on this, especially from the Dev community.

I’ve created a little site to explain how the mark tag can be used, I’ll be adding examples to it very shortly. In the meantime, if the mood takes you why not visit http://mark-element.info

It has rapidly gained popularity with web developers and designers – now software manufacturers are starting to take note with industry leaders like Adobe & Microsoft adding tools to their web development environments to help make jQuery development even quicker.

Microsoft Visual Studio 2008

I spoke previously about getting Jquery intellisense in Visual Studio 2008. Since then Scott Guthrie announced that that Microsoft will be shipping jQuery with Visual Studio going forward and then just yesterday I spotted this article on the Visual Web Developer Team Blog with interesting updates to VS2008′s jQuery intellisense. The best development from my point of view is the ability to get code hints in your aspx & master pages, not just your .js files.

In order to take advantage of these improvements you’ll first need to install Visual Studio 2008 Service Pack 1and this hot fix.

Next download the jQuery IntelliSense documentation file and save it in to your website in (probably a good idea to put it in the same folder as your jQuery file).

To add jQuery intellisense to a javascript file simply add this line to the top of the file:

  /// <reference path="jquery-1.2.6-vsdoc.js"/>

To add it to aspx & master pages do add the following lines to the head of your document.

    <% if (false)
       { %>
        <script src="~/[PATH_TO_REFERENCE_FILE]/jquery-1.2.6-vsdoc.js" type="text/javascript">
        </script>
    <%} %>

Points to note:

• The “if (false)” statement will prevent the link to the reference file being rendered at runtime.  Microsoft are planning to release a hotfix to automatically search for the vsdoc file if the javascript file has a reference path in it meaning that these links in the head will become redundant.
• If you are using aspnet’s MVC framework you need to ensure that your path to the reference file starts with a tilde otherwise VS will not find the reference file.
• dding a link to the reference to a master page means all aspx pages that inherit that master page will have intellisense enabled.

Adobe Dreamweaver

CS4

Adobe have just released Dreamweaver CS4 which also has support for jQuery code hinting. Adobe have taken a different approach to Microsoft, they use “introspection” to parse any javaScript files you have linked to your page and provide code hints.

This seems to work pretty well, and even handles chaining. However, I do have a couple of minor gripes. Firstly as soon as I typed “$(” dreamweaver told me I had a syntax error which really confused me, in the end I realised that just had to keep typing and DW would eventually figure out what I was doing. The other thing is, as a VS user I’m used to to code hits appearing strait away, in DW you have to press Ctrl + [space]. It’s not a big deal but would take some getting used to.

Older Vesions

Users of older versions of Dreamweaver this extension from Chris Charlton adds excellent code hints for jQuery & jQuery UI and what’s more it prompts you as soon as you hit “.” good work Chris!

On longer or complex forms users can find it difficult to see where the errors actually are.

The other week our QA manager asked us (the front end team) to scroll to the first error on a page. I started off thinking that it was going to be difficult and time consuming to achieve, but with the awesomeness of jQuery & one little-bitty plugin I was able to achieve the desired effect in  3 or 4 lines of code.

This technique relies on you already having validated your form and added a class of “error” to you the markup, either on the form elements or an error message.

You will need

• jQuery
• The scrollTo plugin (I used the minified version)
• A web page with some errors on it
• a couple of old yoghurt pots and some sticky back plastic.

And here’s the code

add this to the head of your document:

    <script type="text/javascript" src="/JQuery.js"></script>
    <script type="text/javascript" src="/jquery.scrollTo-min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".error:first").attr("id","firstError");
            $("#firstError").each(function (){
                $.scrollTo("#firstError", 800);
            });
        });
    </script>

And Bob’s your uncle!

Please let me know if you found this technique useful.

Usability testing is something I’ve been itching to do properly for years; I’ve been trying to sell the idea to various bosses ever since I read Steve Krug‘s excellent Don’t Make Me Think.

Andy’s session demonstrated that effective usability testing really is within reach. He started off with a real world example – getting people who don’t drink much wine to evaluate three different bottle openers. This had the rather pleasing upshot of there being several open bottles of wine that needed consuming during the course of the afternoon. From there Andy moved on to the main presentation which was informative and entertaining, you can see a version of the slides he used here.

At the end of the session Andy announced that Silverback, the application that clear left had been making a noise about for a couple of months was in fact a tool for doing usability testing on the mac, and we would all be getting a beta copy to play with. As a recent mac convert I was keen to give it a spin.

At work we had already scheduled in some usability testing on the product we are developing so I was able to try Silverback out almost straight away.

Silverback is incredibly straightforward to use, you create a project and then set up a new test session with in that. In your web browser of choice you navigate to the site you’ll be testing then, when you are ready to start your test click “Start Session” in silverback, the screen fades to black with the words “press SPACEBAR to start” displayed in large friendly letters.You can pause and restart recording during the session, using your apple remote if you have one. Youcan also use your remote to mark places where your tester runs in to difficulty apparently.

Once you have finished your test you can make notes and export the session. I love the way Steve the gorilla taps his foot and drums his fingers on his clipboard while the export takes place.  What you end up is a quicktime movie like the one below with the isight & screen capture videos combined, Sweet!

My Silverback Demo

The movies are incredibly useful for understanding how users will interact with your site, they’re a very persuasive tool for getting colleagues to rethink functionality.

I think Clear Left have done a great job with Silverback, we’ll definately be buying a license when they launch the product.

A note about recording audio with the mac mini

Our mac test box in the office is a mac mini running tiger, so it has no isight camera or built in mic.  I had real fun and games trying to get the audio to work, eventually I discovered that the line in on the mac mini requires an amplified source so standard PC microphones will not work.  The best solution this problem was to purchase a USB microphone – we bought this one from Logitec it’s plug & play and works a treat.

One thing that was missing until now though was a way of getting jQuery intellisense in VS2008. Yesterday I spotted this article by James Hart which describes how this missing functionality can be be added. You need to make sure that you have this Visual Studio 2008 Hotfix installed then follow the instructions in James’ article and as if by magic you’ll have intellisense for your jQuery code! This has gone down a treat here and looks set to make life an awful lot easier.

So here it is, the fordie.co.uk – what do you think?

Incidentally, I’m still playing with font sizes and colours etc – I might be fiddling around these for a little yet.

Also, I have found one or two niggly little PHP errors so far, if you spot any of these of you have trouble using the site please leave a comment.

With the recent redesign I completely scrapped the existing templates and started again doing away with the absolute positioning. However, none of the techniques I’d used in the past for footer positioning worked and for the life of me I couldn’t work out why.

Eventually the answer dawned on me; the form element that .net annoyingly insists on wrapping everything in was not being targeted by the CSS. Once I’d realised that it was fairly straightforward to get the footer working. Here’s how I did it:

The basic xhtml structure for your page should look like this

<body>
<!-- Stupid form required by .net -->
<form id="form1" runat="server">
<div id="container">
<div id="contents">
<!-- Everything apart from the footer goes in here-->
</div>
</div>
<div id="site-info">
<!-- footer stuff-->
</div>
</form>
</body>

And here’s the CSS to work the magic

html, body, #aspnetForm
{
	height:100%;
	/* without this the footer stays at the end of the content
           - not the botom of the viewport */
}
#container
{
	margin:auto;
	min-height:100%;
	width:980px;
	/* #container is at least the height of the veiwport and contains
            everything except the footer*/
}
#contents
{
	padding-bottom:3em;
	/* #contents contains everything excepte the footer and adds padding at least equivalent to the height of the footer beneath the content*/

}
#site-info
{	height:3em;
	margin :-3em auto 0 auto;
	width:980px;
	/* #site-info (the footer) contains the supplimenatry navigation and copyright info.
	   It's height and negative top margin should be the same as the bottom padding in #contents   */
}

This technique was based on Cameron Adams’ “footerStickAlt”.

Blogged with Flock

About a month ago I found a nice easy cure for this, so I thought I’d share it. All you need to do to stop .net adding the name attribute to the form is add an xhtmlConformance tag to your web.config like so:

<configuration>
<system.web>
<xhtmlConformance mode="Strict" />
</system.web>
</configuration>

Hopefully that’ll be of some use to someone.

*What annoys me more is the fact you have to have a form tag on every page for .net to work, but that’s a rant for another day.

My new theme is based on the basic word press theme by Ron Adams which has given me a nice blank canvas to build up from.

If you’re not sure which theme you’re looking at – look up the top of the page, if you see a big orange block with diagonal stripes it’s the old theme (based onfluidity3c).

The new theme has a similar colour scheme, as I decided I needed some continuity. I’ll post again when it’s finally unleashed.