Helpful Design

PNG Transparency

2006-12-12T15:16:00.000Z

With the new Internet Explorer 7 now pretty widely available, and many Windows machines being automatically updated, us web-designers can at last consider using PNGs rather than JPGs. They have their downsides (they're generally slightly larger) but they support an alpha channel which allows transparency. Many of the newer browsers (Firefox, Opera, Konqueror, Safari) have supported transparent PNGs for a while, but Internet Explorer 5 did not, and Internet Explorer 6 only just did.

So, how do we use transparency? We can make it work in all the latest browsers, including IE6 and above. We first need to realise, though, that our images must be painted as background onto elements. This is not the cleanest way of producing the pages, but in most cases the transparency is only for decoration anyway, and such elements should be invisible in non-graphical pages.

Let us take a common example, using image replacement for headers.


<h1 id="title"><a href="index.php"><span>My Webpage</span></a></h1>

Our markup is neat and, barring the span, semantic. It's a title on which we can click to return to the home page. If we are using a browser, like lynx, or a screen-reader that cannot support CSS we get a nice page that still makes sense.

The usual CSS we might employ might be something like this:


#title
{
    background: url(background.jpg);
}

#title a
{
    display: block;
    background: url(titlegfx.png) no-repeat;
    width: 300px;
    height: 50px;
    margin: 0 auto;
}

#title a span
{
    display: none;
}

It simply puts a nice background on the title, and does the usual image replacement technique for the link. [There are of course other ways to do the image replacement, and there's lots of hacky stuff that works too, but this works for nearly every browser, despite requiring the extra span.]

If titlegfx.png is transparent, this works fine in all but IE6 - it will even work in IE7.

To make it work in IE6 we must present special CSS to the browser. We can do this with Microsoft's conditional comments. In our HTML we can put this:


<!--[if IE 6]>
<link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" />
<![endif]-->

All normal browsers will of course ignore this XML comment, but IE will recognise the commands and include the inner HTML if it matches IE6. This delivers a special IE-only CSS to the browser.

In this file we need to put some wacky IE-only commands that actually filter the graphics supplied and do it in such a way as to produce a transparent image, thereby recreating what other browsers do as standard.


#title a
{
    display: block;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='titlegfx.png',sizingMethod=image);
    width: 300px;
    height: 50px;
}

That bizarre filter thing is what makes it all work. The sizingMethod parameter may be scale (which will stretch the image to fit the HTML element), or in this case is image which keeps it the same size as the original image.

Note that one difference is that the location of the image file in the filter is relative to the HTML file, not to the style-sheet file, unlike all other style-sheet commands.

This method will not work correctly with IE5. Of course, you could use a conditional comment for IE5 and deliver some normal CSS to make it work, and if you're really bothered about Netscape 4, you might use @import in <style> tags instead of <link>, but the more you add backwards support the longer the job gets and the bigger your files get. There is, of course, some merit in producing some style-sheets that work with mobile devices, as they seem to be becoming more and more popular these days, but unfortunately those filters don't work and most don't support native PNG transparency.

You can see the use of this technique at a website I did recently for the QMSS Conference 2007. If you resize your browser you will see the banner is made up of 3 transparent PNGs.

Tags:

png transparency alpha web design

The Cost of Hot-Linking

2006-03-31T23:13:00.000Z

It had never really occurred to me before, because I hadn't ever had trouble, but I was utterly shocked when I got my quarterly statement through from my web-space host. I was surprised as my bandwidth seemed to have been hovering around 800Mb per day (which seemed a lot) but on the 13th March had shot up to 1200Mb a day! This started costing me money. At first about £6 a day, and the bandwidth just went up and up, until it reached about 1600Mb a day yesterday costing me £9 that day alone!

Of course, the moment I realised I went on a mission to find out what the hell was going on. The statistics the web-host provided seemed to show nothing unusual. I run about 10 sites on my web-hosting and none of them seemed to be getting lots of hits (according to the generated statistics).

So, I downloaded the original web-access logs that the web-servers churn out day-in-day out. Opening them in Wordpad and I noticed an unusual number of hits to a photo that was on my personal site from me and my wife's honeymoon. Huh? In the first 100 lines, at least 80 were to this image, all HTTP 200 (i.e. transaction completed ok).

I downloaded a great program called Web Expert Lite to analyse the logs more effectively, and there I spotted it.

The image was being hit over 13,000 times a day (20,000 on one day) to be used for people's profile pages on myspace.com, a social networking website. It had been added to HotFreeLayouts.com by some guy called Jesse, and apparantly (according to the page about it), has been used on 24,728 myspace profiles.

Now, I'm half flattered that one of my wife's photos should be so popular, however, I'm not prepared to pay £10 a day for some spotty teen to have it as their website's backdrop. I mean, it's not even nicely done - just look at the background on that Jesse bloke's website!

So, the way you stop this 'hot linking' as it's known it to re-write the .htaccess file like so:


RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?myspace\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogspot\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?altlab\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?livejournal\.com/ [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

Adding this to your .htaccess at the root of your domain will stop hot-linking from the listed addresses. Each line is a regular expression pattern match in the HTTP_REFERER. NC means ignore case when matching, and OR provides a logical OR with the next line. The last HTTP_REFERER pattern therefore doesn't have the OR.

If one of these match the last line matches an image file and the "- [F]" causes an HTTP 403 - Forbidden to be returned, blocking access to the image.

You might read this as:


if( myspace.com, blogspot.com, atlab.com OR livejournal.com ) then
    if( jpg, jpeg, gif, bmp OR png ) then
          return 403 Forbidden
    endif
endif

I found this information on the AltLab htaccess tutorial and that page allows you to test whether your htaccess is working (hence why altlab appears in one of the patterns!).

So, the upshot is that no-longer can people hot-link to my images and cost me lots of money in excess bandwidth costs!! The second upshot is that 24,728 myspace profile pages now look blank. Ha!

The moral of the story is that you should download a local copy and not hot-link.

Browser Accessibility

2006-03-21T14:40:00.000Z

It's often overlooked that accessibility refers to a few other things alongside making websites usable by the disabled. Browser accessibility is one of the things that is very important, because you never know what browser is going to be used to view your site, so to maximise your visitor base you need to make sure that they can read your website whatever they are using.

Testing out your website in various browsers is a relatively easy affair - you simply need to download the browsers and try it. If you don't have a Macintosh, and don't know anyone who has one, you can use services like NetMechanic, or the thorough BrowserCam, which basically take screenshots of your site on various browsers.

There is a particular exception which isn't covered in the above, and a situation which will probably become more common, and that's people on mobile devices accessing the website. Mobiles phones are becomes more and more popular, particularly with youngsters who are most conversant with the web. Providing websites that are accessible to these devices (which generally have very small screens) is increasingly necessary.

Detecting browser (device screen) resolution can only be achieved with Javascript and that has problems all of its own. Server-side rewriting of the resulting page is always the most effective and accessible method of presenting different pages. It's possible to test the user agent string to detect mobile devices. A quick search on Google found the following PHP code, that does this detection (by regular expression matching on the user agent string) and sets the variable $mobile to 1 if the device is a mobile device. You might decide this should be a boolean.



<?php
        // From: http://www.vbulletin.com/forum/showthread.php?t=108641&page=2
        // PDA BROWSER DETECT
        $browsers = array(
                "Windows CE",
                "WebTV",
                "AvantGo",
                "Blazer",
                "PalmOS",
                "lynx",
                "Go.Web",
                "Elaine",
                "ProxiNet",
                "ChaiFarer",
                "Digital Paths",
                "UP.Browser",
                "Mazingo",
                "Mobile",
                "T68",
                "Syncalot",
                "NetFront",
                "Danger",
                "Symbian",
                "Nokia",
                "Xiino",
                "AU-MIC",
                "EPOC",
                "BlackBerry",
                "Wireless",
                "Handheld"
        );

        if(preg_match('/('.implode('|', $browsers).')/i', $_SERVER['HTTP_USER_AGENT'], $match))
        {
                $mobile=1;
        }
        else if (isset($_SERVER['HTTP_UA_OS']))
        {
                if (strstr($_SERVER['HTTP_UA_OS'],"POCKET PC") !== false)
                {
                                $mobile=1;
                }
        }
        else
        {
                $mobile=0;
        }
?>

To that end, I've used the above code to provide a PDA-based view onto this site. As there's no service to test this on multiple mobile devices, I can only test this on my Pocket PC, but it does seem to work. I'm just not sure how good the browsers are on other devices (the Nokias and Sonys), and whether they deal with stylesheets well.

Usability Exchange

2006-03-17T17:43:00.000Z

Usability Exchange is a new website where disabled users are drafted in to test your website for you, for accessibility criteria. They are paid for each website they test, yet registration for users and organisations is apparantly free. I haven't yet used them, but I shall certainly sign up and use them if they really are free.

PAS 78

2006-03-09T22:04:00.000Z

A new report (Publically Available Specification number 78) has been produced by the Disability Rights Commission that goes some way towards making accessibility in websites more widely accepted. Clearly the report is mainly aimed at accessibility for disabled users, but at least getting the word out may make people think more about the general idea of accessibility when it comes to making websites.

As part of the launch of this new document, they held a conference, but it was rather disappointing to see the lack of effort put into making that page accessibile. For example, their accessibility statement was a link to a Word document. It's all very well putting anchor titles that say it's a link to a Word document, but that won't make a jot of difference to someone who doesn't have Word installed!

There's an overview of the document at Bruce Lawson's website (link thanks to Blether).

10 years of Good Web Design

2006-01-16T13:36:00.000Z

http://news.bbc.co.uk/2/hi/technology/4616700.stm

Apparantly, users make a decision about whether a website contains good quality content within 0.2 seconds of seeing the page. Is this true? REALLY? Perhaps that's the case, but the [implicit] extrapolation that users are dumb enough not to be able to change their mind about a page after 5 seconds is what gaulls me about this; although I suspect it's half-arsed reporting on behalf of the media again.

I have been to many sites which are so clearly amateur looking that I would recoil and head for the back button, but I have also been to sites where the presentation is bad, but I have some trust of the content on that site. If the study was specifically targetting e-commerce sites, then I can say I have been to shops where the presentation is pretty bad, but I still shop there because I know that they're good shops. Had I been one of these zombies who were unable to change their mind I'd be spending more and waiting longer on a pretty site.

Of course, presentation is important to the branding of a company and putting forward an aura of quality, but I still believe the content quality is what forms the user's opinion of the site.

A month ago the BBC also ran this:

http://news.bbc.co.uk/2/hi/technology/4061093.stm

I basically agree with everything Dr.Nielsen says, although I personally think his views of Amazon's site are wrong. In my opinion, its popularity goes to show exactly why the presentation of a site doesn't really matter that much; because Amazon's site looks horrible. I often spend 5 or 10 seconds searching for some link on Amazon's site that really should be better placed; the colours are garish, but it's the layout that is the downfall for me. What a mess. Just go and look at a product description page for a minute. It's just so ragged and messy, almost nothing is delineated from each other and above all, it's not very accessible. My basic HTML validator shows 28 errors, and 319 warnings on some random product page. However, despite all that, I still use them for lots of things, because they offer good value, a good range and good service; and to me it proves my point that although design is important it's not everything. Remember, content is king. Of course, if you have both you're onto a winner.

MySQL Mail Merge with Microsoft Word

2006-01-05T10:45:00.000Z

Connected to the last entry, using MySQL from Microsoft Word can be fairly easily achieved without all the faffing of exporting data from MySQL and importing it into Access. It's something that one of my clients required having used a web-page to gather information into a MySQL database, and then requiring the output of a number of letters based on this data. It requires the installation of the MySQL ODBC driver which Word is then able to access through the mail merge wizard.

So, here's what to do:

Get the latest MySQL ODBC driver from the MySQL site: http://dev.mysql.com/downloads/connector/odbc - the MSI installation is probably the easiest.

Install the ODBC Driver.

Go to Control Panel > Administrative Tools -> Data Sources (ODBC)

Make sure the "User DSN" tab is selected and click the "Add..." button

Select from the list "MySQL ODBC 3.51 Driver" and click Finish.

A box will appear. In the Login Tab, give the Data source a name and description (these are up to you).

Enter the information for your MySQL server the boxes.

Click OK, and you're done setting up the database connection.

To use this in Word's mail merge, you need to do the following:

Tools > Letters and Mailings > Mail Merge Wizard

Select Document Type, click Next

Select Starting Document, click Next

Select "User an existing list" and click "Browse..."

Select "+Connect to New Data Source.odc"

Select "ODBC DSN"

Select the data source by the name you gave it above

It will show you a list of the tables in that database. Select the table you want to get data from and give this a description if you feel like it, although you can just leave it if you want.

Click Finish.

A box will pop up.

This bit is important, otherwise it won't work:
Number 3 says: "Enter the initial catalog to use"
Click the drop down box, and then click off the drop down box.
The box should be empty!

The "Test Connection" button should now work.

Click ok, and you're taken back to the mail merge wizard showing a list of the people in the database.

You can now use this as you would any mail merge.

Tags:

MySQL Problem

2006-01-04T12:57:00.000Z

I was working to get port an old website from one machine to another, both using PHP and MySQL, when PHP kept throwing up this problem:

mysql_connect(): Client does not support authentication protocol requested by server; consider upgrading MySQL client

I did a bit of scouring the web and realised that the password hashing algorithm in the newer MySQL has changed. So when I’d set the password for the website to use the database, it had set it using the new password hashing algorithm, which PHP doesn’t use. The way to get around this is to set the password like so:

SET PASSWORD for [user]@[machine] = OLD_PASSWORD(’[password]’);

Shop Code

2005-11-26T18:20:00.000Z

I spent a fair amount of time today updating some code I have written to provide shop-front functionality. Unfortunately, when I wrote it I obviously wasn't thinking clearly and although much of it is well Object Oriented, the administration section on the backend was a monolithic PHP script that was just a maintainence nightmare. So today, I've been re-working the backend to make it more flexible for both adding new functions (which I'm going to need to do at some point), as well as being much easier to maintain. Code maintainence is something alot of people often don't think about when writing code, but it's incredibly important. It's for that reason that I've made sure I'm commented the php classes, and the files to ensure that next time I need to go into the code and do a bit of hacking, I know what the hell is going on!

Blog Moved

2005-10-28T16:11:00.000Z

I've moved Helpful Design's blog over to the website so that it's more integrated. I'm still using Blogger, as it's pretty easy to use, although getting it so that it still worked with the different site designs was a bit of a mind bend. I ended up having to using server side includes and an htaccess file that forces all html files to be parsed on the server. Blogger is certainly easier to use using their own hosting.

Java Generics

2005-10-12T09:43:00.000Z

As part of my regular work I've been migrating some code I wrote a couple of years ago to a new machine. As part of this migration I automatically use the latest versions of software that is required. In this case, I used the very latest version of the J2EE reference implementation, which also uses the latest version of Java, version 1.5. Now there's some new stuff in Java 1.5 that I hadn't known about before called Generics. This is basically an extension of the Java language that provides type checking at compile time. It requires a bit of extra thinking and a bit of extra code (which to my eyes is pretty ugly). The generic system applies mainly to the Collections within the Java framework, such as Lists, ArrayLists, etc. Now, the software I'm migrating is 285 files, nearly every one of them contains at least one Vector, ArrayList, or HashMap. This basically causes immense amounts of work if I want to update the code so that I don't get the "unchecked" warnings - which would be nice so that I can actually easily see the errors produced. As Oates once said, "I may be some time."

Manic Integration

2005-09-29T21:58:00.000Z

As part of the usual academic proecdure, conferences are often set up by departments that relate to some specific interest of that department. That department organises a local venue and all the stuff that goes with it, and charge the conference attendee some fee that will cover all this expense. So for the Design of Experiments website that I've been working on, they wanted a conference registration system that would allow online payment. As the newsletter of the Royal Statistical Society was to feature this page they wanted it to be up and running for the newsletter's circulation date which was the 20th September. This meant a manic and frantic effort on my part, as well as some others.

Because of the way a University works (i.e. massive inertia!) they already had a payment system in place which they were quite happy with. In fact they're using Web Page Marketing who supply the secure pages and the payment gateway link. So I had to integrate my site with them, which was quite easily done using HTTP POST. It was not too difficult, although an extra level of communication insisted by the finance department made this harder than it should have been.

In the end, we got the site up and running on the 23rd September, and it's been running since then - and no one has registered yet!! Oh well, so much for all the manic panic!

We're Checking Out...

2005-09-13T11:05:00.000Z

Checkout systems are quiet difficult to implement effectively. I have been working on the checkout system for an e-commerce site I've been putting together, and being the first time I've done it, it makes for an interesting challenge. Keeping track of what the user has placed in their trolley is fine within the confines of the product browser, but when it comes to handing that information over to the secure checkout server, then ensuring that it's all valid, providing various delivery mechanisms, and working out what price they will be, it all adds up to being quite complex. And that's even before having to take the user's details for their credit card.

I'm now onto programming up the credit card screen, and I will have to utilise a formula known as the Luhn formula, that allows me to check whether the card they entered was a valid card. I will also need to check the validated card number against a blacklist of stolen card numbers. Only then will I be able to pass on the details to the payment gateway, which I haven't sorted out yet.

All Quiet

2005-09-06T15:35:00.000Z

It's been a bit quiet on the web-design front. I haven't yet got around to advertising myself in a local rag or anything and when I last checked Google and Co. still haven't spidered my website, hence no search engine hits.

I have been adding a registration form to the Design of Experiments website I've been working on for the University of Southampton, and I am having a meeting with the University's financial person tomorrow about incorporating their online payment systems into it. They want to use their system, natually.

That's about it.... I'll add news when it happens....

Screen Readers

2005-08-26T08:42:00.000Z

Screen readers are what most blind people use to surf the web. They are computer programs that read out what is on the screen in a computer voice. The commonly accepted king of screen readers is called JAWS, but even the standard version costs a whopping $895 (~£600). That's an enormous amount of cash, and certainly not something I can afford to test my websites. [As an aside, I found someone on the forums suggesting that developers should get a reduced price version, but it was pointed out that if developers get a reduced price version but they still expected the blind people to pay full whack that would constitute discrimination.] So, I had resigned myself to having to look over someone's shoulder sometime in the future when I find someone who uses it.

But then I came across pwWebSpeak, which is free to download. Ok, it's probably no where near as good as JAWS, but it gives you the idea of how a screen-reader will read your webpage, and it pointed me to a number of things I needed to change to make my website more accessible to these readers. For example, I had a "Skip Navigational Links" link at the top of the page that jumped all the menu items and went straight to the content. On the Dance Life website there is a context menu that appears for the classes main menu. If a screen-reader user brought up the classes menu they would either have to listen to all the main menu first, then the submenu, or jump past all the menus straight to the content where they couldn't access the individual class pages. It's a little thing like this that wouldn't show up on a validator but is very important to the accessibility of the page.

Tags:

screen readers

Helpful Design Goes Live

2005-08-25T18:30:00.000Z

It's been a busy week getting the Helpful Design website up and running, and now it is!

GO VISIT NOW!

It's been quite a learning experience. I've been doing websites for over 10 years now, and the way the web is being used has changed a lot. For example, the code used to write webpages, although largely similar to 10 years ago, is undergoing a very slow change from a slightly inconsistent HTML to a well-formed XHTML. This is good in many ways. Firstly XML is well formed, which means all the tags that make up the code have to be symmetrical - an open and a close! The code that makes up the webpage is consistent, which means easier maintainence, easier to check for standards compliance and various other stuff. XHTML can be generated from munging of basic XML documents (documents containing definitions of stuff) using XML Stylesheets (XSL). These explain how to convert one XML document into another (such as an XHTML document). This is good because it means content can be generated automatically.

However, one of the main things that it helps towards is the separation of content from style. This is a big issue in the world of hypertext documents at the moment, particularly with the, albeit slow, growth of the Semantic Web, which aims to make data separate from content -- first you need the content separate from the style. This is done these days using CSS (Cascading Style Sheets). There are many advantages of having your content separate from your style. One of these, as I've explained before is accessibility. By making your content separate from the graphics and funky colours that make your website look so nice, you're able to deliver this content in different ways - for example in great big text for people who can't see very well, or through a speech engine for people who can't see at all.

There's more to making accessible websites than just writing XHTML and CSS. Making sure there's links to jump to sections; making sure the structure gives people with learning difficulties all the help they might need; making sure the contrast and size of the text can be changed, etc. And that's the bit that takes the time, and what makes it so difficult.

That's why so many sites just don't bother. For example, I was surfing about after watching something about Riverdance on TV last night and came across Jean Butler's website at www.jeanbutler.com. It doesn't work in my Firefox due to some problem with the flash plugin, so, like so many other pages, I just get a blank screen. Admittedly they provide a butt ugly text only version, but that's just not good enough, really, and instantly doubles the maintenance costs.

Later I ended up on the designer of a lawyer's website (website design by www.freecom.net) and looked at a few of their websites they "designed". [I used the quotes on purpose there because they've really just filled in a template - which they admit to doing, at least]. These really do fall short on accessibility. Check out this one which looks nice enough on a modern browser, but turn off image support and it looks like this:

Now try and navigate around. I know I couldn't, and nor could any blind person.

I've found some great sites in all this flailing around. The Accessify Forums are a great place to see some scathing reviews of some websites. There's lots of validators around, although Cynthia seems the best accessibility tester.

Anyway, I've lost the plot with this post now...

Tags:

More Accessiblity Stuff

2005-08-17T10:11:00.000Z

I was reading Random Acts of Reality today who has started doing audio version of his posts, which I think is really good for accessiblity. If I had the time I would also do it. It's gotta be better than alot of those computer voices.

I was then interested to follow a link to Web Design and Mastery who claims to do accessible websites, and good on them for that. The websites in their portfolio are ok, although personally I think they lack flair, and I'm still not convinced that the use of tables as a presentational aid is a good idea. In my view the HTML should be structural - or at least as structural as possible - and tables should be used for displaying data.

It interested me that the Guild of Accessible Web Designers exists. There are lots of these guilds about. I am quite into videography and there's all manner of guilds available in that field. Basically you pay the GAWDs (gawd, what a name) money (£39 a year), and you get to call yourself a member. Woo. Actually, it's a bit more than that, as you get some advertising space in a database on their site, and get access to a small online library too.

From there I ended up at various other places, such as WebAIM's Screen Reader Simulation. This gives a pretty good idea of what it's like to use a screen-reader for yourself, if you've not used one.

One useful tip I found from using Cynthia Accessibility Verifier, that its a good idea to have a "Skip Navigational Links" link right at the top. If you tried that screen-reader simulation you'd realise that listening to the computer read out the links time after time after time on every page in your website is a real chore, so this link makes it quick for the user of a screen-reader to get straight to the content. I've added it into my websites, and just set it to display: none; in the CSS, so that visual users don't see it.

Unique Selling Point

2005-08-15T13:53:00.000Z

The unique selling point I'm going for with Helpful Design is that of accessibility for visually impaired users.

It turns out it's not entirely unique (of course not, that would be pretty much unheard of now in the great wide world of the web), as I've found another company, MSO Media, founded by a visually impaired man, who also work on this principle. However, of the many designers I've looked at they are the only one I've found that even mention it. Unfortunately they do not have a portfolio, which I think is a disadvantage for them, as it's not clear how good their websites will be when complete. Perhaps they're just starting out too?

I did find a couple of others mentioning accessibility when in fact they meant navigability, but that was it. So I'm still pretty much in a niche market, while also braving the wide and competitive world of general webdesign.

I'm still unsure of how far to go with the integration of other forms of design into Helpful Design. I'll certainly stick to Websites, and perhaps phase in other forms of design (stationery, photography, videography, music, etc.) if and when the time allows.

Helpful Design is Go!

2005-08-15T12:13:00.000Z

Hello! This is the Helpful Design blog. I have no real idea what will happen on this page, but I'll use it for talking about webby stuff I find that's useful for the web design work I'm doing, and I'll probably even talk about some of the jobs I get, if I get any... heh, there's optimism.