GARY'S BLOG

Although not specifically about the UP draft design, it is related because I took the design ideas and produced a site for a customer (www.rtcbs.co.uk) which was based on that design. This blog post is about the issues that I experienced trying to get the site to work across multiple browsers (essentially old versions of IE).

So this is about: CSS style special effects (e.g vertical text), negative margins, adjacent siblings and other “pain in the neck” effects that don’t work in IE6 (& 7). Add to that list transparent “pngs” and the “haslayout” IE feature and you’ve got the ingredients that go to make up the f*#!ing mess that is IE compatibility, and graceful(graceless) degradation.

IE Tester – the whole issue of getting a site to work with multiple versions of IE is made all the more difficult by the fact that you can’t install multiple versions on the same machine – this makes compatibility testing even more difficult. Luckily that’s where IE tester comes in, without which I wouldn’t have been able to test the site in anything other than IE9 – point to note about IE Tester is that it does crash alot, but it does work & it is free!

This whole experience has been a been a real eye-opener (from a CSS effects point of view). Another thing I’ve learnt the hard way is that it’s probably better to use JQuery plugins rather than write your own. I made this “mistake” (I use this reservedly because writing it yourself is a good learning experience) and ended up with some unwanted lightbox effects (caused by height:100% overflow: none) when image larger than browser window – now whilst these could be fixed by coding around the issue (or through CSS – img {max-height: 100%} etc) why bother, if you get a pre-written lightbox plugin then the author(s) have probably already coded for this.

Anyway, that’s the end of my rant – the whole process has been a good learning experience, but quite often in the form of things I wish I’d done differently!

Still in general blurb mode (hence no mind map).

I have been continuing to develop the “draft design” for a surveyor’s website, its now pretty much finished (incorporating changes requested by the client) and is just awaiting his final ok before being uploaded to his web host (currently www.cybernet-computing.com/customers/RTCBS).

Essentially its the same idea as the UP proposal except for some tweaks and improvements, the latest of which includes:

• an improved auto scroller (nav items hidden unless hover appropriate area of the image LHS, RHS, or bottom)
• bug fix on scroller refresh
• some screen tweaks (page title now outside of main content area, gives a more balanced look + can expand scroller) and some colour changes
• gallery page added, with lightbox effects
• what we do keywords effect only on first page

That’s pretty much it, as I said it’s waiting for final checks and then it will be uploaded to the client webhost.

A brief departure from Mind Maps (less suited to general blurb).

Its a couple of weeks since the client demo, I have made several changes to the demo’d site design mainly because I wanted to do a bit more playing with JQuery and also because I am intending to use the site design for my own thesis site (at least that’s the current plan).

The changes incorporated in the redesign include:

- restyled content
- pause/play functionality added to image scroller, and restyled icon-based navigation
- movable navigation area
- resizable content area (expand icon)
- lightbox type effect on scroller images

A working illustration of this design applied to a Chartered Surveyors website can be seen at http://www.cybernet-computing.com/customers/RTCBS

This version also uses PHP page content (index.php?PAGE=<page id>) rather than hidden content used in the demo. This is more suited for implementation via a CMS and means that the content can more easily be modularised (just have different includes files for each page content controlled by IF statement). The image scroller only uses 5 images (as it is now reloaded on page nav).

There are several other changes I would make, which would include a revised image scroller (I have noticed a few quirks with the existing one and perhaps a thumbnail gallery version might be good), and I would change the architect site to use the same PHP “includes” approach as I’ve now used in my thesis design and the surveyor site mentioned above.

Also, for the gallery I would remove the image scroller (as it’s not relevant or instead it could be the current image perhaps?) etc…

Anyway, a good learning experience.

This week we had the client demo, my comments etc are herein. Obligatory mind map:

Also available as a PDF file