BlogmyQuery – BMQ

Update: 01/10/2012: The original version of this article by Jen Gordon was published in August 2009. It was thoroughly revised and updated by the author in September 2012. — Editorial Team

Since the iTunes App Store launched in 2008, over 500,000 apps have been approved by Apple, and thousands more app ideas are scrawled on napkins across the world every day. But question remains, how can a person with limited technical skills create an iPhone app?

The good news is anyone can make an iPhone app, it’s just a matter of knowing the series of actions you need to take to make it happen. Be sure to bookmark this article because it will serve as a guide for learning the process for creating your first iPhone app, going step by step from idea to the App Store.

What Is Your Goal?

The first thing to look at when embarking on any product development or entrepreneurial venture is your goals for the project. Having a vision of what you want to achieve at the outset is an important barometer that will confirm whether the development process is heading in the right direction.

Let’s look at an example. Jim is an “idea person� who wants to create an app that brings in passive income but that doesn’t require him to quit his day job. Jim understands that to achieve this goal, he will need to employ others who can do the work of updating the app, fielding customer questions, responding to feature requests, etc. If Jim hadn’t defined this goal in advance, it’s likely that he:

• would not have planned in advance to hire help,
• would be unhappy with the time commitment required for him to take on the work personally.

Whether you’re an individual like Jim, a marketing director, or an IT professional creating apps for internal use, having a project goal will help make your app development process a success.

Here are some examples of project goals:

• Create an app that doesn’t require hands-on day-to-day management.
• Create an app that becomes a full-time business for me and a team.
• Create an app that promotes my existing product or service.
• Create an app that is purely for fun and not for profit.

Action item: Write down the goal you hope to achieve by creating this app.

What Are Your Expectations?

When I consult with people who have ideas for iPhone and iPad apps, the question they most frequently ask is, “How much can I expect to make?� Unfortunately, this is difficult to answer. The following factors are unique for each application:

• Cost to produce,
• Popularity,
• People responsible for managing its success.

All of these factors contribute to the financial success of your app. Base your expectations on this knowledge and on the documented proof that a wide variety of people are making profitable apps every day:

• Non-technical “idea peopleâ€� and entrepreneurs such as the Gabi founders;
• Independent developers such as Lima Sky and Driftlab;
• Educators such as Montessorium;
• Writers such as Sarah Young;
• Mid-size entertainment companies such as Electronic Arts and Zynga;
• Large sports and entertainment companies such as MLB and Disney.

Realistic revenue projections will be different for each app, but here’s an example:

ABC application will show a profit of 10% in the first 60 days after launch, based on the success of XYZ application, which has a similar user base and functionality.

Individuals and companies alike are creating apps to solve problems and to entertain, and yet the process of making apps is still cloaked in mystery. Next, we’ll look at what goes on behind the scenes of an app’s creation and give you a step-by-step process for making your own idea a reality.

Where Do I Begin?

Good advice on where to start is different today than it was two years ago, when you could launch an app without much promotion and still have a fair shot at getting seen. Today, App Store competition is fierce, and dozens of new high-quality apps are being launched every day. This competitive environment means that ideas must be evaluated and refined to achieve maximum success in the App Store.

Have your idea evaluated.
“Evaluating� anything in which you are not an expert is difficult. For example, if someone had an idea for an innovative design for a child’s car seat, would that person be qualified to evaluate their own idea? Probably not. They would need to seek out the advice of someone who knows the child car seat niche. That expert would shed light on how to make the idea even better based on their specialized knowledge of the industry.

The app world is no different, and a variety of people are qualified to evaluate ideas:

• iPhone app marketing professionals
  These people have specialized knowledge of how their clients’ apps have performed in the App Store, as well as of promotional techniques that do and don’t work.
• iPhone app developers
  Many successful indie developers are committed to serving their community. If you humbly approach these folks for advice, in my experience most are more than happy to help review your idea.
• Personal connection
  Do you know someone personally who has created and launched an app? Take them out for lunch and have them give feedback on your idea.

What will an evaluation do for me?
When you get an expert opinion on your idea, you find out the following:

• Whether the product will have competition that will be tough to beat;
• Whether the idea has any technical limitations;
• How to take a phased approach to the development process;
• Whether you can refine the idea in other ways to increase sales opportunities;
• Whether the idea could be profitable based on your ballpark estimate of production costs;
• Whether the idea is a good fit for the mobile context;
• Whether your target audience could provide useful feedback on the idea.

This is the type of information you want to gather from an expert reviewer. Once you’ve met with someone who can give you this kind of feedback, you can move on to the next steps of the project with confidence in the viability of your idea and that your goals can be met.

What if I can’t find someone to evaluate my idea?
If you’re having difficulty finding an expert to provide an opinion on your idea, ask yourself whether these success factors apply to your app:

• Does your app solve a unique problem?
  People want to be able to do a lot of things while on the go. Successful apps often solve a problem that is unique to the mobile context.
• Does the app serve a niche?
  Find a niche with ardent fans (pet lovers, for example), and create an app that caters to it.
• Does it make people laugh?
  This is a no-brainer. What happens with funny apps? They get shared — a lot.
• Are you building a better wheel?
  Are there existing successful apps that lack important features or design elements? This is tricky because those developers might already be working on such enhancements. But if you get to market first, you have a good shot.
• Will the app be highly interactive?
  Let’s face it: most of us have the attention span of a flea. Successful games and utilities engage the user by requiring a lot of fast-paced interaction.

Action item: Have your idea evaluated.

Step 1: Develop A Monetization And Marketing Plan

“Wait a second, aren’t we supposed to be drawing prototypes and stuff?� Actually, not yet. The next step before moving into any kind of design or development is to figure out how your idea will generate a profit!

“Why is this so important? Can’t I do it later?�

You could, but AppPromo surveyed 102 developers and announced in its report that:

80% are NOT generating enough revenue with their app to support a standalone business.

It’s fair to assume that a great portion of that 80% also didn’t develop a monetization or marketing plan prior to developing their app. Read tap tap tap’s blog to see how companies like it do their homework. The results speak for themselves:

Large view.

Here’s what you have to look forward to if you do not consider monetization strategies before developing your app:

“OMG I’ve got this great idea!�

Sketch, sketch, sketch.

Design.

Develop.

“I think I’ll charge 99¢. See how that goes.�

Launch. “Woo hoo!�

“Uh oh. Why aren’t people paying 99¢?!?�

App plummets into App Store black hole.

“Maybe I should make it free?!?�

“Crap! Where’s my developer? I need to fix the app, change the way it makes money, because 99¢ isn’t working!�

“OK, the app is fixed, with a new way to make money. How am I going to get my ranking back up?�

Not pretty, but a very real scenario. If you want a step-by-step guide to avoiding the chaos of a pricing disaster, consult my “App Monetization Guide.�

Action item: Develop a monetization plan.

Step 2: Sign Up For A Developer Account

Even if you will be hiring out the development work, you will need to establish your business within the App Store. To do this, visit the iOS Development Center, and sign up for an account. It’s $99 for a year and requires that you provide the tax and bank account information of your business or yourself. Have this information handy before signing up.

Large view.

The only reason not to sign up for a developer account would be if you’re OK with having your app published under another person or company’s account and brand. If that is the case, then know that Apple would pay all revenue to the account holder’s bank account. That account holder would then be responsible for paying you.

Action item: Open an iOS developer account.

Step 3: Sketch Your Application

If you have an idea already, then you likely have some visuals in mind for how the app would look and work and the information it would present. You don’t have to be an artist to sketch a rough interface, so start putting your ideas down on paper. Before you begin, ask yourself:

• What primary action will users take within the app?
• What information will each screen need to present?
• What is the flow? How will users get from start to finish?
• How big should the elements on screen be relative to each other?

Sketching your layout can be simplified with the right tools. (Image: Cultured Code)

You may find during this process that some fresh ideas come to mind that simplify the flow or that add a creative twist to the interaction design. Try to keep your original concept in mind without blocking the flow of new ideas!

Create at least one thumbnail sketch for each screen in your application. Experiment with various navigational schemes, the copy on buttons and the flow between screens. If you want to transfer your sketches into digital format, iPlotz is a good tool to check out.

The purpose of sketching your application’s screens is to build a foundation for the next phase of the project. If you’re an entrepreneur and are outsourcing the bulk of the project’s work, then you would show these sketches to the design and development team in order to get a price estimate.

Action item: Sketch out all screens of your app.

Step 4: Identify The Work To Be Outsourced

What skills do you bring to the table? Are you a designer whose brain objects to Objective C? A developer who couldn’t design their way out of a paper bag? Or simply an individual with an idea they’d like to bring to market?

When you create an iPhone application, you’re starting a small business. It is difficult for one person to play the role of researcher, project manager, accountant, information architect, designer, developer, marketer and advertiser. Can you do it all? Of course you can, but you would be wasting a lot of time, energy and sanity in the process. Based on the following list of required skills, define the areas where you would be comfortable taking the lead and where you would need to hire help:

• Design,
• Programming,
• Promotion and marketing.

In most cases, the least expensive way to produce your application would be by hiring freelance contractors. While your costs would be lower, your role as project manager would become more prominent. You would spend more time managing the moving parts of the project. Also, when working with freelancers, remember to have them sign a non-disclosure agreement or at least an employment contract, with details on the scope of their work, your expectations and payment terms.

Another option is to hire an agency or development firm to handle a large chunk of the production. In this scenario, the agency would be charged with managing the project, and your role as client would be to review and approve its work. Working with an agency is a good option if you have a larger budget and less time to dedicate to the production process.

Action item: Identify your role and the roles of those you hire.

Step 5: Hiring Your Team

In step 4, you defined which roles need to be outsourced in order to produce the app. Now it’s time to learn exactly what each of those roles will do and where to find people for your team.

Design

If you are a designer, download my “iPhone App Template,� a big collection of iPhone UI elements. These Photoshop files will save you a lot of time getting started on the design. To learn more about mobile design in general, these websites provide a lot of great resources:

• Marc Edwards’ articles
• Ken Yarmosh’s blog
• Luke Wroblewski’s blog
• DesignBoost (disclaimer: this is my mobile design training website)
• UI Stencils

If you’re not a designer, then you should know that design breaks down into three roles: information architecture, interaction design and visual design. Finding one person with all of these skills is possible, but know that the design process calls for three distinct deliverables. If you’ve got your sketches, then you have everything you need for a designer to get started.

• Information architecture
  In case you’re familiar with the Web design process, “information architecture� as it relates to mobile is very similar. If you’re not familiar with the term, it simply means “organizing the content in your app.�
• Interaction design
  Have you ever used an app that you didn’t need any instruction to operate? One in which the flow was so intuitive that you barely noticed the interface? It wasn’t by accident. This is the job of the interaction designer, someone who sorts out how the user will move from screen to screen to accomplish their task. Be sure to hire a designer who has skill in this area.
• Visual design
  Visual design is the final step in the design process. It is the “skin� that overlays the controls for the app. The visual design can be as simple or as complex as you want; the key is to focus on the usability and primary task of the app.

Try to find a designer who has experience designing for mobile devices. They will have some good feedback and suggestions to improve your sketches. A few places to look for designers:

• Dribbble
• crowdSPRING
• Elance

When posting your job offer, be very specific about your requirements, and be ready to review a lot of portfolios.

Development

If you are an Objective C or Cocoa developer, then crack open Xcode and get started! Join a few forums if you haven’t already:

• Developer Forums, Apple
• iPhoneSDK, Google Group
• StackOverflow

If you are not a developer, then get your developer on board as you’re lining up the designer. Speaking with a developer sooner than later will help you scope a project that is technically feasible and within your budget.

Finding a developer
Using the sketches you’ve drawn up, compose a specification document that describes in writing what your app does and for whom. This document, along with your sketches, is what you will share with the developer to get a time and cost estimate.

Having a document like this also ensures that you will be able to hire a developer who has the skills necessary to produce the app. If you provide specifications for a game app to a developer who doesn’t have game development expertise, they will be able to quickly tell that the project isn’t a good fit.

Here are a few places to look for developers:

• oDesk
• They Make Apps
• Elance
• Any of the forums listed above for designers

Submitting your app to the App Store
Your developer can also help you submit your application to the App Store. Clearly communicate the launch date of your app to the developer. Nothing is more detrimental to an app’s success than an unexpected or poorly planned launch. To learn more, read Apple’s “App Store Review Guidelines.â€� Also, you might want to check Average App Store Review Times and unpublished rules and clarifications from Apple’s App Review team that can cause your iPhone app to be rejected.

Marketing and Promotion

If a tree falls in the forest and nobody is around to hear it, does it make a sound? Apps can sit in the store unnoticed very easily. Don’t let this happen to you. Be ready with a plan to market your app. In fact, be ready with many plans to market your app. Be ready to experiment because some ideas will work, and others won’t.

Strategies for marketing and promotion:

• Incorporate social media.
  Think about how your app could incorporate social media, and build that functionality into it. At a minimum, set up fan pages for your app on Facebook and Twitter, and use them as platforms to communicate with users and get feedback. The developers of Angry Birds and Instagram do a good job of engaging users on Facebook.
• Pre-launch promotion
  Start building buzz about your app before it launches. Email journalists and bloggers who write about things related to your app. The more relevant your app is to their niche, the better your chances of getting written about. Some outlets to consider:
  • TUAW (The Unofficial Apple Weblog)
  • Macworld
  • AppCraver
  • TouchArcade
• Plan for multiple releases.
  Don’t pack your first release with every feature you want to offer. Create a dream list, and design the app so that it can accommodate all of these features in the future. Then periodically release new versions of the app to boost sales.
• Other sources of app marketing ideas:
  • “Indie iPhone App Marketing,â€� Chris Hulbert, Splinter Software
  • Mobile Marketer
  • Mobile Marketing Watch
  • “App Store Marketing,â€� LinkedIn group

Action item: Find freelance or agency contractors to fill the roles for design, development and marketing.

Conclusion

Transforming something as intangible as an idea into a tangible, playable, enjoyable app is an exciting venture. The most important takeaway for anyone looking to create their first iPhone app is to focus on hiring the right team to help bring your idea to fruition and to help maintain the app over time.

If you are an app developer with advice to share with first-time creators, please share in the comments below. Good luck and have fun!

(al)

© Jen Gordon for Smashing Magazine, 2012.

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.

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.

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.

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:

(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:

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:

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:

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.

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

• “Will Mobile Web Apps Eventually Replace Native Apps?â€�
• “Mobile Web vs. Native App: Give It a Restâ€�
• “Mobile Web vs. Native Appâ€�
• “How Mobile Web Will Prevail Over Native Appâ€�
• “Web App Masters: Native or Web-Based Mobile Apps?â€�

(kw)

© Jen Gordon for Smashing Magazine, 2011.