Alex's thoughts

Using ready made website components

I recently built a portfolio gallery site for Art Director and Creative Director Phil Rylance. Phi'ls main requirement was for the site to display content in the style of Apple's Coverflow GUI. Of course being web based, I was aware that I would not be able to completely emulate Apple's processor intensive system. Developing something like this myself would not really be on the cards. For one thing Phil wanted the site up and running as soon as possible and more importantly, my developing skills would not really be up to something as complex as this. Not only would the gallery have to display images, that would go full screen clicked on them, but it would also need to be a multi-media gallery able to display Audio and Video (full screen of course). Searching round the web for a component made solution that would do all of this unfortunately did not return many results.

There were not that many ready made products out there, I started out looking at JQuery based GUI's. JQuery has the advantage of being an open source component based system, It is well supported and, due to it's logical language, is relatively easy to customise for your purpose. Unfortunately all the jQuery based systems I could find either did not support both video and audio, or did not behave enough like Coverflow. Flash based systems seemed too complex and would be difficult for the client to update himself once I had handed the project over. The best solution I could find was x-flow. X-flow is a PHP/javascript based system which look pretty darn close to Coverflow, with all the mirror and flipping effects which the client was looking for. It boasts the ability to be able to display full screen media too, and has the added bonus of a web based admin panel allowing the user to easily update content without any programming knowledge.  I found the system mostly worked well, but proably because it has been developed by just one person and is not open source, there were a few problems that I had to either fix or work around in order to get the system to work as I wanted. For one thing clicking on a video took me to the next film in the sequence rather than filling the screen as it should, plus the Audio function of the component didn't work, so I had to convert the MP3's to FLV's and play them using the video player (which actually worked out quite well, as it meant I could display a static image to go along with the audio). Overall I was pleased with the product, but learnt that when using a ready made component, as opposed to one you develop yourself, you can't expect it to work exactly as you'd want it to.

Goodbye Arial?

The chances are when you visit a website it will contain one of the same old typefaces Arial, Verdana, Georgia, or  Times New Roman. As web designers, our choice of fonts have very much been pre-determined by the pre-installed set on a standard windows install. If you then want the page to display the same typeface on a Mac you're choices are even more limited. Thankfully, though Vista had many detractors one of the positive steps forward it made forward was to introduce a whole new family of fonts. The Microsoft ClearType Font Collection is, according to Microsoft, a collaboration between engineers and designers and, to be fair, they have actually made great strides since the days it designed Comic-sans and the ubiquitous Arial. The collection contains 6 font families with similar forgetful names beginning with the letter 'C': Calibri, Cambria, Candara, Consolas, Constatia and Corbel. Each has it's own distinct style and purpose and render really well on screen, looking much smoother than traditional web fonts like Arial. They have been around for some years now, but it is perhaps only with the success of Windows 7 now gradually starting to replace Windows XP as the the main PC operating system in use that we can now look seriously into using them on websites.

CSS Font-family allows us to list fonts in order of preference, so we can now use these new standard windows fonts with more traditional fonts, such as Verdana as a fallback. We can also look into what fonts we can use when targeting Mac browsers. For Instance on this site I have used the CSS:  "font-family: "Gill sans", "Gill sans MT", Calibri, Helvetica, Arial, sans-serif;".  GIlls sans is used in 93.43% of all Macs and even (in it's MT guise) 54.03% on a PC . For the 55.97% of PC's that don't have GIll Sans, we offer Calibri (Vista and Windows 7 users) as an alternative. Calibri is quite an elegant, well proportioned  font, not unlike Frutiger. It's not a perfect replacement for Gill Sans, but it has similar proportions. For the few Mac systems that don't have Gill Sans we tell the browser to use Helvetica and for PC users who don't have Gill Sans or Calibri, we relent and allow them to use Arial. It does mean that not all visitors get the same website experience, but it does mean that we don't have to tie them all down to the lowest common denominator. So next time you want a website, look at the choice we have and think beyond Arial :)

Making websites for the iPhone

Apple OSX UI

One of the things I like about using my Mac is the excellent consistent user interface that it always has. There is a nice useful menu always along the top of the screen consistently for each application and all the windows have a similar look and feel, with close buttons and general functionality following a standardised 'OSX norm'

You'd think of all people Apple might try and keep this consistency intact wouldn't you? After all, they always seem so anal about ensuring other apple-isms are kept in place. Try typing 'iphone' on your iPhone and watch how the spell checker helpfully auto capitalises the P for you. So why on the latest version of iTunes released yesterday (10) have they decided to move the remove the title bar and shift the Close, Minimise and Maximise buttons (traffic lights) on to the side, rather than the usual place on the top? Every other finder window and app window has a title bar (so you know what it is) with the traffic light buttons in the same recognised location along the top (and always has). Come on Apple sort it out, this is a mess.

Designing websites for mobiles

Recently I've been looking into how to convert sites for mobile use. With the proliferation of iPhones and now iPads as well as Blackberrys, HTC's and various other mobile formats, what size should we design for? The traditional way would be to detect the users website using HTTP_USER_AGENT, which would detect the browser used and do a redirect or use a style sheet based on the platform and browser detected.

Barclays Cycle hire scheme

In London we are now lucky enough to have a new bicycle hire scheme. imaginatively titled "Barclays Cycle Hire". I'm all for getting more people onto bikes. It is the easiest way to get around london. The Public transport system is often infuriatingly slow and, compared to other capital cities, overpriced (thanks to Boris's recent price hikes). So I was quite excited to see the bike stands appearing all over central london which soon filled out with shiny new bikes. Even though I have my own bike, I thought I'd sign up anyway. The scheme is only £3 for the membership key (which you need to unlock the bike) and then £1 for each day you use it. Providing each journey that day is less than 30 minutes, you are a not billed anything else. Which seems quite reasonable to me. Its handy if I've got the train into central london and want to get somewhere quick, but don't want to suffer on the tube.

I signed up on-line a couple of weeks back, and I received the key-fob on friday. You handily receive a map with it showing you the locations of all the hire stands with hints and tips on the reverse. On saturday morning I went on-line to register my key fob, but the cycle hire website on the tfl site was down "Server not found" being the error message. Ok, I thought, I'll try again later. 2 hours later it was still down, so i tried calling in. After hanging on the line for  while, listening to the message "you can also register on line", I eventually got through to woman telling me that all the agents are busy, but she would get someone to call me back. After a few hours of waiting (and trying the website again, which was still down), I rang back and eventually got through to someone who could register my key fob. Excellent!

The next day I wanted to go the the Tate Britain. There is a cycle stand right next to charing cross station, where my train arrived, just off the stand. I inserted my key-fob, the light turned green and I pulled the bike out. So far, so good. It required bit of a yank to get the front wheel out the stand, but no problem. Cycling off around Trafalgar square and down Whitehall I found the bike quite easy to cycle. It is really quite heavy, but has 3 gears to power it along. To be honest though, the gearing is so low that  you only really need the top gear. Even on in the 3rd gear you are soon spinning like mad and not going very fast, but then again it is probably made for the occasional cyclist, not in a hurry.

According to my map there should be a cycle hire stand right by the Tate, I couldn't find it though. After cycling round for a bit i gave up finding it and went to the next one, which was by Vauxhall birdge. Not far away, but still 5 minutes walk away. I had a similar experience of being unable to find a docking point on my return journey into Covent garden. I couldn't find marked the point by Cambridge circus, so ended up in Soho. Not sure if it's an inaccurate map, or just that some of the docking points aren't built yet. I'm sure as more of these docking points go up, it will be easier to find them.

I checked the cycle hire website again, just out of interest, and it was still down. It didn't come back up again until Monday morning. Meaning that new users could not sign-up all weekend. A bit rubbish really. Do tfl's IT staff not work the weekend?

Another problem has just come to light. I have received an email from tfl informing me that a few customers have been incorrectly billed for the service, and lucky me is one of them. Instead of the £3 for the membership key and £1 for the one day of use, I have been billed 2 random amounts for £4. Not sure how they worked that out. Apparently they are going to try and reimburse me this week. You might expect the glitches might be with the bikes and hardware, but, from my experience so far,the problems have all been with more traditional Tfl problems: customer service and billing problems...

Wishing I was still on Møn...

Last week I went to stay on the Danish Island of Møn. I had a very enjoyable and relaxing time, with perfect weather and wonderful company.

BBC News site redesign

The BBC News website is having a makeover. I quite like the changes that they have on show, The last redesign seemed to mostly occupied with expanding the layout to fit onto a larger screen, which needed doing, but it seemed incomplete to me. The new design seems to address the main failing that I found with the old one, mainly the overly complex navigation. On the new layout, a simplified navigation is placed consistently across the top of each page making good use of the screen area. Layout wise, on a centred aligned site, a top aligned navigation seems to make sense to me rather than using a left aligned nav. I look forward to seeing the site in operation.

Flickr - tweaked

Flickr is one of the few sites on the web that hasn't had any major redesigns, all of its changes are subtle changes that do not confuse any of its huge user-base. Compare this with the likes of Facebook, which seems to get it wrong every time it tries to do anything to its site.In comparison with Flickr's subtle changes, Facebook's iterations  are usually of the radical variety. Seemingly confusing the user by making clumsily implemented changes to the navigation and even , more seriously, making poorly explained changes to the whole way the user interacts with the site and other people (which have caused many to be concerned about their privacy). On the other hand you have Flickr's approach. They have recently introduced a new layout for its users to try out, and they have done it by allowing people to try it out on a trial basis and leave their opinions in a forum, constructive criticism is given and changes have been implemented based on feedback. Involving your site visitors  like this, with any changes, is clever. It gives the site experience a human face and avoids alienating your customers.

Henry Moore at the Tate

Last week I popped down to the Tate to see the Henry Moore exhibition they have on at the moment.