Designing for GWT (Google Web Toolkit)… in a word, DONT!

The new web development team here at Xrio are mad keen on GWT as a development platform and as someone who’s only ever worked in .NET and ASP and based on the hype I can see why.

The only problem is that until I came along they never had to really bother about making an application look good or be particularly useable. So here’s my watch list for people daring to move into this realm:

• Do get Firebug for Firefox – its the only way you’ll be able to identify exactly what GWT is throwing on the page.
• Don’t bother trying to make it semantic – GWT doesn’t understand the concept.
• Don’t bother trying to make it accessible – GWT doesn’t understand about that either.
• Don’t add cool jQuery effects – Your dev team will want to replace these with the rubbish built in widgets.
• Do absolute positioning – it will just save you a lot of time trying to figure out what additional crap code GWT has added in around elements.
• Do design it to all fit on one screen – GWT doesn’t like multiple screen apps without show/hiding great swathes of information.

So here’s my fail-safe method for GWT design:

• Sit the developers down and sort out information hierarchy – We use a big tree menu type thing.
• Get your developers to define GWT panels to group elements for use – these will become usable DIVS.
• Work through every element and pre-define class names – for absolute positioning.
• Mock it up in Dreamweaver while they start development and work out your CSS.
• Integrate CSS into the GWT template.
• Fix all the bugs/discrepancies with GWT’s presented html.

Happy GWT-ing *groan*