Sencha Inc. | HTML5 Apps

Paul DeVay’s “Onyx” Wins Sencha Touch Theme Contest

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.

First Place: Onyx by Paul DeVay

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.”

Second Place: Basic by Amanda Martin

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.”

“Mobile businesses are beginning to realize the benefits of developing beautiful mobile applications with web technologies such as HTML5, CSS3 and JavaScript, and yet still be able to deliver native-like experiences to their users,” said James Pearce, senior director of developer relations at Sencha. “What impressed us during this contest was just how beautiful these could actually be! Sometimes it’s easy to forget that these applications are simply running in a web browser – and of course that means that traditional web designers can re-use their existing skills and tools in this new medium. The results speak for themselves and certainly demonstrate the enormous potential that design expertise can bring to the mobile web as a whole.”

About Sencha Touch
Sencha Touch™ is the industry’s first HTML5-based mobile application development framework. Available as a free download, Sencha Touch equips developers to develop mobile web apps that look and feel native on iPad, iPhone, Android, and BlackBerry touch devices. Sencha Touch gives mobile application developers easy access to the family of powerful HTML5 technologies, including geolocation, localStorage and CSS3, supported by today’s most popular mobile devices. Built on the proven foundation of Ext JS, JavaScript technology that is already in use by more than 1 million developers worldwide, Sencha Touch enables developers to create web apps that deliver user experiences comparable to native applications. Read the Sencha blog to learn more about theming, Sass and Compass with Sencha Touch.

About Sencha

Sencha empowers developers to rapidly design, develop and deploy high performance, cross-browser applications that precisely meet their requirements. Our HTML5-based frameworks are tailored for building ideal desktop and mobile experiences on an unprecedented number of devices, platforms and browsers. Sencha also offers the industry’s first secure and managed mobile environment for business applications — Sencha Space — that runs on any mobile device. More than two million developers around the world at more than 150,000 companies use Sencha products every day to build the hundreds of applications that run their business. To learn more, visit www.sencha.com, read the Sencha blog, and follow us @sencha.