How i came to love visio

I’m doing a lot more IA stuff of late and being in a Microsoft shop that meant getting to play with Visio. And I have to say it’s a great tool. It’s pretty simple to pick up, powerful, lots of options and customisations and even better – simple to get to grips with.

Quite a bit of work I’ve been doing has been around process and specification. I’d read The Elements of User Experience a while back but have been getting more into it recently, and the visual vocabulary stuff is excellent. Have a look on if your into this kind of planning. You can download Visio Shapes as well and then it’s just a matter of dragging, dropping and drawing arrows.

Another good resourse has been, a site I’ve read on occasion but found both more useful and more time to read recently. Documentation seems pretty key to getting projects working efficiently within team environments – and pictures say a thousand words (or something).

fluid flash v0.1

Their is nothing wrong with a nice header graphic. Clients, designers and customers alike love them. But I often see them used as an excuse for fixed width designs. Well no more I say (unless, of course you have a perfectly good reason for a fixed width design in which case you dont really need this technique.)

The plan was simple. Find a way of incorporating flash headers into sites using liquid or elastic designs in much the same way you might use lots of sliding doors background-image goodness.

A quick actionscript solution, courtesy of Mike Ord combined with some CSS and Javascript is presented for perusal on .

This is a simple example, the header at the top is flash and writes to screen it’s current dimensions. Try resizing the screen (liquid layout) or text (elastic layout) and see for yourself.

I need a nice attractive flash movie to really show this off so anyone who wants to send something let me know – I’ll make sure to provide credit.

new designs with added width

Any previous visitors will notice something of a redesign which is pretty much finished – although no doubt their will be a few tweaks over the coming weeks as time permits.

The main reason was to bring in a liquid design that will allow more space – something I’m quite fond of as an idea.

The default for web pages, before we add any styles, is a liquid layout – where the site content fills the window whatever the width. This should be ideal for everyone, whatever resolution or monitor (or device) screen size. Why then do a great deal of sites use a fixed width design, my previous design included?

Design expediancy seems to me to be the main culprit in my view. Not always I’ll admit – lots of blog style sites use a fixed width centered column in order to get a readable number of words per line (whether they know it or not), which was my original excuse I’ll admit. For most designers, and most people, it’s simply easier to think in terms of thinks that dont change. Using percentages (in a liquid layout) or em’s (in a elastic layout) simply takes a bit of getting your head round.

It’s the web, not print, and that is something that from my experience (second hand I’ll admit) is something that isn’t drilled home on the majority of university or college courses.

Attractive header graphics is something that lots of sites, in particular commercial sites, employ – and with good reasons. It’s a great way of getting across a brand ethos in an attractive and eye catching manner. It’s also sometimes used as an excuse to use a fixed width design – the question is why? Try resizing windows and text on, or .

One outstanding issue I see is using Flash in a similar way. With broadband usage, especially amongst companies, on the up and up, using Flash (and video) in a similar way becomes increasingly more attractive. So something I’m going to have a look at is how Flash and either unobtrusive javascript or sliding doors techniques can be used to get the cake (attractive, flexible layouts which use Flash – without breaking the layout) and eat it. More soon.

Mobile Edition (sort of)

I’m something of a fan of mobile devices and really should do more mobile web stuff but hey, the support for mobile CSS is shody at best. Enter this article.

The idea is really pretty simple. All you really want when your paying for bandwidth on your phone (or you PDA connected to your phone via bluetooth) is the content. So lets get rid of everything (and we mean everything) else. The solution is fairly devious – using some PHP jiggery pokery, a sub domain and some text parsing.

Have a look at for an example on this site.

In reality it’s a non ideal solution, but considerng it really does take two minutes I dont see that as a problem, and I think that was what the author of the article was getting at. We want to use mobile CSS but some browsers ignore it while others pretend they are grown up browsers and try and render the whole site CSS file.

I’m hopefully going to alter this a little, rather than removing all stylesheets leaving any mobile media sheets intact. Assign these to the main site and we have an interim solution. Fancy devices that make use of the correct style sheets can use the main domain fine, others can get the same design by visiting the mobile sub domain.

Musical Baton

For those like me behind the times, I was quite impressed to get passed the batton (thanks phil)

Total volume of music on my computer 19.51Gb Last CD I bought Foo Fighters – In Your Honor Song playing right now? Well the last song I listened to was The English Motorway System by Black Box Recorder

5 songs that I listen to a lot or mean something to me?

  1. Ash – Dancing on the Moon, Jesus Says B-side
  2. Johnny Cash – Hurt
  3. Easyworld – Goodnight
  4. Jimmy Eat World – The World You Love
  5. R.E.M. Strange Currencies

Note that that list probably changes every day but hey, that’s for today. I quite like Simon’s music monthlies idea but dont know whether I could ever really get round to it. Oh well.

Few bits of housekeeping

Been a little busy with the new job but had chance to do a few behind the scenes bits and pieces, including:

  • valid and formatted feed
  • blogroll from NewsGator
  • StripComments project
  • autocomplete on search box (type c, x or p)
  • added Textile formatting for posts

Should be back with more soon. I need to reply to phil (xlab) about my musical preferences, jot down notes on using NewsGator as an online feed reader and a web standards redoing of the QWikiWiki output layer that I’m part way through.

Design in Flight Magazine

\[UPDATE\] Visiting the website I now find out that after the next mini issue it’s all over for Design in Flight. I can see how it could take over someone’s life considering the quality but I for one would have paid more to keep it around.

I’ve just got round to buying all the back issues of Design in Flight ( magazine – which features articles on design, web development and similar fields.

For only 10 dollars (via Pay Pal) for the 4 issues it seems excellent value at about 150 pages or so, brimming with interesting information.

I’ve obviously not read that much as yet but so far so good and for the price you cant really go wrong.

all the news from @media

After a little work I’ve put together an app to keep up to date with all the news around `media. Based on the collection of feeds from it collects and filters for posts for `media references and displays them.

I’m hoping it will proove useful to anyone else who wants to keep up to date. Especially when details start coming up about next year and in the lead up to that.

Have a look at If you have any more feeds just let me know – I want it to be as extensive as possible. here we come

I now have an ASP.NET environment setup and ready to go and the will to use it. Depending on how it goes I’ll try and post any thoughts as I go. In particularly related to how I get on with good standards markup.

I can knock together whatever I want in PHP reasonably well and with my new job focusing on CSS and XHTML amongst other related bits, and working at .NET shop I thought I now have a reason to play.

more from @media

With all the goings on off the back of @media its pretty hard to keep up. Many of the ideas that where discussed seem to be taking hold and coming into the world and lots of sites have had some recdent TLC. Anyway, here goes with a few observations.

Simplified Standards Simplifiedstandards ( looks like a great idea. A few people where discussing a central repository for concensus on issues of web standards application in the real world and this aims to be just that. Simon Collison of is bringing everything together as far as I can see.

Everyones thoughts Faruk AteÅŸ appears to have spent every day since getting back compiling a list of what anyone anywhere said about the event. Its a great idea and makes finding peoples thoughts easier but I wonder if their would be an easy way of doing this (like pinging a web service with any new articles?) without one guy doing all the work? Look for everyones comments at

Designersinhouse One guy I did meet at the conference was Matt Patterson who has set up a small (but radidly growing) mainling list over at aimed at designers working within larger organisations. One thing I took away from the conference was the large number of people working outside service or agency environments.

And that is just some of the goings on. A good amount of discussion going on around the level of legislation needed to govern accessibility doing the rounds, the ATF (Accessibility TaskForce) from WaSP just starting up with several of the speakers on board and god knows what else. Oh, and I still haven’t done a zoom layout but I did add some word completion to the search box!