Jelly at Boost is casual co-working in Wellington. Every Friday we open our space for 10 people to work, drink our coffee and steal our wifi for free. We are a small part of a large international movement that started in a Brooklyn apartment with some contractors sharing their lounge. There are now Jellies in over a hundred cities.

Why are we Jellying?
We want to give back to the design and development community. Wellington is a great place to be creative and we want to do our part in making it even better. We want to provide a low key, easy going space where people can get work done.

We’re not on an idealogical mission to join all humanity in loving harmony; though if it did happen, we’d be surprised, very surprised, but we wouldn’t freak out :-).

We’ve had some great feedback from the first Jelly last Friday, and are looking forward to this week’s Jelly. Space is limited so if you are keen DM us on Twitter (or drop us an email) with your name and what you will be working on (broadly speaking) and we will save you a place.

Hope to see you soon.

Related Posts:

• Reminder: EYC unconference this weekend in Wellington

 

Friday 30 July is New Zealand’s National Poetry Day, a ‘celebration of this country’s unique and vibrant poetic voice’.

Just in time for the celebration, the National Library of New Zealand has released a new look website for the New Zealand Poet Laureate.

The website was set up on the Blogger platform in January 2008 and over the past two and a half years has filled up with rich content provided first by Michele Leggott (Poet Laureate 2007-2009) and now Cilla McQueen (the current Poet Laureate). During Michele’s time as Poet Laureate the site had functioned as a normal blog, with regular updates from Michele as well as the publication of pieces of poetry (such as wonderful to relate and work for the living). Cilla McQueen took a different approach to the blog, writing Serial, a poem published in many pieces, each accompanied by an item from the Library’s pictorial collection (see the chapters so far: Higgs, Hotdog, Birdie, Inflation, Pleochroic). All this activity meant the site was becoming a little difficult for visitors to understand.

The National Library wanted to stay on Blogger, but also wanted to bring the site into focus with new content and a new look. Earlier this year Blogger introduced the ability to add static pages to blogs. This meant that the Library could now set up individual pages for each of the laureates, as well as an information page about the New Zealand Poet Laureate Award itself. While staff at the Library were working on new content, at Boost we were working on a new design and template.

The Library wanted a design that was clean, elegant, and served the dual purpose of showcasing the changing content that makes up Serial, while also providing clear paths to information about each laureate and the Award. The Poet Laureate Award does not have a brand as such, so we were asked to keep the design consistent with the Library’s existing brand guidelines. In discussions with staff at the Library we discovered that intelligent use of typography was important, as well as creating a sense of space and ease for people visiting the site.

New Zealand Poet Laureate website - homepage

The resulting design hits all these notes. The navigation is treated as a frame for the main content and presented in a quiet shade of grey, enlivened with flashes of teal green for roll-over effects. A number of small tidy-ups have been put in place, such as subtle frames around images and repositioning comments and tags, to reduce the clutter on the page. Fine horizontal lines have been introduced to help separate individual pieces of content and navigation.

New Zealand Poet Laureate website - single entry

So, why not celebrate National Poetry Day by checking out the site? You can also find poetry events all over the country on this calendar on the Booksellers website.

Related Posts:

• Magic and delight

 

This is the first entry in a semi-regular series sharing things that we’ve been looking at and reading recently …

Sarah (one of our project managers)

• Broadband becomes a legal right in Finland

• Guggenheim collaborates with YouTube and invites video submissions

Sue (one of our designers, recently returned from a break in the sunny northern hemisphere)

• Eye-candy and inspiration on www.citid.net

• Great experimental fonts (also: free!)

• Lighten up your winter blues: heaps of colour and shapes on Coolhunter

Alastair (one of our developers)

• Firefox 4 introduces more HTML 5 and CSS functionality. One step further towards the death of Flash? Still in beta so one for the developers.

• Excellent! Wayne and Garth spotted in the UK. Party on!

Rachel (our office manager)

• Artist creates masterpiece on an iPad

• World Cup 2010 statistics: all the key data for each team, from the Guardian

(Rachel notes that she’s not as much of a sports fiend as the above link might suggest, and also recommends data/infographic blog Cool Infographics)

Jake (who looks after our usability testing tool IntuitionHQ)

• David Gillis on Fusing Content Strategy with Design, in UX Magazine

• The Real Life Social Network, slides from a presentation by Paul Adams, Senior User Experience Researcher at Google

• Gnarcade – Video Game Invasion: for video game fans, and geeks in general

Courtney (that’s me – project manager)

• Aaron Straup Cope’s magical slippy map showing the world as revealed by geo-tagged photos on Flickr

• Significant Objects, an investigation of art and the market through short stories and eBay

• Swallows and Amazons, the current exhibition at Robert Heald Gallery, which is close to our office – on show until 31 July.

Related Posts:

• Pair programming: When and why
• International study on pedagogy and ICT
• e-Learning Research Network launched
• e-Fellows for 2009 announced
• How are we using the internet?

 

It’s been 5 months since we launched IntuitionHQ, our online usability testing application. We have not quite found the time to write a post about IntuitionHQ but will be writing a couple over the next few months to help you find ways to improve you design and your business with usability testing.

We have however been busy. Over the last couple of weeks we have spent some time identifying areas within IntuitionHQ where we can improve the user experience.

The first area we have focussed on is the test taking page. We evaluated the existing page and came up with a list of things we think the page needs to do in order of importance:

1. It has to be fast
2. The user must be able to clearly see the task they are being asked to perform
3. It needs to be clear where the site ends and the test page begins

Making the list from the user’s point of view was extremely valuable and gave us a clear understanding of what needed to be done.

Improving the speed of the page loads

We started by looking at each of the steps the page takes when loading. It soon became clear that the round trip to Amazon S3 where the images are stored was taking far to long. Further investigation showed that we were searching for the bucket based on the URL each time. Fixing this has brought significant speed gains.

Ensuring the task is clear

Looking at the existing page design there was a lot going on around the task text. We had the number of tasks, the instructional text and the IntuitionHQ logo all fighting for attention.

The current design of the test page - click to enlarge

After a number of iterations this is what we have come up with. The most important change we made was improving the contrast of the task text in relation to the other instructional text. We have also removed the IntuitionHQ logo. The result is a much cleaner and clear area at the top of the page. For users it is now much clearer  what is required and there is less competing for their attention enabling them to concentrate on the page being tested.

An initial mockup of the design - click to enlarge

Above is the initial mockup that we produced. We used this as a guide for the designer to demonstrate what we were looking to achieve. The designer took this and produced the final design below. The final design keeps the task on it’s own and shifts the instructional text to the right hand side. To accommodate a wide range of image sizes the layout of the page has been shifted to a center alignment.

The final design - click to enlarge

Separating the test area from the page

In the initial page the image to be tested was place straight on to the grey background. This was OK but our review suggested that it was not always clear that the test image was separate from the rest of the page. We needed to make this clear while also ensuring that the task and image were clearly related. We solved this by using a border around both the test image and the task text. The result is a clear relationship between the two and separation from the rest of the site.

We think that these changes will make a real difference to the ease with which your users can accomplish tasks within IntuitionHQ tests.

We are busy implementing these now and will be putting them into production later in the week.

Do you think the changes will improve the user experience? We would love to hear your feedback.

Related Posts:

• IntuitionHQ wins Booster Seat 2011

 

Cross-browser compatibility issues are the bane of web developers world-wide and in this ever shifting landscape it is important to have processes that integrate cross-browser testing in a robust and systematic way. Over the last 9 years we have evolved a robust workflow for web development and cross-browser testing is an integral part of this.

An overview of the process

We start by constructing the HTML/CSS in a text editor (Textmate, RubyMine IDE or Aptana IDE) and viewing it in Firefox. We develop standards compliant HTML/CSS, so Firefox is a great starting point as it supports the CSS standards well and enables us to use a number of key tools including Pixel Perfect, YSlow and the Web Developer toolbar.

Once we are happy that the design is accurately implemented in Firefox we use Litmus to create screenshots across a selection of Browser/Operating System combinations. Litmus has a number of great features that really make this process easy. Firstly, you can retest the page with a simple button click and Litmus keeps track of the revisions, secondly Litmus uses the W3C validators to check that the HTML and CSS validate and links trough to the error pages and thirdly Litmus lets us indicate visually whether a particular combination is rendering correctly so we can keep track of what is complete and what remains.

Running the initial test in Litmus will usually through up a number of issues, especially in IE6 (suprise!). At this stage we move on to the target Browser/Operating system to correct the issues. More often than not this is a process of finding work-arounds for the poor standards support in IE6 and IE7 while still ensuring the the HTML/CSS validates and is semantically correct.

We iterate through the testing in Litmus and fixing problems on the target platform until we are happy that the design is working correctly across all platforms. We then use the publish option in Litmus to create  publicly accessible version of the test to send through to our client. This enables our clients to be certain the design is rendering correctly across platforms. You can see an example test here: http://boost.litmusapp.com/pub/5125956

From here the HTML/CSS gets passed to a developer who integrates the HTML with the web application or content management system. This is where the utility of Litmus really shines. During this phase we use Litmus in the same way as we use Unit tests in our programming, to confirm that nothing is broken as we add features and develop the site. This is the key to consistent and successful projects, constant and consistent testing during the life-cycle of development.

Using Litmus

The first step is entering the URL to test and choosing the Browser/Operating Systems. Once you have made your choice you can set this to be the default for further tests.

Litmus: starting the test

The second step is viewing the results. The overview screen gives an estimate of how long all tests will take to complete and the page updates as the tests complete. On the left side it shows the results of the HTML and CSS validation.

Litmus: Test overview screen

The third step is to check each of the individual results. At this stage we usually mark the ones that are passing and the ones that are failing to keep track of progress.

Below is a page that is not rendering correctly, and we mark this as incompatible.

Litmus: Example of a failing page

Below is a page that is rendering correctly, and we mark this as compatible.

Litmus: Example of a passing page

The final step is to publish the test and send the URL to the client, you can view the test here: http://boost.litmusapp.com/pub/5125956

Related Posts:

• Pair programming: When and why
• Making your site Pixel Perfect

 

Here at Boost we lovingly handcraft our HTML and CSS when implementing our designs. We use text editors rather than programs like Dreamweaver or Frontpage. We find it’s faster, and it enables us to produce clean, correct code that’s easy to integrate.

Our process starts with the production of the designs in either Photoshop or Fireworks. Once these are approved by our client, we convert them to HTML/CSS templates before integrating them with the web application or content management system.

At the HTML/CSS stage we use two tools to ensure the design is being accurately implemented: Pixel Perfect and Litmus. Today I’ll focus on Pixel Perfect - I’ll talk about Litmus another time.

What is Pixel Perfect?

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition on top of the developed HTML. Pixel Perfect is built on top of Firebug (another Firefox extension), so you will need to have Firebug installed and active to use Pixel Perfect.

The video below is a quick look at how Pixel Perfect is used.

Why Pixel Perfect?

We strive to ensure that the integrity of the design is kept as it is implemented.

Because of the way different that browser and operating systems render HTML text, it is practically impossible to get sites rendering identically across all browsers and operating systems that we support. Using tools like Pixel Perfect helps us to make the differences all but imperceptible.

With considerable effort going into our design at Boost, it is important that this is reflected in the final product. While a small gap here and a slightly different text size there seem like small issues in the rough and tumble of building a site, they all add up. What was once a tight, balanced and considered solution to a design problem can turn out as ramshackle, unpolished and unprofessional.

Before we found Pixel Perfect we tried a number of different tools including Afloat, which makes the OS X Preview application partially transparent, but this approach was less flexible and didn’t work as well.

What are the benefits of using Pixel Perfect?

Using Pixel Perfect in our HTML/CSS production workflow provides a number of tangible benefits, including:

• reduced time and cost during the quality assurance process
• increased speed of development of the HTML/CSS
• creating closer working relationships between designers and developers
• a better looking website of which we can all be proud.

Run, don’t walk, to get Pixel Perfect today

Grab your copy, for free, from: http://www.pixelperfectplugin.com/

And don’t forget to give a donation if you want to see this great plugin grow and flourish.

Related Posts:

• Pair programming: When and why
• Using Litmus to integrate cross-browser testing into our workflow

 

It seems that week on week Google introduces new tools without fanfare and it’s easy for these to slip by unnoticed. A year or so ago Google Web Optimizer appeared in the Adwords toolbar. There hadn’t been much of a buzz about it appearing but who could ignore a link that promised to ‘optimize’ your website, and from Google no less.

Taking a closer look at Google Web Optimizer it was clear this is a very useful tool in the web designers toolkit. In a nutshell it allows developers and designers to test variations of design, copy or even whole pages.

Google Web Optimizer enables you to set up tests to determine which copy, design or combination of both is best going to meet your conversion goals.

Setting up and running a test is easy, with Google Web Optimizer taking you through it step by step. You will need a Google Adwords account to access Google Web Optimizer, this is free and there is no need to be running an Adwords campaign. When you login to Google Adwords you will see the Web Optimizer link under Campaign Management in the toolbar.

Website Optimizer is under Campaign Management in your Google Adwords account.

There are two choices when setting up tests, AB testing which enables you to test two seperate versions of a page, and multivariate testing which enables testing of changes to multiple areas of a page with multiple variations. Both of these are extremely useful, though the amount of traffic a site receives determines how useful the multivariate testing can be.

The two options are nicely explained when you are starting your experiment.

Once your test has started you can login to Google Web Optimizer at any time and review progress. It is important to note that with the multivariate testing the number of areas and number of variations for each increases the number of variations and consequently the number of visits needed to get a conclusive result. Google suggest only using multivariate tests if your page gets more than 1000 visits per week. Our experience suggests that it is useful to have a great deal more than that!

Results can be viewed while the experiment is running.

Google Web Optimizer is designed for testing copy and design in order to improve conversion rates. We have used it to fine tune the copy on our homepage to increase the number of visitors visiting our portfolio pages.

When redesigning an interactive tool for a client it was not clear the exact text we should use for the call to action. We suggested that once we had the site live we could run a Google Web Optimizer test to see if small changes to the text could improve the conversion rate. We tested two new variations of the call to action in two seperate places. This provides nine combinations (including the originals).

We ran the test for two weeks and then analysed the results. It was clear that a number of combinations were doing worse than the original while a couple of combinations were doing better. At this stage we did not have enough data to conclusively decide which was working the best. We turned off the under performing combinations so that we could more quickly see which combination was working the best.

Variations that aren't performing can be stopped sending more traffic to the remaining variations.

With the best of the new combinations currently showing a 10% increase in conversion performance it won’t be long before we have a clear winner. The total time to setup the test was around 4 hours.

Google Web Optimizer is quick and easy to setup, delivers useful data with a minimum of fuss. Optimizer is an essential tool in improving conversion for any website and who doesn’t need that?

Related Posts:

• No Related Posts