Hello Turtle Development Blog

Yesterday it was decided that each of the staff here at HelloTurtle would contribute a small amount to this blog every day or so, blogging about something related to their work with the company.
As one of the programmers at HelloTurtle, it was suggested that I blog about some of the things I have been working on recently for HelloTurtle, as well as things I planned to work on in the future.

So here is the first of my development blog posts, which given that it will be covering several of the things I have worked on since starting at HelloTurtle might be a little long, so for that I apologise, but please keep reading.

The first thing we identified as an important project to develop for the site was a mobile friendly version of the system so that our customers would be able to order cards on the go, and be able to build cards including photos from their phone without needing to transfer those photos onto a computer first.

Given that mobile phones (even smartphones) had a number of restrictions on which technologies are supported or not, which elements of the main site would need to be scaled down due to screen size restrictions, and that we were designing the mobile site so that it would be compatible with the majority of phones on the market today, we had a number of sections of the site that needed to be fully or partially reworked in order to be compatible.

The main items on the list of site elements that needed reworking were the card selection system, and the card editor/builder. The card selector needed work done on it to simplify its method of displaying card thumbnails, since the version on the site would be too large to display correctly and would take too much of the phones bandwidth to download the selector, especially on slightly older phones, and in areas with poor signal.

As such, the card selection systems was simplified down to columns of thumbnails, restricted to 20 cards per page, with buttons to scroll back and forth through the automatically generated pages for that card category.

The next most important thing that had to be changed for the mobile site was the card editor itself. The card editor on our main website is built in Flash, and offers a lot of functionality including adjustable fonts, text size and colours. Unfortunately, the vast majority of phones do not offer flash support, and so once again we were required to sit back, and think on how best to simplify the system while retaining the core functionality that we needed. Eventually we settled on a method that while simple (and not requiring Flash) still followed the general principles including positioning the text fields using scaled down sizes and positioning co-ordinates taken from the card editor on the real site. The downside to not using the flash editor is that we had to repeatedly submit and reload the text fields and the card page when switching between the front page and inside right page while the flash editor stores the data during the edit so the page does not have to be reloaded to switch to a different page.

Once the card is built the checkout process is essentially the same, with a few minor modifications to enable the site functionality to work within the JQuery Mobile framework, and the restrictions presented by working on mobiles.

I have also been recently working on integrating the PayPoint.net Online Payment Gateway with our own checkout system, and once that is fully working we will be able to simplify the checkout down to either paying via Pre-Pay, or via PayPoint, while still retaining the ability for customers to choose to use PayPal, since PayPoint offers integrated PayPal support.