Archive for category Accessibility

A List Apart: Articles: Testing Accordian Forms

Interesting article on web form layout, and how to make complex data collection tasks less painful for your users.

via A List Apart: Articles: Testing Accordian Forms.

No Comments

Maintaining ViewState on Password fields

just found this little nugget over on DotNetSlackers.com - By default dot net will activly stop you from maintaining the value in password text boxes on post back- which can be a pain in the ass forcing your user to keep retyping their password (twice as you will almost certainly have a password confirm box!).  You can get round this using this beauty;

Protected Sub txtMyPasswordField_PreRender( ByVal sender As Object, ByVal e As System.EventArgs) Handles txtMyPasswordField.PreRender
    txtMyPasswordField.Attributes("value") = txtMyPasswordField.Text
End Sub

No Comments

SQL 2000 Font!

Another simple one which i've only just recently found out- changing the font in the stored procedure viewer under enterprise manager for sql 2000- when in the sql server window, right click and select font.  Then update the "Text" property to the font of your choice and click OK.  This make a permanent change to any future stored procedure windows.

No Comments

CSS Sprites and a flickering problem in IE6

Working for a large publishering group who, among other things, have a large section dedicated to the sale childrens books, we have a lot of websites with really graphically heavy designs.  Specifically the designers will often put in navigation elements using non standard fonts, which they insist must be used as-is leaving us with only a couple of options;

  • sIFR
    This is a javascript/flash solution which allows you to use any font you want on a website.  It’s very simple to use- you simply add the javascript include to the top of your page, then add the sIFR css classes to the elements you want to be processed by sIFR.  You will also need to open the attached fla file and change the font in there and republish the SWF file.  At run time, the javascript then finds any elements using these classes, grabs their content, then substitutes it with a small flash SWF file, showing your title in your chosen font. 

    This is best used for page headings rather than large blocks of text (due to the processor time required to perform the conversion in real time) and, in my experience, can lead to some CSS based head aches (adding padding or margins where you dont expect it, or generally pushing other elements around) if you have a particuly tight design.

  • CSS Sprites
    Example CSS Sprite image showing both a buttons normal and over states

    This solution isn’t as nice as sIFR, as you are still having to create a graphic for every button, and a graphic for every over state etc.  However with Sprites, you dramatically reduce the download times but putting all your button graphics and all their over states in a single image, and adjusting the offset of which part of the image you see on each button, using CSS.  An example sprite with just a single button can be seen in the image on the right.

    The benefits to this include significantly reduced download times as you don’t have a individual set of headers and footers for each of the individual images- you’re just downloading the one graphic.  This also eliminated the need for pre-loaders (which never seem to make much of a difference anyway!) because as soon as the graphic is loaded, you then have all the graphics for your navigation, and their over state’s in memory.

    So for each button on the site you set the same single image file, but when you set the background image, you also set an offset like so;

    #leftNav #btnHome a {
    	background-image:url(/graphics/leftnav_sprite.gif);
    	background-position:0px 0px;
    	}
    	#leftNav #btnHome a:hover {
    	background-position:0px -26px;
    	}
    

IIS 6 Dialogue, allowing you to add Custom HTTP Headers

We went with the CSS Sprites solution in the end which went in very easily and immidiatly worked under firefox.  We did however see issues under IE6- as we roller over the buttons there seemed to be a lag before they actually redrew the normal images, as though it was downloading the graphic again; which apparently is exactly what was happening.  After a bit of googling around we found this article by Andrew Fledderjohann which had the solution we needed (as well as a few other fixes for apache etc)– a simple addition to the headers supplied by IIS when hosting the site.  In the properties for the site in IIS, add a new Custom HTTP Header called Cache-Control and set the value to

post-check=3600,pre-check=43200

This started working instantly for us totally eliminating the flicker.  You can see the results of this working up on www.franklinwatts.co.uk

No Comments