Hi everyone! My name is Stasia Harlamova and I am a content-manager in aheadWorks Co. Not so long ago, I’ve decided to interview the creators of our iPhone Theme – Igor Goltsov, developer, and Peter Samoilov, project manager – and question them about the process of this revolutionary product development.
Magento has already developed a theme for mobile devices. How do you find it? Which impression does it produce?
Standard Magento theme is a high quality and professionally developed product, but it doesn’t support many features available for today’s mobile device:
- there is no device rotation and the theme is fixed in resolution to 320px, so it becomes nasty on mobiles with different screen width, e.g. Android or BlackBerry devices;
- the standard Magento mobile theme has annoying always-expanded menu that forces you to scroll long list of categories to reach the one you need;
- it doesn’t allow showing more than one item image at the product page;
- the theme is not switched on automatically when the store is visited via mobile device;
- after all, original theme wasn’t compatible with Magento 1.4.1 and Enterprise Edition at the moment of our iPhone Theme creation.
And all that inspired you to create a mobile theme meeting all modern requirements. Where have you started from?
The first serious task we faced was to make the menu to slide from left to right and vice versa. At first, we took on board jQTouch (an Open Source JQuery plugin), but later we had to decline it and preferred WebKit (used in the Safari browser) and JavaScript.
Why? As far as I know, the jQTouch plugin with native animations, automatic navigation, and themes was developed especially for mobile web development on iPhone.
Yes, you are right. Exactly because of that we selected jQTouch (a beta version) at the very beginning. But while working with it, we’ve found out that we could only nicely display pages. It was good, but not enough for us – we wanted to animate ANY element of the store and unfortunately jQTouch was incapable for this. The WebKit and JavaScript usage turned to be the best solution here.
And later we convinced we had made a wise choice. When we worked with the image switcher, it was the native WebKit translate functions which allowed us to make the switcher work fast.
iPhone admirers will definitely appreciate the way you adopted the AppStore practice of using additional images on the product page.
Yeah, we craved for this! The smartphones users will also like the enlarged images’ size. The standard Magento mobile theme makes it up to 65×65 what is hardly enough to get the idea of the product, especially if it is something chosen by the exterior view – clothes, adornment, etc. The pictures in our iPhone Theme are up to 270×270.
While developing the iPhone Theme, you have obviously met a number of hardships which was quite a puzzle to solve. Could you share some tricks or any unexpected discovery?
We faced many “surprises” as it was our first experience in developing products of such kind. But as an example, I can tell you one interesting thing. When working with the image switcher, we aimed to make it fast on iPhone 4 as well as on 3GS. We had to rack our brains before we finally found a solution. It seemed to be quite illogical, but it worked – if you want Safari to do things fast, use WebKit 3D translate instead of 2D. The 3D translate function switches on the iPhone’s 3D accelerator and everything becomes really fast and device-independent.
How did this solution impact on mobile devices with the Android OS which doesn’t have the implemented 3D accelerator?
This trick not only excellently worked in Android OS but even enlarged the image switcher productivity. Frankly speaking, this small achievement greatly pleased us because by that time we faced many problems while “teaching” the iPhone Theme work equally good on Android and iOS.
Is it connected with the fact that Apple was awarded a patent on multi-touch and all associated gestures such as pinch, swipe, and rotation?
Yes, exactly. The browsers set up on devices with Android OS are lack of the Touch class which represents a single touch on the surface, and that’s why iPhone and Android have different touch detection mechanisms.
I see that it was not easy-breezy to make the iPhone Theme work on both operating systems. But you haven’t any serious problems with Magento versions, do you?
It depends 
Magento 1.3 has different behavior in processing the xml layout files. By default, it includes all xml files in all design packages, so all third-party modules layout updates and blocks are loaded in the iPhone Theme design. To bypass that, we had to change the way Magento 1.3 processes these files for the iPhone Theme by rewriting core design model.
Were all your expectations realized? Did you manage to implement all initially planned features or something still wasn’t a success?
We even exceeded the primary targets and expectations. Planned as a skin at the very beginning, our product became a full-featured Magento extension. It has its own events observers, models, controllers, and so on. Some things we have implemented are the following:
- Catalog Top Navigation
- Catalog List Pager
- Catalog Product List Price Renderer
- Catalog Cart View
- Customer Account Dashboard
- Cart Controller
- Downloadable Product’s Controller
- Changed Catalog Design Model
- Changed Catalog Design Package Model
- Observer for Before Frontend Init Event
- Observer for Predispatch Event
We still have many plans on the iPhone Theme improvement and further development, e.g. the BlackBerry OS 6 compatibility will be implemented in the nearest minor version. So subscribe to our newsletter, follow us on Twitter, Facebook, and LinkedIn, and be hip to the latest aheadWorks news!
English 
Spanish 
French
Recent Comments