Last friday I waved good bye to my friends at LexisNexis. After 5 years I have moved on to a new company called Ellipsis Media. They are a web design agency which also sells and supports its own suite of online products. My role is that of art director and I jumped straight in on monday.

Since monday I’ve surprisingly got immediately involved in design work, creating an html email and flash game for Cancer Research UK. There was already a concept produced which I’ve been working on to satisfy the client, and then finalising the look and feel of the game, creating the symbols which I’ve passed on to the developer.

So, that’s all good. I had thought I’d be tied up in meetings for the most part getting to know the workings of the company but that has had to take a back seat. At this moment in time the company has a ton of work on, which is brilliant, and this clearly takes priority.

The guys here are cool too. I’ve not really had much chance to talk to them so far but hopefully we might get a chance to go for a drink one evening and step away from work mode.

It’s been a wierd few days, leaving LexisNexis behind, not going in to Holborn on monday morning. But I’m sure I’ll get used to it. 5 years is a long time in one place, my collegues were like family and the office a second home. I will miss it. Thankfully they’re having a summer party on the 28th at Soho House which I’ve been invited to which should be fun.

The past few weeks I’ve been working on www.carolinesylge.com basically adding new content and revamping the layout. I originally designed the site at a fixed hieght. It was supposed to fit in 8×6 and used iFrames to present the content. So things have moved on since then and Caroline now wants a site that presents the content in an easier, scrolling format.

At this point I’ve avoided spending time attempting to redesigning the whole site so I’ve adapted the existing design so that it flows down the page. However, I was looking at the new version of the site and realised that the content looks out place if the side naviagation is longer than the main content area. Here is is for you…

The site has a two column layout presenting two boxed areas of information overlaid on a tiled background image, with a 20 pixel space between the two.

If the navigation column has a lot of information and the main content box doesn’t you end up with a long box of links on the left and an empty space on the right.

The solution to balance the page would be to make sure the two column both run down to the same level.

How do you do this?

Answer: Slice a 1px high image the width of the two areas providing the background colour for the two columns, with a transparent backrgound between them to allow the tiled background to show through.

Set this image as a background to a div wrapping the two over divs while they have background set to none. This will ensure that no matter which is the longer both will extend to the same length.

I’ve just spent the evening digging through a pile of old cds and trying to clear out any of no value (some how they just seem to build up). And it’s a miracle! I found the cd containing my old rafcareers.com website which I built back in 2001. I’ve been wanting to add it to my portfolio since I put it together.

The site, or the version which I’ve added to the portfolio is the flash version. I also designed an html version, with the help of Tom Thorpe, when I worked at design net. The previous version had been built by Deep End but the COI weren’t happy with it so we got the contract to sort things out.

Having such a clear and obvious brand I developed the design around that and the idea of using an airbase to navigate around the site. It was a fun project to work on although we ran in to a number of technical issues, primarily with the integration of a ‘flight bag’ (shopping basket) to save jobs which users were interested in.

In the end though, the site launched and was extremely well received, making the cover story of Cre@te Online and being awarded 10/10 on The Web Review, on ITV.

Adding an archived version of the site to my portfolio proved to be a bit of a mare. When Tom burnt it to disc using his mac the formatting of the file names was changed to all caps and the names were truncated. So it has taken me a good hour to go through and rename the files correctly, opening all the different flas and seeing what loads where. As it stands I think I got most of it working. At least you can get a sense of what the site was like. I don’t think any of the games will work, or the downloads either.

So if you are interested click here to check it out, but remember it isn’t live so not everything works!

It’s coming up to the end of the day and we are all sitting round reviewing our sites performance using the IE accessibility tool bar. I now have a reason for using IE. It appears a lot more detailed and useful than the firefox version. Funny considering IE isn’t standards compliant.

All in all today has been very productive and enlightening. I now feel qualified to assess a site’s accessibility compliance and will first put this knowledge in action by reviewing this site. I’ve had a chat to Mike and we will put together a presentation for the rest of the UX team covering the high level aspects of the subject.

I hope I can remember everything. There is a supporting document too which covers everything we looked at and breaks it down in a easy to use format. I will summarise the details on this site shortly too.

The fact is there are so many things you can consider when approaching accessibility but you just need to decide how rigid you need to be for your particular project. As Trenton said, the W3C guidelines are exactly that. They are not law. They are supposed to be there to guide you to produce the best possible site reaching the widest possible audience

Here’s a couple of tips to get you going…

Tip #1
Put a space between home and page when writing the word home page as screen readers can’t pronounce it properly.

Tip #2
Don’t put colons at the end of items such as labels. They become very repetitive and boring.

It has certainly opened my eyes.

It is lunch and I’m taking a break from a day of training on accessibility. Mike Holt and myself have come along for the day to put some knowledge behind our new titles ‘accessibility guru’. Well that is how it has been described within the UX team. I wouldn’t put myself on that pedestal but hopefully by the end of the day I will know a bit more than I did yesterday.

The course is being run by a guy called Trenton from www.webcredible.com. They do a number of courses based around web standards.

We have spent the morning looking at exactly what accessibility is about, who it effects and how to use best practices and techniques.

Going well so far but lunch is over so I’ll update later…

Have you noticed? I’ve now got my Nike+ stats appearing in the right-hand column. Sweet! Thanks go to Mark Rickett for the creation of the plugin.

I had some trouble getting it to work initially. First I didn’t notice it was pointing to a different directory to the one it needed to. That fixed I then had to manually add the php in to the sidebar. No problem though. So now it is all working I just need to go in adjust the code out put to match my style sheet. It currently uses strong tags which I have set to Georgia and don’t use in that context. Hopefully that should take long. Beyond that I might even fiddle with the php to see if I can get the average pace of each individual run to show. Another great feature would be surfacing my challenges. You can show your goals but I don’t have any. I just have a bunch of challenges which I’ve got going with some friends.

I’ve also come across another Nike+ piece of php which pulls your info from the site and actually presents each run in the format of a graph. When I get a chance I thought I might create an actual Nike+ page to hold this too. If can remember where I got the script I will add a link.

About a year and a half ago I was building a style guide at LexisNexis. Well my job was really to write it but I like to get my hands dirty to took the opportunity to build the online guidelines too.

I decided to use a left-hand column for the navigation leaving the top of the page for titles. When it came to building the page structure I ran in to a problem in that I wanted the dividing line to run the height of the page regardless of the content.

The issue with this is that if you set a border to the left-hand column it only runs as long as the the column has content. This clearly leads to inconsistency. At the time I searched around online and was unable to find a solution, even discussing the problem with the webdev team but no one had a solution.

Then it came to me. An answer to a problem that I think most developers must have run in to but at the time had no documentation.
Andrea Hill at LexisNexis recently pointed me to a new article on AListApart which deals with pretty much the same issue. I never documented it at the time because I thought everyone else would have found the solution too but I guess not so here it is…

Assuming you have a 2 column layout, you simply need to give both columns a matching border value, say 1px solid #666. The left column has it on the right and floats left. The right column has it on the left and has the appropriate margin to push it out to the right of the left column so that the two borders over lap. Simple. Note that the left column has a defined width be it % or fixed. The right column has no width defined. This is basically to tackle IE 6 which will push the right column out of sync if width is set.

However, that is all good and well if you use the same background colour across the width of your site. If you don’t I suggest using a background image which is the exact width of the left column and 1px high. The last pixel of the image should be the colour of the column border. Set this as the background of the div containing both the left and right columns, and have it repeat vertically.
As a back up you can also think about doubling up with the technique previously suggested technique to cover depreciation/broken images.

Sample Code

#leftcolumn{
float: left;
width: 400px;
margin: 0;
padding: 0;
border-right: #ebebeb dashed 1px;
}
#rightcolumn{
margin: 0 0 0 400px;
padding: 0;
border-left: #ebebeb dashed 1px;
}

Coming next… How to remove the border below the selected tab using the sliding doors technique and IE.

Well it is day two. I think things are looking pretty good. Still plenty to do and areas of the blog interface I haven’t even looked at so excuse the mess. I hope it doesn’t turn out to be one of those projects that kicks off well but loses steam.

If you have any comments or suggestions I love to hear them.

Hopefully I might have time later today to do some more. Suposed to be seeing Hot Fuzz too so I’ll give it a review.

Well as you can see I have made some quick progress at styling the blog. I took the default template, downloaded it and started overwriting the elements one by one.

I ran in to a problem quickly which took a while to resolve - the #page div was appearing transparent. It turned out that there was a script in the header.php which was effecting it so I removed it. Hope that doesn’t have an impact somewhere down the line…

Still got plenty to do but at least it is taking shape and is a lot easier than I thought it would be. Wordpress is definitely better than the model I tried using last time.

I think my work time is about to come to an end as it is my daughter’s bath time and I’ve been sat at the computer all evening.