Create An HTML/CSS Mobile Web App Using Sencha Touch

Advertisement

The world of mobile app development is quickly becoming a crowded and complicated space, especially for those outside of the development niche. “Which development platform should I use?” “Do I go native or Web-based?” “Which devices should I plan for?” “Can I build my mobile website by hand or should I use a pre-built package?” The questions are endless.

As a designer, my job is to help my clients answer these questions. I try to stay in the category of “knowing enough to be dangerous,” and I keep tabs on the latest mobile development trends, one being the growing popularity of mobile Web apps.

What Is A Mobile Web App?

A mobile Web app is an app that you access via a mobile browser (such as iPhone’s Safari). It is not a static mobile website. It is designed to work like a native app, but it is not accessible via the App Store or Android Marketplace. You pull it up right from the browser.

Why Create a Mobile Web App Instead of a Native App?

Deciding whether a native or Web-based app is best for your client comes down to the audience they are trying to reach. Mobile Web apps are a good fit if:

  • Your audience is searching for you primarily from a mobile Web browser;
  • Users are on a multitude of devices (iPhone, Android, BlackBerry, etc.);
  • The development team has more skill in HTML, CSS and JavaScript than Objective C, Java, etc.

How To Design A Mobile Web App

Those of you who have designed iOS native apps are used to fixed-width and -height images that are positioned and aligned in the Interface Builder (or using code). Designing mobile Web apps is different: you’re designing for the browser again, just as you would for a typical website.

What does this mean? It means you can take advantage of a lot of cool CSS design tricks. In many cases, you can design an entire interface using CSS instead of images.

Technology Analysis: jQTouch or Sencha Touch?

To help you determine which development platform best fits your project, I’ve done some research on two Web technologies that focus on mobile Web apps: jQTouch and Sencha Touch.

jQTouch is powered by jQuery, a highly popular JavaScript library, and is geared to Web designers and novice Web app developers. jQTouch progressively enhances HTML and CSS so that less capable phones are still able to browse content. The primary method of creating functionality in jQTouch is with HTML and CSS or with jQuery-style event callbacks.

Sencha Touch, on the other hand, is geared more to software developers and has a pure Javascript API for building powerful apps. It is powered by a custom core that is optimized for mobile, which inherently makes the core level in Sencha Touch lighter and better optimized than that in jQTouch. It offers a wider array of features and components and is better suited to mobile developers who are creating apps with advanced layouts, functionality and interfaces.

For myself, I wanted an interface that looked and felt like a native app as much as possible. I decided to go with the Sencha Touch development platform because of its ability to handle advanced layouts and interfaces.

Ultimately, you have to do your own research and answer these questions:

  1. What kind of functionality does the app need?
  2. What technology supports that functionality?
  3. How do the costs of these technologies compare?
  4. What can I afford?
  5. Do I know of high-quality developers of this technology?

Once you have this data, you can make an informed decision on the technology platform for your project.

Where Does This Leave Us Non-Coding Designers?

If you fall squarely in the category of designer, don’t worry. You can still design the interface in Photoshop, as I did in the example below. I leave the CSS beauty to the experts, letting them translate my images into code that looks exactly like my design.

Example Project: The Roookies App

Now, I’ll cover a practical example of how to create a mobile Web app using Sencha Touch. I teamed up with Sencha’s CTO, James Pearce, to design an app called Roookies. Roookies helps Dribbble newbies gain exposure on the network by featuring only rookie artwork.

I designed the Roookies app as I would a native application, using a 640 × 960 iOS design template found on Tapptics. This gives my developer a reference when they create the CSS code that will mimic my images. And for any images that cannot be duplicated via CSS, my developer will slice out and insert transparent PNGs.

screenshot

Coding the Roookies App

Now I’ll demonstrate how to use CSS, Sass and Compass to style and theme mobile Web applications built with HTML5 and the Sencha Touch JavaScript framework.

screenshot

An Introduction to Sass and Compass

Sass is an extension of CSS that adds new syntax to allow for things like variables, mixins, nesting, and math and color functions. This makes it much simpler to create CSS that is easy to maintain and that doesn’t repeat itself.

For example, in Sass we can write the following:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}

.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

When we compile it to CSS, the output will look like this:

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

This is extremely powerful, because it means we can potentially change color schemes, layouts and more with one set of simple parameters — and assuming that the Sass has been structured well, those changes will cascade throughout all of the resulting CSS. (You can do much more than this, and you should check out the Sass website for more information on how the language works.)

Compass is an extension to Sass, and it provides a whole set of CSS3 mixins and an extension system. It’s particularly useful for handling cross-browser CSS prefixes. Take this:

$boxheight: 10em;
.mybox {
@include border-radius($boxheight/4);
}

This will compile to the following CSS:

.mybox {
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
-o-border-radius: 2.5em;
-ms-border-radius: 2.5em;
-khtml-border-radius: 2.5em;
border-radius: 2.5em;
}

You can learn more about what Compass brings to the styling process on its website.

Using Sass And Compass With Sencha Touch

Sencha Touch is an HTML5, CSS3 and JavaScript framework that allows you to develop mobile Web apps that look and feel native on iPhone, Android and BlackBerry touch devices.

Because the framework uses Web technology to create apps that run in the browser, these apps can easily be themed using tried and trusted CSS. And because Sencha Touch uses Sass and Compass, we can use these techniques to also create beautiful and elegant themes for mobile applications that were built this way.

For this article, we’ve built a simple Sencha Touch app called Roookies. It uses a JSON API to create a gallery of shots by first-time users of Dribbble, a popular design showcase service. (While we won’t get into how the app was built, you can read a sister article about how it works.)

To follow along here, we recommend you grab a copy of the app’s source code, because it also includes the theming components you’ll need. It’s hosted on GitHub, so you can either fork that repository or simply download it as a ZIP file. An unthemed version of the app is also hosted online; you can try it out with a touch device or a WebKit-based desktop browser.

screenshot

Before you do any theming on this app, you’ll need to install Compass (which has Sass built in). The command line tool itself is Ruby-based, which means that Ruby is a dependency. If you’re a Mac user, Ruby is already installed on your operating system, and the easiest way to install Compass is as a Gem from the command line:

> sudo gem install compass --pre

(We use the --pre flag to ensure that the latest and greatest version of Compass is installed. Sencha Touch requires version 0.11 or later.)

If you are on Windows or a system that doesn’t have Ruby already installed, then you’ll need to install Ruby and Gem first, using something like RubyInstaller for Windows.

How Sencha Touch Uses Sass

Each component of the Sencha Touch user interface library has its own Sass file, which you can easily take and edit. But sometimes, the easiest changes can be made by altering certain important Sass variables (as we did in the examples above) to make changes globally across the application’s theme.

In the Roookies application, you’ll find a folder named theming. In it, create a new Sass file named mytheme.scss. The .scss extension is the convention for Sass files. In this file you can link to the parts of the Sencha Touch theming system that are used in the Roookies application:

@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-list;
@include sencha-layout;
@include sencha-loading-spinner;

The first line links to all of Sencha Touch’s sub-theming files, and the subsequent lines call mixins for the UI elements used in our application. Mixins are really just functions: they basically insert blocks of CSS into your document.

Most of these mixins use a set of global variables to alter the appearance of different parts of the user interface. For example, the $base-color variable modifies the overall color of the application. Set the following variable before the @includes so that they all use this new value, a tasteful green:

$base-color: #709e3f;

@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
…

When you save that file, you will be good to compile the CSS. In the same directory, run Compass on the command line, like so:

> compass compile mytheme.scss

If all goes well, Compass should output the mytheme.css file in the same directory. As with all websites and apps, you’ll need to reference this new CSS file in the application itself. You can do this either by adding a magic query string to the Roookies application URL (something like http://myserver.com/roookies?style=theming/mytheme.css) or, more traditionally, by hardcoding the reference into index.html:

<link rel="stylesheet" type="text/css"
href="theming/mytheme.css"/>

(If you do hardcode the theme like this, you should remove the script block in index.html, which is responsible for supporting the query-string theme-switching technique.)

If all goes well, the theme should now appear with the new color, both in the toolbar and in a lighter shade for selections of the list itself:

screenshot

(The fact that the color of the list selection is derived from, but not exactly the same as, the base is another clever Sass trick. Color functions such as darken and saturate allow you to formulaically link color values.)

Sencha Touch has a full list of the variables that can be altered to change the look and theme of an app.

Embedding Regular CSS

If all this talk of Sass and Compass is confusing, the good news is that even an .scss file can contain regular old CSS, too. So, in addition to your variables, mixins and functions, you can just start doing static styling to finesse the theme.

Let’s say we want to frame the images in the list. In the Roookies app, all of the images have the HTML class attribute shot-image, so we can easily style them as normal:

img.shot-image {
display:block;
padding: 8px;
margin: 0px auto;
border: 1px solid #666;
-webkit-box-shadow: 0 0 4px rgba(#333, .5);
background:#eee;
clear:both;
width:304px;
}

Also, the container in which each image is placed is a div with the class shot, and we can easily adjust its padding so that our framed image still fits well within the list’s width:

.shot {
padding: 8px 0!important;
}

One useful way to find out the classes of elements in a mobile Web application is to use the inspector tool in a WebKit-based browser such as Chrome. Right-click on an element to inspect it and see how it looks in the browser’s DOM:

screenshot

Add these to the bottom of the .scss file and compile again. The app’s images should now have more subtle styling, making the gallery look slightly smarter:

screenshot

Embedding Images In CSS

One consideration when building mobile Web apps is the number of requests that the browser needs to make to the server to display a page. And it’s often the case that CSS points to external files, such as images, in the theme. One thing that is very easy to do with Compass, though, is to embed images in the CSS itself, using base64 encoding inside a “Data URL.” These are URLs that start with data and that allow you to specify binary resources inline. This means that the entire theme is encapsulated in one file, and the device has to make only one request to the server to receive all of the parts.

The inline image function is an easy way to do this. In our theming environment, it pulls in images from the images sub-directory. So, the wood.jpg image in that directory can be embedded in the CSS as the background of the gallery, like so:

.shot {
background:inline-image("wood.jpg", "image/jpg");
}

In the resulting CSS, it appears like this:

.shot{
background:url('data:"image/jpg";base64,/9j/4AAQSkZJR…');
}

This gives the app a tasteful wooden background:

screenshot

Font Support

Many current mobile browsers support Web fonts, and there’s nothing like a custom typeface to distinguish your mobile application. One of the easiest ways to put a Web font on a website or application is with Google’s WebFont service, which requires you to declare an extra CSS rule by linking to your chosen font in the index.html file:

<link href='http://fonts.googleapis.com/css?family=Pacifico'
rel='stylesheet' type='text/css'>

You can also use the CSS @import rule to pull this into the .scss file itself:

@import "http://fonts.googleapis.com/css?family=Pacifico";

Both of these techniques create an @font-face rule that allows you to use font-family:'Pacifico' anywhere in your CSS.

Below, we’ve applied a style to the user interface — in this case, the text in the toolbar, which uses the class x-toolbar-title:

.x-toolbar-title {
font-family: 'Pacifico';
}

The result is as follows. A little quirkiness in the title bar and a distinctive look and feel to our application.

screenshot

Conclusion

Of course, we’ve just scratched the surface here. There are many more powerful (and dramatic) ways to style and theme a mobile Web application. We’ve continued this process to create a fully featured theme for the Roookies app, and you can see the results for yourself, including the styled image meta data and the styled details page when you click on an icon under the images. You can also see the complete .scss file that was used to create this theme; it’s distributed as part of the GitHub project.

Have you created a mobile Web app with an extraordinary design aesthetic? Let us know in the comments section below!

Mobile Web App Resources

(kw)

↑ Back to top

Rachel Andrew is a web developer, writer and speaker and one of the people behind the content management system, Perch. She is the author of a number of books including chapters in the Smashing Book Three and the upcoming Book Four, where she writes about Providing Technical Support. She writes about business and technology on her own site at rachelandrew.co.uk.

  1. 1

    Perfect timing!
    I was looking for a easiest way to create a simple mobile app.
    Thanks!

    0
  2. 2

    Just a word of warning, DON’T use sencha touch inside phonegap. Orientation changes don’t work.

    I also found the overall performance in phonegap to be an issue.

    It is great for a webapp with a URL however but does take a while to get used too.

    I found the commercial support to be pretty poor. I purchased it and felt like I wasted $1000.00.

    1
    • 3

      Any performance issue?
      Does someone have use Sencha in a production environment?
      Does the performance issues comes from Sencha or phonegap (when embedding sencha app into phonegap)

      0
      • 4

        Hello I used Sencha touch framework in combination with phonegap in application where i showed currently running TV shows on various stations. I posted in on Android market: (TV Program (by INFOTECH)), Iphone (URI TV Program) (currenty waiting for approval), and BlackBerry (TV Program). I firstly developed it on my HTC Desire HD, and the performance was good also with phonegap. But on slower phones the performance is poor. On Blackerry i must stop distributing the app, because it was unusable (BB 9800). On my iPhone 3G the performance is also not so good. I guess I will not use sencha touch form my next web based phone application. But i must say thanks to Sencha guys for their EXT JS framework, because it is the best client framework ever.

        0
    • 5

      Michael Mullany

      July 19, 2011 9:19 am

      Matt, apologies for your poor experience with Touch support. We got swamped with support tickets in the spring and had to catch up with some support hiring. I’d also like to check on your support contract – since support is only $300 a head. Please mail me at michael [at] sencha [dot] com and I’ll look into it for you.

      0
    • 6

      The orientation issue has been improved in PhoneGap itself, no? https://github.com/phonegap/phonegap-iphone/commit/7c93856fdc4e8faef30de68e616761b89e3b4395 – but of course, it will depend what version of PhoneGap you were using.

      0
    • 7

      You are correct. For me it is much better to start from scratch or use jQuery mobile.

      0
  3. 8

    I use jQuery Mobile.

    0
  4. 9

    Also used jQueryMobile so far… for everyone with a decent jQuery background, that’s probably the first choice because you can use almost anything the way it “used to be”.

    Gonna try Sencha now looks promising. Great article, thanks!

    0
  5. 10

    Some nice article about authentication with current sencha version would be Very helpful.

    0
  6. 11

    I’ve played about with all 3 frameworks – JQTouch, JQuery Mobile and Sencha Touch. First two are definitely easy to pick up. Sencha Touch is a completely different ball game that requires some time to understand the framework. However, in terms of getting that same experience of a native app, Sencha Touch is the one to go for. The basics are quite easy to pick up but when you try to do more complicated stuff, then you need to have a solid foundation to coding.

    Matt – Agreed about Sencha’s support. I posted so many queries on their forum and the support you get can be very hit and miss. As for PhoneGap, have you tried PhoneGap Build? Other alternative of converting web app to native app is to use RhoMobile but you’ll need to have Ruby installed.

    Personally, I’m a fan of Sencha Touch, despite having a few fall outs with it. And with PhoneGap Build, it makes building native app a lot easier. You just have to remember and accept that Sencha Touch is built for touch screen devices, so forget about Blackberry.

    0
  7. 12

    javascriptMVC + jQuery Mobile + phonegap = a really flexible way to handle the mobile web & mobile app development environment. There are some limitations and a bit of a resource cost involved, but the upshot is that you get a well framed app that supports across platforms.

    0
  8. 13

    Your Taptics link is wrong. BTW, great post!

    0
  9. 16

    Seems like there’s a lot of good feedback in the comments. Perhaps we could have a poll on the libraries that people here tend to use?

    0
  10. 17

    I have been using Sencha Touch for 3 different production web apps and it is awesome. Sencha is a completely different beast than jQuery, so it was a bit of learning curve. Once you learn it though, it’s easy enough.

    The hard part is embedding other JavaScript libraries. Adding HighCharts, Bing Mapping, and some others took time; however, it was all worth it in the end.

    0
  11. 20

    My company has been using sencha touch for a few months now and we’ve been loving it. It does definitely take a little bit of getting used to (I was originally a html/css coder, not a js developer), but once you get the basic principles down it is very easy to learn. I don’t personally do the compiles in phonegap but the person who does says that once phonegap is properly configured on your computer it really isn’t that difficult to turn your web based app into an app that can be downloaded from apple’s store or android’s marketplace. A word of advice regarding sencha touch however: make sure you have an mvc application structure setup, otherwise your application will become extremely confusing. Like the author pointed out, jqtouch is probably better for a simple web based app, but sencha touch is really designed to create mobile software so your application code can get pretty hectic. Also, make sure to check out sencha’s learning center, it has tons of tips, tricks, and tutorials to help you learn (even on setting up the mvc application structure!). And of course the best part about sencha touch is that you get to use compass and sass! Since coding together the interface to my first sencha touch app I’ve been hooked, and I’m now building out regular web sites in sass.

    0
  12. 21

    Just to point out I’m not the CTO; just a humble developer relations guy ;-)

    0
  13. 22

    With Google Font you can add a “text” parameter to save more bandwidth and make your site faster, so in this example `http://fonts.googleapis.com/css?family=Pacifico&text=”Rokies”` would be a nicer choice.

    1
  14. 23

    Last time I checked, Sencha Touch had a poison clause in its license agreement that made me very leery about using it. The chances of the license becoming an issue are small, but I suggest you read it very carefully and understanding what it requires.

    -1
    • 24

      Michael Mullany

      July 19, 2011 1:22 pm

      @ryan – can you let me know what you didn’t like about the license? The only we restrict is your building your own commercial SDK or app builder on top of Sencha Touch.

      0
  15. 25

    Thanks for this, I agree with most of your points. Good to see someone with the same opinion.

    0
  16. 26

    I don’t know about you guys, but as someone who only really knows css/html and bits and bobs of Javascript, it really seems like an awful lot of effort, considering this phone gap service will apparently allow me to just code as normal, without having to mess about with all of this…

    I spent ages and ages trying to figure out how to change the name of this app and I still can’t do it….I’m not stupid but if all you’ve ever known is css/html I think you’ll struggle…I have

    I suppose it depends on the complexity of what you wanna do, but if it’s a web based app anyway, it can’t be that complex?

    0
    • 27

      Michael,

      I use to be like you too. My best advice for you is to brush up a bit more on JavaScript and JQuery. Sencha has a lot of video tutorials on how to use Sencha Touch. I thoroughly recommend you to go through them. That’s how I got to where I am. :)

      As for PhoneGap, use PhoneGap Build instead. This breaks away from doing all the installation setup. It’s a simple process of upload your zip folder into the cloud and it’ll compile it to 5 different OS’s – iOS, Android, webOS, Blackberry, Symbian.

      0
  17. 28

    We are using Sencha from last two month.
    Yes the performance in the native browser is much better then Sencha App warped with PhoneGap or RhoMobile. Though building with PhoneGap is much simpler and quick.

    Sencha works well on iPhone but it has lots of issues on Android.

    0
    • 29

      alef summed it up – Sencha Touch only works best on iPhone (3GS or above). It’s just passable on Android (the high spec models) but not suitable on Blackberry.

      0
  18. 30

    i like it

    0
  19. 31

    prove me wrong, but i always thought that jqtouch and sencha touch are the same?

    0
    • 32

      Simon,

      There’s a slight hint of truth on what you said there.

      From what I read when researching and playing around with these frameworks, the creator of jqtouch did go to sencha to create sencha touch but incorporated the platform with EXT JS. So in essence, jqtouch was the pioneer of all this!

      0
  20. 33

    I researched a lot but finally found something useful.
    Got a clearer idea,

    If I want the app to be fully web based and no native, I will have to resort to sencha otherwise, if only UI is concerned, I can go for JQueryMobile

    http://www.the4thdimension.net/2011/07/sencha-touch-vs-jquerymobile.html

    0
  21. 34

    And i used snappii.com to make apps. i’m not a developer, but managed to make a cool app with snappii in some minutes.

    0
  22. 35

    When trying to compile I keep getting: You must compile individual stylesheets from the project directory.

    What does that mean and how do I resolve this I’m not getting any mytheme.css out putted?

    Thanks

    0
  23. 36

    I’ve searched for a few mobile templates and didn’t find any good ones. until now! Great explanation. I didn’t know there were already two major platforms for mobile website. I’m going with Sencha since I’m a software developer myself.

    BTW, I’m adding this to my favorite!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top