Sencha Inc. | HTML5 Apps

Blog

Sencha Touch Spotlight: Mygazines

February 23, 2011 | Jay Robinson

What is Mygazines Mobile

20110126-mygazines-1Mygazines’ Mobile 3.0 is a digital reading experience for documents such as magazines and brochures. It is a web app that works on any modern mobile device’s browser.

The HTML5-based digital publishing software mimics a native app experience by supporting content by location, video, links, high quality zooming, pinching, swiping, text-only mode, fast content loading and spreads –- all without having to install an app. Users simply access a dedicated link, our system recognizes the device and loads an optimized interface. The platform is automatically available to all of our customers.

Sencha Touch was the only product on the market that met our requirements.”

Mygazines currently serves close to 700 direct and indirect clients, including traditional publishers, marketing professionals and corporations, such as Research in Motion, St. Joseph Content, Harris Publishing and Randall Reilly.

Why We Chose Sencha Touch

For Mobile 3.0, we wanted a solution that was geared to meet our customers’ needs today and in the future. We set out to create a mobile platform that had the same feeling as a native app but didn’t have the same restrictions. Mobile 3.0 provides the ability to adapt to mobile browsers and to new devices as they’re released. Our customers can produce optimized mobile editions without any extra steps and distribute their content via the same URL they would use for the desktop solution. Since 2008, our main goal at Mygazines has always been to continually offer our customers an all-encompassing way of reaching and engaging with their target audience.

20110126-mygazines-2Our last version of Mygazines Mobile was based on the jQuery JavaScript library which proved to be a great starting point for delivering an app-like experience because it was fast to develop and worked well on most modern mobile browsers. However, with Mobile 3.0, we were after a native app-like experience that required a true web app framework for development. Sencha Touch, which was in beta at the time, was the only product on the market that met our requirements.

The Architecture

Once we had our design defined, we were able to create the elements that make up a great document viewer. The Sencha Touch Carousel component, for example, was our clear starting point to define the navigation tools. We were able to extend the Carousel support in Sencha Touch to become a buffered carousel which loads 5 cards at a time and adds new ones on the fly – replacing the old ones.

The Sencha Touch Panel was probably the heaviest used component in the entire application, as seen in all of our toolbars, mini-thumbnail navigation and modals. Implementation of the Panel can also be seen in our zoomed image, revealed by pinching or double clicking on one of the images in the Carousel.

20110126-mygazines-3By using Sencha Touch animation effects and custom image manipulation, we were able to seamlessly overlay a scrollable Panel with high-quality image on top of the Carousel which enabled the users to zoom in on an image and view it with a high level of detail.

Mygazines Mobile 3.0 reader also utilized a FormPanel component to display a form, so users could share the publication that they’re viewing with their friends via email. We were able to customize the FormPanel UI to match the theme of the application. We tweaked parts of the form to optimize the way it worked within the scrollable panel and with the virtual keyboard.

We used other Sencha Components such as the Toolbar, Audio, Video, MessageBox and many more to complete the experience. In some cases, we extended the functionality that Sencha Touch provided. One of our biggest challenges was the limit on image tags in iOS. We used an image buffering mechanism that reused all image tags wherever possible.

Business Value of Using Sencha Touch

By using Sencha Touch to build our application, we enable our customers to use their existing content. Plus, our application is available at the same time as our Flash product for desktops but geared for mobile devices. In the end, we’ve created a single mobile product that we can use across multiple platforms. If you take iOS and Android alone, we’ve saved 50% in development time and costs by only having to develop the product once. When you add future supported platforms such as Windows Phone 7 and BlackBerry, the savings really start to add up.

Our Advice to New Developers

Start with the API documentation and “forget” everything you know about web development. Open your mind to the Sencha Touch method and start slowly. Get your first pieces of code working the way you want and build everything else from there. We found that the strength of the framework is what gave us confidence. Once we built our application, we knew that it was going to work across the supported devices. Also, the Sencha forum is absolutely helpful for solving issues.

Conclusion

Mobile 3.0 is a hit with our clients. They love the true app-like experience and how it integrates so nicely with our native apps. Also, Mobile 3.0 works well with other native apps that incorporate web views (e.g. try loading a Mygazines issue link from the Twitter iPad app).

We’re definitely happy with our decision to build our mobile product on Sencha Touch, and we plan to develop and extend our mobile offering with our recently released API. That should open the door to new uses of our mobile platform.

Add your comment:

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.