My main client for web design is my partner Paul who is a photographer and asked me to help design and build his website. What he actually meant was can I build it to his design? It had been a while since I had done this and so we spent some time putting together his online portfolio in time for his graduation from Staffordshire University in 2007. I used flash for the galleries as I wanted to get back into the program, I like the smoothness of it and it makes it a little more difficult to just right click and save an image. The link on the front page was a flash banner with separate buttons on it and the colour scheme was selected to match his Willford Photographic company colour scheme with the layout based on his business card. All in all we were very pleased with it and got some good comments.
He has spent the year since his Graduation building up his photography portfolio and has been worried that as a portfolio it doesn’t do him justice, so recently he has been asking if I can fit in an update of the images.
As it happens, I have lost all the flash files I made the galleries with. I had a different layout saved that I had used briefly for another photographer, but that is a very different story about trying to do someone who calls themselves a friend, a favour. I would have had to completely rework the layout though, so I began to look at other ways of making the galleries which didn’t involve an adobe-make-it-for-you type of thing.
I was chatting about it when someone mentioned the ‘light box’ gallery idea. It’s just a bit of code, I was told. I should have known better. I can barely remember the very short lived introduction I had to HTML and I never really got the whole CSS idea. But I thought it would be a good idea to try something new so I did a Google search and came up with a link to the website of the producers of the light box, by Lokesh Dhakar at http://www.huddletogether.com/projects/lightbox2/#how
It all seemed very simple and straightforward but I wanted to see it in action so I found another site which was using it to see how it might work.
I also found a link for a site using ‘shadow box’ which seemed to be much the same thing only slightly different. http://mjijackson.com/shadowbox/
I found a site which used the lightbox for its gallery and I realised that it would be a nice way to display the images on Pauls site and as he had previously asked about a similar effect, I thought he might be pleased about it.
As it turns out Paul was thrilled with the idea and so I went ahead and made new gallery pages applying some CSS to the fonts but did not figure out how to apply the CSS to use again. So to save time, as I had given myself a week to finish this, I just copied and renamed all the subsequent gallery pages. I then resolved to figure it out afterwards when I had a bit more time.
I decided on a layout and prepared all the portfolio images, resizing them and making the thumbnails, I also applied a drop shadow to the images so they stood slightly out from the light box area on screen.
I also did a few HTML tutorials at http://www.w3schools.com which got me back into the swing of things enough to feel confident that I could apply the light box script to my web galleries and then spent 2 days trying to figure out what I had done wrong. At this point, and very late in the day, I took some screen shots of what I had done and emailed them to a programmer chap that Paul knows with a big sheepish ramble asking for help and copied the same thing to Luke as he had been so adamant that it would be really easy. E.g.
It was silly o’clock in the morning and no one seemed to be online for me to IM and ringing people up was out of the question so I gave up in disgust at myself and with the situation and went to run a bath. While it was running I started to look on the net for a solution, it couldn’t be this hard could it? I knew it was probably something I hadn’t done properly but couldn’t just place it and I did not have any real knowledge of java scripting. I looked at the source code for the site I got it from to see how the code differed.
My searching led me to forums. I cannot remember the place I found it as I was so excited to have figured it out I didn’t bookmark the site nor take a screen shot. I didn’t find an answer to the questions I had asked, but I found a question from someone else about a different issue, but the way in which the question had been formulated gave me the information I needed. I hadn’t put the Java script into its own folder because I had not realised that needed to be done. I did this and then found I had a couple of glitches so I printed off the code I had and went away to read it in the bath. I noticed a couple of things I had put in the wrong place and when I fixed these I began to sort out the individual images, their alternative text and so on.
I eventually sorted out my glitches and got it all working. I then linked up the pages keeping the navigation as simple as possible. I would like to use the idea on the www.bbc.co.uk website which makes the font bigger or smaller at the choice of the person viewing the page. And I will be looking further into accessibility this summer as I realise there are many different ways for a website to be used and I would like to see how far one needs to go as far as the artistic portfolio type of sites need to be as a lot of my associates are visually based artists and it will be interesting to see how things like the copy right of an artist is balanced against the need for a visually impaired person to see the work well, or who is responsible for describing a piece of abstract work to be read by a screen reader as art is relative to a person’s own experience and cultural understanding therefore could one be held responsible for the ‘misrepresentation’ of an image? And other questions.
As it stands Paul is very pleased with his website and he has had some very good feedback from his clientele which includes council dignitaries about how nice the site looks and what a good selection of images he has. The website can be found at www.willfordphotographic.com
My 2nd Life 
