Making Web Wireframes easier with Visio – The Pixel Dimensions Shape

Many people use Adobe Illustrator or Photoshop for designing Web layouts, but a lot of companies use Visio – especially for higer level ‘wireframes’.  One of Visio’s problems (<= 2003 anyway) is that it doesn’t support pixel units.  This means you’ll always be approximating the sizes of content areas and page elements, making the developer’s job more difficult.

Enter ‘Visio Guy’, and the Pixel Unit Line Shape.  This is just a great addition for anyone using Visio.  Before you know it you’ll be laying out pixel perfect shapes that the developers will then give you great pleasure in declaring ‘this won’t work in IE6!’ 🙂 

A thing to note with Visio as well: If you’re working with pretty small dimensions then the only way to get really precise is to zoom right in (like 500%), otherwise the whole ‘snap/glue’ thing will kick in based on the page units (probably mm), regardless of whether you’ve switched snap/glue off.

Updated My Site

I’ve been starting to do some ‘various’ T-Shirt designs on RedBubble.  It’s a great site – similar in some ways to Threadless, but a lot more inclusive and encouraging of participation. 

I’ve made some updates to, as I thought one page was probably a little light these days – and I also wanted to do a bit of an SEO experiment with cross referencing on all of the sites I update. 

You can see my T-Shirts and other art…


Buy my t-shirts or my RedBubble home page

Get creative on

Using CSS Frameworks to do the heavy layout lifting

CSS is great, until you’re faced with a deadline and a broken IE6 layout.  You get the cowboy gear out and – ‘Welcome to Hacksville!’  

There’s been a growing trend of CSS frameworks recently as people are obviously crying out for ‘something’ to save them from the madness. 

I’m trying out the 960 grid system at the moment, as it’s not too prescriptive and gives me the flexibility I need.

There’s a great review of the best frameworks on adactio.  I’m sure there’s one to suit almost every need.  Remember they’re just the starting point if you’re doing serious design, but they’ll take most of the pain away, because the heavy ‘hack’ lifting is done for you…   

Also – more on Wikipedia (Update: 17/09) – BlueTrip’s the way to go – best of several worlds – nice.

Who needs Internet Explorer when you can use it in Firefox?

I love Firefox and its addons, although I still habitually use Internet Explorer.  IE6 at work (which always provides some nice CSS challenges!) and IE7 at home.

I’m a bit slow off the mark with using firefox, but the latest addon that someone sent me yesterday may have tipped the balance.

The IE Tab addon actually uses the IE rendering engine to render in a new tab in Firefox.  It’s quite amusing when you right-click and get the IE context menu.

The really great thing about this is that you can then use the power of the other Firefox addons to develop for IE.  Here’s my list of ‘must haves’.

  • Firebug.  This is quite simply the best addon.  Hit F12 and you can instantly see (and manipulate) all sorts of things in the comfort of your own browser.
  • YSlow.  Great Javascript profiler
  • FireCookie. See and change your cookies (for development purposes of course! – Good to test the security of your apps)
  • Web Developer.  Bit of overlap with Firebug but some cool features.

The IE Developer Toolbar is still a pretty good tool, but Firebug just gives you more info when you’re debugging CSS (which is inevitable with IE).