Hands-On Sencha Touch 2

Chapter 13. Themes and Styles

I once had a Sencha Touch 1 app in the Apple App Store and somebody gave me a very bad review. “This is a weird-looking iOS app.” What happened? Well, I just modified the default Sencha Touch stylesheet and gave all of the toolbars the same colors as native iOS components. The result was that the components almost looked like native, but they were just a little off. The users didn’t know that it was a mobile web application that was ported to native, so they expected the same experience as a native app, but it was just not the same. I learned from this that mobile web applications should either look and behave exactly the same as native apps, or they shouldn’t look like native at all. When the design is totally customized, people will get used to its design experience.

Sencha Touch Stylesheets

Times have changed. In Sencha Touch version 2.3, the framework ships with stylesheets that mimic native designs and experiences of all modern major devices (see Table 13-1). In addition to supporting iOS and Android, Sencha even works closely with the mobile device and browser makers like BlackBerry and Microsoft. Ahead of phone releases, Sencha gets access to test devices and style guides to make sure the Sencha Touch stylesheets look the same as native apps. When you create a production build of your app and you want to host it on the Web, it’s even possible to make use of the Sencha platform switcher. This switcher can make sure that the correct stylesheet will ...