Thought Collective

Thought Collective

 

10

25 Jan 2011, 2130hrs

Months in development, it's great to see the new 10ofthose website up and running now. Developed to provide mission and church groups with a great way to buy resources in quantities 10ofthose offers not only significant discounts but also knowledgable insight into the best titles.

The site is driven by a fully-featured eCommerce platform that delivers a streamlined process from the moment the customer visits, right through to the point-of-sale. Designed to encourage quick and easy purchases, customers can sign up for their own account that gives them added features such as wish lists, order histories and loyalty points. 

As part of our design development we implemented an inline calculator. This not only helps the customer see exactly how much they're paying for the quantity they need, but also, and crucially, how much they're saving through incremental, quantity-related, discounts.

Through our unique content management system edditt, 10ofthose staff control all product details, discounts, shipping charges, special offers and bulk import/export orders.

Building Thought Collective

02 Jan 2011, 0000hrs

We knew from the outset that we wanted our site to be a showcase for what is possible to do with web technologies, without being over the top or hindering the website experience in any way.  Having already built quite a few JavaScript animation heavy sites (some of which hit the mark and some which didn't), we had a fair idea of the pitfalls and had realistic expectations of what we could do while still supporting Internet Explorer users.

One thing we were keen to ensure was full support for iPad and iPhone; not just having the site work, but to play to the strengths of those platforms and tailor the site to work in a touch environment.

Quite early on we came up with the idea of using a-series boxes arranged in a grid, and making them "swoosh" (a technical term for the designers around here), into an expanded box which would bring in the content. Before the idea gained too much momentum, it was time to build a prototype.

Using the amazing MooTools Javascript Library I was able to knock up a proof of concept in just a couple of hours. In order to fill the screen I used a window.onresize event which autofired on page load, and then calculated the width/height and number of boxes we needed to fill the screen. It also had the added effect that when you resized the screen it 'animated’ the boxes into a new width or height, which wasn’t something we had thought of until that point. This prototype site ended up directing the rest of the design and build process, and was really helpful for the designers to keep referring back to.

Much of the original prototype code is core to the functionality of the site as it stands, we have just build upon it and build upon it again. The site runs entirely off of our fantastic CMS system called edditt, powering the main site and all the blog and associated content with it (more about edditt coming in the future).

When it came to building the iPhone version of the site, we had originally intended for it to be a 2x2 grid version of the main site. But once we got into the nitty gritty of it, we quickly realized the user experience just wasn’t there - the screen was just too small to do what we had hoped with it. So, unfortunately, we had to go down the route of creating a small screen site, which was tailored specifically to touch devices and offered a stripped down version of the functionality of the main site. Not ideal, but sometimes needs must.

The contact page on the site took a few goes to make it right. We originally used Raphael JS and an SVG export (via a PHP script to convert it to Raphael code) from Illustrator to draw the map in the browser, however I think we started to push the limits of speed for SVG at this point in time. To say it was sluggish was an understatement, and I was quite disappointed that we wouldn’t be able to pull it off. The backup plan was to draw and place the map using standard images and absolute positioning, which while not as interesting, ended up working perfectly on all devices, so it had to be the way to go.

Finally the blog. I wanted to allow comments on the site, and had this dream of pulling down content from Twitter and Facebook that referenced our blog posts and displaying them as comments. For days I poured over their respective APIs to see if there was a way of doing it, but alas there was nothing that would work in all circumstances. There was only work arounds; for which I could think of lots of cases where it wouldn’t work. Again, I had to work out a backup plan. Initially I tried Intense Debate, which for a little while seemed perfect, however I kept on having troubles with the scripts not loading, and it was giving a poor experience of commenting on the site, so I went back to writing something myself. I created a commenting system that plugged into Twitter @anywhere and Facebook Connect to get the user’s information, and then saves the comments on the server side. I would have liked to extend it to post the comment to Twitter/Facebook, but my build time had run out - so maybe thats one for the future.

There is so more much in the site that could be unpacked and explained, like the scripts we wrote that give CSS3 column support to browsers that don’t have it, or the touch/swipe event library... 

However, we think the beautiful thing about the site is that you barely notice those things, it ‘just works’ as you expect it to. After all, isn’t that the goal of a good user interface?

boxes

Find your way around

Categories

News + Announcements
Projects
Web alchemy

 

Links

Coming soon

 

RSS feed


This site uses cookies for general analytics but not for advertising purposes. View our privacy policy to find out more. If you continue without changing your settings, we'll assume that you are happy to receive all cookies on our website. However, you can change your cookie settings at any time.