ProtoKit Was my Idea, Well not really.

I had this idea to make a tool kit that would allow for rapid development of a website prototype while creating a working site complete with documentation and wireframes.

Well Yesterday I some how stumbled across ProtoKit from Konigi.

Protokit is a toolkit for creating HTML prototypes. It uses the following open source libraries and plugins: Blueprint, jQuery, jQuery UI, jQuery Templates, and iXEdit. More information about the included libraries and their licensing agreements can be found in theREADME file.

I must say that looking at it (not having used it yet) is exactly what my plans entailed. I look forward to an afternoon and some exploratory time.

http://konigi.com/project/protokit

Axure for Mac… Finally!

I used to use Axure RP a decent amount over the past years, but one thing that interrupted my work flow was having a Mac in one location and a PC in the other. Not to mention that I really enjoyed using OmniGraffle over Microsoft Visio.

The alpha was announced December 22nd 2009 and will be valid until February 28th 2010 when the beta is released.

Axure RP is the leading tool for rapidly creating wireframes, prototypes and specifications for applications and web sites.

Download now

Website Printability

Why should you be concerned with Printability? It’s simple, if you have spent any time at all making your site Pixel perfect and strive to meet the strictest of standards. Even if you offer information in the form of articles and tutorials then it’s in your best interest to go the extra step and create a print.css file.

Another good reason is you make better use of paper when printing, normally you end up with a header or a footer on its own page, maybe a side bar or an add tucked in there some were. all things while serving a purpose in the website don’t have any business being in a print document. Each browser will handle printing differently (default style settings) unless told other wise by a style sheet.

A print.css file should remove all non-essential content, colour, and images from the document, using display: none on any css classes or ID tag you want to hide. At a minimum you should hide the header, footer, sidebar, and Comment elements but keeping your site title, page title and content formatting intact.

If you have images in your articles then make sure to float them so they appear inline with your content and not as an obtrusive chunk.

Considerations:

1. What do you want the printed page to look like?
2. Do you need to include Banners or Adds?
3. Do you need colour?
4. Do you need to keep the header and footer in your printed page?

On my previous site i took the Graphical logo and hid it in the print version while in the standard screen version i hid the text title. Think of a printed page as something you might type in Word. You want it to remain professional while reflecting your sites identity.

What do you need to do to pull this off?

First include the print css file something along these lines:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Next i find its easiest to view the source of your site and attach the print.css file as a screen file to minimize the amount of print preview needed to see the effect. Using display: none on classes and ID’s that are not needed in your print document strip out anything pertaining to style like colour or background images. Padding and alignment are still important to maintain in the content of your site.

Once you have narrowed don’t to what stays and what goes you can then start to gather up like elements to keep a simple and small file.

.header, .footer, .addblock { display: none; }

Its important to set a default font size under the body tag, 10px or 12px work well, you don’t want to go to small or to large. another suggestion is to remove text decorations on links since they will only show up as words so there is no need to differentiate them from the rest of the paragraph.

Once you have the results you are looking for set the media type back to print.

In the end you should be left with your formatting font sizes as few colour’s as possible, all unrelated site content removed and left with a simple to read, printer friendly version of your site.

Getting ready for CanUX 2008

In two months nForm will be hosting the fourth annual Canadian User Experience Workshop–CanUX–at the lovely Banff Centre. The event runs from November 16 to 18, with an optional pre-conference UX Bootcamp.

Speakers

Dave Gray XPLANE

Brandon Schauer Adaptive Path

Luke Wroblewski Yahoo!

Yvonne Shek nForm

The great thing about CanUX is that it’s more like a retreat than a conference. The people who come to participate in all the activities (like the artist-led workshops, the design slam, the show-and-tell reception and, of course, the drinking) have a great time.

As always, we’ve worked to keep the price low and all-inclusive. A mere $899 gets you into the event, plus two nights accommodation and meals. The price goes up next week, but it’s still cheaper than a lot of other events.

The full program, speaker bios and other details are available on the CanUX website.
Check out the Schedule and pricing.

Ethnography

A few weeks ago i took a photo for some UX Trading cards for the 2008 IA summit on behalf of Jess McMullin, I of course and taking a picture of him taking a picture. We took the photo at Axes Cafe a great local coffee shop!

Have a look at the Trading Cards.