June 13, 2011
Winning entries demonstrate the power and flexibility of using theming capabilities of Compass and Sass in Sencha Touch to efficiently add branding, corporate identity and other styles to a mobile web app.
REDWOOD CITY, Calif. — June 13, 2011: Sencha, the leading provider of HTML5 frameworks and tools for desktop and mobile application developers, announced the winners of its recent Sencha Touch™ Theme Contest. The contest challenged designers to build and submit a theme (in the form of a CSS file) for a demo app (called “Roookies”) created by Sencha. A panel of five judges selected three winners, which can be viewed and experienced on the Sencha blog.
This theme got a huge thumbs-up from the judges for its clever usage of contemporary CSS3 in the toolbar and in the icon bar to create a gently changing color scheme. The cutout effect also impressed, with its use of SVG, and the overall look and feel of the design exuded a discreet and well-stated elegance. Paul is a senior visual designer at Frog Design in Austin, Texas and wins a MacBook Air and an iPad 2.
Until he started work on his entry, Paul had minimal experience with Sencha Touch. He explained that, while the initial learning curve was a little steep in terms of figuring out what I could actually change, “…once I got a handle on the Sencha mixins and includes, editing the theme became pretty simple. The fact that Sencha Touch uses Compass is a definite plus, as it makes iterating on design ideas much faster and simpler. Also the custom Sencha mixins were very helpful.”
Paul also shared his views on the power of web apps for mobile applications: “Having the flexibility to go across platforms is really great. This is especially true for apps that need to reach a lot of people when there isn’t enough development time or budget to make separate native apps for different devices.”
When reviewing this entry, the judges noted that: “Sometimes less is more. This theme, with its simple, white appearance, makes sure that the content – itself a set of diverse visual images – gets the focus of the viewer’s eye.” Judges also liked the bold images used for the icons, and the faint dotted lines that guide the eye to the layout of the application as a whole. Amanda is also a senior visual designer at Frog Design in Austin, Texas and wins a RIM BlackBerry PlayBook and an iPad 2.
Commenting on her entry and her experience with Sencha Touch, Amanda said: “Being able to create one design and have compatibility across multiple devices inspired me to check out Sencha Touch and really see what it was capable of. The proof is in the pudding, there were so many diverse submissions for this contest! Having seen other work created in Sencha Touch, there seemed to be so many different opportunities.
“I got started by just opening up Photoshop and getting to work, creating designs I liked and that complemented the “Roookies” app. I took two, separate approaches, but in the end the pure, clean, “Basic” approach that I thought resonated with the content type must have done the same for the judges. It also demonstrates the flexibility of Sencha by showing that you can implement a unique design whether or not you use the templates.”
Asked about the suitability of web apps and native apps for mobile, Amanda added: “Both have their time and place. When fast implementation or flexibility is needed, creating a web app that can reach a multitude of devices with a fraction of the production time makes sense. This is where Sencha shines. With no need for updates and more tools providing richer experiences for web apps, I think we will see them continue to get better. On the other hand, native apps can really get at the nuances of a device and may offer integrated designs and interactions.”
Third Place: Stitches by Matt Baker
The judges saw many themes that featured a textile, metal or stone look – each quite appropriate for touch-oriented mobile applications. They decided that “Stitches” was a strong example of the genre, with a subtle leather texture, stitching motif, and matching toolbar font. Matt is a developer and partner at 5 to 9 Studio and wins an iPad 2.
“I wanted to create a design that combined natural textures with a theme that mirrored the sports example provided by the Sencha site. That led me to the stitched leather look, which I spent the better part of a day designing,” Matt said. “I’ve been using Sencha Touch for mobile sites for a couple months now, and I’m amazed at the flexibility of the framework in designing both phone and tablet web apps. Although web apps have been treated as second-class citizens on mobile devices, they provide several benefits (such as instant updates and freedom from mobile application store limitations). We’ve been able to take a native legislative directory iPhone app and convert it to a web app using Sencha Touch over a weekend. It feels, looks and acts like the native app, down to the pixel.”
About Sencha Touch