IFIP Digital Library on an iPhone

A few weeks ago I sent out a request for people to test the IFIP Digital Library I am helping set up. One reply complained about the sideways scrolling needed. I didn't understand what this was about until I happened to be in the foyer of Apple's offices in Sydney. There was an iPod touch on demonstration and so I typed in the IFIP DL address. The web page came up but with a very narrow column of text, too small to read. I used the iPod's pinch interface to zoom out and it was readable. I was also able to select a paper and read the full PDF text on the little screen. I don't know how many will want to read technical ICT research papers on a pocket size device, but it was impressive it worked.

But why did the text start out so small? I noticed the banner image in a thin strip across the top of the page. IFIP wanted the Digital Library to have the same corporate look as the rest of their web site. So I had to work out how to change the standard interface of the Open Journal Systems (OJS) free open source publishing software to have IFIP's colours and layout. Changing the colours was not too hard, but getting the layout was harder. I used an extra CSS style sheet, which OJS has provision for, to override the defaults. This was made a little more complicated as I wanted a design which would be efficient in the use of bandwidth, would be accessible for the disabled and work on hand held devices.

One compromise I made was to use the same banner as on IFIP's home page. But what I hadn't noticed was that this image was thousands of pixels wide. The image was trimmed to fit the full screen width, using CSS on their site. But in my implementation the banner made the page wider. This did not normally matter as the extra was off the side of the screen. But the Apple Safari web browser shrank the page to fit the whole width of the banner, reducing the column of text under it in proportion and making it tiny. The iPhone presumably does this as scrolling sideways on the tiny screen is a problem.

The most efficient way to fix this problem is to trim the image to the width of a typical screen (it is a waste to send an image and then have the browser throw away half of it). I did this and it worked fine on my own display. I then got more adventurous and decided to remove the text "International Federation for Information Processing " from the banner. Good design says that you should not have text in an image as this is harder to read and makes the image larger. So I carefully blurred out the text, told OJS to insert it as text and then changed the CSS to put the banner image under the text.

Aligning the text with the IFIP banner so it looked like the original took a lot of trial and error. The result is not perfect: the original text has a grey shadow around it which can't be reproduced easily with CSS (current browsers do not support CSS's text shadow function). I then spent hours trying to duplicate the shadow in a portable way, before realising this was a waste of time. But then I thought it did not look too bad and looks much better for people who can't see the image.

However, when I looked at the result on a higher resolution screen (at the National Library of Australia) I found the shortened image did not fill the whole screen and was being repeated. I will need to make the image longer, stretch it to fit or just fill the space with plain color.

Also I find that I had changed the "Contents" screen earlier to insert the banner. To do this I had to change the OJS source code. The result was that the system was inserting two copies of the banner one over the other. I will need to manually adjust the code.